O mundo através da lente do software

SED
SED

Status

2019

-

CONTÍNUO

Scope

FRONTEND

BACKEND

MOBILE


Tecnologias

vue swift node

Visão Geral

Software Engineering Daily é um podcast diário sobre tópicos de software, classificado como o podcast de engenharia de software #1 no iTunes.

Em cada episódio, Jeff Meyerson, o apresentador do SED, entrevista especialistas em engenharia de software de todo o mundo. A discussão se concentra em uma tecnologia, empresa ou ideia específica. Para fornecer uma experiência melhor e personalizada aos ouvintes, Software Engineering Daily construiu uma plataforma web dedicada e aplicativos móveis com a marca Software Daily. Os repositórios estão disponíveis no GitHub, onde contribuidores de código aberto mantêm a base de código.

alta-header

A parte do design

Web app

Jeff nos enviou um wireframe junto com uma visão resumida da nova plataforma. O Quora serviu de referência graças à sua interface limpa, minimalista e envolvente. O público-alvo é uma comunidade de engenheiros de software e pessoas da indústria de TI que frequentemente prefira simplicidade e usabilidade em vez de sinos e assobios.

O objetivo é melhorar as seguintes áreas de fluxo de usuários:

  • Permita interações do usuário a partir do feed principal, como votos positivos e comentários.
  • Ative a pesquisa contínua na barra de navegação.
  • Fornece acesso fácil aos tópicos mais populares na barra lateral esquerda.

Aplicativo iOS

Tivemos a liberdade de propor um layout totalmente novo para o aplicativo iOS. Não apenas nos esforçamos para obter consistência com o aplicativo da web, mas nossa equipe também queria que o aplicativo não fosse pior do que os aplicativos de podcast mais populares, como Overcast, Apple Podcast, ou disjuntor. No entanto, mudar os hábitos do usuário é sempre um desafio. Para incentivar a transição para um novo aplicativo, sua interface deve ser familiar e elegante.

Depois de escolher a paleta de cores e as fontes, nos concentramos em duas telas principais - visualização do feed e do episódio.

sed4

Feed

Exploramos alguns conceitos diferentes de apresentação de conteúdo no feed principal.

principais pressupostos:

  • Os usuários devem ser capazes de interagir com o episódio sem navegar para a exibição de detalhes do episódio. As três interações cruciais são como (votar positivamente), comentar, salvar para mais tarde (marcador).
  • sed4
  • O conteúdo da imagem é menos relevante do que o título e serve principalmente para fins visuais (o polegar permite uma distinção mais natural dos episódios subsequentes).
  • Um feed de coluna é melhor do que um feed de duas colunas porque a ordem dos episódios é crucial para a navegação. Para coleções não ordenadas, como lista de programas em vários aplicativos de podcast, blocos retangulares em layout de duas colunas funcionam melhor - o que não é o caso aqui.
  • Uma célula no feed não deve ser muito alta - o usuário deve ser capaz de interagir com pelo menos três células em uma tela de 5,8 polegadas.
  • Os usuários devem ser capazes de ver uma barra de progresso para episódios que foram iniciados, mas não terminados.
sed4

Visualização do episódio

Os principais pontos de preocupação na visualização do episódio foram o posicionamento dos botões, o alinhamento do conteúdo e a hierarquia de informações. A tela contém um conteúdo de texto relativamente longo e muitas interações diversas.

Principais pressupostos:

  • A miniatura da imagem não é necessária aqui; decidimos colocar o polegar da imagem do convidado do episódio sutil próximo à data, por uma questão de coerência com a versão da web.
  • Os usuários devem ver os tópicos do episódio e podem tocar neles para ver programas relacionados.
  • A seleção de cores deve permitir uma hierarquia de informações clara.
  • Links relacionados e botões de download devem ser visualmente separados dos recursos salvar, votar positivamente e comentar.
sed

Gestão

Decidimos experimentar o Notion como rastreador de problemas e trocar de Jira para este projeto específico. Desde então, tornou-se nossa ferramenta de gerenciamento de projetos de primeira escolha.

sed4

Implementação

Web

Como estamos construindo sobre a base de código existente, a estrutura de front-end já foi selecionada - Vue.js. Embora o objetivo principal fosse reorganizar o layout do aplicativo, o escopo também incluiu alguns novos recursos. Por exemplo, classificação de episódio por tópicos envolveu a criação de novas entidades de banco de dados e respectivos terminais de API. Levamos duas corridas para colocar o aplicativo em boa forma e classificar o débito técnico. A equipe consistia em dois engenheiros de front-end, um engenheiro de back-end node.js, e um desenvolvedor full-stack sênior que trabalhou como líder de equipe.

Mobile

O trabalho da IU girava em torno da atualização de visualizações existentes e, ocasionalmente, da implementação de novas. Paralelamente, algumas lógicas de negócios exigiam reimplementação, especialmente a parte responsável pela reprodução de áudio.

Para fazer a sobreposição do player corresponder ao padrão da indústria de aplicativos de áudio, decidimos introduzir o padrão de coordenador para navegação. Em última análise, essa decisão levou à implementação da arquitetura MVVM-C em todo o aplicativo para facilitar o novo fluxo.

sed4

Results

O novo aplicativo da web foi lançado no início de abril, seguido pela versão iOS chegando à app store em 27 de maio. Downloads e estatísticas de uso que dobraram é uma coisa, mas olhando para o número crescente de votos positivos e comentários nos episódios, é seguro para dizer que foi uma boa chamada para atualizar os aplicativos.

sed4

Desafios

Wordpress CMS

Todo o conteúdo dos episódios reside em um CMS WordPress. Um script de minerador de dados vasculha o site WP e alimenta a API. Embora essa solução não seja perfeita, fizemos o possível para tornar os aplicativos clientes à prova de balas contra possíveis inconsistências de dados.

testi-1

Dependências

A base de código do aplicativo móvel continha mais de 40 várias estruturas de terceiros. Alguns deles foram preteridos ou desatualizados. Deixando apenas as estruturas necessárias e desistindo de bibliotecas que não agregavam valor óbvio, conseguimos reduzir o tempo de construção quase três vezes.

testi-1

Arquitetura de layout de aplicativo iOS

Muitos colaboradores e nenhuma orientação de arquitetura estabelecida levou a uma mistura de vários estilos de codificação e soluções. Decidimos abandonar os storyboards em favor de escrever código de layout usando SnapKit.

testi-1

Depuração de áudio

O áudio é retomado depois que você termina uma chamada telefônica? Ele permanecerá sincronizado com o widget de áudio do sistema? Esses e muitos outros cenários não são totalmente simples de acertar usando testes automatizados.

testi-1

Eles são empreendedores, focados no design e são capazes de trabalhar em todos os níveis. Obrigado à equipe do SoftWrap por nos ajudar a levar o Software Daily onde está hoje e por continuarmos amigos do programa. Se precisar de ajuda com seu aplicativo, conte com a SoftWrap.

Eles são empreendedores, focados no design e são capazes de trabalhar em todos os níveis. Obrigado à equipe do SoftWrap por nos ajudar a levar o Software Daily onde está hoje e por continuarmos amigos do programa. Se precisar de ajuda com seu aplicativo, conte com a SoftWrap.