前のパートに戻る 完了して次のパートへ  

  1-1 作成するサービスの全体像を理解する

アーキテクチャの全体像として、まずはこちらの図をご覧ください。



この図を解説します。

フロント(クライアント)側(図の一番左)


フォームで入力された「日付・ゴルフ場までの所要時間」などの検索条件をもとに API へリクエストし、API から受け取った「条件に合ったゴルフ場」を一覧表示します。

React で書いたコードを AWS Amplify を使用して公開しています。

バックエンド側(バッチ処理)(図の一番右)


レスポンスタイムを短縮するためにバッチ処理を作成します。

ゴルフ場を取得してから Google MAP API で一つ一つ所要時間を算出すると時間がかかってしまうため、予め関東にあるゴルフ場と所要時間がセットになったデータを DB に保存しておきます。

バッチ処理では、以下の2つの処理を行い、ゴルフ場と所要時間をセットにして DB に保存します。

  1. Rakuten API で関東エリア内のゴルフ場一覧を取得
  2. 取得したゴルフ場から東京駅や横浜駅までの車での所要時間を Google Map API を使って算出

AWS Lambda 上で Ruby のコードを実行しています。情報の取得には Rakuten API と Google MAP API を使用し、DB には AWS の DynamoDB を使用しています。

バックエンド側(API)(図の中央)


API では、まずはじめにフロント側から受け取った「日付・ゴルフ場までの所要時間」などの検索条件をもとに Rakuten API で「予約可能なゴルフ場」を取得します。

次に、上記で取得した「予約可能なゴルフ場」とバッチ処理で DB に保存しておいた「ゴルフ場とその所要時間」のデータを使って条件がマッチしたゴルフ場だけをフロント側へ返します。

第 2 章でフロント側、第 3 章でバックエンド側を作ります。

早速作っていきましょう!

議論

0 質問

このコースの評価は?