臺灣博碩士論文加值系統

由於網路和科技的迅速發展，大部分的人手上都有一台智慧型行動裝置，擁有行動裝置即可使用各種應用程式也可以隨時隨地的上網，且許多應用程式會用到網路功能，因此行動數據及Wi-Fi就成為了不可或缺的網路技術，許多商家因為設置網路的便利性，會在店內安裝Wi-Fi分享器提供給客人使用。而且Wi-Fi訊號可以用來定位位置，商家能利用Wi-Fi熱點讓消費者偵測店家的位置，並且結合應用程式進行行銷推廣。
本研究是結合Android應用程式與jQuery Mobile呈現Wi-Fi商務推廣系統，利用Wi-Fi定位的特性讓商家可以使用Android應用程式進行廣告推廣，且一般民眾可以使用Android應用程式查看使用者附近商家的廣告資訊，透過點選廣告或回答問卷即可以獲得該商家的Wi-Fi密碼，即可免費上網。此系統主要使用MIT App inventor 2、jQuery Mobile、MySQL、PHP等技術，結合伺服器與Wi-Fi熱點的架設，開發跨平台的Android應用程式，且本研究使用開源的軟體開發，可以降低開發的成本。

Because of the networking and technology rapid development, there are many changes on society. The most obvious difference is that people now almost have a mobile device or tablet. With these devices, users can use all kinds of applications and surf the internet anytime and anywhere. Many applications needs network function, so cellular network and Wi-Fi has become indispensable networking technology. Because of the convenience of setting up the Internet, many stores start setting Wi-Fi router which provide Wi-Fi hotspot for guests. Wi-Fi can be used to locate position, so businesses can use this feature which allow consumers to detect position of their store, and combine this feature with mobile application to start marketing promotion.
This research combines the Android application and jQuery Mobile to present a Wi-Fi business promotion system. Using Wi-Fi positioning function allows business to advertise their store information by using Android application. Consumer can use this Android application to view advertisement information nearby user. Also consumer can get the store’s Wi-Fi password by watching advertisement or answering the questionnaire. This system consists of MIT App Inventor 2, jQuery Mobile, MySQL and PHP technologies combine with server system and Wi-Fi to create cross-platform Android application. This research use open source software that can reduce the cost of development.

目錄
明志科技大學碩士學位論文指導教授推薦書 i
明志科技大學碩士學位論文口試委員審定書 ii
誌謝 iii
摘要 iv
Abstract v
目錄 vi
圖目錄 viii
表目錄 x
第一章 緒論 1
1.1 研究動機與目的 1
1.2 研究貢獻 2
1.3 論文架構 3
第二章 系統介紹 4
2.1 前言 4
2.2 系統架構 5
2.3 商家端功能 6
2.4 消費者端功能 7
第三章 Wi-Fi商務推廣系統軟體與硬體介紹 8
3.1 Wi-Fi商務推廣系統 軟體工具篇 8
3.1.1 MIT App Inventor 2 8
3.1.2 HTML5 14
3.1.3 JavaScript 18
3.1.4 jQuery Mobile 19
3.1.5 WampServer 21
3.1.6 Apache 22
3.1.7 MySQL 24
3.1.8 PHP 25
3.1.9 Sublime Text 27
3.1.10 Arduino IDE 28
3.1.11 Google Map 30
3.2 Wi-Fi商務推廣系統 硬體篇 31
3.2.1 ESP32-DevKitC開發板 31
第四章 系統實作與呈現 34
4.1 WampServer伺服器架設 34
4.1.1 建立MySQL資料庫與資料表 36
4.2 系統APP程式設計 40
4.2.1 MIT App Inventor 2開發環境建置 40
4.2.2 商家端APP（Client info upload）設計 41
4.2.3 消費者端APP（FreeWiFiSearch）設計 46
4.3 系統呈現 55
4.3.1 商家端APP實作結果 55
4.3.2 消費者端APP實作結果 59
第五章 結論與未來展望 63
5.1 結論 63
5.2 未來展望 63
參考文獻 65


 
圖目錄
圖 2 - 1 系統架構示意圖 4
圖 2 - 2 Wi-Fi商務推廣系統之架構圖 5
圖 2 - 3 商家端可上傳之資料 6
圖 2 - 4 消費者端應用程式功能示意圖 7
圖 3 - 1 MIT App Inventor 2 程式開發介面 9
圖 3 - 2 MIT App Inventor 2 系統需求[3] 9
圖 3 - 3 MIT App Inventor 2 開發應用程式流程 10
圖 3 - 4 MIT App Inventor Designer 畫面 11
圖 3 - 5 MIT App Inventor 2 Blocks頁面 12
圖 3 - 6 MIT App Inventor 2 程式打包QR code畫面 13
圖 3 - 7 HTML5網頁基本架構示意圖 18
圖 3 - 8 客戶端網頁技術示意圖 19
圖 3 - 9 jQuery Mobile結構起手式 20
圖 3 - 10 jQuery Mobile 基本頁面結構 21
圖 3 - 11 WampServer操作介面 22
圖 3 - 12 Apache開啟後之WampServer頁面 23
圖 3 - 13 MySQL資料表範例 24
圖 3 - 14 MySQL管理頁面 25
圖 3 - 15 伺服器端網頁技術示意圖 27
圖 3 - 16 Sublime Text程式編輯介面 28
圖 3 - 17 Arduino之程式編輯介面 29
圖 3 - 18 Google Map傳統地圖模式 30
圖 3 - 19 ESP32 DevKitC接腳圖 31
圖 3 - 20 ESP32功能框架圖 33
圖 4 - 1 WampServer下載頁面 34
圖 4 - 2 WampServer安裝完成畫面 35
圖 4 - 3 WampServer啟動成功標示 35
圖 4 - 4 使用WampServer測試test.html檔 36
圖 4 - 5 資料庫建立畫面 37
圖 4 - 6 資料表建立畫面 37
圖 4 - 7 資料表欄位設定畫面 39
圖 4 - 8 資料表建立完成畫面 39
圖 4 - 9 MIT App Inventor 2使用Google帳號登入畫面 40
圖 4 - 10 MIT App Inventor 2程式開發頁面 41
圖 4 - 11 商家端程式使用示意圖 41
圖 4 - 12 INFO頁面元件設計 42
圖 4 - 13 App Inventor POST資料程式塊 43
圖 4 - 14 寫入資料庫之PHP程式碼 43
圖 4 - 15 MIT App Inventor 2上傳圖片程式塊 44
圖 4 - 16 PHP上傳圖檔程式碼 45
圖 4 - 17 儲存圖片檔至本機伺服器 45
圖 4 - 18 Map頁面部分程式碼 46
圖 4 - 19 消費者端APP使用示意圖 47
圖 4 - 20 Wi-Fi連線頁面設計 48
圖 4 - 21 MIT App Inventor 2 擴充元件匯入畫面 48
圖 4 - 22 消費者端APP Wi-Fi功能程式碼 49
圖 4 - 23 行動裝置連上MySQL之PHP程式碼 50
圖 4 - 24 APP顯示網頁檔程式碼 50
圖 4 - 25 Google API 金鑰 50
圖 4 - 26 在JavaScript使用API金鑰之程式碼 51
圖 4 - 27 顯現地圖之JavaScript程式碼 51
圖 4 - 28 獲取MySQL資料之PHP程式碼 51
圖 4 - 29 JavaScript定位程式碼 52
圖 4 - 30 InfoWindow程式碼 52
圖 4 - 31 經緯度轉換程式碼 53
圖 4 - 32 商家詳細資訊程式碼 53
圖 4 - 33 傳送Wi-Fi密碼部分程式碼 54
圖 4 - 34 商家端APP起始畫面 55
圖 4 - 35 Upload IMG起始畫面、警告訊息跳出 56
圖 4 - 36 選擇圖片畫面、圖片上傳成功畫面 56
圖 4 - 37 Map頁面起始畫面、設置圖標顯示經緯度 57
圖 4 - 38 按下Remove marker清除圖標 57
圖 4 - 39 資料填寫完成、上傳資料成功畫面 58
圖 4 - 40 資料位填寫完成顯示警告標語 58
圖 4 - 41 MySQL資料表 59
圖 4 - 42 Wi-Fi連線畫面、附近Wi-Fi清單 59
圖 4 - 43 商家分類清單、Google Map頁面 60
圖 4 - 44 商家資訊視窗畫面 60
圖 4 - 45 店家詳細資訊 61
圖 4 - 46 問券未完成、問券完成畫面 62

 
表目錄
表 3 - 1 語意標籤功用說明 17
表 4 - 1 商家資料表 38
表 4 - 2 資料表欄位說明 38

[1]106年手機族數位機會調查報告 (2018, Apr. 19) [Online]. Available: https://ws.ndc.gov.tw/Download.ashx?u=LzAwMS9hZG1pbmlzdHJhdG9yLzEwL2NrZmlsZS9mOTM5NzkxZi02NDM1LTQ2Y2QtOTYxNC02MmMwMzE3MzJlYzkucGRm&n=MTA25bm05omL5qmf5peP5pW45L2N5qmf5pyD6Kq%2F5p%2Bl5aCx5ZGKLnBkZg%3D%3D
[2]資訊學科中心6月份電子報-MIT App Inventor 2 (2018, Apr. 24) [Online].Available: http://im.thu.edu.tw/upload/news_upload/Inventor%E4%BB%8B%E7%B4%B9%E5%92%8C%E4%BD%BF%E7%94%A8.pdf
[3]蔡宜坦. 超圖解!App Inventor 2手機程式設計教本. 2014年7月, pp1-3
[4]App Inventor 2中文學習網 (2018, Jan. 20) [Online]. Available: http://www.appinventor.tw/ai2
[5]Google Play商店- MIT AI2 Companion (2018, Jan. 22) [Online]. Available: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=zh_TW
[6]Installing and Running the Emulator in AI2 (2018, Apr. 22) [Online]. Available: http://appinventor.mit.edu/explore/ai2/setup-emulator.html
[7]HTML5 (2018, Apr. 26) [Online]. Available: https://zh.wikipedia.org/wiki/HTML5
[8]MBA智庫百科-HTML5 (2018, Apr. 26) [Online]. Available: http://wiki.mbalib.com/zh-tw/HTML5
[9]HTML5應用程式介面 (2018, Apr. 26) [Online]. Available: https://www.inside.com.tw/2011/07/31/html5-tutorial-for-beginners
[10]HTML5基本結構 (2018, Apr. 26) [Online]. Available: https://www.w3schools.com/html/default.asp
[11]JavaScript (2018, Apr. 10) [Online]. Available: https://zh.wikipedia.org/wiki/JavaScript
[12]jQuery (2018, Apr. 27) [Online]. Available: https://zh.wikipedia.org/wiki/JQuery
[13]jQuery Mobile (2018, Apr. 28) [Online]. Available: http://jquerymobile.com/
[14]WampServer (2018, Feb. 18) [Online]. Available: http://www.wampserver.com/en/
[15]Apache HTTP伺服器 (2018, May. 18) [Online]. Available: https://zh.wikipedia.org/wiki/Apache_HTTP_Server
[16]MySQL (2018, May. 14) [Online]. Available: https://zh.wikipedia.org/wiki/MySQL
[17]PHP (2018, May. 2) [Online]. Available: https://zh.wikipedia.org/wiki/PHP
[18]PHP特色 (2018, May. 10) [Online]. Available: https://sls.weco.net/blog/ie965119/04-jan-2009/12246
[19]Sublime Text (2018, Mar. 10) [Online]. Available: https://zh.wikipedia.org/wiki/Sublime_Text
[20]Arduino (2018, Apr. 10) [Online]. Available: https://zh.wikipedia.org/wiki/Arduino
[21]Arduino IDE (2018, Apr. 10) [Online]. Available: https://blog.arduino.cc/2015/02/09/arduino-ide-1-6-is-released-download-it-now/
[22]Google地圖 (2018, May. 9) [Online]. Available: https://zh.wikipedia.org/wiki/Google%E5%9C%B0%E5%9B%BE
[23]ESP32-DevKitC (2018, Mar. 9) [Online]. Available: https://www.espressif.com/zh-hans/products/hardware/esp32-devkitc/overview
[24]ESP32 DevKitC按鍵及腳位說明 (2018, Mar. 9) [Online]. Available: http://esp-idf.readthedocs.io/en/latest/get-started/get-started-devkitc.html
[25]ESP32 DevKitC功能 (2018, Mar. 9) [Online]. Available: https://www.espressif.com/sites/default/files/documentation/esp32_datasheet_cn.pdf
[26]PhpMyAdmin (2018, Mar. 2) [Online]. Available: https://zh.wikipedia.org/wiki/PhpMyAdmin
[27]Pura Vida Apps－App Inventor MySQL interface (2018, Feb. 2) [Online]. Available: https://puravidaapps.com/mysql.php
[28]Pura Vida Apps－Wi-Fi Extension (2018, Feb. 2) [Online]. Available: https://puravidaapps.com/wifi.php
[29]Google－Maps JavaScript API (2018, Mar. 11) [Online]. Available: https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-tw
[30]Mapicons (2018, Apr. 11) [Online]. Available: https://mapicons.mapsmarker.com/
[31]The Comprehensive Guide to Online Advertising Costs (2018, Jul. 2) [Online].Available: https://www.wordstream.com/blog/ws/2017/07/05/online-advertising-costs

[32]WI-FI WPA2加密出現大漏洞， ANDROID手機請避免使用未知WIFI或公眾免費WIFI免費上網! (2018, Jun. 30) [Online]. Available: https://tel3c.tw/blog/post/16455
[33]黃則維，「一個適用於商圈的互助型O2O廣告系統」，國立交通大學 網路工程研究所 碩士論文，104年。
[34]許哲維，「基於校園無線網路之行動訊息推播架構」，國立中央大學資訊工程學系 碩士論文，103年。
[35]Kam-Yiu Lam, Joseph K. Ng and Jian-Tao Wang, “A Business Model for Personalized Promotion Systems on Using WLAN Localization and NFC Techniques”, 2013 27th International Conference on Advanced Information Networking and Applications Workshops, 2013, pp.1129-1134.
[36]Qun Wei and Li Duan, “Research and implementation of mobile advertising system based on location service”, 2017 3rd International Conference on Information Management (ICIM), 2017, pp.407-411.
[37]Xiaolong Liu, Shyan-Ming Yuan, Xuebai Zhang and Pai-Hsuan Wang, “Mobile advertising system based on user provided information in exchange for free network access”, 2017 10th International Conference on Ubi-media Computing and Workshops (Ubi-Media), 2017, pp.1-6.