The HackerNoon Mobile: 開発者の視点とワールドワイドライターのリリース [バージョン 1.9]

HackerNoon モバイル アプリ ( Appleで利用可能で、 Google の承認を長い間待っています) HackerNoon ライブラリ全体へのアクセスを増やすことを目的として、2023 年第 4 四半期にリリースされました。モバイル アプリは、アプリの主な目的の 1 つであるため、読者の増加を促進します。ウェブ上で行うほとんどすべてのことは、モバイルではパーソナライズされたエクスペリエンスが提供され、いつでもどこからでもアプリの主要機能を楽しむことができるため、より簡単になります。本日公開のリリース 1.9 は、これまでで最大の改善点であり、最も注目すべきは 12 の言語が利用可能になり、アプリ内でのライティング エクスペリエンスが向上したことです。世界的な作家に乾杯！

主な特徴：

1. 読む - 100,000 を超えるストーリー全体の HackerNoon ライブラリが利用可能です。
2. オーディオ プレーヤー プレイリスト - 記事を聞いて、お気に入りのストーリーを含むプレイリストを作成します。
3. 執筆 (新機能!) - ストーリーを作成し、人間の編集者に投稿する機能。
4. 投票とコメント - 最新のテクノロジー トレンドに投票し、議論します。

モバイル アプリでは、その日のトレンド記事が掲載されたTechBeat ページ、好きなトピックごとに厳選された記事が掲載されたキュレーション ページ、同じくトピックごとに記事を厳選したカテゴリ/タグ付きページなどのページも表示されます。この 1.9 リリースでは、間もなくアプリに翻訳と書き込みが追加されるため、アプリはさらに改善され続けています。

開発者の観点から見ると、モバイル アプリは非常に必要とされていました。これは、リリース前にほぼすべての HackerNoon 製品ミーティングで言及されました。何らかの理由で、多くの会話が次のような結果につながりました。

xy または z を実行するためのモバイル アプリがあれば良いでしょう。

開発者として、そして挑戦を愛する者として、私はモバイル アプリを構築するだけでなぜこんなにも難しいのかと常に自問していました。実際にやってみると、答えは思ったよりも簡単でした。

どうやって起こったのですか？

結局のところ、私は数年前にIonic Frameworkに出会い、興味深いと思っていましたが、実際にそれをテストするコードを書いたことはありませんでした。当時、このフレームワークは Angular でのみ動作していましたが、私がどちらかというと React 開発者であることを考慮すると、これがおそらく Angular を試してみようという私の決断に影響を与えたと思われます。当時、Ionic はそれほど人気がありませんでした。ハイブリッド アプリケーションを作成するというアイデアだけでも、多くの人の心には収まりませんでした。とにかく、あるとき、製品ミーティング中に彼らがモバイル アプリについて話していたので、私は Ionic を振り返ってみることにしました。なんと、彼らはそのフレームワークを Vue と React に拡張しており、どちらか、または私が非常に使い慣れているのです。

最初にフレームワークをインストールし、簡単な Android アプリを作成しました。手続きがとても簡単で分かりやすかったことに感銘を受けました。いくつかのコンポーネントをドロップするだけでモバイル アプリを作成できるというのは、考えるのがクレイジーですが、Ionic を使用すると、いくつかのコマンドを実行するだけで、iOS や Android を含む複数のプラットフォームでアプリをビルドできるようになりました。このフレームワークに本当に慣れていると感じましたし、その瞬間、私はこの課題に取り組むことができるという新鮮な気持ちになりました。この偶然はその後、最初の HackerNoon モバイル アプリの作成に関する新しいプロジェクトを目にしたときに起こりました。早速手に取って作業を始めました。

プロセス

まず、Linux マシンに Ionic をインストールし、新しいアプリを作成し、そのドキュメントのいくつかを調べました。開発を開始するには、次のマジック コマンドを実行します。 npm install -g @ionic/cli ionic start // create ionicserve // ローカルで実行 試した後、HackerNoon Web バージョンからこの新しいプロジェクトにコンポーネントを移動し始めました。数時間以内にいくつかのページを作成しました。 HackerNoon のデザイナー ( @Devans と @Kien ) は本当に素晴らしい仕事をして、すべてを一致させ、アプリに優れたエッセンスと外観を与えました。そのほとんどは、React で開発するのと同じ方法で開発されましたが、Ionic は Typescript を使用している点が異なります。私の Linux マシンは、Android ベースのアプリのほぼ 50% を開発する良い出発点でしたが、iOS バージョンのテストに苦労していました。 Linux では、仮想マシンに Mac OS をインストールし、XCode をインストールして、IOS でアプリをテストするという回避策がありましたが、遅延と速度の低下に対処できませんでした。アプリの進捗に自信が持てるようになると、iOS 向けの開発を開始するために MacBook Pro をアップグレードすることを決定しました。私は今でも Linux が大好きですが、すべてのプラットフォーム向けに開発することの重要性をさまざまなレベルで示したので、これまでのところ、これは良い決断でした。そのため、新しい MacBook Pro でこのアプリを開発するのは本当に驚くべきことでした。

課題

これは克服すべき課題に満ちた学習体験でした。最も単純なバグでも、それを解明するのに何時間もかかりました。幸いにも、行き詰まったときは毎回記録し、次回同じことが起こらないようにしました。このプロジェクトの主任開発者である私は、アプリのインフラストラクチャに関していくつかの難しい選択をし、API 全体を構築し、同時に Ionic を学習してそれに慣れる必要がありました。主な課題は次のとおりです。

1. デバッグ/テスト:すべての開発者は、あらゆるレベルのアプリケーションを開発する際にテストがいかに重要であるかを知っています。モバイル アプリに取り組むとき、私は最初に Web 上で開発を始めました。実際、モバイルでテストするには毎回デプロイする必要があると思っていました。 Ionic にはモバイルではなくローカルでテストする方法があることを知らなかったため、少し時間を費やしました。したがって、ほとんどの場合、CSS または一部のイベント ハンドラーは同じ実装ではないために壊れます。モバイルでローカルにテストした後は、プロセスがより流動的になるためです。
2. 通知: 初めてモバイル アプリの作業を開始したとき、通知に使用できる 2 つの興味深いプラグイン、つまりローカル通知とプッシュ通知に気づきました。ローカル通知は、バックエンド サーバーと対話せずに、アプリ上でローカルに管理される通知です。私は自動的に、ローカル通知を実装するのが適切かつ迅速であると考えたので、非常に簡単に実装しました。しかし、それは私たちが探していたものではありませんでした。プッシュ通知が最適な方法でしたが、実装が少し難しく、追加のセットアップとバックエンド サーバーが必要でした。もう少し送信したい場合もありますが、毎日正午に 1 つの通知を送信するだけでシンプルにしています。モバイル アプリを持っており、通知を受け入れた場合は、その日の HackerNoon のトップ記事に関するこの種の通知を受け取るはずです。
3. プレイリスト/プレーヤー: これはアプリの主な機能の 1 つです。構築するのは楽しいですが、多くの機能が必要なため、デバッグするのは苦痛でした。すべてのボタンが想定どおりに機能することを確認するのは、テスト時に時間がかかりました。モバイル上で複数のオーディオ プラグインを試してみたので、ストーリー オーディオ プレーヤーを構築するのは奇妙でした。私が遭遇した主な問題は、プレーヤーを構築したものの、オーディオが再生されないか、オーディオの品質が非常に悪かったことでした。場合によっては、オーディオは開発モードでは機能しても、実稼働モードでは機能しないことがあります。実際に機能したのはネイティブの Audio API でした。その後は簡単で、ソース URL を渡してアクション ボタンを追加するだけです。プレイリストを作成するにはストーリーをデータベースに保存するだけなので、プレイリストはそれほど難しくありませんでした。プレイリストの順序、音声の変更、並べ替え、ストーリーのグループ全体をプレイリストに追加する機能などの機能は、実装するのが本当に素晴らしかったです。おそらく将来的には、他の人が何を聴いているかを、もちろん彼らの懸念も含めて確認できる公開プレイリストができるようになるかもしれません。現在の私のプレイリストは次のとおりです。
4. Ionic アップデート vs iOS アップデート vs Xcode アップデート:これが最もイライラする部分だったと思います。非常に優れたバージョンが 100% 動作しているのに、ドーンと動作しなかったり、ロードされなかったり、ログに記録されなかったりする場合です。 Ionic で入力フォームが動作していたのを覚えていますが、その後 Ionic バージョンをアップグレードすると入力イベントが動作しなくなり、エラーがバックエンドにあるのではないかと思いました。または、アプリをテストしてから、携帯電話を更新し、その機能が Apple によってサポートされなくなったため、Safari でログが表示されなくなったことに気づきました。または、アプリの新しいバージョンをビルドしようとしましたが、xcode が更新され、コードで何かを変更する必要があるために失敗しました。それらは本当にイライラする瞬間であり、時間がかかりました。少なくとも、それは開発中にのみ起こりました👍。
5. Android での Google ログイン:これはアプリのバグの 1 つであり、Android ユーザーは文字通り Google メソッドを使用してログインできませんでした。これは本番環境で発生したため、とんでもないバグでした。それは非常に単純ですが、モバイル開発に関しては学習プロセスの一部でもありました。 Google ログインには 2 種類のキーが必要であることがわかりました。1 つは Firebase で設定される開発用キー、もう 1 つは Firebase で設定する必要がある本番環境用です。ここでの問題は、Google Play ストアが実際に開発キーを置き換える必要がある製品キーを生成することです。私にはそれを知る術がなく、何が問題なのかを理解するのに何時間も費やしてしまいました。キーを交換するだけで済むことがわかってからは、修理に 30 秒もかかりませんでした。
6. 執筆中: …本当にジェットコースターでした。主な問題は、モバイルと Ionic で動作するエディターを見つけることでした。約 20 種類の異なるエディタを試しましたが、そのほとんどがモバイルでは失敗しましたが、Web では完璧に動作しました。キーボードを読み込まないものもあれば、押された文字とは異なる文字を書き込むものもあり、インストールできないものもあります。ようやくうまくいくものを見つけたとき、入力中に夕食が遅くなり、本当に退屈でした。ありがたいことに、別のエディタ QuillJS (!) で試してみたところ、予想よりもうまく機能しているようです。実はこれが私がこの記事を書くために使っているエディタです。ユーザーがモバイル アプリに書き込みできるようにしたかったため、この機能は基本的に新しいアップデートがリリースされないようにしていました。

私が気に入ったものは何ですか？

開発プロセス全体がとてもクールだったので、他の開発者にもぜひ試してみることをお勧めします。アプリを操作すればするほど慣れてきて、開発プロセスにもっと慣れてきました。携帯電話でアプリを確認し、すべてのページをナビゲートできるのは本当に満足でした。私にとって最も印象的な機能は、HackerNoon によるオーガニックなものであり、アプリの主な機能の 1 つであるプレイリスト/プレーヤーです。プッシュ通知は、まったく新しいもので、モバイル通知がどのように機能するかを知ることができたので、おそらく私が最も学んだ機能であり、そのような知識は将来的に他の機能に確実に適用できるでしょう。

まだお持ちでない場合は、アプリをダウンロードしてコメント⬇️でご意見を共有してください。 ✌️

Apple バージョンは次のとおりです。

Android バージョンは次のとおりです。