---
# System prepended metadata

title: '[Log]_Live-Demo-1st_THE.F2E.2021'
tags: [real-time, draft]

---

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

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


![](https://img.shields.io/badge/Created_Date-07_Dec_2021-orange) 
- ![](http://img.shields.io/static/v1?logo=Pinboard&label=Edit&message=➦&style=style=flat) [![hackmd-github-sync-badge](https://hackmd.io/zUE2j3DhRrWDK52Zczq6mA/badge)](/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


---