HackerNoon Mobile: la perspectiva del desarrollador y el lanzamiento mundial del escritor [Versión 1.9]

La aplicación móvil HackerNoon (disponible en Apple y esperando la aprobación de Google desde hace demasiado tiempo) lanzado en el cuarto trimestre de 2023 con el propósito de aumentar el acceso a toda la biblioteca de HackerNoon. La aplicación móvil facilita la lectura, ya que era uno de los motivos principales de la aplicación. Casi todo lo que hacemos en la web es más sencillo en el móvil, ya que proporciona una experiencia personalizada y puedes disfrutar de la función principal de la aplicación desde cualquier lugar y en cualquier momento. La versión 1.9, disponible hoy, es nuestra mayor mejora hasta el momento, sobre todo con 12 idiomas disponibles y nuestra experiencia de escritura en la aplicación. ¡Saludos al escritor mundial!

Principales características:

1. Lea: la biblioteca completa de HackerNoon, con más de 100.000 historias, está disponible.
2. Lista de reproducción del reproductor de audio: escuche artículos y cree listas de reproducción con sus historias favoritas.
3. Escritura (¡NUEVO!): capacidad de escribir y enviar historias a editores humanos.
4. Encuestas y comentarios: vote y analice las últimas tendencias tecnológicas.

En la aplicación móvil también puede ver páginas como la página TechBeat con las historias más populares del día, la página de curación con artículos seleccionados por los temas que le gustan, páginas de categorías / etiquetas que también seleccionan artículos por tema y más. Con esta versión 1.9, pronto agregaremos traducciones y escritura en la aplicación, por lo que sigue mejorando.

Desde la perspectiva del desarrollador, la aplicación móvil era muy necesaria. Se mencionó en casi todas las reuniones de productos de HackerNoon antes de su lanzamiento. Por alguna razón, muchas conversaciones llevaron a:

Sería bueno si tuviéramos una aplicación móvil para hacer xy o z.

Como desarrollador y amante de los desafíos, siempre me pregunté por qué es tan difícil simplemente crear una aplicación móvil. Después del hecho, la respuesta fue más simple de lo que pensaba.

¿Cómo pasó?

Resulta que me encontré con Ionic Framework hace unos años y pensé que era interesante, pero nunca escribí ningún código para probarlo. En ese momento, el marco solo funcionaba con Angular, lo que probablemente afectó mi decisión de probarlo, teniendo en cuenta que soy más un desarrollador de React. En aquel entonces, Ionic no era tan popular y la simple idea de crear una aplicación híbrida no encajaba en la mente de mucha gente. De todos modos, una vez, durante una reunión de producto, estaban hablando sobre la aplicación móvil y decidí echar un vistazo a Ionic y adivina qué, han ampliado su marco a Vue y React, con lo cual me siento muy cómodo.

Lo primero que hice fue instalar el marco y crear una aplicación rápida para Android. Me impresionó lo fácil y comprensivo que fue el proceso. Es una locura pensar en poder simplemente soltar algunos componentes y tener una aplicación móvil, pero Ionic hizo posible simplemente ejecutar algunos comandos y tener una aplicación integrada en múltiples plataformas, incluidas iOS y Android. Me sentí muy cómodo con el marco y en ese momento supe que estaba a la altura del desafío. La coincidencia vino después, cuando vi un nuevo proyecto sobre la creación de la primera aplicación móvil HackerNoon. Rápidamente lo levanté y comencé a trabajar en ello.

El proceso

Primero comencé instalando Ionic en mi máquina Linux, creé una aplicación nueva e investigué parte de su documentación. Ejecuté estos comandos mágicos para comenzar a desarrollar: npm install -g @ionic/cli ionic start // crear servicio iónico // ejecutar localmente Después de jugar con él, comencé a mover componentes de la versión web de HackerNoon a este nuevo proyecto. En unas pocas horas creé algunas páginas. Los diseñadores de HackerNoon ( @Devans & @Kien ) realmente hicieron un gran trabajo combinando todo y dándole a la aplicación una buena esencia y apariencia. La mayor parte se desarrolló de la misma manera que lo haría en React, excepto que Ionic usa Typecript, lo cual es bueno para ellos. Mi máquina Linux fue un buen punto de partida donde desarrollé casi el 50% de la aplicación basada en Android, pero estaba teniendo dificultades para probar la versión de iOS. Hubo una solución alternativa con Linux que consistía en instalar Mac OS en una máquina virtual, luego instalar XCode y luego probar la aplicación en IOS, pero luego no pude lidiar con el retraso y la lentitud. Una vez que tuve confianza en el progreso de la aplicación, terminé tomando la decisión de actualizar mi MacBook Pro para comenzar a desarrollar para iOS. Hasta ahora, fue una buena decisión ya que me mostró en muchos niveles la importancia de desarrollar para todas las plataformas, aunque todavía amo Linux. Así que trabajar en esta aplicación con mi nueva MacBook Pro fue realmente revelador.

Los desafios

Esta fue una experiencia de aprendizaje llena de desafíos por superar. Incluso el error más simple tomó horas para descubrirlo. Con mucho gusto fui documentando cada vez que me quedaba atascado, para que no vuelva a suceder la próxima vez. Como desarrollador principal de este proyecto, tuve que tomar algunas decisiones difíciles en términos de la infraestructura de la aplicación, crear la API completa y, al mismo tiempo, aprender Ionic y acostumbrarme a él. Estos fueron algunos de los principales desafíos:

1. Depuración/pruebas: todos los desarrolladores saben lo importante que son las pruebas al desarrollar una aplicación de cualquier nivel. Cuando trabajaba en la aplicación móvil, comencé a desarrollar en la web. De hecho, pensé que tenía que implementar cada vez para poder probar en el móvil. Pasé un poco de tiempo simplemente porque no sabía que Ionic tenía una forma de realizar pruebas en dispositivos móviles pero localmente. Entonces, la mayoría de las veces, mi CSS o algunos de los controladores de eventos fallarán porque no es la misma implementación. Después de probar en el móvil localmente, el proceso es más fluido.
2. Notificaciones : cuando comencé a trabajar en la aplicación móvil, vi dos complementos interesantes que podía usar para las notificaciones: notificaciones locales y notificaciones automáticas. Las notificaciones locales son notificaciones administradas localmente en la aplicación, sin interactuar con un servidor backend. Automáticamente pensé que las notificaciones locales eran la opción correcta y más rápida de implementar, así que lo implementé con bastante facilidad. Sin embargo, no era lo que buscábamos. Las notificaciones automáticas eran el camino a seguir, pero eran un poco más difíciles de implementar y necesitaban una configuración adicional y un servidor backend. Lo hacemos simple enviando solo una notificación al mediodía, hora de la montaña, todos los días, aunque es posible que queramos enviar un poco más. Si tiene la aplicación móvil y acepta notificaciones, debería recibir este tipo de notificación sobre la noticia principal del día de HackerNoon.
3. La lista de reproducción/reproductor : esta es una de las características principales de la aplicación. Fue divertido construirlo pero doloroso depurarlo simplemente porque tiene muchas funcionalidades. Asegurarse de que cada botón haga lo que se supone que debe hacer tomó mucho tiempo durante las pruebas. Fue extraño crear el reproductor de audio de la historia porque probé varios complementos de audio para que funcionaran en el dispositivo móvil. El principal problema que encontré fue que construí el reproductor pero el audio no se reproducía o la calidad del audio era realmente mala. A veces el audio funcionará en el modo de desarrollo pero no en producción. Lo que realmente funcionó fue la API de audio nativa. Después de eso, fue sencillo, simplemente pase la URL de origen y agregue los botones de acción. La lista de reproducción fue un desafío menor ya que todo lo que se necesita es guardar las historias en la base de datos para crear una lista de reproducción. Funcionalidades como tener la lista de reproducción en orden, cambiar voces, reordenar y la capacidad de agregar un grupo completo de historias a tu lista de reproducción fue realmente genial de implementar. Quizás en el futuro podamos tener listas de reproducción públicas donde poder ver lo que escuchan otras personas, con su preocupación claro. Así se ve mi lista de reproducción ahora mismo:
4. Actualizaciones de Ionic versus actualizaciones de iOS versus actualizaciones de Xcode: creo que esta fue la parte más frustrante, cuando tienes una versión realmente buena que funciona al 100% y luego no funciona, o no se carga, o no se registra. in. Recuerdo que tenía formularios de entrada funcionando en Ionic, pero luego actualicé las versiones de Ionic y los eventos de entrada no funcionaban, lo que me hizo pensar que los errores estaban en el backend. O probar la aplicación y luego darme cuenta de que ya no puedo ver los registros en Safari porque actualicé mi teléfono y Apple ya no admitía esa función. O intentar crear una nueva versión de la aplicación, pero falló porque xcode se actualizó y era necesario cambiar algo en mi código. Fueron momentos realmente frustrantes y consumieron mucho tiempo. Al menos solo sucedió durante el desarrollo 👍.
5. Inicio de sesión de Google en Android: Este ha sido uno de los errores de la aplicación, los usuarios de Android literalmente no podían iniciar sesión usando el método de Google. Este fue un error loco porque sucedió en producción. Aunque fue realmente simple, también fue parte del proceso de aprendizaje cuando se trata de desarrollo móvil. Resulta que se necesitan dos tipos de claves para iniciar sesión en Google, una de desarrollo que está configurada en Firebase y otra de producción que también debe configurarse en Firebase. El problema aquí es que Google Play Store en realidad produce una clave de producción que debe reemplazar la clave de desarrollo. No había forma de que lo supiera y me llevó horas tratando de descubrir cuál era el problema. Me tomó menos de 30 segundos arreglarlo una vez que descubrí que todo lo que necesitaba era reemplazar las llaves.
6. Escribiendo: … esto fue realmente una montaña rusa. El problema principal era encontrar un editor que funcionara en dispositivos móviles e Ionic. Probé alrededor de 20 editores diferentes y la mayoría falló en dispositivos móviles mientras funcionaba perfectamente en la web. Algunos no cargaron el teclado, algunos escribieron letras diferentes a las que se presionaron y algunos simplemente no pudieron instalarse. Cuando finalmente encontré uno que funcionaba, se me hizo muy lento escribir, por lo que fue muy tedioso. Afortunadamente, lo probé con otro editor, QuillJS(!), y parece estar funcionando mejor de lo esperado. En realidad, ese es el editor que estoy usando para escribir esta historia. Básicamente, esta característica impidió que se publicaran nuevas actualizaciones porque realmente queríamos permitir a los usuarios escribir en la aplicación móvil.

¿Lo que me gustó?

Todo el proceso de desarrollo fue genial y definitivamente recomiendo a otros desarrolladores que lo prueben. Cuanto más trabajaba con la aplicación, más me acostumbraba y me sentía más cómodo con el proceso de desarrollo. Fue realmente satisfactorio ver la aplicación en mi teléfono y navegar por todas las páginas. La característica más impresionante para mí fue la lista de reproducción/reproductor, ya que es algo orgánico de HackerNoon y una de las características principales de la aplicación. Las notificaciones automáticas fueron la característica que probablemente más aprendí, ya que era algo totalmente nuevo y pude ver cómo funcionan las notificaciones móviles, y ese conocimiento definitivamente se puede aplicar en el futuro a otras características.

Si aún no la tienes, descarga la aplicación y comparte tus pensamientos en los comentarios ⬇️. ✌️

Aquí está la versión de Apple:

Aquí está la versión de Android: