# [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
---
Sign in with Wallet
Connect another wallet