密集月計畫 - HackMD

密集月計畫 === ###### 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  - [ ] 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) |