昨日提到的评估框架结果後，今天的内容偏向是技术面开发的重点汇整。

监测平台

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的内容。

其他的话反而很开心能够学习到很多的技术内容，以及靠一己之力去完成一个阶段的开发，但说实在如果要到商用的阶段也是需要花一些时间调整，但能够在短时间让辅导的厂商从担心到放心的成就感还蛮不错。