The HackerNoon Mobile: a perspectiva do desenvolvedor e o lançamento do escritor mundial [versão 1.9]

O aplicativo móvel HackerNoon (disponível na Apple e aguardando a aprovação do Google há muito tempo) lançado no quarto trimestre de 2023 com o objetivo de aumentar o acesso a toda a biblioteca HackerNoon. O aplicativo móvel facilita a leitura, pois foi um dos principais motivos do aplicativo. Quase tudo o que fazemos na web é mais simples no celular, pois proporciona uma experiência personalizada, e você pode aproveitar as principais funcionalidades do aplicativo de qualquer lugar e a qualquer hora. A versão 1.9, lançada hoje, é nossa maior melhoria até agora, principalmente com 12 idiomas disponíveis e nossa experiência de escrita no aplicativo. Felicidades ao escritor mundial!

Principais características:

1. Leia - toda a biblioteca HackerNoon com mais de 100 mil histórias está disponível.
2. Lista de reprodução do reprodutor de áudio - ouça artigos e crie listas de reprodução com suas histórias favoritas.
3. Escrita (NOVO!) - capacidade de escrever e enviar histórias para editores humanos.
4. Enquetes e comentários - vote e discuta as últimas tendências tecnológicas.

No aplicativo móvel você também pode ver páginas como a página TechBeat com as tendências do dia, página Curadoria com artigos selecionados pelos tópicos que você gosta, páginas de categoria / marcadas que também selecionam artigos por tópico e muito mais. Com esta versão 1.9, adicionamos traduções e escrita no aplicativo em breve, então ele está cada vez melhor.

Do ponto de vista do desenvolvedor, o aplicativo móvel era muito necessário. Foi mencionado em quase todas as reuniões do produto HackerNoon antes de seu lançamento. Por algum motivo, muitas conversas levaram a:

Seria bom se tivéssemos um aplicativo móvel para fazer xy ou z.

Como desenvolvedor e amante de desafios, sempre me perguntei por que é tão difícil simplesmente construir um aplicativo móvel. Depois do fato, a resposta foi mais simples do que eu pensava.

Como isso aconteceu?

Acontece que me deparei com o Ionic Framework há alguns anos e achei interessante, mas nunca escrevi nenhum código para testá-lo. Naquela época, o framework só funcionava com Angular, o que provavelmente impactou minha decisão de experimentá-lo, levando em consideração que sou mais um desenvolvedor React. Naquela época, o Ionic não era tão popular e apenas a ideia de criar um aplicativo híbrido não cabia na cabeça de muita gente. De qualquer forma, uma vez, durante uma reunião de produto, eles estavam conversando sobre o aplicativo móvel e eu decidi dar uma olhada no Ionic e adivinhe, eles expandiram sua estrutura para Vue e React, com os quais estou muito confortável.

A primeira coisa que fiz foi instalar o framework e criar um aplicativo Android rápido. Fiquei impressionado com a facilidade e compreensão do processo. Ser capaz de descartar apenas alguns componentes e ter um aplicativo móvel é uma loucura de se pensar, mas o Ionic tornou possível apenas executar alguns comandos e ter um aplicativo construído em várias plataformas, incluindo iOS e Android. Eu me senti muito confortável com a estrutura e naquele momento percebi que estava à altura do desafio. A coincidência veio depois, quando vi um novo projeto sobre a criação do primeiro aplicativo móvel HackerNoon. Eu rapidamente me levantei e comecei a trabalhar nisso.

O processo

Comecei instalando o Ionic em minha máquina Linux, criei um aplicativo totalmente novo e pesquisei algumas de suas documentações. Executei estes comandos mágicos para começar a desenvolver: npm install -g @ionic/cli ionic start // create ionic serve // run locally Depois de brincar com ele, comecei a mover componentes da versão web do HackerNoon para este novo projeto. Em poucas horas, criei algumas páginas. Os designers do HackerNoon ( @Devans e @Kien ) realmente fizeram um ótimo trabalho combinando tudo e dando ao aplicativo uma boa essência e aparência. A maior parte foi desenvolvida da mesma forma que você desenvolveria no React, exceto que Ionic usa Typescript, bom para eles. Minha máquina Linux foi um bom ponto de partida onde desenvolvi quase 50% do aplicativo baseado em Android, mas estava tendo dificuldades para testar a versão iOS. Houve uma solução alternativa com o Linux que era instalar o Mac OS em uma máquina virtual, depois instalar o XCode e depois testar o aplicativo no IOS, mas não consegui lidar com o atraso e a lentidão. Assim que fiquei confiante com o andamento do aplicativo, acabei tomando a decisão de atualizar meu MacBook Pro para começar a desenvolver para iOS. Até agora foi uma boa decisão porque me mostrou em vários níveis a importância de desenvolver para todas as plataformas, embora eu ainda ame Linux. Portanto, trabalhar neste aplicativo com meu novo MacBook Pro foi realmente revelador.

Os desafios

Foi um aprendizado cheio de desafios a serem superados. Até o bug mais simples levava horas para ser descoberto. Felizmente, eu documentava todas as vezes que ficava preso, para que isso não acontecesse na próxima vez. Sendo o desenvolvedor líder deste projeto, tive que fazer algumas escolhas difíceis em termos de infraestrutura do aplicativo, construir toda a API e ao mesmo tempo aprender Ionic e me acostumar com ele. Aqui estão alguns dos principais desafios:

1. Depuração/teste: todos os desenvolvedores sabem o quão importante é o teste ao desenvolver uma aplicação de qualquer nível. Ao trabalhar no aplicativo móvel, comecei a desenvolver na web. Na verdade, pensei que teria que implantar todas as vezes para testar em dispositivos móveis. Passei um pouco de tempo só porque não sabia que o Ionic tinha uma maneira de testar no celular, mas localmente. Então, na maioria das vezes, meu css ou algum dos manipuladores de eventos irá quebrar porque não é a mesma implementação. Depois de testar no celular localmente, o processo ficou mais fluido.
2. Notificações : Quando comecei a trabalhar no aplicativo móvel, vi dois plug-ins interessantes que poderia usar para notificações: Notificações Locais e Notificações Push. Notificações locais são notificações gerenciadas localmente no aplicativo, sem interagir com um servidor backend. Eu automaticamente pensei que as notificações locais eram a opção certa e mais rápida de implementar, então implementei com bastante facilidade. Porém, não era o que procurávamos. As notificações push eram a melhor opção, mas eram um pouco mais difíceis de implementar e precisavam de configuração extra e de um servidor back-end. Mantemos tudo simples, enviando apenas uma notificação ao meio-dia, horário das montanhas, todos os dias, embora possamos querer enviar um pouco mais. Se você possui o aplicativo móvel e aceitou notificações, deverá receber esse tipo de notificação sobre a principal notícia do dia do HackerNoon.
3. A lista de reprodução/player : Este é um dos principais recursos do aplicativo. Foi divertido construir, mas doloroso depurar, simplesmente porque possui muitas funcionalidades. Garantir que cada botão faça o que deveria ser demorado durante o teste. Foi estranho construir o reprodutor de áudio da história, pois tentei vários plug-ins de áudio para funcionar em dispositivos móveis. O principal problema que encontrei foi que eu construí o player, mas o áudio não foi reproduzido ou a qualidade do áudio estava muito ruim. Às vezes, o áudio funciona no modo de desenvolvimento, mas não no modo de produção. O que realmente funcionou foi a API nativa de áudio. Depois disso foi simples, basta passar o URL da fonte e adicionar os botões de ação. A playlist foi menos desafiadora, pois basta salvar as histórias no banco de dados para criar uma playlist. Funcionalidades como ter a playlist em ordem, alterar vozes, reordenar e a capacidade de adicionar um grupo inteiro de histórias à sua playlist foram muito legais de implementar. Talvez no futuro possamos ter playlists públicas onde você poderá ver o que outras pessoas estão ouvindo, com a preocupação delas, é claro. Esta é a aparência da minha playlist agora:
4. Atualizações iônicas versus atualizações do iOS versus atualizações do Xcode: acho que essa foi a parte mais frustrante, quando você tem uma versão muito legal funcionando 100% e então buom ela não funciona, ou não carrega, ou não registra Lembro-me de ter formulários de entrada funcionando no Ionic, mas depois atualizei as versões do Ionic e os eventos de entrada não estavam funcionando, fazendo-me pensar que os erros estavam no back-end. Ou testando o aplicativo para perceber que não consigo mais ver os logs no safari porque atualizei meu telefone e esse recurso não era mais suportado pela apple. Ou tentando construir uma nova versão do aplicativo, mas falhou porque o xcode foi atualizado e algo precisava ser alterado no meu código. Foram momentos realmente frustrantes e demorados. Pelo menos isso só aconteceu durante o desenvolvimento 👍.
5. Login do Google no Android: Este tem sido um dos bugs do aplicativo, os usuários do Android literalmente não conseguiam fazer login usando o método google. Este foi um bug maluco porque aconteceu na produção. Embora tenha sido muito simples, também fez parte do processo de aprendizagem quando se trata de desenvolvimento mobile. Acontece que existem dois tipos de chaves necessárias para o login do Google, uma de desenvolvimento que é configurada no Firebase e outra de produção que também precisa ser configurada no Firebase. O problema aqui é que a Google Play Store realmente produz uma chave de produção que precisa substituir a chave de desenvolvimento. Não havia como eu saber disso e resultou em horas gastas tentando descobrir qual era o problema. Demorei menos de 30 segundos para consertar quando descobri que tudo o que era necessário era substituir as chaves.
6. Escrevendo: … isso foi realmente uma montanha-russa. A questão principal era apenas encontrar um editor que funcionasse em mobile e Ionic. Tentei cerca de 20 editores diferentes e a maioria deles falhou no celular enquanto funcionava perfeitamente na web. Alguns não carregaram o teclado, alguns escreveram letras diferentes das que estavam sendo pressionadas e alguns simplesmente não conseguiram instalar. Quando finalmente encontrei um que funcionasse, o jantar demorou para digitar, então foi realmente entediante. Felizmente, tentei outro editor, QuillJS(!), e parece estar funcionando melhor do que o esperado. Na verdade, esse é o editor que estou usando para escrever esta história. Esse recurso basicamente impediu o lançamento de novas atualizações porque realmente queríamos permitir que os usuários escrevessem no aplicativo móvel.

O que eu gostei?

Todo o processo de desenvolvimento foi muito legal e eu definitivamente recomendo que outros desenvolvedores experimentem. Quanto mais eu trabalhava com o aplicativo, mais me acostumava e me sentia mais confortável com o processo de desenvolvimento. Foi muito gratificante ver o aplicativo no meu celular e navegar por todas as páginas. O recurso mais impressionante para mim foi a playlist/player, pois é algo orgânico do HackerNoon e um dos principais recursos do aplicativo. As notificações push foram o recurso que provavelmente mais aprendi, pois era algo totalmente novo e pude ver como funcionam as notificações móveis, e esse conhecimento pode definitivamente ser aplicado no futuro a outros recursos.

Se você ainda não o possui, baixe o aplicativo e compartilhe sua opinião nos comentários ⬇️. ✌️

Aqui está a versão da Apple:

Aqui está a versão Android: