---
# System prepended metadata

title: 密集月計畫
tags: [開發, 密集月]

---

密集月計畫
===

###### tags: `密集月` `開發`

:::info
- **Location:** 工作室本部 (新北市新店區北新路一段297巷16號3樓)
- **Date:** Jun. 30 (Sun.) -- Jul. 26 (Fri.), 2019
- **Agenda**
1. 確認流程 `30min`
	> [name=Wada]
- **Participants:**
    - 林天立 (Wada)
    - 湯大由 (Alex Tang)
    - Johnny
- **Contact:** Alex <cpl.alexandtang@gmail.com>
- **Host:** Wada <sammeil101@gmail.com>

:::

## 重要連結

- [Frontend Design on Zeplin](https://app.zeplin.io/project/5ca75aa5fdfc71a25a43a274/dashboard)
- [Labeling System](https://tourtour-backend.herokuapp.com)
- [Slack](https://boominglab.slack.com)
- [拓拓前端](https://gitlab.com/cplalexandtang/tourtour)
- [拓拓後端](https://github.com/fansen7/tourtour_backend)

:dart: 目標
---
- 試排行程
- 已定稿的前端刻完

:books: 待辦事項
---
- APP的使用者經驗設計

:mag: 先備知識
---
### Facebook Graph API (Login)
- 我有送邀請了，記得到[FB Dev.](https://developers.facebook.com/)接受(名字叫tourtour的app)
- 要測試Graph API的話到[這裡](https://developers.facebook.com/tools/explorer/)
- 要收回所有權限的話用 DELETE /me/permissions
- Graph API也可以搜地點，用 GET /search?type=place

### Frontend
- Design flow of [React-redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/) (i.e. States, actions, reducers)
- Dynamic URLs using [React-Router](https://stackoverflow.com/questions/47245999/how-to-achieve-dynamic-routing-in-react-router-4)
- Asynchronously fetching data using [fetch](https://reactjs.org/docs/faq-ajax.html) via RESTful API
- [CSS Positioning](http://zh-tw.learnlayout.com/toc.html)

### Backend
- [Django REST framework](https://github.com/twtrubiks/django-rest-framework-tutorial)
- Wikipedia's API at [Medium](https://medium.com/@htchien/%E5%A6%82%E6%9E%9C%E4%BD%A0%E6%83%B3%E8%A6%81%E7%94%A8-api-%E4%BE%86%E8%AE%80%E5%8F%96%E7%B6%AD%E5%9F%BA%E7%99%BE%E7%A7%91-6d3dd0c22107) and official [here](https://www.mediawiki.org/wiki/API:Search) and [here](https://www.mediawiki.org/wiki/API:Parsing_wikitext)
- [More API](https://www.moreapi.net/dashboard/assets/MORE_API_instroctions.pdf)
- [Google Place API](https://developers.google.com/places/web-service/intro)

:closed_book: 任務
--
### Development Team:
#### Frontend & Backend Intergration
==**因股東會改組，後端人力空缺，這邊暫停**==
- [x] ==Hint==: **這邊先做(Backend有關資料表的詳情在下面的*拓拓登入API*那節)**，做完再做其他的；完成的話請打勾，若有問題可以用==兩個等於==標記
- [x] 1. Login頁面
  - [x] a. 一般登入：送request到後端API /login 路徑
    ```javascript=
    request = {
        account: account,
        password: password,
    }
    ```
  - [ ] b. 用FB：把request送後端API /login 路徑
    ```javascript=
    request = {
        email: email, 
        account: name,
        password: null,
        picture_url: url,
        friends: friends_list, 
        birthday: birthday, 
        gender: gender, 
        location: location, 
        fb_uuid: user_id,
    }
    ```
  - [ ] c. 後端確認OK就回傳data到前端存入local storage
    ```javascript=
    data = {
        trips: [],
        favorites: [],
        login: true,
    }
    ```
  - [ ] d. 都OK之後跳到 /member 頁面

- [ ] 2. Register頁面
  - [ ] a. 把填完的資料送request到後端API /register 路徑
    ```javascript=
    request = {
        email: email,
        account: account, 
        password: password, 
        birthday: birthday, 
        gender: gender, 
        location: location
    }
    ```
  - [ ] b. 都OK之後跳到 /member 頁面

- [ ] 3. Member頁面
  - [ ] a. 一定要先登入或註冊才能進到這個畫面 (前端去找local storage裡面有沒有login=True，沒有就跳到/login頁面)
  - [ ] b. 修改個人資料後呼叫後端API /update 做更新
  
#### Frontend
==**請用Redux來做State store的管理，可參考Register頁面已修改成Redux的Datepicker元件是怎麼實做的**==
- [ ] 1. Article頁面
  - [ ] a. 文章是從state取出來的，可以自行增加對應的action與reducer
  - [ ] b. 點進去之後的頁面也要刻出來，每篇文章的url路徑可參考[這裡](https://stackoverflow.com/questions/47245999/how-to-achieve-dynamic-routing-in-react-router-4)

- [ ] 2. Step2頁面
  - [x] a. 藍色框框已經有了，在src/components/Hotel.js跟Traffic.js裡面
  - [ ] b. 是stateful元件，要有對應的state，action跟reducer；每次加一個交通/飯店的時候state要一起更新

- [ ] 3. Member頁面
  - [x] a. 沒行程的情況已經刻好了
  - [ ] b. 有行程的情況照zeplin上面刻，但是要作到資料是從local storage拿出來的
  - [ ] c. 是stateful元件，要有對應的state，action跟reducer

#### Backend
- [ ] 1. ==**這邊暫停** 拓拓登入API (可以看情況自行新增新的Fields，Model與Relations)==
  - [ ] a. 開member資料表存會員資料(長度自行斟酌，有些欄位如有缺漏可以不用必填)
    ```python=
    # models.py
    from django.db import models

    class Member(models.Model):
        email = models.CharField()
        account = models.CharField()
        password = models.CharField(blank=True)
        birthday = models.CharField()
        gender = models.CharField()
        location = models.CharField()
        picture_url = models.CharField(blank=True)
        fb_uuid = models.CharField(blank=True)
        # 已儲存的行程
        trips = some_fields_or_object
        # 最愛景點
        favorites = some_fields_or_object
    ```
  - [ ] b. 開friend資料表存好友關係；假設user A的資料有好友friend B，則須先檢查是否已存入(user A, friend B)與(user B, friend A)，如果有一個沒有就補上(長度自行斟酌，有些欄位如有缺漏可以不用必填)
    ```python=19
    # models.py
    class Friend(models.Model):
        user = models.CharField()
        friend = models.Charfield()
    ```
  - [ ] c. 以django REST Framework做出 [/register](/register)，[/update](/update)跟[/login](/login) API endpoint 供前端呼叫寫入後端資料庫，GET/POST可自行斟酌，記得要加csrf_exempt

- [ ] 2. 景點資料與Labeling System
  - [ ] a. ==密集週前先做==熟悉Google Place API，自行選幾個地點來測試
  - [ ] b. 建立完整的景點資料表
    ```python=25
    # models.py
    class Spot(models.Model):
        # 引入先前 AddedSpot 已有之欄位
        # ...
        
        # 從More API抓下來的聲量
        # 可以開很多欄位或另外自行設計一個one-to-one model，時間從最早有的開始抓
        reputation = some_fields_or_object

        # 從Wiki API抓下來的簡介
        introduction = models.TextField(blank=True)

        # 這邊開始是Google API抓的
        # Google API回傳的place_id欄位
        place_id = models.CharField()
        # 經緯度
        latitude = models.FloatField()
        longitude = models.FloatField()
        # 中文地址
        cn_address = models.CharField()
        # 英文地名地址
        eng_name = models.CharField()
        eng_address = models.CharField()
        # 日文地名
        jp_name = models.CharField()
        # 營業時間
        # 之前好像有提過怎麼設計，可以多開欄位或是另外新增one-to-one model
        opening_time = some_fields_or_object
        # Google評價
        rating = models.FloatField()
        # Google五個留言
        reviews = some_fields_or_object
        # Google給的URL
        url = models.CharField()
        # 景點官網(有的話)
        website = models.CharField()
        
    ```
  - [ ] c. 把資料用fixture的方式dump出來存在雲端

## Notes 
<!-- Other important details discussed during the meeting can be entered here. -->
- [ ] 1. 排行程測試
    - [ ] a. 飯店問題
 
- [ ] 2. Online/Offline資料庫流程
    - [ ] a. 插入景點時間不一致
    - [ ] b. 更新Google API資料

## SBIR

- [ ] 1. 入住：現階段依舊由人工辦理入住。未來展望：自動辦理入住→(行動支付)→數位合約→完成辦理。
    - [ ] a. 走到旅館大廳服務櫃台辦理入住
    - [ ] b. 由接待人員協助，每位使用者掃描每筆訂房紀錄對應的QR Code並顯示Line Login頁面，請求使用者授權
    - [ ] c. 連結訂房紀錄與Line帳號

- [ ] 2. 開啟房門：需要可以安裝BLE晶片的門鎖，且可以透過電腦開門

## 平台比較

| 通訊軟體 | Line | Messenger | WeChat |
|-----------|--------|--------|-------|-------|
| 主動推播訊息 | Yes(付800以上有加好友的無限) | Yes(有追蹤的人無限) | Yes(有追蹤的訂閱號每天一則，服務號每月4則) |
| 商店基本資料 | Yes(LIFF) | Yes(Webview) | Yes(微信商店) |
| 內建管理後台+分層分析 | Yes | Yes | Yes |
| API可獲得用戶資料 | UUID，顯示名字，照片，狀態 | 名字，地點，時區，照片，性別 | 在slack裡面 |
| 配合硬體 | BLE Beacon | 已移除(Facebook bluetooth beacon) | BLE Beacon(搖一搖，Airsync)/Wifi(Airkiss) |
