1. 台北旅館查詢
組長: 電通三A 4010D026 陳伯安
組員: 電通三A 4010D048 陳瑋晨
電通三A 4010D078 陳建宏
電通三A 4010D098 盧威碩

2. 大綱
➢摘要
➢開放式平台網站
➢App Inventor平台
➢App Inventor優缺點分析
➢GAE介紹
➢Json
➢Json與其他格式之比較
➢功能說明
➢系統架構
➢執行方法
➢執行介面
➢分工與時程
➢參考文獻

3. 摘要
• 此系統主要是使用APP連接至台北市政府資料
開放平台獲取各旅館的資訊，並連至中央氣象
局開放式平台得知全台位置的UVI資訊，還有
結合Google Map獲得經緯度位置、定位與導
航，讓到台北旅遊的遊客可以更加便利之外，
還能知道目的地的紫外線狀況，提早預防曬傷
的效果。

5. 開放式平台網站

8. App Inventor 平台
Google實驗室（Google Lab，已於2011年中止）的一個子計畫
是一個完全線上開發的Android程式環境，拋棄複雜的程式碼而使
用樂高積木式的堆疊法來完成您的Android程式。
於2012年移交給麻省理工學院行動學習中心，並已於2013年3月4
日以MIT App Inventor名稱公佈使用。
現在的版本是MIT App Inventor 2 beta
主要特色：
適合無Java基礎的初學者
全雲端，所有作業都在瀏覽器完成(也有提供離線版)
支援樂高機器人

9. App Inventor優缺點分析
Inventor 2是一款可以靠像拼圖一樣組裝畫面跟程式碼，不用
寫程式就可以完成Android App程式的線上工具。
優點:
1. 簡單易學，不用程式基礎也可以設計出勘用的Android App
2. 資源還算豐富(英文)支援中文

10. 缺點:
1. 雖然簡單易學，但沒有程式的邏輯思維要開發還是容易卡關
2. 另外對於熟悉Java+Android SDK的開發人員來說，像App
Inventor 2這種拖拉元件的方式實在太慢了，以目前做了一隻完整
功能App
3. 因為是元件拖拉方式，相關程式碼很難複製，看到可以參考的
部分，也只能照著人家開發的畫面自己拖拉，這也會大幅度降低
開發速度
4. 對於習慣寫程式的人，這種拼圖組裝式的開發模式，可閱讀性
其實不太高

11. GAE介紹
❖ Google App Engine是一個存放網頁應用程式的平台，屬於Web應用開發環境，允
許用Python及Java程式語言來開發，用Google的Bigtable資料儲存系統以及
Google的GFS(Global Forecast System，全球預報系統)來處理資料，Google會
幫你託管這些Web應用。
❖ 特色：
➢ GAE嘗試去幫助掌管應用程式的生命週期，例如：Dashboard，Log記綠，版
本管理，資料庫等等。
➢ 應用程式是執行在Google的基礎設施，在Google檔案系統的架構下，能快
速、可靠地運作。
➢ 在有限的配額下完全免費。
➢ 可以免費使用多種Google API。
➢ 支援 Python , JAVA 兩種程式語言開發。

12. Google地圖座標使用格式資料

13. J son
❖ JSON是一種輕量級的資料交換語言，以文字為基礎，且易於閱讀。
儘管JSON是Javascript的一個子集，但JSON是獨立語言的文字格式，
且採用了類似於C語言家族的一些習慣。
❖ 資料結構：
➢ 物件（object）：一個物件以「{」開始，並以「}」結束。一
個物件包含一系列非排序的名稱／值對，每個名稱／值對之間
使用「,」分割。
➢ 名稱／值（collection）：名稱和值之間使用「：」隔開。
➢ 值的有序清單（Array）：一個或者多個值用「,」分割後，使
用「[」，「]」括起來。
➢ 字串：以""括起來的一串字符。
➢ 數值：一系列0-9的數字組合，可以為負數或者小數。還可以用
「e」或者「E」表示為指數形式。
➢ 布爾值：表示為true或者false。

14. J son與其他格式之比較
❖ XML：XML是一個完整的標記語言，而JSON不是。這使得XML在程式判
讀上需較多的功夫。主因在於XML的設計理念與JSON不同。XML利用
標記語言的特性提供了絕佳的延展性（如XPath），在資料儲存，擴
充功能及高階檢索方面具備對JSON的優勢，而JSON則由於比XML更加
小巧，以及瀏覽器的內建快速解析支援，使得其更適用於網路資料
傳輸領域。
❖ MessagePack：MessagePack宣稱比JSON更短小，快速。
❖ 格式化工具：JSON格式取代了xml給網路傳輸帶來了很大的便利，但
是卻沒有了xml的一目了然，尤其是json資料很長的時候，我們會陷
入繁瑣複雜的資料節點尋找中。

15. 功能說明
◆優點：
➢ 提供旅館資訊
➢ 提供全台UVI與經緯度資訊
➢ 提供地圖與導航功能
◆缺點：
➢ 需智慧型行動裝置
➢ 必須有網路(3G.4G.Wi-Fi…)
➢ 手機作業系統不支援IOS(本系統使用Android作業系統)

16. 紫外線指數分類

17. 系統架構

19. 執行方法
1.APP首頁列出台北各區旅館列表
2.列表中選擇台北任一區，可獲得該區的所有旅館資料
3.紫外線強度介面讀取並選擇縣市可獲得UVI值與經緯度
4.觀看地圖可獲得地圖資訊
5.導航連結Google Map進行定位與導航

20. APP首頁
選擇縣市
選擇區域
紫外線強度
觀看地圖
旅館選擇
UVI與經緯度讀取縣市清單
旅館資訊
連結Google Map
定位與導航
台北各區旅館列表
地圖資訊
導航GAE取得地圖資訊

21. 執行介面
首頁介面 區域旅館清單

22. 執行介面
縣市選擇介面UVI與地圖導航介面 地圖觀看介面

23. 執行介面
導航方式 導航路徑

24. GAE 資料

25. 分工與時程
陳伯安 陳瑋晨 陳建宏 盧威碩
收集資料 ✓ ✓ ✓ ✓
程式撰寫 ✓ ✓
簡報製作 ✓ ✓ ✓ ✓
UI介面設計 ✓

26. 參考文獻
1.App Inventor中文學習網(http://goo.gl/4Z0ZtP)
2.CG數位學習網(http://goo.gl/oXJ2G1)
3.APP Inventor2 零基礎入門班書籍，鄧文淵總監製/文淵閣工作室編著(碁峰資訊)。
4.台北市政府資料開放平台(http://goo.gl/usv7ou)
5.行政院環境保護署 環境資源開放式平台(http://goo.gl/dKbO32)
6.中央氣象局 紫外線監測(http://goo.gl/EQLFXw)
7.JSON介紹(https://goo.gl/15Mbfz)
8.麻省理工學院行動中心-GAE介紹(http://goo.gl/Dhi93g)