實作旅館訂房網站心得
由六角學院主辦的第二屆 The F2E 前端修練精神時光屋，第六週的題目是實作一個旅館訂房網站，主辦方提供 API 讓參賽者導入專案之中。
從去年投入前端技術的學習開始，就常常聽到 The F2E 精神時光屋的大名，但一直覺得自己目前的程度可能還無法參加。還好終於被我遇到一個主題，讓我在 JavaScript 基礎課程中學到的技術能派上用場。
以下我將分享我在實作本週題目時的心得，包括開發流程、HTML & CSS 複習、對一些 JS 基本概念的再認識、目前還沒掌握的技術，以及結語。
DEMO（用手機會跑版）
閱讀題目說明
讓我們先從活動官網的題目說明開始。因為本次主題很顯然是以接 API 為練功主軸，所以我就先了解一下有哪些 API 以及使用的方法。
四支 API 分別為：
- [GET] 取得所有房型
- [GET] 單一房型細節
- [POST] 預約房型
- [DELETE] 清除所有預約
在此我第一次知道測試 API 的工具—Postman，還特地搜尋了使用方法；也是第一次使用 API TOKEN，不過是用在 Postman 裡的 Authorization，後來實際要 AJAX 時還卡了一下。經過一番摸索，發現 Postman 裡面有一個 "Code" 按鈕，按下去可以直接複製 JS XHR 語法。
// 如何獲得 API 授權
xhr.setRequestHeader("Authorization", "Bearer xxxxxxxxxxxxxxxxx(自己的 TOKEN)");挑設計稿
開始實作前當然要挑一張順眼（做得出來）的稿子嘛，我很快地就決定採用建良大大的稿，畫面簡潔俐落，能夠讓我腦中馬上就浮現使用動線以及該如何切版，除此之外我也很喜歡深藍色主題。
順帶一提，真的不得不讚美一下 F2E 的平台，上面真的是匯集了各路好手，有些設計稿看起來真的是巧奪天工，這時真的恨自己的技術還不足以做一些炫砲的動態效果 QQ
切版
根據題目說明以及設計稿，這個訂房網站的結構主要就是分成一個首頁及六個房型介紹頁。
由於首頁要展示的房型資料及個別房型的介紹資訊都是由 API 提供，所以 HTML 部分非常簡單，分出頁首、內容、頁尾、版權聲明就好，個別房型頁有再多一個表單元素，其他大部分都是用 JS 將 API 資料渲染到網頁上。
CSS 部分我是用 SASS 寫的，想到年初的時候在做 RWD 最終作業第一次使用 SASS 管理多頁式網站的樣式，就覺得這次應該也很適合。我使用 VS Code 內部的 Live Sass Compiler 當作編譯器，檔案的結構如下：
all.scss — 專門匯入所有的 .scss 檔
_mix.scss — 放變數（字型、字體大小、顏色等等）及 mix-in（常用或難記的語法）
_reset .scss— 就只放 CSS-Reset
_index.scss — 首頁的樣式
_layout.scss — 放所有網頁共通的樣式（頁首、頁尾之類的）
_module.scss — 專門放表單的樣式
_room.scss — 六個單一房型介紹頁的樣式
在寫樣式時，我學到了：
- 複習浮動跟清除浮動
- 運用了還沒真正學過的 flex 來處理並排跟間隔
- 裁切圖片：父元素 overflow: hidden + 設定寬高；子元素 img 的 width: 100% + transfrom: translateY(-xxx px)
- 游標滑過時隱藏區塊會浮上來的小動畫
JavaScript
這個部分最一言難盡了。我必須說我真的是土法煉鋼，一張網頁就一個 .js 檔，會這樣管理是因為六個房型都有各自的 ID，要帶入單一房型介紹的話，API 後面一定要改成相對應的 ID，所以我想這樣應該是最直觀的方式了吧。
在 JS 部分，我運用的技術大概有幾個：
- XMLHttpRequest
- 把所有內容都放在 xhr.onload 的匿名函式內，因為我發現我真的無法在該函式外讀取區域變數
- 把 API 的資料取出來之後，再依自己需求拿其中的一小部份另外存成陣列
- 事件監聽
- 函式內跑 for 迴圈，用 innerHTML 渲染字串
- 有做出初始畫面
- 將要渲染的 HTML 區塊拆開，由不同函式去渲染（也就是模組化的概念）
- for in 迴圈：此語法可以讀出一個物件中所有屬性與值，我用來讀單一房型提供的設施及服務項目，並將值另外存成一個陣列，跟下述的 if 判斷式併用
- if 判斷式：設施及服務共有 12 個項目，於是我選取了 12 個 DOM，再用12 個 if 逐一將 DOM 跟上述的陣列做對照，如果 true 就動態加樣式
- jQuery 燈箱插件、Fontawesome
開發遇到的困難
最大的困難就是，我找不到合適的 datepicker 套件，而且我也不知道如何處理使用者輸入的時間值。我本來有找到一個勉強可以用的原生 JS datepicker 套件，說勉強是因為它的主題顏色改不動，但最後讓我放棄的點是因為用它選擇入住時間區間的話，會長這樣：
2019–08–23 – 2019–08–25但是回傳給後端的資料要長這樣：
"2019–08–23","2019-08-24","2019-08-25"兩種表現方式之間，我不知道要如何轉換 orz
其次就是我對 Date 物件不熟，不知該如何運用。
總之，不知道如何處理「時間」是我最後沒有實作出下訂功能的主因。
要不然我原本的構想感覺應該可行：
1. 各欄位取值
2. datepicker 取值 -> 區分假日價跟平日價並加總
3. 事件監聽：所有欄位都沒空白 -> 按下按鈕啟動函式 -> 執行 AJAX 傳送資料 -> 執行成功或失敗就回傳訊息
看來我還在 "know" 的階段，還不懂得 "how"，嗚嗚嗚....
上傳到 Github
最後我做出的成品獨缺下訂功能跟取消預定，但我還是決定上傳了。多虧我真知灼見趕著把 Git 學起來，現在才有辦法把網頁分享給大家觀看。雖然操作上還不是很熟練，必須搭配自己做的筆記一個指令一個動作，不過相信之後多上傳幾次應該就會熟了。
結語
我中途卡住的時候也有去看 Kuro 大大的直播存檔，Kuro 行雲流水地解說他做好的成品真心讓我佩服不已，難怪洧杰老師稱他為大神，然後看完之後我只覺得還不會 Vue 真的很吃虧，不懂 Vue 的我根本聽不懂直播，以後學到那邊一定要回頭再看一次這個直播。
投稿時也發現大部分開發者也是用 Vue，我只能看著流口水^^
不過想到洧杰老師在活動開始前說過，精神時光屋不分程度都可以參加，因為活動的目的就是要讓參加者練功，有練到功就達成目的了。想到這番話，就讓我心裡比較安慰，至少我有複習到 Layout、SASS、運用剛學到的 JS 基礎。
希望不久的未來，這些目前難倒我的問題，都能夠迎刃而解。
