できるだけお金をかけずに宿泊施設の予約システムを作ってみた
作ったもの
https://github.com/dashi296/nextjs-booking
https://nextjs-booking-sample.netlify.app/
要件
宿泊施設のホームページを構築し、下記を満たす予約システムを構築する
- カレンダーを表示し、予約が埋まっている日程は色を変える
- 予約にはチェックイン日時、チェックアウト日時をPOSTする。予約直後にカレンダーに予約を反映する
- airbnbやbooking.comなどの別サービスで予約が発生した場合もある程度、カレンダー上で同期したい。
構成
Next.js
フロントエンドはもちろん、API Routesを使ってバックエンドも構築。
Vercelは商用利用の場合、$20/month かかるので 商用利用でも無料で運用できるNetlifyにデプロイした。
https://nextjs.org/
Google Calendar
データベース代わりに予定を管理するために使用。
airbnbやbooking.comのicalのURLをカレンダーに設定することで、Google Calendar上にて予約の一元管理が可能。
GCPのサービスアカウントを使うとGoogle Calendar API経由で予約を取得・作成することが可能。
https://calendar.google.com/
Upstash
サーバーレスなRedisのデータベースを提供するサービス。
Google Calendar APIはレスポンスが早くないので定期的にGoogle Calendar APIから予約一覧をキャッシュし、素早い予約一覧のレスポンスを実現させるために使用
https://upstash.com/
設計
要件を満たすためにAPI Routesでは下記の３つの処理を行うエンドポイントを実装することにした。
- 予約一覧取得
- 予約一覧更新（定期的に叩かれるエンドポイント）
- 予約
処理図解
予約一覧取得
素早いレスポンスを実現するためにUpstashから予約一覧を取得する処理のみを行う
予約一覧更新
予約一覧取得で取得するデータを更新するエンドポイント
今回はGoogle Cloud Schedulerで5分に1回更新するようにしている。
予約
予約時はGoogle Calendar API経由で予約を作成。
作成時に予約した情報が返されるので、その情報を使ってUpstashのキャッシュを更新し、予約直後でも自分の予約が返されるようにした。
問題点
- 現在のGoogle Calendarはデフォルトの設定では
airbnbやbooking.comなどのicalを使った予約の同期を1日に1回程度しか実施しない。
下記のリポジトリのスクリプトを使うことでその頻度を上げられるらしい。要実証。