hotel-compare

条件を選択してホテル情報を安い順に表示するアプリケーション

デモ

環境構築

frontend

前提

Node.js v20 以上のインストール

手順

ローカルで動作させる場合

1. 環境変数ファイルの作成

   • frontendディレクトリ直下に.env.localを作成。.env.exampleの内容をコピペする。

2. ローカルで開発サーバ立ち上げ

   • 以下コマンドでlocalhost:3000にアクセスできれば成功

$ cd frontend
$ npm install
$ npm run dev # 開発サーバー立ち上げ

backend

前提

Docker のインストール

手順

ローカルで動作させる場合

1. 環境変数ファイルの作成

   • backendディレクトリ直下に.envを作成。.env.exampleの内容をコピペする。

2. ローカルで開発サーバ立ち上げ

   • 以下コマンドでlocalhost:3000にアクセスできれば成功
   • 楽天の API を利用するためにアプリケーション ID を取得する
     • 参考サイト

$ cd backend
$ docker compose build --no-cache # ビルド
$ docker compose up # 開発環境立ち上げ
$ docker compose stop # コンテナ停止

デザイン

• figma

API 使用方法

★Rakuten API

概要

• クエリパラメータに基づいたホテル情報を取得する API。楽天 API のラッパー。

• リクエスト

⚠ 注意: 地域によっては detailClassCode は存在しない場合があります。存在する場合は必ず指定する必要があります。

• レスポンス

• レスポンス例

[
    {
        "hotelName": "ホテルグレイスリー札幌",
        "hotelInformationUrl": "https://img.travel.rakuten.co.jp/image/tr/api/re/pvonD/?f_no=635",
        "hotelImageUrl": "https://img.travel.rakuten.co.jp/share/HOTEL/635/635.jpg",
        "roomName": "■高層階エグゼクティブフロア■ツイン／喫煙・19平米",
        "planName": "★タイムセール：食事なし★【今だけ最大20％OFF】札幌駅徒歩1分＆地下街直結＋最大21時間ステイ",
        "reserveUrl": "https://img.travel.rakuten.co.jp/image/tr/api/re/IdsCY/?f_no=635&f_syu=12te&f_hi1=2024-08-24&f_hi2=2024-08-28&f_heya_su=1&f_otona_su=2&f_s1=0&f_s2=0&f_y1=0&f_y2=0&f_y3=0&f_y4=0&f_camp_id=5979611",
        "rakutenCharge": 11875,
        "total": 23750,
        "chargeFlag": 0
    }
 ]

★smallClass 取得 API

概要

• 目的地の中項目を取得する API。この API レスポンスを使用して、ホテル情報を取得する。

• レスポンス

• レスポンス例

[
    {
        "middleClassCode": "tokyo",
        "smallClassCode": "tokyo",
        "smallClassName": "東京２３区内"
    },
    {
        "middleClassCode": "tokyo",
        "smallClassCode": "nishi",
        "smallClassName": "立川・八王子・町田・府中・吉祥寺"
    }
]

★detailClass 取得 API

• 目的地の小項目を取得する API。この API レスポンスを使用して、ホテル情報を取得する。

• レスポンス

• レスポンス例

[
    {
        "detailClassCode": "A",
        "detailClassName": "東京駅・銀座・秋葉原・東陽町・葛西"
    },
    {
        "detailClassCode": "B",
        "detailClassName": "新橋・汐留・浜松町・お台場"
    }
]