# 🏅 Day 24 - 實作預約房型功能
## 今日學習目標

- 理解最終任務房型預約功能的完整流程
- 將外部套件與 Nuxt3 整合，並使用 [旅館 API](https://nuxr3.zeabur.app/swagger/#/) 實作預約功能

## 前言

在前面 Day1 ~ Day23 的學習中，我們已經掌握了 Nuxt3 的基礎知識，包括動態路由、API 請求、middleware 以及插件系統等。今天的學習將整合這些知識，透過五個步驟拆解預約流程，幫助大家理解如何規劃和實作最終任務的房型預約功能。

### 使用的 API

今天的實作將使用以下 API ，每個 API 所需的參數和請求方法可以閱讀 [API 文件](https://nuxr3.zeabur.app/swagger/#/) :

- 使用者登入

API URL  : https://nuxr3.zeabur.app/api/v1/user/login
請求方法 : POST

請求資料格式:
{
  "email": "[e-mail]",
  "password": "example"
}

- 檢查登入狀態

API URL  : https://nuxr3.zeabur.app/api/v1/user/check
請求方法 : GET

// 請求的 headers 需要夾帶 Authorization
headers:{
 Authorization
}

- 取得房型列表

API URL  : https://nuxr3.zeabur.app/api/v1/rooms/
請求方法 : GET

- 取得房型詳細資料

API URL  : https://nuxr3.zeabur.app/api/v1/rooms/{roomId}
請求方法 : GET

需要在房型 URL 帶入房型 id 

- 新增訂單

API URL  : https://nuxr3.zeabur.app/api/v1/orders/
請求方法 : POST

請求資料格式，包括預訂的房型 id、入住的起始和結束日期、入住人數與訂房人資訊
{
  "roomId": "65251f6095429cd58654bf12",
  "checkInDate": "2023/06/18",
  "checkOutDate": "2023/06/19",
  "peopleNum": 2,
  "userInfo": {
    "address": {
      "zipcode": 802,
      "detail": "文山路23號"
    },
    "name": "Joanne Chen",
    "phone": "0912345678",
    "email": "[e-mail]"
  }
}

// 請求的 headers 需要夾帶 Authorization，在登入的狀態才能新增訂單
headers:{
 Authorization
}

- 取得訂單詳細資料

API URL  : https://nuxr3.zeabur.app/api/v1/orders/{ orderId }
請求方法 : POST

把建立訂單後會產生訂單的 id，需要在 URL 帶入房型訂單 id
// 請求的 headers 需要夾帶 Authorization，在登入的狀態才能新增訂單
headers:{
 Authorization
}

## 預定房型的流程拆解

### 步驟一. 規劃對應功能的路由

首先，觀察 [設計稿](https://www.figma.com/design/6pTFrdb5a1lYKmMnFeT5Mf/%E5%85%AD%E8%A7%92-Project-%2F-%E9%85%92%E5%BA%97%E8%A8%82%E6%88%BF%E7%B6%B2%E7%AB%99) 規劃各頁面合適的路由路徑，將不同頁面的功能進行拆分：

- `/login` : 登入會員頁面。
- `/rooms`: 房型列表頁面，展示所有可預訂房型。
- `/rooms/{roomId}`: 房型詳細頁面，顯示具體房型的詳細資訊。
- `/rooms/{roomId}/booking`: 預訂該房型的表單頁面，用戶可以填寫訂房人資訊並送出預約。
- `/booking/{roomId}`: 預訂成功頁面，顯示已完成的訂單資訊。

### 步驟二. 實作房型列表頁

在 `/rooms` 路徑下使用 `useFetch()` 或 `useAsyncData()` 取得並顯示所有可預訂的房型。此外，房型的多圖展示可使用 [Swiper.js 套件](https://swiperjs.com/) 來實現輪播效果。

<aside>
💡 Nuxt3 知識點 :

1. [資料獲取](https://nuxt.com/docs/getting-started/data-fetching) ( GET )
2. [插件系統 ( Plugin )](https://nuxt.com/docs/guide/directory-structure/plugins#vue-plugins)
</aside>

### 步驟三. 實作房型詳細頁面

使用者點擊房型列表中的某個房型後，會進入房型詳細頁面 `/rooms/{roomId}`，透過房型 id 顯示該房型的詳細資訊。當使用者決定要預訂時，可以點擊入住或是退房輸入框，使用 [VCalendar 套件](https://vcalendar.io/) 進行日期選擇。

選定入住期間後，點擊 “立即預訂” 按鈕進入預約房型頁面，並將房型詳細資訊、入住期間和人數透過狀態管理工具傳遞給預約房型頁。

<aside>
💡 Nuxt3 知識點 :

1. [資料獲取](https://nuxt.com/docs/getting-started/data-fetching) ( GET、POST )
2. [巢狀路由與路由方法](https://nuxt.com/docs/getting-started/routing)
3. [插件系統 ( Plugin )](https://nuxt.com/docs/guide/directory-structure/plugins#vue-plugins)
4. [狀態管理](https://pinia.vuejs.org/ssr/nuxt.html) (Pinia)
</aside>

### 步驟四. 實作預約房型頁 ( 確認訂房資訊 )

在房型詳細頁面點擊 “立即預訂” 按鈕後，會進入 `/rooms/{roomId}/booking` 頁面確認訂房資訊並提供填寫訂房人資訊的表單。在顯示頁面內容前，需要先確認操作者是否為已登入狀態，若為 “未登入狀態” ，需要將頁面重定向至 `/login` 登入頁面。

在已登入的狀態下點擊 “確認訂房” 按鈕將會 [送出預約請求](https://nuxr3.zeabur.app/swagger/#/Orders%20-%20%E8%A8%82%E5%96%AE/post_api_v1_orders_)。預約成功後頁面會切換至預約成功頁面。

<aside>
💡 Nuxt3 知識點 :

1. [資料獲取](https://nuxt.com/docs/getting-started/data-fetching) ( GET、POST )
2. [巢狀路由與路由方法](https://nuxt.com/docs/getting-started/routing)
3. [插件系統 ( Plugin )](https://nuxt.com/docs/guide/directory-structure/plugins#vue-plugins)
4. [狀態管理](https://pinia.vuejs.org/ssr/nuxt.html)
5. [表單驗證](https://vee-validate.logaretm.com/v4/integrations/nuxt/)
6. [middleware](https://nuxt.com/docs/guide/directory-structure/middleware)
7. [取得 cookie](https://nuxt.com/docs/api/composables/use-cookie)
</aside>

### 步驟五. 實作預約成功頁面

完成預約後，進入 `/booking/{orderId}` 頁面，根據訂單 id 獲取該訂單的詳細資訊並顯示在畫面上。在顯示頁面內容前同樣也需要驗證登入狀態，將未登入的操作者重定向回 `/login` 登入頁。

<aside>
💡 Nuxt3 知識點 :

1. [資料獲取](https://nuxt.com/docs/getting-started/data-fetching) ( GET )
2. [巢狀路由與路由方法](https://nuxt.com/docs/getting-started/routing)
</aside>

## 題目
請 fork 這一份 [模板](https://github.com/jasonlu0525/nuxt3-live-question/tree/day24-booking)，根據今日學習的內容完成房型預約功能。具體需求如下：
- 當使用者進入 `/rooms/{roomId}/booking` 頁面，需取得該房型的詳細資訊、入住期間和人數並檢查登入狀態。若未登入需導向至 `/login` 頁面。
- 完成 `/rooms/{roomId}/booking` 頁面的表單驗證與訂房功能。
- 訂房成功後，跳轉至 `/booking/{orderId}`，取得訂單資料並顯示在畫面上。

## 回報流程

將答案上傳至 GitHub 並複製 GitHub repo 連結貼至底下回報就算完成了喔 !
解答位置請參考下圖（需打開程式碼的部分觀看）


<!--

解答 : https://github.com/jasonlu0525/nuxt3-live-answer/tree/day24-booking

-->

回報區
---
| # | Discord | Github / 答案 |
| --- | ----- | ----- |
| 1 | dragon |[Github](https://github.com/peterlife0617/2024-nuxt-training-homework01/tree/feature/day24)|
| 2 | Johnson |[Github](https://github.com/tttom3669/2024_hex_nuxt_daily/tree/day24-booking)|
| 3 | Steven |[Github](https://github.com/y7516552/nuxt3-live-question/tree/day24)|
| 4 | Rocky | [Github](https://github.com/WuRocky/Nuxt-Day24.git)|
| 5 | hsin yu |[Github](https://github.com/dogwantfly/nuxt3-daily-task-live-question/tree/day24-booking)|

<!--
| --- | --- |[Github]()|
-->