# [Log]_Live-Demo-1st_THE.F2E.2021

###### tags: `real-time`, `draft`

-  [](/zUE2j3DhRrWDK52Zczq6mA?both)

---

:::danger

- 今日錄影檔大概會在下禮拜的 20 日左右傳給同學

- 明年 1 月 Live-Demo
- 洧杰老師徵求 html + CSS 提供志願者
- 要找有掛【CC BY】授權的設計稿來做

- **晚上預定在 20:00 開場**
- 晚上才加入不會影響
- 因為是講解功能

:::

---

[TOC]

---

:::info

- <span style="color: #000;
font-weight: bold;
background: #76b0f3;
border-radius: 8px;
padding: 3px 2px;">【Week10.SP1】</span>
- **【學習重點】示範思考流程**
- 如何把 UI 設計稿轉換為前端的程式碼

- 【**主要連結**】
- **【課堂講義】**
https://hackmd.io/@hexschool/Bk9PkfsYK [target=_blank]
- **【提問區】**
https://app.sli.do/event/n1x7abih/live/questions [target=_blank]

:::

:::warning
- **預計 tag**
- ==`#TODO`==：待補完
- ==`#QA`==：問答

:::

---
---

## Summary

---
---

## Round-AM
> [time=Tue, 07, Dec, 2021 10:00 11:55] [color=#EB9486]

- ==`#TODO`==

---

## Round-PM
> [time=Tue, 07, Dec, 2021 14:00 17:00] [color=#EB9486]

### 【滿版功能】

- 通常用在旅遊網等等
- 需要畫面很華麗的情境

#### 【技巧】

- CSS
- `100vh-67px`

- ==`#TODO`==

---

### 功能 2【縣市篩選】

> - 【講義位置】
> - https://hackmd.io/@hexschool/Bk9PkfsYK#功能

#### 【沒有圖片】

- 【方法 1】
- ```undefined``` 時：提早 ```return```

- 根本解法：請廠商提供圖片

- ==`#TODO`==

- 有時候就會遇到無法預料的事件
- 要去思考如何解決

- ==`#QA`==: 如果有網址、但圖片卻無法顯示
- 2 種面向
- 1. - ==`#TODO`==
- 2. 先繪製畫面
- 偵測 `src="undefined"`
- 也有可能是【系統錯誤】
- 如果是 2,000 張只錯幾張
- 請廠商檢查圖片、或格式
- 2,000 張錯 1,900
- 請後端檢查路徑

---

#### [03:00] QK-time

#### [03:10] ==`#QA`==: 分頁的作法
- 2 種思路
- 1. 看後端有沒有【筆數的 API】
- 2. 一口氣撈回來
- **適合資料量較少**
- 例如有 100 筆
- 走訪 data 的時候
- 用 index 篩選
- `if (index >= startNum && index <= endNum)`

---

### [03:16] 功能 3【景點類別】class

- 2 種作法
- 1. 類別超多
- ex. PCHOME24
- 前期需要自己先去【整理資料、收集資料】
- 2. 後端有提供類別：固定的、已知的、常用的

#### 已知類別作法：埋屬性

- 寫死

<li><a href="#" data-categoly="className">...

- 監聽 list

- 因為項目是連結
- `e.preventDefault()`

- 防呆

if (e.target !== 'A') {
  return
}

- ==**【養成習慣】**== 先確認 API 正確，再寫程式
- 避免跑出奇怪的問題

- 網址寫錯：會回傳 eror-code-400
- 打錯字、分號、括號...

---

#### [15:33] 未知類別
##### 先透過 JS 整合資料

- 宣告 1 個空物件來存放撈回來的資料

- 預期內容：
- 屬性名稱：筆數

{
    cateName: int
}

const tourCate = {}
function init() {
    getAllTour()
}

function getAllTour() {
    axios...
}

- 或多或少會遇到撈回來的東西沒有值
- 就會得到 `undefined` 的屬性
- 原因：
- 1. 該筆資料類別裡面沒有放東西
- 2. 或是根本沒有寫上設定
- 所以需要先偵測、並提早 return 踢出去

- 顯示畫面
- 運用 `Object.keys` 得到屬性名稱的陣列
- 利用該字串當做索引值

#### [03:52] QK-time

---

### [04:00] 功能 4【內文換頁】

- 網頁結構

- 1. 主頁面：`index.html`

a href="page.html?id=xxx"
a href="page.html?id=xx2"
a href="page.html?id=xx3"
...

- 2. 子頁面：`page.html?id=xxx`

- 每個資料都有 `id`
- 利用 `id` 當做子頁面的參數

str += `<li>
    <a href="page.html?id="${item.id}>
        ${item.name}...` 

- `window.location.href`
- 取出網址字串

- `location.href.split('=')[1]`
- 取出 `id`

- 用 `id` 發請求抓出該筆資料、並顯示到子頁面裡面

- 除錯：`id` 沒抓到
- 1. F12
- 2. API check filter
- 格式要有 `$`

- ==`#QA`==：`filter` 可以設定多重條件嗎？
- 查詢文件：
- 有欸、可以用邏輯運算子
- 但通常是自己撈回來處理

- 其他關鍵字：【用 js 取得網址參數】

---

### [04:33] 功能 6【關鍵字搜尋】

#### 【功能】：利用關鍵字搜尋全部景點資料

- html

input text class="txt"
input btn  class="send"
ul         class="list"

- 先觀察 API 去選擇

- `filter`
- `contains`
- `name`

#### 【功能】：搜尋縣市

- html：新增下拉選單

select
    option

- 撈出來不確定是不是該城市的資料
- 字串新增顯示去補充：地址、城市...

- ==`#QA`==：如果沒有像 TDX 這樣提供完善的 API 可以過濾，如何實作搜尋功能？

- 自己製作功能

- 先撈出全部的景點
- 做字串比對
- `indexOf('keyword')`

- 走訪的時候去偵測
- `item.City == keyword && item.Name.indexOf(keyword) > -1`

- `includes`：通常用在陣列
- 但瀏覽器支援度較低

- 其他方法：正規表達式
- How-to:
- Google：`stackoverflow email validation`

#### [17:00] PM-END

---

## [20:00] Round-Night
> [time=Tue, 07, Dec, 2021 20:00 21:30] [color=#EB9486]

### 功能 5【活動日期】

- 關鍵字：`UNIX`、`timestamp`

- JS 語法：
- `+new Date("未來的時間")`：顯示未來的時間戳
- `+new Date()`：目前的時間戳
- `Date.now()`：目前的時間

- 利用`UNIX` 的特性來處理

- 用時間戳記錄日期時間，會是比較精準的方式

#### [20:18] 實作介面

- 流程步驟
- Part-I
- 先取得該地區資訊
- Part-II
- 再處理時間驗證

##### Part-I
- 宣告選擇器
- 1. 選單
- 2. 送出的按鈕
- 3. 顯示表單

- 監聽
- 取得選單的 value
- `axios`
- 取得資料後先印出
- `Name`
- `StartTime`
- `EndTime`
- `Picture.PictureUrl1`
- 篩選資料

- 注意：大小寫必須遵守 API 格式
- 否則抓不到資料還很難找錯誤QQ

##### Part-II

- 宣告選擇器
- `eventTime`

- 監聽
- 取得 `eventTime` value

- 區間驗證
- `selectTime >= startTime && selectTime =< EndTime`
- 陣列走訪改成驗證成功才印出資料

#### 【重構思考】

- 不好閱讀

selectTime > +new Date(item.StartTime) && selectTime < +new Date(item.EndTime)

- 方式 1
- 取出來指派給新變數

selectTime > startTime && selectTime < endTime

- 方式 2
- 把功能封裝到函式裡面
- 可以重複使用

function checkEventTime(thisTime, startTime, endTime) {
    if (selectTime >= startTime && selectTime =< endTime) {
        return true
    }
}

- 也可以

function checkEventTime(thisTime, startTime, endTime) {
    return (selectTime >= startTime && selectTime =< endTime)
}

- 函式的使用方法思考
- 1. 消除重複
- 2. 增加可讀性

- JS 在各家瀏覽器顯示出來都不太一樣
- 用套件比較方便、人家直接寫好惹

---

### [20:55] 功能 7【離自己位置比較近的景點】

- 剛好 TDX API 有提供這個功能

- MDN
- `navigator`
- `geolocation.getCurrentPosition`
- `latitude`
- `longitude`

- 但有時候抓不太準

- 測試 TDX API：`spatialFilter`
- `nearby(經度、緯度、公尺)`

- 若想要的功能沒有提供 API
- 把資料撈回來自己處理

- `getLocation()`
- 取得經緯度

- 把拿到的經緯度傳過去再印出資料
- `axios` URL：

nearby(
    ${Number(latitude)}, ${Number(lon)}, 3000
)

- 常見錯誤：經緯度寫反惹
- 而且不會噴錯誤訊息QQ

---