Lichin

contact: [email protected]

I am

# Demo page

1.學測.大平台
2.github repo


# app 由來

        快到一月了,又是一年一度的學測。突然回想起以前寫歷屆考古題時候,總是又要翻翻網路、翻翻手冊才能對照級分,於是這個簡單的級分計算機念頭就產生了!這是第一次使用 react redux 來做資料流處理,一開始在學習的時候會覺得比較麻煩,不過等適應之後,會覺得這樣單向的操控十方的方便!再來是快速上手的 Firebase ,這服務由google提供,以快速開發來說是非常適合的(database, Auth, 甚至到 hosting),以下是我的第一次練習心得,也許可以提供大家一些小方向。


# react-redux

        react-redux 是一套 react.js 框架導入單一資料流的作法,用以改善原本react在跨component傳遞 state 時的不便性。這裡我是使用了這套react-redux boilerplate 作為整個架構的基礎,在這套架構之中,任意資料夾內的 js file 都透過 index.js 作為整理,讓在開發時比較方便閱讀:

        另外,在使用 redux 流程中寫好 reducer 是非常重要的,拿到過多的 data 就會讓整個資料流變得複雜也不必要。因此設計好的 reducer 就需要花上一些時間,以免使用者拿到過多的權限、或是多餘的資訊。因為是第一次設計 reducer 所以在整個的分配上也還是有些混亂,但是每一個 component 在拿 data 就變得非常容易。

# firebase

        firebase 是一套很適合前端開發者使用的快速開發平台,整合使用者的 OAuth 登入、存放使用者資料的 Realtime Database、快速的deploy…以及很多的功能。在寫學測大平台的時候還去看過了react-redux-firebase 以查看怎麼將 firebase 獲得的資料加入到 reducer 中。如果對於合併 reducer 有興趣的話可以到專案裡面去看看。
        另外在看過了 firebase 的範例 code 後也去查了 promise 的相關知識,對於js 寫法快速的改變真心感到害怕,但是也同時非常佩服日日進步的技術。這個 link 是我寫有關 firebase api 的程式碼,整個透過api拿資料的 code 都非常簡短也很好理解。

# Design

        在圖表的地方加入 chart.js 方便呈現圖表,而表現方面是非常的棒!標籤點選以 filter data 的功能也是我選擇的一個推力 (不過好像 chart.js1 並不支援這項功能,所以筆者就投入第二版的懷抱了!) 而在版面的部分則稍微參考了 Airbnb 的大字體、登入畫面則是仿 Instagram 的 linear-gridient animation。

# 小結

        第一次用 react-redux 框架加上 database,讓整個開發流程拉長很多,再加上第一次碰到 promise 以及想把整個版面設計的乾淨,所以一直在混亂之中才擠出這個小東西,希望在以後可以加快開發的步調,做出架構更完整、更便利的服務。

        這次在製作app的過程也嘗試加入 pwa 的機制,以讓app在手機上有更棒的使用體驗,但是卻在離線的功能上還需要改進。希望在學測結束前能把這項功能給好好實作出來!並祝福那些考生們都能順利考上好學校啦!



blog comments powered by Disqus

Published

11 December 2016

Tags

title

yo! trying to alert