The HackerNoon Mobile: The Developer's Perspective und The World Wide Writer Release [Version 1.9]

Die HackerNoon Mobile-App (verfügbar bei und wartet schon zu lange auf die Genehmigung ) wurde im vierten Quartal 2023 veröffentlicht mit dem Ziel, den Zugriff auf die gesamte HackerNoon-Bibliothek zu verbessern. Die mobile App erleichtert die Leserschaft, da dies eines der Hauptmotive der App war. Fast alles, was wir im Web tun, ist auf Mobilgeräten einfacher, da es ein personalisiertes Erlebnis bietet und Sie die Hauptfunktion der App jederzeit und überall genießen können. Version 1.9, die heute verfügbar ist, ist unsere bisher größte Verbesserung, insbesondere mit 12 verfügbaren Sprachen und unserem In-App-Schreiberlebnis. Ein Hoch auf den weltweiten Autor!

Haupteigenschaften:

1. Lesen Sie – die gesamte HackerNoon-Bibliothek mit mehr als 100.000 Storys ist verfügbar.
2. Audio-Player-Playlist – Hören Sie sich Artikel an und erstellen Sie Playlists mit Ihren Lieblingsgeschichten.
3. Schreiben (NEU!) – Fähigkeit, Geschichten zu schreiben und an menschliche Redakteure zu übermitteln.
4. Umfragen und Kommentare – stimmen Sie über die neuesten Technologietrends ab und diskutieren Sie diese.

In der mobilen App können Sie auch Seiten wie die TechBeat-Seite mit den Trendgeschichten des Tages, die Kurationsseite mit Artikeln, die nach Ihren Lieblingsthemen kuratiert wurden, Seiten mit Kategorien / Tags , auf denen Artikel auch nach Themen kuratiert werden, und mehr sehen. Mit dieser Version 1.9 haben wir der App nun bald Übersetzungen und Texte hinzugefügt, sodass sie immer besser wird.

Aus Entwicklersicht war die mobile App dringend erforderlich. Es wurde in fast jedem HackerNoon-Produkttreffen vor seiner Veröffentlichung erwähnt. Aus irgendeinem Grund führten viele Gespräche zu Folgendem:

Es wäre gut, wenn wir eine mobile App hätten, um xy oder z zu machen.

Als Entwickler und jemand, der Herausforderungen liebt, habe ich mich immer gefragt, warum es so schwierig ist, einfach nur eine mobile App zu erstellen. Im Nachhinein war die Antwort einfacher als ich dachte.

Wie es passiert ist?

Es stellte sich heraus, dass ich vor ein paar Jahren auf das Ionic Framework gestoßen bin und es interessant fand, aber nie wirklich Code geschrieben habe, um es zu testen. Damals funktionierte das Framework nur mit Angular, was wahrscheinlich meine Entscheidung, es auszuprobieren, beeinflusst hat, wenn man bedenkt, dass ich eher ein React-Entwickler bin. Damals war Ionic noch nicht so beliebt und allein die Idee, eine Hybridanwendung zu erstellen, passte nicht in die Vorstellungen vieler Menschen. Wie dem auch sei, als sie einmal während einer Produktbesprechung über die mobile App sprachen, beschloss ich, noch einmal einen Blick auf Ionic zu werfen und raten Sie mal: Sie haben ihr Framework auf Vue und React erweitert, womit ich mich wirklich wohl fühle.

Als erstes habe ich das Framework installiert und eine schnelle Android-App erstellt. Ich war beeindruckt, wie einfach und verständlich der Prozess war. Die Möglichkeit, einfach ein paar Komponenten wegzulassen und eine mobile App zu haben, ist verrückt vorstellbar, aber Ionic hat es ermöglicht, einfach ein paar Befehle auszuführen und eine App auf mehreren Plattformen zu erstellen, darunter iOS und Android. Ich habe mich mit dem Rahmen sehr wohl gefühlt und in diesem Moment war mir klar, dass ich der Herausforderung gewachsen war. Der Zufall kam erst später, als ich ein neues Projekt sah, bei dem es um die Erstellung der ersten mobilen HackerNoon-App ging. Ich kam schnell zu mir und fing an, daran zu arbeiten.

Der Prozess

Ich begann zunächst damit, Ionic auf meinem Linux-Rechner zu installieren, erstellte eine brandneue App und recherchierte einige ihrer Dokumentationen. Führen Sie diese magischen Befehle aus, um mit der Entwicklung zu beginnen: npm install -g @ionic/cli ionic start // create ionic Serve // run local Nachdem ich damit herumgespielt hatte, begann ich dann, Komponenten aus der HackerNoon-Webversion in dieses neue Projekt zu verschieben. Innerhalb weniger Stunden habe ich ein paar Seiten erstellt. Die HackerNoon-Designer ( @Devans & @Kien ) haben wirklich großartige Arbeit geleistet, alles aufeinander abzustimmen und der App ein gutes Wesen und Aussehen zu verleihen. Das meiste davon wurde auf die gleiche Weise entwickelt, wie man es in React entwickeln würde, außer dass Ionic Typescript verwendet, was gut für sie ist. Mein Linux-Rechner war ein guter Ausgangspunkt, auf dem ich fast 50 % der App auf Android-Basis entwickelte, mir aber das Testen der iOS-Version schwerfiel. Es gab einen Workaround mit Linux, der darin bestand, Mac OS auf einer virtuellen Maschine zu installieren, dann XCode zu installieren und dann die App auf IOS zu testen, aber dann kam ich mit der Verzögerung und Langsamkeit nicht klar. Nachdem ich vom Fortschritt der App überzeugt war, beschloss ich schließlich, mein MacBook Pro zu aktualisieren, um mit der Entwicklung für iOS zu beginnen. Bisher war es eine gute Entscheidung, da sie mir auf vielen Ebenen gezeigt hat, wie wichtig es ist, für alle Plattformen zu entwickeln, auch wenn ich Linux immer noch liebe. Die Arbeit an dieser App mit meinem neuen MacBook Pro hat mir wirklich die Augen geöffnet.

Die Herausforderungen

Dies war eine Lernerfahrung voller Herausforderungen, die es zu meistern galt. Es dauerte Stunden, selbst den einfachsten Fehler herauszufinden. Gerne habe ich jedes Mal, wenn ich nicht weiterkomme, dokumentiert, damit es beim nächsten Mal nicht wieder passiert. Als Hauptentwickler dieses Projekts musste ich einige schwierige Entscheidungen hinsichtlich der Infrastruktur der App treffen, die gesamte API erstellen und gleichzeitig Ionic lernen und mich daran gewöhnen. Hier waren einige der größten Herausforderungen:

1. Debuggen/Testen: Alle Entwickler wissen, wie wichtig Tests bei der Entwicklung einer Anwendung jeder Stufe sind. Als ich an der mobilen App arbeitete, begann ich zunächst mit der Entwicklung im Web. Eigentlich dachte ich, dass ich jedes Mal eine Bereitstellung durchführen müsste, um es auf Mobilgeräten zu testen. Ich habe viel Zeit damit verbracht, nur weil ich nicht wusste, dass Ionic eine Möglichkeit zum Testen auf Mobilgeräten, aber lokal bietet. Meistens gehen mein CSS oder einige der Event-Handler kaputt, weil es nicht die gleiche Implementierung ist. Nach dem Testen auf dem Mobilgerät vor Ort ist der Prozess flüssiger geworden.
2. Benachrichtigungen : Als ich zum ersten Mal mit der Arbeit an der mobilen App begann, sah ich zwei interessante Plugins, die ich für Benachrichtigungen verwenden konnte: lokale Benachrichtigungen und Push-Benachrichtigungen. Lokale Benachrichtigungen sind Benachrichtigungen, die lokal in der App verwaltet werden, ohne mit einem Backend-Server zu interagieren. Ich dachte automatisch, dass lokale Benachrichtigungen die richtige und schneller umzusetzende Wahl seien, also habe ich es ziemlich einfach umgesetzt. Es war jedoch nicht das, was wir suchten. Push-Benachrichtigungen waren der richtige Weg, aber die Implementierung war etwas schwieriger und erforderte eine zusätzliche Einrichtung und einen Backend-Server. Wir halten es einfach, indem wir jeden Tag nur eine Benachrichtigung zur Mittagszeit in den Bergen senden, obwohl wir vielleicht etwas mehr senden möchten. Wenn Sie die mobile App haben und Benachrichtigungen akzeptiert haben, sollten Sie diese Art von Benachrichtigung über die HackerNoon-Top-Story des Tages erhalten.
3. Die Playlist/der Player : Dies ist eine der Hauptfunktionen der App. Es hat Spaß gemacht, es zu erstellen, aber das Debuggen war mühsam, einfach weil es zu viele Funktionen hat. Beim Testen war es ziemlich zeitaufwändig sicherzustellen, dass jede Taste das tut, was sie tun soll. Es war seltsam, den Story-Audioplayer zu erstellen, da ich mehrere Audio-Plugins ausprobiert habe, um auf Mobilgeräten zu funktionieren. Das Hauptproblem, auf das ich gestoßen bin, war, dass ich den Player gebaut habe, aber der Ton nicht abgespielt wurde oder die Qualität des Tons wirklich schlecht war. Manchmal funktioniert Audio im Entwicklungsmodus, aber nicht im Produktionsmodus. Was tatsächlich funktionierte, war die native Audio-API. Danach war es ganz einfach: Übergeben Sie einfach die Quell-URL und fügen Sie die Aktionsschaltflächen hinzu. Die Wiedergabeliste stellte eine geringere Herausforderung dar, da zum Erstellen einer Wiedergabeliste lediglich die Geschichten in der Datenbank gespeichert werden müssen. Es war wirklich cool, Funktionen wie die Ordnung der Playlist, das Ändern von Stimmen, das Neuordnen und die Möglichkeit, eine ganze Gruppe von Geschichten zu Ihrer Playlist hinzuzufügen, zu implementieren. Vielleicht können wir in Zukunft öffentliche Playlists haben, in denen Sie sehen können, was andere Leute hören, natürlich mit ihrem Anliegen. So sieht meine Playlist derzeit aus:
4. Ionic-Updates vs. iOS-Updates vs in. Ich erinnere mich, dass Eingabeformulare auf Ionic funktionierten, aber dann aktualisierte Ionic-Versionen und die Eingabeereignisse nicht funktionierten, was mich zu der Annahme veranlasste, dass die Fehler im Backend lagen. Oder ich teste die App und stelle dann fest, dass ich die Protokolle auf Safari nicht mehr sehen kann, weil ich mein Telefon aktualisiert habe und diese Funktion von Apple nicht mehr unterstützt wird. Oder der Versuch, eine neue Version der App zu erstellen, ist jedoch fehlgeschlagen, weil xcode aktualisiert wurde und etwas an meinem Code geändert werden musste. Das waren wirklich frustrierende und zeitraubende Momente. Zumindest ist es nur während der Entwicklung passiert 👍.
5. Google-Anmeldung auf Android: Dies war einer der Fehler der App. Android-Benutzer konnten sich buchstäblich nicht mit der Google-Methode anmelden. Das war ein verrückter Fehler, weil er in der Produktion passiert ist. Obwohl es wirklich einfach war, war es auch Teil des Lernprozesses, wenn es um die mobile Entwicklung geht. Es stellt sich heraus, dass für die Google-Anmeldung zwei Arten von Schlüsseln erforderlich sind: einer für die Entwicklung, der in Firebase eingerichtet wird, und ein anderer für die Produktion, der ebenfalls in Firebase eingerichtet werden muss. Das Problem hierbei ist, dass der Google Play Store tatsächlich einen Produktionsschlüssel erstellt, der den Entwicklungsschlüssel ersetzen muss. Ich konnte das auf keinen Fall wissen und verbrachte Stunden damit, herauszufinden, wo das Problem lag. Die Reparatur dauerte weniger als 30 Sekunden, nachdem ich herausgefunden hatte, dass nur die Schlüssel ausgetauscht werden mussten.
6. Schreiben: … das war wirklich eine Achterbahnfahrt. Das Hauptproblem bestand darin, einen Editor zu finden, der auf Mobilgeräten und Ionic funktioniert. Ich habe etwa 20 verschiedene Editoren ausprobiert und die meisten davon scheiterten auf Mobilgeräten, während sie im Web einwandfrei funktionierten. Einige haben die Tastatur nicht geladen, andere schreiben andere Buchstaben als die, die gedrückt wurden, und einige konnten einfach nicht installiert werden. Als ich schließlich eines fand, das funktionierte, kam es beim Tippen nur zu Verzögerungen, sodass es wirklich mühsam war. Zum Glück habe ich es mit einem anderen Editor, QuillJS(!) versucht, und es scheint besser zu funktionieren als erwartet. Das ist eigentlich der Editor, den ich zum Schreiben dieser Geschichte verwende. Diese Funktion verhinderte grundsätzlich die Veröffentlichung neuer Updates, da wir den Benutzern unbedingt das Schreiben in der mobilen App ermöglichen wollten.

Was mir gefallen hat?

Der gesamte Entwicklungsprozess war so cool und ich empfehle auf jeden Fall anderen Entwicklern, es auszuprobieren. Je mehr ich mit der App arbeitete, desto besser gewöhnte ich mich daran und fühlte mich mit dem Entwicklungsprozess vertrauter. Es war wirklich befriedigend, die App auf meinem Telefon zu sehen und durch alle Seiten zu navigieren. Das beeindruckendste Feature war für mich die Playlist/der Player, da es sich um etwas Organisches von HackerNoon handelt und eines der Hauptfeatures der App ist. Die Push-Benachrichtigungen waren die Funktion, die ich wahrscheinlich am meisten gelernt habe, da es sich um etwas völlig Neues handelte und ich sehen konnte, wie mobile Benachrichtigungen funktionieren, und dieses Wissen kann in Zukunft definitiv auf andere Funktionen angewendet werden.

Wenn Sie es noch nicht haben, laden Sie bitte die App herunter und teilen Sie Ihre Meinung in den Kommentaren ⬇️. ✌️

Hier ist die Apple-Version:

Hier ist die Android-Version: