The HackerNoon Mobile : le point de vue du développeur et la version du World Wide Writer [Version 1.9]

L' application HackerNoon Mobile (disponible sur Apple et en attente de l'approbation de Google depuis trop longtemps maintenant) sorti au quatrième trimestre 2023 dans le but d'augmenter l'accès à l'ensemble de la bibliothèque HackerNoon. L’application mobile facilite le lectorat car c’était l’une des principales motivations de l’application. Presque tout ce que nous faisons sur le Web est plus simple sur mobile, car cela offre une expérience personnalisée et vous pouvez profiter de la fonctionnalité principale de l'application de n'importe où et à tout moment. La version 1.9, disponible aujourd'hui, constitue notre plus grande amélioration à ce jour, notamment avec 12 langues disponibles et notre expérience d'écriture dans l'application. Bravo à l'écrivain du monde entier !

Caractéristiques principales:

1. Lire : la bibliothèque complète de plus de 100 000 histoires HackerNoon est disponible.
2. Liste de lecture du lecteur audio : écoutez des articles et créez des listes de lecture avec vos histoires préférées.
3. Écriture (NOUVEAU !) – capacité d'écrire et de soumettre des histoires à des éditeurs humains.
4. Sondages et commentaires - votez et discutez des dernières tendances technologiques.

Sur l'application mobile, vous pouvez également voir des pages telles que la page TechBeat avec les histoires tendances du jour, la page Curation avec des articles sélectionnés par sujets que vous aimez, des pages de catégories / étiquetées qui organisent également des articles par sujet, et plus encore. Avec cette version 1.9, nous avons bientôt ajouté des traductions et de l'écriture sur l'application, donc elle continue de s'améliorer.

Du point de vue des développeurs, l’application mobile était indispensable. Il a été mentionné lors de presque toutes les réunions produit HackerNoon avant sa sortie. Pour une raison quelconque, de nombreuses conversations ont conduit à :

Ce serait bien si nous avions une application mobile pour faire xy ou z.

En tant que développeur et amateur de défis, je me suis toujours demandé pourquoi est-il si difficile de simplement créer une application mobile. Après coup, la réponse était plus simple que ce que je pensais.

Comment cela s'est passé?

Il s'avère que je suis tombé sur Ionic Framework il y a quelques années et que je l'ai trouvé intéressant, mais je n'ai jamais vraiment écrit de code pour le tester. À cette époque, le framework ne fonctionnait qu'avec Angular, ce qui a probablement eu un impact sur ma décision de l'essayer, sachant que je suis plutôt un développeur React. À l’époque, Ionic n’était pas aussi populaire et l’idée même de créer une application hybride ne convenait pas à beaucoup de gens. Quoi qu'il en soit, un jour, lors d'une réunion produit, ils parlaient de l'application mobile et j'ai décidé de revenir sur Ionic et devinez quoi, ils ont étendu leur framework à Vue et React avec lesquels je suis vraiment à l'aise.

La première chose que j'ai faite a été d'installer le framework et de créer une application Android rapide. J'ai été impressionné par la simplicité et la compréhension du processus. Pouvoir simplement supprimer quelques composants et avoir une application mobile, c'est fou de penser, mais Ionic a permis d'exécuter simplement quelques commandes et de créer une application sur plusieurs plates-formes, notamment iOS et Android. Je me sentais vraiment à l'aise avec le cadre et je savais à ce moment-là que j'étais à la hauteur du défi. La coïncidence est venue après, lorsque j'ai vu un nouveau projet visant à créer la première application mobile HackerNoon. J'ai rapidement compris et j'ai commencé à travailler dessus.

Le processus

J'ai d'abord commencé par installer Ionic sur ma machine Linux, créé une toute nouvelle application et recherché une partie de leur documentation. J'ai exécuté ces commandes magiques pour commencer le développement : npm install -g @ionic/cli ionic start // create ionic serve // run local Après avoir joué avec, j'ai ensuite commencé à déplacer les composants de la version Web de HackerNoon vers ce nouveau projet. En quelques heures, j'ai créé quelques pages. Les concepteurs de HackerNoon ( @Devans & @Kien ) ont vraiment fait un excellent travail en faisant correspondre tout et en donnant à l'application une bonne essence et un bon look. La majeure partie a été développée de la même manière que vous le feriez en réaction, sauf que Ionic utilise Typescript, ce qui est bon pour eux. Ma machine Linux était un bon point de départ où j'ai développé près de 50 % de l'application basée sur Android, mais j'avais du mal à tester la version iOS. Il y avait une solution avec Linux qui consistait à installer Mac OS sur une machine virtuelle, puis à installer XCode, puis à tester l'application sur IOS, mais je ne pouvais pas gérer le retard et la lenteur. Une fois confiant dans la progression de l'application, j'ai fini par prendre la décision de mettre à niveau mon MacBook Pro afin de commencer à développer pour iOS. Jusqu’à présent, c’était une bonne décision car cela m’a montré à plusieurs niveaux l’importance de développer pour toutes les plateformes, même si j’aime toujours Linux. Travailler sur cette application avec mon nouveau MacBook Pro a donc été vraiment révélateur.

Les défis

Ce fut une expérience d’apprentissage pleine de défis à surmonter. Même le bug le plus simple a mis des heures à être résolu. Heureusement, je documentais chaque fois que je restais bloqué, afin que cela ne se reproduise pas la prochaine fois. En tant que développeur principal de ce projet, j'ai dû faire des choix difficiles en termes d'infrastructure de l'application, créer l'intégralité de l'API, et en même temps apprendre Ionic et m'y habituer. Voici quelques-uns des principaux défis :

1. Débogage/test : tous les développeurs savent à quel point les tests sont importants lors du développement d’une application, quel que soit son niveau. Lorsque je travaillais sur l'application mobile, j'ai d'abord commencé à développer sur le Web. En fait, je pensais que je devais déployer à chaque fois pour tester sur mobile. J'ai passé un peu de temps simplement parce que je ne savais pas qu'Ionic avait un moyen de tester sur mobile mais localement. Donc la plupart du temps, mon CSS ou certains des gestionnaires d'événements tomberont en panne car ce n'est pas la même implémentation. Après test sur mobile en local, le processus car plus fluide.
2. Notifications : Lorsque j'ai commencé à travailler sur l'application mobile, j'ai vu deux plugins intéressants que je pouvais utiliser pour les notifications : les notifications locales et les notifications push. Les notifications locales sont des notifications gérées localement sur l'application, sans interagir avec un serveur backend. J'ai automatiquement pensé que les notifications locales étaient le bon choix et le plus rapide à mettre en œuvre, donc je l'ai mis en œuvre assez facilement. Cependant, ce n’était pas ce que nous recherchions. Les notifications push étaient la voie à suivre, mais elles étaient un peu plus difficiles à mettre en œuvre et nécessitaient une configuration supplémentaire et un serveur backend. Nous gardons les choses simples en envoyant simplement une notification chaque jour à midi, heure des Rocheuses, même si nous souhaiterions peut-être en envoyer un peu plus. Si vous disposez de l'application mobile et des notifications acceptées, vous devriez recevoir ce type de notification concernant l'actualité HackerNoon du jour.
3. La playlist/player : C'est l'une des principales fonctionnalités de l'application. C'était joyeux à construire mais pénible à déboguer simplement parce qu'il possède de nombreuses fonctionnalités. S'assurer que chaque bouton fait ce qu'il est censé faire prenait beaucoup de temps lors des tests. C'était bizarre de créer le lecteur audio de l'histoire car j'essayais plusieurs plugins audio pour fonctionner sur mobile. Le principal problème que j'ai rencontré était que j'avais construit le lecteur mais que l'audio n'était pas lu ou que la qualité de l'audio était vraiment mauvaise. Parfois, l’audio fonctionnera en mode développement mais pas en production. Ce qui a réellement fonctionné, c'est l'API Audio native. Après cela, c'était simple, il suffit de transmettre l'URL source et d'ajouter les boutons d'action. La playlist était moins problématique puisqu'il suffisait de sauvegarder les histoires dans la base de données afin de créer une playlist. Des fonctionnalités telles que l'ordre de la playlist, le changement de voix, la réorganisation et la possibilité d'ajouter un groupe entier d'histoires à votre playlist étaient vraiment sympas à mettre en œuvre. Peut-être qu’à l’avenir nous pourrons avoir des playlists publiques où vous pourrez voir ce que les autres écoutent, avec leur préoccupation bien sûr. Voici à quoi ressemble ma playlist en ce moment :
4. Mises à jour Ionic vs mises à jour iOS vs mises à jour Xcode : je pense que c'était la partie la plus frustrante, quand vous avez une très belle version qui fonctionne à 100% et que boum, ça ne marche pas, ou ça ne se charge pas, ou ça ne se connecte pas Je me souviens que des formulaires de saisie fonctionnaient sur Ionic, mais que les versions d'Ionic avaient ensuite été mises à niveau et que les événements de saisie ne fonctionnaient pas, ce qui me faisait penser que les erreurs provenaient du backend. Ou tester l'application pour ensuite réaliser que je ne peux plus voir les journaux sur Safari car j'ai mis à jour mon téléphone et cette fonctionnalité n'était plus prise en charge par Apple. Ou essayer de créer une nouvelle version de l'application, mais cela a échoué car xcode a été mis à jour et quelque chose devait être modifié dans mon code. C’étaient des moments vraiment frustrants et qui prenaient beaucoup de temps. Au moins, cela ne s'est produit que pendant le développement 👍.
5. Connexion Google sur Android : cela a été l'un des bugs de l'application, les utilisateurs d'Android ne pouvaient littéralement pas se connecter en utilisant la méthode Google. C'était un bug fou car il s'est produit en production. Même si c'était très simple, cela faisait également partie du processus d'apprentissage en matière de développement mobile. Il s'avère qu'il existe deux types de clés nécessaires pour la connexion à Google, une pour le développement configurée sur Firebase et une autre pour la production qui doit également être configurée dans Firebase. Le problème ici est que Google Play Store produit en fait une clé de production qui doit remplacer la clé de développement. Je n’avais aucun moyen de le savoir et j’ai passé des heures à essayer de comprendre quel était le problème. La réparation a pris moins de 30 secondes une fois que j'ai compris qu'il suffisait de remplacer les clés.
6. Écrit : … c’était vraiment des montagnes russes. Le principal problème était simplement de trouver un éditeur qui fonctionnerait sur mobile et Ionic. J'ai essayé environ 20 éditeurs différents, et la plupart ont échoué sur mobile tout en travaillant parfaitement sur le Web. Certains n'ont pas chargé le clavier, certains écrivent des lettres différentes de celles sur lesquelles vous appuyez, et certains n'ont tout simplement pas pu être installés. Quand j’en ai finalement trouvé un qui fonctionnait, le souper était en retard lors de la frappe, donc c’était vraiment fastidieux. Heureusement, j'ai essayé un autre éditeur, QuillJS(!), et il semble fonctionner mieux que prévu. C'est en fait l'éditeur que j'utilise pour écrire cette histoire. Cette fonctionnalité empêchait essentiellement la publication de nouvelles mises à jour, car nous voulions vraiment permettre aux utilisateurs d'écrire sur l'application mobile.

Qu'est-ce que j'ai aimé ?

L'ensemble du processus de développement était vraiment cool et je recommande vivement aux autres développeurs de tenter leur chance. Plus je travaillais avec l'application, plus je m'y habituais et devenais plus à l'aise avec le processus de développement. C'était vraiment satisfaisant de voir l'application sur mon téléphone et de parcourir toutes les pages. La fonctionnalité la plus impressionnante pour moi était la liste de lecture/lecteur car c'est quelque chose d'organique par HackerNoon et l'une des principales fonctionnalités de l'application. Les notifications push sont probablement la fonctionnalité que j'ai le plus apprise, car c'était quelque chose de totalement nouveau et j'ai pu voir comment fonctionnent les notifications mobiles, et ces connaissances pourront certainement être appliquées à l'avenir à d'autres fonctionnalités.

Si vous ne l'avez pas encore, téléchargez l'application et partagez vos impressions dans les commentaires ⬇️. ✌️

Voici la version Apple :

Voici la version Android :