# TangleID 開發筆記
* Github repo:
* [TangleId/reconstruct-ui-flow](https://github.com/TangleID/TangleID/tree/reconstruct-ui-flow)
* [Denny TangleId](https://github.com/abalone0204/tangleId)
* [先備知識](https://hackmd.io/s/H1u9HdDSf)

## 關於前端 React
在 React 的世界中，網頁上的每個東西都視為一個元件 (component)，可以自己定義一個 Tag(JSX) ，還可以把簡單的判斷以及動作寫在一起。

## 關於資料流向

store 就是存放各種 state(狀態)，簡單的來說就是存放各種資料。而要更改資料，也就是改變狀態，需要透過 dispatcher 發起 action 觸發。

action creator 負責產生 action function，回傳一個物件，裡頭包含了一個 type，說明這是什麼樣的動作。因此 store 收到這個 action 後便能依據 type 的不同修改對應的資料，更動後便能再次 getState 取得最新值並更新到 viewer。

我們來看一下 tangleId 的 file tree，進一步說明他們之間的關係：

tangleId/
├── actions (更改 store 的 actions)
│   ├── checkTangleUsers.js
│   ├── createClaim.js
│   ├── createIdentity.js
│   ├── fetchClaimInfo.js
│   ├── fetchClaims.js
│   ├── ....
├── components (自定義 UI component)
│   ├── ClaimList  
│   ├── Nav
│   ├── SimpleForm
│   └── UserList
├── constants (定義 action.type，每個 action 分別有 REQUEST, SUCCESS, FAIL 三種狀態)
├── layouts
├── middlewares (於 dispatcher 與 store 之間的動作，在此是到各 api 拿取資料，node0 與 firebase 上的使用者資料)
│   ├── api.js
│   └── fetchData.js
├── pages (viewer 所看到的不同頁面)
│   ├── claim.js
│   ├── user.js
│   ├── users
│   │   └── new.js
│   └── users.js
├── reducers (依據不同的 action type 更改 store 的 state)
│   ├── index.js
│   └── users.js
├── server.js (定義路由)
├── store
│   ├── configureStore.dev.js
│   ├── configureStore.js
│   └── configureStore.prod.js
└── utils
    ├── createKeyPair.js
    └── transformToQRCode.js

## Installation
#### On web:

$ git clone https://github.com/abalone0204/tangleId.git
$ cd tangleId

$ vi .env
OFF_TANGLE_USERS_LINK=https://tangleidentity.firebaseio.com/users.json
BACK_END_API=http://node0.puyuma.org/tangleid_backend/api/
HOST_API=http://localhost:3000/api

$ npm install

### error
* [node-gyp installation error msg](https://gist.github.com/jkrvivian/1cf570992a04d4d689227dc9a0a09411)
* Fix with:`$ sudo npm install --unsafe-perm`
* [error msg](https://gist.github.com/yillkid/22f543437c0f2ec008a9616514c5c550)
* Upgrade your nodejs to [8.x](http://blog.csdn.net/ezreal_king/article/details/78659810)

## Run the dAPP
- For dev:
`$ npm run dev`

- For production build:
`$ npm run build && npm start`

## 新增一個 action
需要更動的部份：
* `constants`：定義該動作的 action type
* `actions`: 使用 tangleid api
* `reducers`: 新增 action type 要改的對應 state

## 新增一個 page
需要更動的部份：
* `page`: 新增一個頁面，包含 UI 以及對應的動作

其中每個頁面可能會有以下幾個 function
* `UserClaim.getInitialProps`
* 產生頁面前可以先做一些操作取得 props
* 如在 user 頁面中就是先呼叫 get_all_claims 取得使用者的所有 claims
* `mapStateToProps`
* 將 props 丟給 page 產生
* `mapDispatchToProps`
* 把 action 綁住 dispatcher，應用於如按下按鈕會觸發某個 action

## 套入 UI template
* [material UI](http://www.material-ui.com/#/get-started/required-knowledge)
* need npm install
* 沒有 responsive
* [Grid](https://material-ui-next.com/layout/grid/)
* responsive

在 layout 底下的 material 資料夾放的就是使用 material UI 的 Main.js：

import PersistentDrawer from '../../components/material/PersistentDrawer'
import Loader from '../../components/Loader'

const MainLayout = (props) => (
	<PersistentDrawer title="tangleID" >
		<Loader isLoading={props.isLoading}/>
		{props.children}
	</PersistentDrawer>
)

export default MainLayout

1. 套用不同的 template 設計只要更改 page 最上方 import 的 layout

//import Layout from '../layouts/Main'
import Layout from '../layouts/material/Main'

2. template 中的 component 依然放置在 `TangleId/component` 底下(目前 Denny 統一把 material UI 放在 `TangleId/component/material`)，於 Main.js 下 import 使用

## TangleId & 空氣盒子
### 全台空污 overview
* 地圖上繪製空氣盒子所在地並依觀測數值呈現
* PM2.5
* 溫度
* 濕度
* 能查看單一空氣盒子回報的數據，以及傳送資料的時間
* 顯示該空氣盒子所處環境

* 可以指查看指定地區，依縣市分類
* 參考：[g0v 空污觀測](https://airmap.g0v.asper.tw/)

### 註冊
* 使用者註冊
* 考慮到後續的獎勵機制的需要
* 空氣盒子與使用者身份綁定 (Initial claim)
* e.g. 空氣盒子 UUID 與 使用者 ID

### 個人頁面 dashboard
* 每個空氣盒子資料的監測狀況
* 獎勵機制

## 獎勵機制 & data marketplace
data marketplace 需要向 sensor 購買資料才能夠看到，而目前也僅展示購買 sensor 資料的情況，還未看見 API。
>The Data Marketplace is open for everyone to participate right now, and over the coming weeks we will be opening up an API for the marketplace so that anyone can contribute sensors and build new data-driven applications. [2017.11.28]

* [data market](https://data.iota.org/#contact)
* 使用 MAM 將資料傳送到瀏覽器

這個機制正符合了剛開始獎勵機制的設想，也就是，以「幣」為誘因，鼓勵大家投入設置空氣盒子。而**與 data marketplace 結合的好處即免除之前 color coin 換算**的討論，直接使用 IOTA。

#### data marketplace 提問
而對 data marketplace 仍有幾點疑問:
* 空氣盒子的資料目前以編碼方式發送
* data marketplace 有無資料格式的限制嗎?
* 定額資料 換取 定額獎金
* data marketplace 的購買換算機制?
* 目前試用版是只付一次
* TangleID 以 tag (UUID + L) 撈資料
* data marketplace 怎麼撈 sensor 資料?

### user register & bind airbox

### get airbox info

### UI 開發
* dash board
* New user
* Login

## UML flow chart
### Login
* 只須查看是否有此 UUID 的內容是否存在
* sk 為解此 UUID 的其他 claim 內容使用

[login api](https://hackmd.io/s/ryfE6TSkM#)

st=>start: Login button
e=>end: End
op=>operation: user type UUID and sk
op1=>operation: clear textfields
cond1=>condition: valid UUID? 
op2=>operation: store sk
op3=>operation: redirect to User page, show user page

st->op->cond1
cond1(yes)->op2->op3->e
cond1(no)->op1->op

### show User page
登入成功後要顯示個人資料
* login success 回傳的 first name, last name, profile picture
* 透過 [get_all_claims](https://hackmd.io/s/Sku7aPFkM#) 抓取 claim address
* 透過 [get_claim_info](https://hackmd.io/s/ryxHGct1f#) 抓取每個 claim 的資料

st=>start: Login success
e=>end: End
op3=>operation: send get all claim address request
cond=>condition: success?
op4=>operation: send get claim info request
cond1=>condition: success?
op=>operation: request again
op1=>operation: decrypt with sk
op2=>operation: show on webpage
op5=>operation: request agin

st->op3->cond
cond(yes)->op4
cond(no)->op->op3
op4->cond1
cond1(yes)->op1->op2->e
cond1(no)->op5->op4

## Regestration
[new_user](https://hackmd.io/s/BkB03arJz#)

st=>start: New User button
e=>end: End
op=>operation: fill in textfield
op1=>operation: send new user request
cond=>condition: success?
op2=>operation: request again
op3=>operation: redirect to login

st->op->op1->cond
cond(yes)->op3->e
cond(no)->op2->op1

### pages needed
* user 個人頁面
* 顯示個人資料
* claims, 預期可以像 fb 一樣動態新增
* 姓名，UUID + I 的內容
* 搜尋 claim
* 聯絡人
列出有發 claim 給你的單位
* 列出單位的基本資訊，一樣由 UUID + I
* 分別點進去可以查看相關 claim
* MAM message
* 通知
* 如 fb 的發訊息界面，可以參考 iotalk
* 新增 claim 的頁面

### 開發問題
* 目前部署於 http://node0.puyuma.org:3000
* GitHub: [TangleId/reconstruct-ui-flow](https://github.com/TangleID/TangleID)

#### Q1:
進入頁面時 loading 很久，且出現如下的畫面：
(firefox 與 chrome 的畫面會不同，以下為 firefox)

#### Q2:
render 出頁面或重新整理同一頁面後，跑版，並產生以下 warning
:::danger
Warning: Prop \`className\` did not match. Server: "MuiButtonBase-root-61 MuiIconButton-root-55 MuiIconButton-colorInherit-56 PersistentDrawer-menuButton-1075" Client: "MuiButtonBase-root-61 MuiIconButton-root-55 MuiIconButton-colorInherit-56 PersistentDrawer-menuButton-8" [warning.js:33](webpack:///node_modules/fbjs/lib/warning.js?19d6159)
:::
如下圖：
login button 應該在最右邊

#### Q3:
Login 的資訊保存在哪裡？
* UUID 等

#### Q4:
Login 後如何 redirect page?
* 以登入回傳的個人資訊重新導向個人頁面