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

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

-  [](/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：
- 
- 比較即時
- 目的：使用者體驗
- 小問題：只有幾公里

- 基礎的 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`==：
- 
- 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】

- 基本程式碼
- 

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

- 圖資：MapBox、Google Map

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

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

---

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

accessToken: 'your.mapbox.access.token'

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

- ==`#QA`==：
- 
- 好像有功能可以限制網域
- 要收錢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] 實務面

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

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

- 

### [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] 顯示站點可租借數量

- 

---

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

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

- 搭配設計稿
- 

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

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

- 範例：

- `axios` 移除 `then`：

- 

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

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

- ==`#QA`==：
- `headers` 能否只寫 1 次
- 全域設定：
- 
- 如何確定有帶到
- 
- 

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

- ==`#QA`==：
- 
- try-catch
- 

---

## 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`
- 取得中心點座標
- 

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

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

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

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

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

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

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

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