middleman 是一個基於 ruby 的整合性 web 前端開發工具。
從開發工具到打包都幫你整合好,只需要安裝完成 middleman 就可以開始開發你的系統。
middleman 需使用 ruby 環境建構,因此先確認 ruby 版本
|
|
|
|
類似於各式 Cli 語法,如 Hexo: hexo init
|
|
|
|
如果成功看到 middleman 首頁,恭喜你已經成安裝囉。
對於 ruby 不是很熟,不過碰過前端的同學們可以這樣理解看看:
gem
把他想像成 node.js 中的module
:P
所以我們在下載或 clone 一個 middleman 專案後要做的事情是:
安裝相依性 gem file
我們不可能一個一個安裝,不過如果你堅持..
因此一定有類似於 npm install
的功能語法。
那麼就是:
|
|
一連串的 gem file 安裝完成後,在使用:
|
|
啟動 server 看看吧!
一鍵打包真是 middleman 的優點之一,快來使用看看吧!
|
|
middleman 是一個基於 ruby 的整合性 web 前端開發工具。
從開發工具到打包都幫你整合好,只需要安裝完成 middleman 就可以開始開發你的系統。
]]>Action example:
|
|
Action creator example:
|
|
|
|
Flux | 彈珠檯 |
---|---|
Action | 彈珠 |
Action Creators | 彈簧拉把 |
Dispatcher | 透過中間的釘子分類 |
Store | 彈珠掉落的位子 |
View | 得到的分數 |
加入 Dispatcher
|
|
設計計數器有兩個按鈕,所以有兩個 action 負責加1
與減1
type 是必要的 key ,之後到了 Store 用來分類處理
|
|
負責將 Dispatcher 傳過來的 action 資料做處理
可以看到 AppDispatcher.register
裡面是一個 switch 分類各種 action type
接著分類到各自要處理的 function 中,回傳處理後的資料,改變 Store
因此 Store 的資料是自己操作改變的,
Store 可以說是一個閉包的概念 COUNT 則是私有數值
公開 getAll 讓大家取得 COUNT 數值
再提供 addChangeListener 讓需要的人註冊事件監聽
操作完 Store 資料會執行發布事件 _emitter.emit(CHANGE_EVENT);
接著再 view 那端就會接收到 'CHANGE'
事件,再回到 Store get COUNT
因此只要一直循環這個流程就可以建立出一套系統
每個元件只需要關注自己需要的資料既可
而資料統一集中在一個地方不會有被別人更改的情形
需要更改資料,必須建立一個 action 來統一管理所有功能
再透過 Dispatcher 將 action 丟給每個 Store 並根據 type 去改變相對應的資料。
|
|
在 react 元件內加入監聽:加在已經 Mount
階段,因為此階段,元件已經被產生,所以可以接收資料來改變元件。
react 生命週期 componentDidMount() 可以想像成 $( document ).ready(); 事件,必須要在 HTML 繪製完成後才可以對 element selector 並做修改
接著在 react 元件 將要卸載
階段,取消監聽事件。
|
|
長期就對 react/flux 有很高的興趣,可是單純看官網範例與部落格文章都不能明白 flux 流程與每位角色的負責工作。
這次趁導讀 flux 機會 run 幾次最間單的計數器與 todolist 範例就可以了解 flux Design Pattern 的奧妙之處,感覺這樣的機制真的很適合許多場景,因為 flux 類似於 observer 的 Design Pattern 所以就算是 angular 雙向綁定的框架,我想是可以混用在 api get / set 流程上,讓原本雜亂的 $scope 有了方向性,覺得很棒。
非常感謝 shiningjason1989 做了 react 每一個步驟的教材,並在文章中反覆的問你,真的了解了這章節的內容了嗎?非常棒的教材。
完整的說明 React 生態圈與要解決的事情,有提到 GraphQL
講得非常生動,聽完覺得這個解決方案還不錯,後端工程師應該表示欣慰。
覺得前端世界非常快速的產生許多解決方法與技術,如:BackBone.js -> angular.js
Node.js & io.js => 合併 O_o”
前端技術正在面臨著前所未有的工程化挑戰
Twitter 2011 年曾經回到 Server side Rendering 的技術
寫一次 UI 元件,前/後端都可以使用。
有沒有辦法後端可以先渲染出基礎的 HTML 到了用戶前端再加上 JavaScript 動態效果與操作,這讓不就可以完美解決第一次下載速度較慢,與 SEO 的問題。
其實 React Virtual DOM
就可以讓我們完成這件事情,因為在後端與前端都繪出同一個元件,既 同構 (isomorphic)
因為 Virtual DOM 因此可以實現。
85%
程式碼重複使用用你最熟悉的前端開發流程,和 JavaScript 語法去開發不同平台的應用程式。
GraphQL 是 RESTful 之外的另一種 API 設計模式,在某些情況下
,是更好的選擇。
如果我要顯示一個畫面包含: 使用者資訊, 購物車內容。
我必須要去 call 兩隻 API 等到請求回應後我才能把畫面顯示上去。
你可以使用 Custom endpoint 把兩筆資料合併來解決呀!?
可是瑞凡.. 你有很多 API 你也要通通合併嗎?你如何管理這些 API 呢?
不同設備需要的資料 粒度
不同,如:
後端表示難過 Q_Q”
The REST interface is designed to be efficient for large-grain hypermedia data transfer..
- Dr Roy T Fielding, Author of REST
REST 作者說:REST 更適合應用在大粒度數據場景。
現在我們的場景是什麼?我們有不同的前端設備,有不同的版本,對於 API 的資料內容有不同的要求?要怎麼解決這個問題!?
]]>模組
可以自訂 ( ex: 外觀可以透過 CSS 修改 )。筆者原本使用 sublimeText 經社群朋友推薦使用 atom 進而
荼毒推薦同事,因此本文件為共筆紀錄(nabi, ann)。
大部份的快速鍵都跟 sublimeText 差不多,這邊只列出不同或特殊的地方。
功能 | windows | Mac |
---|---|---|
設定面板 | Ctrl + , |
command + , |
開發者工具 | Ctrl + alt + I |
command + option + , |
向上移動 Line | Ctrl + ↑ |
control + command + ↑ |
向下移動 Line | Ctrl + ↓ |
control + command + ↓ |
Atom is a desktop application built with HTML, JavaScript, CSS, and Node.js integration. It runs on Electron.
前端工程師
改改 CSS 也是很正常的。ctrl + shift + p
輸入 Stylesheet
Open Your Stylesheet
style.less
檔案,此可以撰寫 CSS hack your atom。加入以下 CSS 語法:
|
|
修改以下 CSS 語法:
|
|
設定路徑:settings -> 左邊選擇 theme
theme 在 setting 裡面分別可以設定兩種:第一種是整個 IDE 的外觀設定 theme - UI,另一種則是編輯器中的語法樣式設定: highlight,字型,大小等…
4
or 2
端看團隊 Code Style4
。whitespace
Remove Trailing Whitespace
option 移除方法
和變數
的關鍵字,讓你輕鬆使用 AngularJSctrl
+ shift
+ P
加上 ctrl
+ shift
+ M
Setting > Use GitHub.com style
打勾 view 會變成 GitHub style 白色背景Ctrl
+ G
跳到你想要的行數\**
+ Tab
=
or :
平均對齊atom 基本上還算是很年輕的編輯器,並且不斷的在強化當中,其中可以關注的像是它的開發工具 Electron. 基本上可以用前端技術打造桌上軟體了,非常厲害!至於效能的問題就持續關注 github 如果有更新版本就在裝看看,或者持續追蹤是否有其他開發者針對效能做調整、改善,後續再補充。
]]>使用三週心得:大部份拿都拿撰寫 markdown 文件..:P 持續觀察中。
模組
可以自訂 ( ex: 外觀可以透過 CSS 修改 )。按鍵與方向 | 定義 | 分頁符號 |
---|---|---|
→ | 章節 | - - - |
↓ | 小節 | - - - - |
假設我們要介紹一本書從首頁~第二章它的結構如下
|
|
esc
可以看到簡報結構Is the background syntax
|
|
將需要的顏色使用 Hex Color
修改成相對應色碼既可。
Is the fragment syntax
|
|
直接修改 data-fragment-index="1"
的值就可以調整出場順序
|
|
Is the transition syntax
|
|
效果名稱 | 效果 |
---|---|
none | 無 |
fade | 淡入淡出 |
slide | 向左平移 |
convex | 向內旋轉 |
concave | 向外旋轉 |
zoom | 向外放大 |
並且可以分別為投影片 進/出場,加上後綴符號設定:
-in
-out
|
|
Custom the transition speed!
|
|
速度有三種可以調整:
]]>有興趣可以至 softnshare.slack.com 討論,裡面有非常多的頻道。
Markdown
是一種格式化文件的語言。
一種輕量的標記語言,最終會轉換成 HTML 語法,既可輕易散佈在網路上。
不需要
學習複雜的 HTML 語法就能夠使用標記語言格式。.md
.markdown
以上皆可,如果在 gitLab 中使用 New Page 所產生的檔案附檔名為: .markdown
。
越來越多 文章發佈系統
或 溝通軟體
,都已經支援 markdown 格式,好 markdown 不學嗎?
|
|
ex:
通常我們會條列式的逐條記錄內容重點,既可使用以下語法。
|
|
列表範例:
數字列表範例:
情境:如果我要把以上範例的 復仇者聯盟
移動到最後一筆,那我不就要把所有編號也改過一次…
不,你只需要記住數字列表都使用 1.
當語法就可以了,程式會依序幫你編號。
|
|
範例:
這個功能算是 markdown 重要的應用,一般的 文字記錄簿 (word text or blog)
都無法將程式碼縮排完整保留,而透過 markdown 格式發佈後還可以完整記錄下來。
|
|
|
|
連結範例:
google
圖片範例:
還有什麼樣式是你想夾到文件內的嗎?那就直接撰寫 HTML, CSS 到文件裡面吧。
因為最後會生成 HTML 檔案 :P
初期撰寫 markdown 的時候建議使用具備 所見既所得
的即時編輯器來協助撰寫,同步觀看執行結果。
以下是我推薦的編輯器:
試著打一遍,很快就學會了,真的!
Markdown 主要缺點是發佈平台
或轉換引擎
,發佈 Markdown 有兩種方式一種是直接將撰寫好的文件 push 到平台如 github, fackbook 等支援 Markdown 格式平台,這取決於此平台支援到什麼程度的 Markdown 語法。如:FaceBook 不支援 code block, 外部連結圖片。
另一種既是透過轉換引擎或透過線上轉檔成為最終的 HTML 檔案在散布到網路上,所以會取決於背後轉換的引擎可以解析到什麼 Markdown 語法。
基本上個平台都會說明可以使用的語法,如本文介紹的幾個簡單的用法,其他如: emoji 就比較少支援一點,所以各家的支援度都會有所不同是要注意的地方。
另一個 Markdown 小缺點是 Table
寫起來非常不好閱讀,小型還可以,如果超過 3 欄建議可以直接使用 HTML table 語法 參考 w3schools table 範例
以上是 Markdown 的小介紹。
你也來寫一個吧!
Markdown
是一種格式化文件的語言。
一種輕量的標記語言,最終會轉換成 HTML 語法,既可輕易散佈在網路上。
不需要
學習複雜的 HTML 語法就能夠使用標記語言格式。向大家介紹一個很棒的 markdown 服務:
是的,這份簡報是使用 markdown
編輯的。
大家應該有使用過 hackpad
這個即時共筆服務。
而今天要推薦的是 HackMD
可以說是加強版。
身為一個小小工程師平常寫寫 gitlab wiki 文件也是很正常的。
忽然有一天主管或同事要你介紹一下你的功能或某個技術的時候..
markdown to slide 對我來說真的是殺手級應用啊~ 太棒了!
推薦適合使用 HackMD 簡報的場景是高橋流簡報或者需要 present code
or commend line
可以考慮使用這個服務。
向大家介紹一個很棒的 markdown 服務:
是的,這份簡報是使用 markdown
編輯的。
近期常常在找 Hexo 的 theme 覺得不錯的有:
緣起是發現 Ghost 這個 blug 服務的 Layout 好棒,字體跟間距閱讀起來好舒服,因此朝著: Ghost theme to Hexo 方向就找到了 Clean Blog !! 套用了一下覺得好棒真不錯,可是在首頁列表都是文字,在本機測試幾天後,發現 code highlight 的樣式不是很習慣可能要符合風格因此原生是淡色系的背景色,開始往改變 highlight 顏色開始改功能,不過有點困難.. 然後相依功能少了一點點,但是是非常好的 theme。
接著某天在查資料的時候發現一位部落客使用了 Cho 這個極簡的 theme 眼睛為之一亮,馬上套用看看,也是非常不錯,可能喜歡有圖文的樣式,因此在本機測試一週後就放棄了。
後來看到 NexT 這個滿多人使用的 Hexo theme 多了一個主題風格,所以這個 theme 內建 3 個風格,所以立馬安裝,可是安裝到最後解了一些 bug 發現此 theme 作者推薦還是要升級到 Hexo 3.x 會比較好。
因此原本是使用 Hexo 2.8 版本,剛好想要重啟 blog 也是有想要升級 Hexo 3.x 再加上作者推薦因此升級版本試試看。
一連串的坑就這樣發生,不過很多解決方法 Hexo 作者與 plugin 作者大部分都會在 issue 內寫出解法,大致上是重裝 plugin 或者必須安裝特定某版本才可以。
Hexo 3.x 版本作者推薦要使用 Node.js 4.4.3 版本,且推薦使用 nvm 切換 node 版本,因此也學習到幾個基礎 nvm 語法。
以下列出一些印象比較深刻的坑與 Hexo 各版本注意事項
Hexo | 2.8.3 | 3.2.x |
---|---|---|
node.js | 12.x | 4.4.3 |
hexo-renderer-stylus | 0.1.0 | 0.2 |
hexo-renderer-marked | 0.1.0 | 0.2 |
liveReload 系列 | liveReload | hexo-browsersync |
最好笑的是裝完 NexT 測試過 3 個風格後.. 我忽然覺得原生的 landscape
還是比較好看耶,當初也是因為看到這個 theme 才知道 Hexo :P
決定安裝回 Hexo 2.8.3 穩定版,多虧當初有做版控且上傳到 github server
因此開始撰寫筆記吧!
斷言 - 網路上的定義
在程序設計中,斷言是一種放在程序中的一階邏輯,目的是為了標示與驗證程序開發者預期的結果-當程序運行到斷言的位置時,對應的斷言應該為真。若斷言不會真時,程序會中止運行,並出現錯誤信息。
Protractor 必須執行在 nodeJS 環境下,因此必須安裝 nodeJS 後才可以執行以下安裝步驟:
|
|
此步驟為更新/下載: chromedriver.exe
|
|
|
|
此步驟為更新/下載: selenium-server-standalone-2.48.2.jar
|
|
使用內建測試(目標 angularJS 官網首頁的範例檔)
移動到:example
資料夾
|
|
|
|
enjoy !
非常不錯的課程值得推薦!
設計,為人生帶來一份美好。
沒設計過的房子的確可以住人,但是設計過的房子卻多了一份美好。
為什麼做簡報?為什麼做設計?讓無趣的人生多的一份美好。
不只是簡報這門課,不是真的要你學習設計不需要知道艱深的學問,如色彩學,是針對半個設計人,強調設計本身的效能 :)
我們將投影片分成五
個等級
今天如果我們要出去旅遊,我們會上網搜尋飯店的評價 1~5 顆星,
但是再決定要住哪間飯店的時候,會因為幾個條件而有差異:
因此會因為條件不同而左右我們最後下訂房間
製作簡報也是如此,會因為我們今天要簡報的
場合不同,
對象不同,
製作時間不同,
而左右我們製作簡報質量。
關鍵字
(顏色、大小、字型)至少做到二星級
快速鍵
設計示意圖
現在教育 | 未來教育 | |
---|---|---|
感受 | 負面 | 正面 |
顏色 | 褐色 | 黃色 |
利用網路資訊製作
上網製作非常耗時,須重新學習,可能有轉檔的問題
製作資訊圖表耗時!
非常不錯的課程值得推薦!
]]>開發者
很開心、使用者
很不開心寫
到各個地方#社群力量派上用場
、 #人多勢眾
、 #工程師多交流
、 #英文要夠強
vs
Cordova- | React Native | Cordova |
---|---|---|
學習 | 初期:高,中後期:易 | 易(如果你本來就寫 web) |
開發 | 初期陣痛,日後不變 | 隨時間與專案變高 |
體驗 | 高 | 低 |
第三方 | 只能用純 JS Lib | web plugin 多數可使用 |
效能極限 | 無極限(除非原生不支援) | 低(看 Cordova 支援程度) |
vs
Native- | React Native | Native |
---|---|---|
學習 | 易 | 高 |
開發 | 易 | 高 |
體驗 | 高 | 高 |
第三方 | 只能用純 JS Lib | 多 |
app 更新 | 快(更新 server) | 慢(最快兩週?) |
開發者
很開心、使用者
很不開心YES
的時候 ng-show 遽然不會動作 O_o”
sample Code:
|
|
|
|
ng-show 裡面綁定 $scope.test 並存在 value: ‘yes’, 為什麼 卻不會 show 哩?
以下是一連串的實驗與驗證:
Code
觀看 source Code)ng-show 可以正常判斷 test2 存在 value 因此顯示
ng-show 無法判斷 test 轉型 boolean
透過簡單的 if else 測試 test 是否有 value?
結果是true
O_o”
|
|
結果:可以正常顯示
因此向許多前輩請教後發現 AngularJS 將:
Yes
視為 trueNo
視為 falseO_o”
在下面的 more test 範例將測試 ng-show
與 ng-hide
在 $scope 變數內容為 string: yes, no, on, off 的小實驗。
實驗後 on, off 結果還是怪怪的,可能還要看下文章..
印象在學習 angularJS 初期有看過類似文章,可是一時找不到..日後補上哩 ^_^
]]>YES
的時候 ng-show 遽然不會動作 O_o”
]]>
非常不錯的課程值得推薦!
疑問簡報的定義是什麼?
簡報的核心關鍵:內容!
對我來說簡報就像寫作、畫圖、作曲一樣..是一種溝通形式。
竟然是溝通形式的話..你要告訴別人什麼內容
才是最重要的!
有目的的溝通:為了說服!
有了目的還不夠,必須
瞭解聽眾
的對象是什麼?
對象是起點
目的是終點
掌握了三點就掌握了說服的基本原則
簡報的旅程才算是正式的踏出了第一步
變形的好處可以吧主角是不是野狼大野狼
一開始既破題指出大野狼死掉了!
觀眾也許會疑問說,為什麼大野狼為什麼會死?
接著時間轉移到小紅帽為什麼出門因為要去探望奶奶舉例時間軸範例電影:超時空攔截(2014)
從微觀案例觀察它的變化,進而發現問題,再從問題看到更宏觀的角度,開拓聽眾分析事情角度的視野。
新任主管發現很多人加班,但公司績效卻不如預期?
舉出:日本同業某公司營收暴增,卻沒有做任何新產品或合併!(那他做了什麼?)
老闆宣布修改取消加班費機制政策,改為績效獎勵機制!
半年後發現,上班的時候每個人充滿幹勁把效率發揮到最高,鼓勵做得好、做得多的員工,而不是工作做很久一直加班的員工。
再舉出:有個類似的公司,有一個人才出走了,因為老闆只看到加班最多人認為他最努力..。
實作小技巧:
再開始製作PPT的時候只寫上標題重點,開始排序,直到釐清脈絡在開始詳細每個章節。
穹頂之下 - 柴靜
懷疑自己小孩患有良性腫瘤
史丹佛大學演講 - 賈伯斯
引發啟示
先架構在內容
簡報畫面,聽眾感知
簡報內有什麼重點,需要被知道的表現方式
用聽的無法理解
如:數據,畫面
開始正式簡報製作
簡報製作軟體並不是只有 PPT、Keynote
非常不錯的課程值得推薦!
]]>非常不錯的課程值得推薦!
Garr Raynolds 說簡報三階段:
最耗時
準備 - 設立目標
聽眾不太能接受只是告知、簡介型的簡報
世界上不存在告知型的簡報
只有
能喚起
行動的簡報,
沒有喚起
行動的簡報
by 韓明文
把你的簡報變成 動詞
卡住就出去走走
錯把 PPT 當成 WORD
太多重點就是沒有重點
最多6個重點,不要超過6個字
分層
錯誤配色
背景色與字體色太近
大學問,推薦工具:
內容 7%
聲音 38%
肢體語言 55%
以上研究是針對,做情緒性溝通的時候
如何將人生的意外,變成美麗的風景,是一門藝術。
使用名句
舉例 1:
|
|
舉例 2:
|
|
Nancy Duarte
Garr Raynolds
韓明文
王永福
孫治華
林稚蓉
彭毅弘
林泰君
非常不錯的課程值得推薦!
]]>filefox only
的坑,因為只有 filefox 有,在 Chrome, Safari, ie 都沒發生過實在太特別了..所以紀錄一下..OTZ..感謝: raphahsu
。sample Code 功能是 input + remove button, 點擊 button 將會把 input 內容清空
相當於 <input type='search'/>
的功能。
|
|
主要是16行: replace: true
這部分不要用或者設定為 false
既可。
因此範例檔直接執行會是錯誤的狀態。
filefox only
的坑,因為只有 filefox 有,在 Chrome, Safari, ie 都沒發生過實在太特別了..所以紀錄一下..OTZ..感謝: raphahsu
。去年在 Facebook 上面看到許多朋友分享 mopcon 2014 照片有 mopcon 娘、超有梗T恤 "這不是BUG,這是特色"
,才發覺原來南台灣有個科技研討會並堅持舉辦在濁水溪以南
,照顧南部的鄉親,的確台灣的重北輕南情況在科技業中更是明顯,天龍國以外的小朋友想要知道今年科技趨勢是什麼、用什麼技術、熱門議題遮些資訊都要北上一趟才能獲得..但光是參與門票和車資、住宿費用加起來已經是一筆很大的開銷,而 mopcon 的出發點就是這麼單純的認為南部絕對需要一個大型研討會。
記得是在參加 workshop 最後工商服務的時間剛好 mopcon 2105 議程組組長 - 凍仁,上台說明今年的 mopcon 並且歡迎有志青年加入議程組
,會後我就向凍仁要了一張名片並聽他講解議程組工作內容,不過我沒有相關經驗所以沒有什麼概念,只覺得是一個機會。
因此第一次參加 mopcon 就直接加入議程組擔任工作人員。
mopcon 是一個舞台讓所有參與者都有發揮的空間。
最辛苦的肯定是組長大人,許多溝通協調的部分在組長那端已經幫我們做完,議程組可以說是凍仁與他的快樂夥伴們
,可以看到組長的重責大任,見證到組長的工作效率與決策,我想應該連任把今年的經驗傳承下去 XDD。
當天現場最辛苦的是場務組、門機組、線路組等現場工作人員…無法想像一群人可以這樣合作無間讓會議順利圓滿完成,太強大了!!
當天現場的工作是協助主持人令會議順利進行,舉凡設備故障,燈光,講師需求,仔細想想很多地方可以做得更好,比如應先了解環境設定應該找誰協助,會議現場設定應該找誰協助,有時候搞不太清處狀況,因此也謝謝組員即時協助。
印象深刻的贊助商:
Unconference 第二天有位國外講者Chip
分享 IoT 原來他在美國軍方工作 20 多年,他非常熱愛台灣並且很想把所學所會分享給台灣的朋友,順便尋求合作夥伴,他非常願意教你他會的東西,並且付給您水準以上的薪資。
星光晚宴,過程有許多插曲,不過最值得就是與LINE
講師們一同用餐,我很怕講師跟一群小朋友坐在一起有點尷尬,因此拋開羞恥心開始向講師們請教各種蠢問題,比如:可以向我們分享 LINE 工作環境嗎?LINE 對於安全性要求是不是很高?LINE UI如此簡潔美麗是不是非常重視設計師?LINE 注重什麼樣的人才什麼特質?十分感謝講師 Marco、Benny、George 非常親切且認真的回答每個問題,對我們而言是十分大的收穫,印象非常深刻的經驗,謝謝。
參加mopcon
是一個很棒的經驗,認識許多朋友,比我預期中學習更多的東西,幾乎無法消化,如果明年還會參與議程組的話,希望挑戰主持人
工作,訓練口條,然後英文練一下 :P。
去年在 Facebook 上面看到許多朋友分享 mopcon 2014 照片有 mopcon 娘、超有梗T恤 "這不是BUG,這是特色"
,才發覺原來南台灣有個科技研討會並堅持舉辦在濁水溪以南
,照顧南部的鄉親,的確台灣的重北輕南情況在科技業中更是明顯,天龍國以外的小朋友想要知道今年科技趨勢是什麼、用什麼技術、熱門議題遮些資訊都要北上一趟才能獲得..但光是參與門票和車資、住宿費用加起來已經是一筆很大的開銷,而 mopcon 的出發點就是這麼單純的認為南部絕對需要一個大型研討會。
首先本次介紹的方法是類似 get json 的簡易方法。
因此我們讀取來源表單必須是公開 散佈到網路
上的形式。
所以如果表單內容較為 機敏
的話可以將表單內容下載成 csv
檔案。
並參考以下文章同樣可以將表單內容轉成 JSON 檔案 nodeJS read csv to JSON
接下來我們將使用 npm 上面的一個模組 google-spreadsheet
來幫助我們解析表單內容
|
|
|
|
許多強大的功能可能還是要透過申請 Google Developers
如果只是簡單的公開表格則可以透過以上方法快速將資料取下,做處理並結合其他 api 做成服務。
好處是 user 可以使用平易近人的 excel 輸入自己的資料,如團購、訂便單,而負責統計的工程師可以透過
enjoy!!
我們將使用 npm 上面的一個模組 csvtojson
來幫助我們將 csv 解析成 JSON.
|
|
|
|
常常在使用 Excel / google spreadsheet 做統計資料的時候,就在想是不是可以把這些資料做成 JSON 檔案,再去和其他 api 結合做出好玩的應用,當然有很多線上的功能可幫助我們完成同樣的動作,但是利用 nodeJS 來實作一方面可以學習 nodeJS 並瞭解 JavaScript 不只可以寫網頁同時感受 nodeJS 強大威力!
enjoy!!
]]>
|
|