昨日提到的評估框架結果後，今天的內容偏向是技術面開發的重點彙整。

監測平台

Web framework

昨日的文章有提到要使用Node.js做後端的開發，因此在開發前尋找目前最常使用的網頁開發框架，初步蒐集的結果有例如Express.js與koa.js，而在這兩者的參考資料以Express.js為大眾(另外一個原因為在先前就有嘗試想學習這個框架)，所以最後選擇使用他作為專案的網站開發框架。

基本專案的建立、查詢與初始化設定

首先網站來源的部分可以參考官方文件的說明，基本上入門標籤內的教學就可以建構一個初始的版本，接著簡單介紹一下會使用到的指令。

首先如果尚未建立專案資料夾的話，可以透過指令建立目錄，下述的指令可以在開發的工具開啟CMD，或者是在當下的資料夾路徑直接輸入CMD也可以。(總之第一步就是開啟CMD就對了xD)

$ mkdir IronCup

建立完成之後接著就是進入剛剛建立的的資料夾，可以透過cd帶資料夾名稱或者是路徑(假如不是專案當下那一層目錄的話)進入。

$ cd IronCup

然後在專案資料夾內下 npm init 指令建立 package.json 檔，那甚麼是package.json呢，簡單來說就是專案的相關資訊，或者是有引用package時就會在這裡定義。

延伸資料參考

$ npm init

Express.js

除了上述之外接著最重要的就是產生express的應用程式，第一件事情就是安裝express的應用程式指令如下，在這裡補充一下如果需要安裝新的套件時，通常都是npm install xxx(套件的名稱)。另外也需要留意npm install有分為global與local的安裝方式，詳情可以參考這個網站的資訊，依照需求和專案的性質選擇安裝的方式。

接著輸入下述的指令時若不了解各別對應語法的行為時，可以下express -h即可以查閱相關的說明，其中個人比較常使用的是-v，因為在views區塊有嘗試使用pug與ejs開發，所以如果也是一樣的需求就可以在建立的時候宣告。

$ express -h

  Usage: express [options][dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

$ npm install express-generator -g

express npm來源參考

專案建立完成後的資料夾架構，基本上會有routes、public、views(其他的不多加贅述)，那各別代表的角色首先是首先是routes，就像是它的名字一樣設定轉向views的指定頁面，以及相關的處理邏輯都會在這裡處理(但我的建議是專案一大的時候，可以在多一個controller的資料節處理商業邏輯，routes就單純做網頁轉向或者是API的行為定義)。

再來則是views來設計畫面呈現的部分，而當第一次接觸到pug的時候就是整個一頭霧水，寫起來就是很簡潔但需要花時間去熟悉，但後來就直接先設計好html的版本，然後再使用線上的轉換工具變成pug的程式碼。

另外一個jade的view template則是保有html的風格，然後接收後端回傳的參數有點像Razor的設計概念，但這兩個使用一段時間過後還是覺得pug比較好用，但前期是熟悉基本的概念後，再搭配vscode延伸套件開發效率算是還不錯!

最後則是public的部分就是存取靜態檔案的地方，包含css、javascript或者是上傳功能需要存取的地方就可以定義在這裡。

pug的官方文件
html convert to pug參考資源

資料庫的設計

在這個部分主要使用MongoDB的雲端服務，這個考量原因是因為輔導的廠商當時沒有虛擬主機，也因此在評估各項工具的時候，都是會先尋找是否有雲端服務可以使用。

MongoDB

官方相關教學的資源算是還蠻豐富，而通常還會再搭配Mongoose的工具設計模型以及使用他們的API，補充一下雖然說NoSQL不太需要特別設計模型，但還是建議較重要功能需要存取的資料形式可以在model(另外再新增一個資料夾)宣告。

即時監測反應的Library

Socket.IO

這個是可以讓應用程式建立即時通訊的 JavaScript 函式庫，從 Server（伺服器）到Client（裝置）之間建立持續的連線，可以即時的傳送資料給對方。而要如何跟監測資料庫可以使用watch的行為去監測資料庫異動，當有改變的時候就可以在前端已經建立好的監聽器，捕獲資訊之後顯示到畫面上。

備註 : 由於這個過程的細節還蠻多的，所以建議親自到官方網站操作demo練習會比較了解。

參考資料

鏡頭監測與影像辨識

原本要分開這兩個部分寫但最後還是直接重點說明一下，首先鏡頭監測的部分檢視SDK檔案，並且去修改原本只能單張上傳判斷的行為，改成連續拍攝不中斷並且同時呼叫影像辨識的程式碼。而影像辨識的程式碼是Python撰寫的，所以需要去搜尋透過script呼叫py檔案的方法。

在Python部分原先也是單張上傳然後框選要辨識的區塊，但後來的需求是需要配合產線不間斷的偵測，因此也改了一部分的程式碼。

可以跑的動的成品

在這三個部分花最多時間的就是開發平台，然後在上線的部分則使用了Heroku，並且搭配網路上24小時不休眠的工具，以及綁定信用卡多的時數足夠應付驗證的階段。反觀在鏡頭監測和影像辨識都著重修改串接的部分(例如怎麼數值、怎麼不間斷偵測、怎麼在不同語言間觸發等等)，也很慶幸的是後來輔導廠商來的兩個新人，正好可以把這一個部分整體再更加優化，並且自己可以再回頭檢視平台的程式重構。

這一個計畫的心得

從接手到場地驗證大概花了4到5個月的時間，這個過程中就是遊走在C#、Javascript、Python的世界，在開發上遇到的困難點莫過於鏡頭辨識的知識學習，並且在了解概念下對應修改SDK的內容。

其他的話反而很開心能夠學習到很多的技術內容，以及靠一己之力去完成一個階段的開發，但說實在如果要到商用的階段也是需要花一些時間調整，但能夠在短時間讓輔導的廠商從擔心到放心的成就感還蠻不錯。