Try   HackMD

TangleID 開發筆記

關於前端 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

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

在 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'
  1. template 中的 component 依然放置在 TangleId/component 底下(目前 Denny 統一把 material UI 放在 TangleId/component/material)，於 Main.js 下 import 使用

TangleId & 空氣盒子

全台空污 overview

  • 地圖上繪製空氣盒子所在地並依觀測數值呈現

    • PM2.5
    • 溫度
    • 濕度

  • 能查看單一空氣盒子回報的數據，以及傳送資料的時間

  • 顯示該空氣盒子所處環境

  • 可以指查看指定地區，依縣市分類

  • 參考：g0v 空污觀測

註冊

  • 使用者註冊
    • 考慮到後續的獎勵機制的需要
  • 空氣盒子與使用者身份綁定 (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 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

Created with Raphaël 2.2.0Login buttonuser type UUID and skvalid UUID?store skredirect to User page, show user pageEndclear textfieldsyesno

show User page

登入成功後要顯示個人資料

  • login success 回傳的 first name, last name, profile picture
  • 透過 get_all_claims 抓取 claim address
  • 透過 get_claim_info 抓取每個 claim 的資料
Created with Raphaël 2.2.0Login successsend get all claim address requestsuccess?send get claim info requestsuccess?decrypt with skshow on webpageEndrequest aginrequest againyesnoyesno

Regestration

new_user

Created with Raphaël 2.2.0New User buttonfill in textfieldsend new user requestsuccess?redirect to loginEndrequest againyesno

pages needed

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

開發問題

Q1:

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

Q2:

render 出頁面或重新整理同一頁面後，跑版，並產生以下 warning

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

如下圖：


login button 應該在最右邊

Q3:

Login 的資訊保存在哪裡？

  • UUID 等

Q4:

Login 後如何 redirect page?

  • 以登入回傳的個人資訊重新導向個人頁面
Last changed by 
 
Vivian Lin
0
1423
Published on HackMD