---
# System prepended metadata

title: '[Log]_Live-2nd_THE.F2E.2021'
tags: [real-time, draft]

---

# [Log]_Live-2nd_THE.F2E.2021

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


![](https://img.shields.io/badge/Created_Date-21_Dec_2021-orange) 
- ![](http://img.shields.io/static/v1?logo=Pinboard&label=Edit&message=➦&style=style=flat) [![hackmd-github-sync-badge](https://hackmd.io/3wK2XpIPQ86a8MhxLnTslA/badge)](/3wK2XpIPQ86a8MhxLnTslA?both)

---

:::danger

- 3rd
    - https://hackmd.io/NnRXflOUS4WtC0iejCwb2g?both

- 今日來不及講解路線規劃
    - 會再補充錄影

**【預告今晚流程】20:00**
- 點選站點
- 會出現定位
- 接著跳出氣球訊息

【**白天的程式碼**】
- https://drive.google.com/file/d/1vq6mDFItxgniWUYh1SGIbcLKFI4M3zP4/view

:::

---
[TOC]

---

:::info

- <span style="color: #000; 
font-weight: bold; 
background: #76b0f3; 
border-radius: 8px; 
padding: 3px 2px;">【Week11.SP2】</span>


- 【**主要連結**】
    - **【課堂講義】**
https://hackmd.io/@hexschool/H1gqPRpqY [target=_blank]


:::


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

---
---

## Summary



---
---

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

- ==`#TODO`==

---


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

- 以實務為主


### 路線導航

#### Google Map

- 支援規則：URL + 經緯度
    - 好用、常用、簡單、最陽春


### [02:12] 實作路線規劃

- Step1
    - 取得資料存起來
    - `PositionLat`
    - `PositionLon`
- Step2 
    - 路線導航


- `Console.log` 不會騙你

- 有些業主會希望他的網站有導航功能
    - 就可以這樣善用 Google Map 的規則，給他外連過去


- ==`#QA`==：
    - 重點是座標
    - ==`#TODO`==


---

### [02:23] 定位

- 建議 API：
    - ![](https://i.imgur.com/k4MRbfc.png)
    - 比較即時 
    - 目的：使用者體驗
        - 小問題：只有幾公里

- 基礎的 API
    - 主要是針對縣市
    - 目的：顯示整個縣市的資料、數據類


#### [14:31] 觀摩老師怎麼解決問題的

- 找到 API 範例
```
https://api.nlsc.gov.tw/other/TownVillagePointQuery/120.30015882581974/22.604947487487625/4326
```    

- 【XML to JSON】
    - 看他的專案有沒有星星
    - 沒有就先掰掰
        - 有風險

> - https://stackoverflow.com/questions/68370230/pulling-data-from-api-as-xml-and-converting-to-json

- 有時候自己不是很確定答案就先去測試吧
   - **還是要先檢查說明文件的規則**

- 花時間找方法
    - 鍛鍊研究能力

- A：自己寫函式
    - 花費 3 日

- B：找到相關服務
    - 花費 5 小時

- 沒有絕對，要討論、取捨


### 解決問題的能力

==`#TODO`==


### [14:53] Geolocation

> - MDN
>   - https://developer.mozilla.org/zh-TW/docs/Web/API/Geolocation_API

- 注意瀏覽器

- 先抓座標
- 再去跑函式
- 最後再接 API

- ==`#QA`==：
    - ![](https://i.imgur.com/D8N5581.png)
    - WEB 就不準
    - 像叫車的 APP 會比較準
    - 背後有花錢買圖資


### [03:05] 找離自己最近的租借站

- 挖空網址的時候要注意型別
    - 可能需要轉成數字

- 如何整合 2 支 API


### [15:14] 最後整理流程


- 實作的時候也要注意站點有沒有營運
    - 判斷加上 `ServiceStatus`


#### [15:17] QK-time

- 今日 API 解說已結束

---

### [15:26] Leaflet.js

> - 從 【**Quick-Start**】 開始
>   - https://leafletjs.com/examples/quick-start/

- Google Map 要收 $$

#### 1.【Preparing your page
】
    - 先載入 CSS
    - 再載入 JS

- 【小步測試】
    - `Console.log `先看 JS 有沒有進去


#### 2. 【Setting up the map】

- 基本程式碼
     - ![](https://i.imgur.com/EqLaQdw.png)

- 地圖：是由很多圖層所組合而成

- 圖資：MapBox、Google Map

- 還可以再疊 UI 圖層上去：icon 等等

- Leaflet：只是地圖套件、可以管理座標

--- 

### [15:37] 3. 【MapBox】

```
accessToken: 'your.mapbox.access.token'
```

- 程式碼流程
    1. 先產生地圖
    2. 加入 MAP
    3. `maker`


- ==`#QA`==：
    - ![](https://i.imgur.com/XQgI2gH.png)
    - 好像有功能可以限制網域
        - 要收錢QQ
    - 就設定環境變數

---

### [15:46] MapBox 可以改樣式 

> - https://docs.mapbox.com/api/maps/styles/#mapbox-styles


- 範例：把原始 `v11` 換成 `dark-v10`
```
id: 'mapbox/streets-v11',
```

- 也可以客製化
    - `Publish`
    - `Share`
    - `CARTO`
        - 就會以更改 URL 為主
        - 而非更改剛剛的樣式  `dark-v10`

--- 

### [15:55] popup

- 【Working with popups】

- 綁定彈跳訊息

- 改完要記得加入 MAP
    - `.addTo(map)`
    - 再加入彈跳
    - `.openPopup()`

```
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").addTo(map).openPopup();
```

---

### [16:00] 實務面

#### 【定位所在位置】

- 範例：顯示地圖之後
    - 加入公司位置

- ![](https://i.imgur.com/nMeNbRn.png)


### [16:06] QK-Time


---

### [16:11] Leaflet API

### [16:18] 語法介紹：移動座標

> - 更改地圖狀態
>   - https://leafletjs.com/reference.html#map-panto

- `penTo()`
- `flyTo()`


### 語法：把座標定位在中心點

- `setView()`
> - https://leafletjs.com/reference.html#map-setview


---

### [16:30] QK-time


### [16:35] 點選後出現對應的資訊


==`#TODO`==


---

### [16:56] 

==`#TODO`==

--- 

### 【Debug】

- QQ


---

### [17:21] icon

> - https://github.com/pointhi/leaflet-color-markers

- 可以更改座標氣球的顏色

- 也可以寫 html 標籤

- 當成畫布去實作

---

---


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

### [20:10] 顯示站點可租借數量

- ![](https://i.imgur.com/4KuNfi1.png)


---

### [20:20] `promise.all`

- 可以確保每支 API 回傳之後才跑函式

- 搭配設計稿
    - ![](https://i.imgur.com/w9pHCvJ.png)

- 也可以搭配 `axios`
    - `axios` 本身也是運用 `promise` 的原理

> - https://wcc723.github.io/development/2020/02/16/all-new-promise/

- 範例：![](https://i.imgur.com/6iHo9p4.png)


- `axios` 移除 `then`：![](https://i.imgur.com/TCaegHs.png)

- ![](https://i.imgur.com/2D7eptT.png)

- 等資料回來之後再顯示畫面


- 進階：`RxJS`
    - 處理非同步狀況
    - 管理 API 的流程順序

- ==`#QA`==：
    - `headers` 能否只寫 1 次
    - 全域設定：
    - ![](https://i.imgur.com/FIgpz2G.png)
    - 如何確定有帶到
    - ![](https://i.imgur.com/Qzb4O3O.png)
    - ![](https://i.imgur.com/SNNYRDO.png)




> - Global axios defaults
>   - https://github.com/axios/axios#global-axios-defaults


- ==`#QA`==：
    - ![](https://i.imgur.com/MZDVpNp.png)
    - try-catch
        - ![](https://i.imgur.com/jy5KtLR.png)


---

## Round-Night-part2
> [time=Tue, 21, Dec, 2021 21:00 21:40] [color=#EB9486]

- 初始化的時候先規劃資訊流
    - 以 `init()` 為起手式

- API 數量
    - 腳踏車X2
    - 車道X1
    - 餐廳X1
    - 觀光景點X1
    - 共 5 支


### [09:23] 使用者拖曳地圖

> - https://leafletjs.com/reference.html#map-click

> - https://leafletjs.com/reference.html#map-moveend



- `moveend`
    - 取得中心點座標
    - ![](https://i.imgur.com/n5PWBu0.png)


- 使用者在對套件執行動作的時候
    - 給套件設定事件

- 流程
    1. 監聽使用者行為
    2. 抓中心點座標
    3. 再傳 `nearby`


### [09:30] 舉例介紹 Swiper

- 看套件好不好用
    - 看他文件的 `Events`

- `Lazy Loading`
    - 預設先不載入
    - 滑到附近的時候再跑出來

- 套件基本項目
    - 初始化 `init`
    - `Events`
    - 

### 如何觀察套件的文件

1. 先看 Sample Code
    - 能不能解決問題
2. Methods
3. Events