退屈な API を美しくする

クリス・ホーガン
2023 年 5 月 24 日
分読み

皆さんの企業にも、役に立つ情報を持つバックエンドデータ API はいくつかあると思いますが、それを視覚化して理解し、さらには実用的なものにするための優れた方法はありません。最近、同僚の Tyler と私は、まさにそのようなシナリオに直面しました。

毎年3月に開催されるある大学バスケットボールの大きなトーナメント（ライセンス制限のため名前は伏せています）をテーマにした顧客向けイベントを開催しました。 Mendix、わずか数日で、この Sports Feed API のデータのみを使用して、

前提

イベント中に 100 つのバスケットボールの試合が行われます。参加者全員が、試合の勝者と勝利の差を予想できます。各試合の勝者と正確な差を選択した場合、満点は 25 点になります。勝者を間違えるとポイントは獲得できません。勝者を間違えても差が間違っていた場合は、その差の近さに応じて XNUMX ポイントが加算されます。

アプリは次の機能で構成されます。

メールアドレスで登録し、自撮り写真をアップロードする機能。
ゲームのリストと現在のスコア。
各ゲームを予測する能力。
ゲームのスコアが変わるたびに更新されるライブリーダーボードのビュー。
各参加者のゲームで獲得したポイントの内訳を確認する機能。

イベントは地元のパブで開催され、手元にノート PC を持っている人は誰もいませんでした。つまり、モバイルエクスペリエンスが最適な方法でした。また、アプリの使用時間はごく短いこともわかっていました。数時間しか使用しないアプリをダウンロードしたい人はいません。また、アプリを完成させるのに数日しかなかったため、アプリストアに公開する必要があるネイティブアプリは論外でした。

これが、プログレッシブウェブアプリ（PWA）のアプローチにつながりました。の Mendix ここでPWAを構築できます.

…そして満員 PWAドキュメントはこちら.

もう一つの興味深い工夫は、リアルタイムでリーダーを動的にトップにシャッフルするアニメーションリーダーボードの提案でした。これ用のウィジェットはすぐに使えるものではありませんが、 Mendixの React ベースのフレームワークにより、これを構築することができました。

私がアプリの UI に取り組んでいる間、同僚の Tyler がリーダーボードをまとめました。

アニメーション化されたリーダーボードの開発に関する Tyler の説明は次のとおりです。

プラグ可能なウィジェットジェネレーターを利用することで、このプロジェクトのためにリーダーボードウィジェットを組み立てるのは簡単だった。 Mendix ウィジェットはReactフレームワークに依存しているため、すぐに利用できる何千ものReactコンポーネントを組み込むことができます。この場合、スコアが変わったときにリーダーボードをアニメーション化したいと考えていたため、 React フリップツールキット私たちに代わって重労働をこなします。

望んだ効果を生み出すには、Flip ToolkitのFlipperとFlippedコンポーネントをPluggable Widget Generatorが提供するウィジェットテンプレートにプラグインするだけで、準備完了です。公開したいプロパティを指定するための小さなxmlを追加します。 Mendix Studio Pro を使用すると、最小限の労力でカスタムアニメーションリーダーボードウィジェットを展開できるようになりました。

詳細は以下をご覧ください。プラグイン可能なウィジェットをここで構築する.

使い方 Mendix チームサーバー、タイラーと私は開発に協力し、フィードバックのアイデアを提出し、すべての変更を追跡しながら、受け入れ環境と本番環境にシームレスに展開することになりました。 Team Serverの詳細については、こちらをご覧ください。.

ビルド

リーダーボードウィジェットを除き、アプリ全体はコードなしで構築されました。すべては Sports Feed API から始まりました。これを定期的に呼び出す方法が必要でした。これを実現するには、スケジュールされたイベント (TriggerSport_REST) がマイクロフロー EVT_Sport_REST (図 2) を XNUMX 分ごとに呼び出します。

トリガーイベントトリガースポーツ REST

図 2 - マイクロフロー EVT_Sport_REST — 図 2 – マイクロフロー EVT_Sport_REST

このマイクロフロー (図 2) は、アプリがシミュレーションモードであるかどうか (詳細は後述) を判断し、そうでない場合はスポーツフィードがアクティブかどうかを確認します。アクティブである場合は、スポーツフィード REST 呼び出しを実行する別のマイクロフロー (図 3) が呼び出されます。応答は、ゲームスコアの更新にも使用され、参加者の予測スコアの計算にも使用されます。

図3 - スポーツフィードREST呼び出し — 図3 – スポーツフィードREST呼び出し

楽しみ

早い段階で、アプリを適切にテストするには、ゲームアクティビティをシミュレートする方法が必要であることがわかりました。ランダムなゲームスコアを生成する簡単なマイクロフローを使用しました。アプリがシミュレーションモード (管理画面から設定) の場合、Sports Feed API の代わりにこのマイクロフローが呼び出されます。

シミュレーションマイクロフロー