專題展系統開發概念分享

1. 專題展系統開發 吳宗錫

2. 系統相關連結
專題展報名網站：
http://exhibition.ee.ccu.edu.tw/
投票系統Demo影片：
https://www.youtube.com/watch?v=AevyAuT1nU4
即時開票系統：
http://exhibition.ee.ccu.edu.tw/voting.php
http://exhibition.ee.ccu.edu.tw/docs/poster_voting.pdf

3. 專題展系統
網站
報名系統
投票系統
開票系統
網站
報名系統
開票系統
資料
庫
投票
系統

4. 網站
聽到網站的第一印象？
大家都會
小學生在玩的
廉價
……
你真的了解網站是什麼嗎？

5. 網站
前端
 HTML
 CSS
 Javascript
 ……
後端
 ASP.NET
 php
 ……
資料庫

6. 前端我知道，TAG改一改，就好了
你可能不知道，style可以透過Cascading Style Sheets (CSS)定義。
你可能不知道，透過Javascript，可以達到非同步網站設計(AJAX)。
你可能不知道，Javascript已經有一群人使用JQuery使設計更簡化。
你可能不知道，現在最紅的版型工具是Bootstrap。
你可能不知道，只有前端的網站，什麼應用都沒辦法做。

7. php我知道，我會用
就把資料echo到前端就好了。
這樣開發的程式，HTML與php穿插，而且無
法靈活運用，程式碼東一塊西一塊……

8. 你一定要知道的模板引擎
模板引擎的目的是分割HTML與後端。
讓程式設計師可以專注在程式開發、介面設計師可以專注在介面呈現。
常見的模板工具：
 Javascript類：Mustache, Handlebars, doT, Dust, EJS, Underscore, Jade, ECT,
Template7, jTemplates……
 php類：Smarty, Blade, Biltz, CTPP, Dwoo, FigDice, H2o, HAH, Haml, Jscore, Mars-
Templater, MiniTemplator, mTemplate, Open Power Template, Outline, Scurvy,
Simphple, Twital, Tonic, Twig, ZeniTPL, Fenom……

9. 使用模板工具後
HTML php

10. 使用Smarty後的好處
如果Banner、footer、menu等每個頁面都一樣的地方，修改一部分，只需修
改require的php library，全部都可以統一修改，不需要有幾個頁面複製貼上
幾次。
可以統一顯示的東西給使用者，例如什麼時間點顯示什麼資訊。

11. 統一內容的選單

13. 可以時限關閉／開啟系統

14. 資料庫
常見的資料庫有：MySQL、SQL Server、MongoDB、MariaDB……
也有搜尋引擎當作資料庫：Elastic search……
但你可能不知道，市面上還在使用的資料庫還有…

15. 2016年的網站技術
jQuery很炫，今天第一次聽到，但最早的版本已經是2006年的事情了。
今年是2016，你絕對應該用React。
你應該了解async和await，使用Babel，在ES2016+的標準下。
你應該要了解node.js、npm等現在進行式名詞。
另外版本控制也很重要，你應該要知道git等版本控制。
2017年快到了，還有很多東西可以學習。

16. 專題展網站 是靈魂，也是數據中心。

17. 特色
現代化版型
結合報名系統
結合投票系統
結合開票系統
支援跨平台裝置，不須另外進入/m或m.版本的頁面
所有你看得到的資訊，都是從資料庫撈取資料的，也就是說，維護的人不需要
寫到任何的程式。

18. 開發環境
架設環境：
 Apache 2.4.23
 MySQL 5.7.14
 php 7.0.10
使用工具：
 JQuery
 Bootstrap 3
 sass
模板工具：
 Smarty 3.1.30
icon 字型：
 FontAwesome

19. 檔案架構
root
js
css
libs
templates

20. 資料表

22. 報名系統 這，不只是報名系統。

23. 特色
強迫你記憶的問答系統。
Google機器人驗證。
自動化判定報名時間。
上傳檔案系統完全非同步。
同步產生pdf擷取圖像至網站上。

27. AJAX
HTML jQuery
php
php
php
$.post()
$.post()
$.post()

29. 呼叫外部程式
單純靠php本身是不可能做出擷取pdf頁面至jpg功能的。
我額外寫了一個C#轉檔程式，放進伺服器中。

30. 投票系統 當功能完整了，就要追求更高
層次的美感。

31. 特色
結合報到功能。
結合NFC讀卡機。
結合資料庫，所有的隊伍名稱資訊都是由專題展網站的MySQL撈取。
即時投票。
可以由報到處開啟或關閉系統投票權限。
非Windows Form或CLI介面。

32. 開發環境
使用Monogame (XNA)遊戲引擎開發。
Component-based pattern。
API：
 Info Think NFC API
 MySQL.Data 4.5

33. 為什麼使用遊戲引擎開發？
1. 可以跳脫以往的圖形化介面或是CLI。
2. 可以有高流暢度。
3. Monogame從前身XNA至今，個人已經有6年的開發經驗，可以在最短的
時間內完成。
(11/25開發，11/28正式上線)

35. 本次開發遇到的困難
各裝置解析度不同問題。
雖然遊戲引擎在全螢幕時會自動調整大小，但是滑鼠的位置點是按照當下裝置
的解析度決定，導致不同裝置無法點選隊伍。
解決方式：
取得現在裝置的當下解析度，以及開發時的解析度，在所有滑鼠座標點的地方
算出一個scale值，重新判斷是否有選取到。

36. 取得裝置解析度與開發解析度

37. 調整滑鼠座標位置

38. 重新判斷游標是否有在正確的位置

39. 如果你對遊戲引擎感興趣
可以學習Monogame，理由：
 簡單易學。
 使用C#開發。
 有微軟強大的Framework加持。
 2D/3D皆可以開發。
 跨平台。
或是選擇Unity3D：
 使用C#開發。
 有廣大的開源程式碼。
 主要是3D，但2D也可以開發。
 跨平台。

40. 開票系統 即時開票、緊張刺激。

41. 特色
每15秒鐘重新整理最新票數。
華麗的特效。
跨平台裝置。

42. 開發
API
 elycharts
 raphael-1.5.2

43. 未來展望 朝優質系統邁進。

44. 未來展望
報名介面再人性化，處理特殊字元，手機號碼等輸入資料的真偽判定。
結合更多人性設定，不只有早安、午安、歡迎等問候語。
投票系統可以有3D的場景導覽，點即時顯示資訊框，包含海報、專題名稱、
隊員等等。
即時開票圖表可以增加長條圖、更多統計資料。

45. Q & A