1. 組別 ： 11
組長 ： 解資彥
組員 ： 周柏澤、蔡仁傑
行動信息推播與導引整合系統

2. 大綱
工作分配
動機與目的
系統架構
系統分析
結論
未來展望
成果展示
Q & A

3. 工作分配
解資彥 蔡仁傑 周柏澤
 樹莓派微處理機
- 樹莓派設定與規劃
- 網站伺服器環境設定
- 即時通訊伺服器
- 伺服器服務自動化
 Wifi無線網路模組規劃
 NFC硬體模組
- NFC測試與規劃
- NFC伺服器端程式
 遠端控制程式
- GCM訊息推播服務
- 資料庫備份
- 檔案上傳
 網站系統設計與建置
- 資料庫規劃與設計
- 會員管理、文章管理
- 訊息管理、推播
- 權限、加密技術與安全性
 推播訊息App的撰寫
- 介面、 icon與素材設計
- NFC訊息接收子程序
- 資料庫訊息接收程式
- GCM訊息接收服務
- 即時通訊子程式
- 認證機制與加密處理
- 桌面小工具(Widget)
- 啟動導航程序撰寫
 傳感器測試
- 方向傳感器
- 磁場傳感器
- 加速度傳感器
- 指北針功能實作
 導航App
- 介面設計
- Google Map測試
- GPS定位誤差測試與撰寫
- 無線網路定位
- 導航功能撰寫
- 箭頭方向機制設計
- 旋轉圖片功能撰寫
- 路徑規劃功能設計
 網站系統設計與建置
 推播訊息App的撰寫
 樹莓派微處理機
 Wifi、 NFC硬體模組
 遠端控制程式
 傳感器測試
 導航App

4. 動機與目的：情境1—旅遊時

5. 動機與目的：情境1—旅遊時
繁複的操作與複雜的資訊

6. 動機與目的：情境２—找尋布告欄上的訊息

7. 動機與目的：情境３—在店家中索取ＤＭ

8. 動機與目的：如何解決?
Get Messages
Or
Send Messages
Android App
Rasberry Pi
Microprocessor

9. 動機與目的：建構多功能的資訊系統
Rasberry Pi
Microprocessor
Wireless
Information System

10. HELLOW
WORLD!
動機與目的：應用於學校等公家機關
 不再需要布告欄與紙張
 利用身分識別、群組分類傳播個人化訊息，並顧及資訊安全與
隱私

11.  設置在觀光景點等服務處
 減少紙張浪費
 取得方便
Get Message
Or
Send Message
動機與目的：出遊時的簡易導引地圖

12. 動機與目的：更便利的定位與導航服務

13. 動機與目的：適地性服務的致命缺陷
End PointEnd Point End Point
……
 此系統提供兩種在地資訊推播服務的模式：
 Location Mode：
- 利用GPS等定位方式取得使用者位置，並推播相應的在地資訊
 Local Mode：
- 不需要耗電的GPS
- 不需要公開較為隱私的個人地理位置資訊
- 利用安置各處的裝置提供在地資訊
 綜合兩種模式無論室內、室外，任何地方都能推播在地資訊

14. 




系統架構

15. Android
Device
Other Server
系統架構圖
User Device End Point
Table
Table
Table
Web Server
Google GCM
Server
Browser
OKPC TableTableTable
Database
Rasberry Pi
NFC Module
Wifi
Wifi Module

17. 訊息推播終端節點PC端
遠端控制
程式(伺服
器端)
即時通訊
伺服器
GCM訊息
推播服務
遠端控制
程式(客戶
端)
管理員介
面
資料庫備
份與還原
遠端控制程式架構

18. 遠端控制程式的操作

19. 共用函數庫
App
小工具
訊息清單
登入作業
GCM服務
推播訊息App專案架構

20. 訊息清單
一般訊息
群組訊息
訊息搜尋
訊息內容
推播訊息App訊息清單
訊息內容呈現

21. 網頁架構圖
Preview
首頁
新增帳戶 新增訊息 訊息清單 帳戶清單 文章管理 登出系統
分類管理 增加分類 文章列表 撰寫文章

22. 行動導航App專案架構
GPS定位使用者位置作為起點
由外部App開啟
系統自動設定目的地
網頁
使用者自行輸入目的地
路徑規劃
導航過程函數
磁場或加速度感測器觸發
以旋轉動畫旋轉箭頭 角度
北邊方位

23. 系統分析







24. 行動導航App

25. Android相關技術與資源
 Android
 Eclipse
 GoogleMap API V3
 傳感器
 加速度傳感器
 磁場傳感器

26. 方向傳感器的使用
 以傳感器實作指北針功能
 新舊版本方向傳感器
1. 舊 - Orientation
2. 新 - SensorManager.getOrientation
 Accelerometer
 Magnetic Field

27. 使用導航的方式
 取得目的地經緯度或地址
1. 由其他APP開啟行動導航
2. 直接開啟行動導航
附近有優惠！請點選以查看

28. 導航演算法設計(1/5)：拆解路徑規劃
 處理導航回傳的路線
1. 分解成數個經緯度座標
2. 設定第一個座標為暫時性起點
3. 設定第二個座標為暫時性終點
4. 顯示指引字串

29. 導航演算法設計(2/5)：指北針功能
• 啟動指北針
• 定位使用者目前位置
• 將目前位置與暫時性終點的經緯度計算向量
• 將向量與指北向量帶入向量求夾角公式
• 求出以北偏移之角度
• 將指北針旋轉角度加上偏移角度求得目的地
方向

30. 導航演算法設計(3/5)：起迄點的更新
• 持續偵測使用者位置並計算箭頭方向
• 若抵達暫時性終點，則將目前暫時性終點作
為暫時性起點 ，下一個座標作為暫時性終點
• 更新箭頭方向與指引字串

31. 導航演算法設計(4/5)：UI的操作
• 顯示/隱藏地圖功能
• 顯示/隱藏箭頭功能

32. 導航演算法設計(5/5)：重新定位並導航
• 重新定位以及重新規劃導航功能

33. 推播訊息App

34. 清單呈現方式
 預設的單一欄位列表呈現的資訊有限
Cloud Message
標題：粗體，引起視覺聚焦
副標題：字體較小與標題作出區別，引導使用
者階層式的瀏覽
 以加大粗體呈現
 內容的格式是
【主旨+張貼時間】
 標題 影像預留位置
 此預留位置，會根據使用者上
傳的圖片或自定義的類別作呈
現
 利用標籤、附件的類型來決定
 顯示的圖示
!
推播訊息App的介面設計
 擷取內文開頭的前幾行字。
 完整資訊只在使用者點擊時才
會以新的視窗出現。
 內文

35. 流程圖：小工具( Widget)
Widget程序
訊息輪播：每間隔20秒，
顯示下一個訊息
載入Widget
桌面小工具
載入UI介面
連線伺服器
資料庫
取得訊息資
料
更新計時倒數
完成
顯示訊息
放置Widget
YesNo
No
移除Widget
結束
Yes

36. 流程圖：搜尋訊息
App向伺服器發出連線請求
，並將關鍵字送至伺服器
伺服器利用SQL語法從資
料庫中查詢符合條件的訊
息
將訊息包裝成JSON送出
App取回訊息陣列，並以清
單顯示

37. App利用GPS或Wifi基地台
取得使用者位置資訊
伺服器利用SQL語法從資
料庫中查詢符合條件的訊
息
將訊息包裝成JSON送出
App取回訊息陣列，並以清
單顯示
流程圖：Location Mode

38. 流程圖：加密處理與驗證機制
Username
Password
Data
Member
Table
GCM
Table
%^*(*sdf
^$sdfsdf
Data
Data
Data
Username
Password
?
Data

39. GCM訊息推播

40. 什麼是GCM
our server
registration ID
主動訊息推播：GCM(Google Cloud Message)

41. GCM 推播訊息：終端節點的訊息傳送步驟
管理員輸入訊息後點下發送
並在收到後通知伺服器
伺服器收到訊息後會先利用
URLencoding將訊息編碼
然後再把編碼後的訊息用http request
的方法送給Google GCM Server
Google GCM Server收到後會將訊息
推播給有註冊的使用者

42. 流程圖： Android GCM的註冊、註銷與接收
GCM App
註冊GCM服務
向Google GCM服
務發送註冊訊息
取得GCM註冊碼
將註冊碼回傳至
樹莓派資料庫中
儲存
註銷GCM服務
向Google GCM服
務發送註銷訊息
樹莓派發送GCM訊息
顯示GCM訊息
啟動GCM接收服
務
Yes
No
No
No
進入GCM服務介
面
Yes
No
啟動GCM註
冊服務
Yes
結束
關閉程式
Yes

43. GCM註冊碼的儲存
Table

44. 即時通訊
App流程圖

45. 聊天伺服器架設在樹莓派(Rasberry Pi)上，並且利用
C語言撰寫伺服器程式
即時通訊服務示意圖

46. 傳送訊息程序接收訊息程序
流程圖：即時通訊App
載入UI介面
自動連線
進入聊天室
連線成功
取得伺服器訊息
有新訊息
顯示訊息並捲動
至底部
是否斷線
結束
Yes
Yes
重新設定連線
No
Yes
斷線
Yes
No
No
No
連線成功
等待伺服器回應
送出訊息
是否斷線
結束
斷線
Yes
No
傳送訊息
Yes
No

47. 訊息轉發
器
訊息橋梁訊息橋梁
訊息橋梁訊息橋梁
客戶端
客戶端
客戶端
等待中…
即時通訊伺服器
伺服器端回傳訊息
客戶端的傳送訊息

48. NFC感應
目的：減少操作上的麻煩
解決方法：手機只要靠近裝置上的NFC模組就能自動啟動App
實作方法：
• APP部分：取得NFC使用權限
• 樹莓派的部分：
• 完成電路接線
• 修改系統檔案
• 將UART的資源釋放出來
• 利用libnfc的library program實作NFC功能

50. 網頁技術
前
端
網
頁
技
術
Bootstrap framework：前端網頁框架。
jQuery：jQuery是一套跨瀏覽器的JavaScript函式庫。
CSS：一種樣式表，可將網頁結構化。
AJAX：實現用戶端與伺服器端的非同步處理。
後
端
網
頁
技
術
PHP：後端網頁語言。
Smarty：Smarty 是一個PHP的網頁樣板系統。 遵循MVC架構。
MySQL：關聯式資料庫管理系統
各
種
加
密
技
術
MD5：廣泛使用的雜湊演算法之一
SHA1：安全雜湊演算法
Salted Hash： 主要利用亂定數(Salted)加於明文中再進行加密
複合式雜湊法：使用亂定數兩次或利用兩種以上的Salted Hash進行加密
其
他
JSON（JavaScript Object Notation）
一種輕量的資料交換語言，以文字為基礎，且易於讓人閱讀

51. Here comes your footer  Page 51
網站分析：一致的呈現畫面(1/2)

52. 自動重新排版網站的各個區塊
將上方的選單列摺疊起來
網站分析：一致的呈現畫面(2/2)

53. 結論與未來展望



54. 結論
1. 適地性、客製化的訊息服務
2. 更環保、低成本
3. 便捷的主動式推播技術—實現最佳的傳播效果
4. 多元的資訊類型
5. 幫助使用者快速篩選出需要的資訊
6. NFC感應啟動，減少操作上的麻煩
1. 適用於小螢幕行動裝置的導航定位APP
2. 解決導航方向資訊不夠明確的問題
3. 更便捷的整合操作：導航與推播訊息的結合，讓使用者不需要手動
輸入目的地。
1. 建構私人團體或公用的資料中心
2. 互動：提升資訊的使用率與價值
3. 跨平台的網站服務
4. 建構偏遠地區的知識網路
5. 良好的用戶的視覺體驗與操作體驗
6. 樹莓派上的所有服務只要一接上電源便自動啟動

55. 未來展望
1. 改善系統的穩定度、與美化UI介面
2. 利用低功率藍芽技術iBeacon作為推播的核心技術
3. 實作更好的訊息分類與過濾功能
4. 提高定位的精確度

56. 報 告 結 束

57. 成果展示

58. Here comes your footer  Page 58

59. 實作展示

60. App訊息的操作與導航

61. 即時通訊

62. 自動訊息更新以及APP操作示範

63. 使用方式
 第一次使用先按下註冊鈕：透過Sender ID向GCM服務註冊訊息(往後不需要再
操作)
 註冊成功後利用GCM服務回傳的Register ID綁定GCM訊息(一個裝置對應一個
Register ID)
 透過反註冊鈕取消接收訊息
GCM訊息推播

64. 接收訊息
 使用伺服器端只要有送出訊息
 手機只要有連上網路，就可以自動
取得訊息
GCM訊息推播

65. 會員管理

66. 註冊畫面
利用Ajax，使用者在輸入資料後，立即從資料庫中查詢用戶名稱是否註冊
利用Ajax，立即檢查欄位是否合法，不用再按下註冊鈕後才檢查問題
欄位中有淺灰色的提示訊息引導使用者
利用Javascript，得到焦點的欄位會立即清空提示訊息
會員管理

67. 上傳照片
跳轉至首頁，並呈現上傳照片與提示訊息
選擇好圖片後按下”上傳圖片”鈕
會員管理

68. 修改個人檔案
 利用ajax檢查信箱是否已經註冊
會員管理

69. 訊息與帳戶管理

70. 文章管理

73. 文章管理

74. 文章管理

75. 伺服器端利用
PHP查詢資料庫
中的訊息
將訊息包裝成
JSON
Android端利用
http物件連線至
伺服器網站
取得JSON後加
以解析並顯示
流程圖： App與伺服器資料庫溝通

77. 推播訊息App專案架構
訊息清單
小工具Widget
GCM服務 即時通訊
共用函數庫
會員登入作業
共用函數庫
Cloud Message
訊息清單GCM服務 小工具 即時通訊 登入作業

78. 目錄資料表
 上層目錄ID
 目錄ID
 目錄名稱
文章資料表
 ID
 文章標題
 文章內容
 分類
資料庫設計
Table
Table
Table
Web Server
帳戶資料表
 Uid
 ID
 使用者名稱
 信箱
 電話
 狀態
 性別
 使用者群組
 密碼
TableTableTable
Database
帳戶GCM認證
 Uid
 ID
 信箱
 註冊碼
訊息資料表
 ID
 裝置名稱
 使用群組
 擁有者
 建立日期
 標題
 訊息類型
 附件
 內文
裝置資料表
 ID
 裝置名稱
 擁有者
 使用群組
GCM服務
文章管理
會員管理
訊息管理

79. 網頁技術
 前端網頁技術
- Bootstrap framework：前端網頁框架。
- jQuery：jQuery是一套跨瀏覽器的JavaScript函式庫。
- CSS：一種樣式表，可將網頁結構化。
- AJAX：實現用戶端與伺服器端的非同步處理。
 後端網頁技術
- PHP：後端網頁語言。
- Smarty：Smarty 是一個PHP的網頁樣板系統。 遵循MVC架構。
- MySQL：關聯式資料庫管理系統
 JSON（JavaScript Object Notation）
- 一種輕量的資料交換語言，以文字為基礎，且易於讓人閱讀
 各種加密技術
- MD5：廣泛使用的雜湊演算法之一
- SHA1：安全雜湊演算法
- Salted Hash： 主要利用亂定數(Salted)加於明文中再進行加密
- 複合式雜湊法：使用亂定數兩次或利用兩種以上的Salted Hash進行加密

80. 成本比較(粗略估計)
相較紙本廣告可節省極大的成本，且提供資訊更多元、
更環保
項目 成本
(台幣/月)
備註
紙本廣告 $8400 500份彩色廣告，每份20頁，
一個月兩期，不計運費
推播廣告 $20以內
(電費)
樹莓派微處理機、SD卡、電
源組、Wifi模組約$2700
 PS：雙面彩色印刷廣告參考標準：每500頁$210

81. Preview
網站分析：網頁的設計方式(1/4)
網頁檔：Setup.php
 功能：
初始化設定與引入共用方法
 主要項目：
 資料庫連線設定
 建立框架的函數
 伺服器資訊
 系統變數
 建立物件實體(物件導向設計)
產生選單列
產生頁尾

82. Preview
網站分析：網頁的設計方式(1/4)
網頁檔：Index_web.php
功能：
根據使用者的操作產生對應的
網頁內容
方法：
(1)網頁模板
 利用後端框架技術，載入網頁
樣板
 Ex：文章管理網頁
(2)框架函數
 將存放HTML格式的字串變數
傳入先前介紹的框架函數中
 Ex:產生首頁的字串變數
 Ex:產生清單的字串變數