iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
4
Modern Web

JavaScript 初心者筆記系列 第 30

JavaScript 初心者筆記: 實作旅館訂房網站心得 - 第 2 屆 The F2E 第六關

今天就是完賽日了,其實我大可寫一個「後記」就結束這一回合(畢竟有前言了有後記也不奇怪嘛),但是我還是決定要善始善終,所以我今天要分享的是今年參加 The F2E 精神時光屋練功活動的第六關通關心得。

為何是第六關?最直接來說當然是因為其他關卡對我來說太難了 XD,但反過來說,這一關很適合剛學完基礎 JavaScript 的人練功,所以我選擇分享這一關,正好是運用了過去這些日子我的筆記中所記錄的技術。

醜話先說在前頭,我並沒有把完整的功能做出來,但這也可以讓一些跟我程度差不多的初心者知道,上完基礎 JS 課之後可以做到什麼程度?

以下我將分享我在實作題目時的心得,包括開發流程、HTML & CSS 複習、對一些 JavaScript 基本概念的再認識、目前還沒掌握的技術,以及結語。

好的,那麼,正文開始。


先上 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 來處理並排跟間隔
  • 裁切圖片的方法
  • 游標滑過時隱藏區塊會浮上來的小動畫

JavaScript

這個部分最一言難盡了。我必須說我真的是土法煉鋼,一張網頁就一個 .js 檔,會這樣管理是因為六個房型都有各自的 ID,要帶入單一房型介紹的話,API 後面一定要改成相對應的 ID,所以我想這樣應該是最直觀的方式了吧。

在 JS 部分,我運用的技術大概有幾個:

  • AJAX
  • 把所有內容都放在 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 基礎。

希望不久的未來,這些目前難倒我的問題,都能夠迎刃而解。


30 天的旅程結束了,但是我的前端勇者之路還在進行,感謝大家陪我一段,我們下次(?)再見(揮手)~


上一篇
JavaScript 初心者筆記: AJAX - post 與傳送格式
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
SunAllen
iT邦研究生 1 級 ‧ 2019-10-01 10:11:33

恭喜完賽!/images/emoticon/emoticon42.gif

Grete Ma iT邦新手 5 級 ‧ 2019-10-01 10:14:25 檢舉

留言神速!謝謝你~

0
廖洧杰
iT邦高手 2 級 ‧ 2019-10-01 10:12:11

恭喜完賽!(撒花

Grete Ma iT邦新手 5 級 ‧ 2019-10-01 10:15:43 檢舉

謝謝老師!!!也恭喜老師勇奪流量排行榜第一名XD

0
阿展展展
iT邦好手 1 級 ‧ 2020-03-06 16:54:08

恭喜完賽 \0.0/

Grete Ma iT邦新手 5 級 ‧ 2020-03-07 18:58:56 檢舉

謝謝你 :D

我要留言

立即登入留言