FuelBuddyのUAE B2B市場への進出には、専用のWebポータルが必要でした。法人顧客が必要としていたのは、小売の一般消費者向けフローではなく、フリート管理、一括発注、複数拠点への配送スケジューリングでした。私はこのポータルを最初のリポジトリから本番稼働まで構築し、フロントエンドのアーキテクチャとバックエンドのデータAPIの両方を担当しました。
作ったもの
- フロントエンドのアーキテクチャ: コンポーネント構成、クライアントサイドルーティング、法人向けワークフローのための一貫したデザインシステムを含め、アプリケーションをゼロから構築しました。
- B2Bワークフロー: 複数ステップの発注フォーム、一括燃料スケジューリングのフロー、そして発注履歴とウォレット履歴をグラフとテーブルで表示する情報密度の高いフリートダッシュボードを構築しました。
- 決済とオンボーディング: ウォレットのチャージと発注の支払いにStripeを統合し、法人アカウント向けに電話番号ベースのOTP登録を実装しました。
- エンドツーエンドの機能: Hasura GraphQLエンジン上にCRUD APIを構築してUIの状態と接続し、インストール可能なPWAとしてアプリを出荷し、ビジネスバリデーションのルールを本番稼働まで一貫して扱いました。
なぜ意味があったか
このポータルをリリースしたことで、FuelBuddyはドバイの法人顧客向けに専用のWebプラットフォームを持てるようになりました。一括燃料発注が効率化され、同社の地域展開を後押ししました。
実際に出荷されたもの
一括発注と一括シフトスケジューリングは、プレースホルダーのフォームではなく、Hasuraに対する実際に動くミューテーションです。以前のレガシー版を置き換えたダッシュボードも同様で、両方ともコードベースには残っていますが、実際に稼働しているのは新しい方です。認証は後付けの独立した権限レイヤーではなく、Hasura自身のJWTクレーム(トークンから直接読み取るx-hasura-default-role)を通じて行われます。
CRUDだけでなく決済とオンボーディングも
ウォレットのチャージと単発の発注決済はどちらもStripe(@stripe/stripe-js、vue-stripe-js)を通じて処理され、単発の注文とウォレット取引にはそれぞれ専用の決済ルートがあります。登録は単純なメール/パスワード方式ではなく、電話番号ベースのOTP認証(vue3-otp-input、国際電話番号のフォーマットはvue-tel-inputが担当)を通じて行われ、これは気軽なサインアップではなく法人のフリートアカウント向けに作られたポータルであることと一致しています。
レスポンシブなだけでなくインストール可能
このポータルはvite-plugin-pwaとWorkboxを通じてインストール可能なProgressive Web Appとして出荷されており、autoUpdateのサービスワーカー登録により、フリートマネージャーはホーム画面に追加でき、手動での再インストールなしに新しいデプロイを受け取れます。
データモデルと規模
- スキーマのコード生成から作られたGraphQL SDKは31,000行を超え、その場しのぎのクエリの寄せ集めではなく、本当に大規模で型付けされたAPIサーフェスです。
- データ取得はApolloやurqlのクライアントを介さず、
graphql-requestを通じてHasuraに直接アクセスします。 - フリートダッシュボードは
vue3-easy-data-tableとvue-chart-3(Chart.js)でレンダリングされ、少数のサマリーカードではなく、実際の行数を伴うテーブルとグラフのために作られています。
Stack
Vue 3、Vite、状態管理にPinia、Hasuraに対してGraphQL Code Generatorと組み合わせたgraphql-request、決済にStripe、認証にFirebase、ダッシュボードにChart.js、オフライン/インストール対応にWorkboxを組み合わせたvite-plugin-pwa、テストにPlaywright。