標籤

2018年12月11日 星期二

路線規劃APP

Date: 20181107
Version: 1

主要發想是來自於業務中,廠商使用Google Map來進行製作路線規劃,但其中有許多不太完善的地方,例如路線很奇怪,票價有問題...等,於是我就想說為什麼會這樣呢?難道很難嗎?於是上網查了Google Map API,詳細閱讀了文件後,覺得並沒有那麼困難,只是有很多參數需要加入,另外,在PTX中,也發現了正確的票價,使用以上工具可以解決我遇到的問題。

於是我就想做一個路線規劃的APP,但目前Android Studio還在學習當中,因此還是使用App Inventor 2來製作此APP。

  1. Google Map API,有12個月試用期,共300美元的額度可使用。
    • 會得到一組API KEY,呼叫API時使用。
    • 有JSON和XML兩種格式。
    • 有諸多參數可以設定,請查說明文件
  2. PTX,有分會員等級,但不成為會員還是可以用,只是額度更少
    • 會員有三種等級+未註冊,共4種等級,每一等級之權利義務不同。
    • 可提供預覽介面,可直接製作需要的API。
    • API中可輸入的功能很多,請查說明文件
    • 後來進行製作時發現,不成為會員的話,只能透過Swagger使用,無法在APP上使用,有權限管理,所以後來還是申請了會員。

製作過程:

  1. 需要先產生各路線對照表,包含place_id、代號、關鍵字、車站...等,並產生相對應的json object or array。
  2. 使用Google Map API及PTX API確認相關參數的使用狀況,決定後續要使用那些參數。
  3. 使用下拉式選單建立出路線和車站,提供路網圖給旅客查詢路線。
  4. Google Map API程式:
    1. 將車站轉出對應的place_id,並進行搜尋。
    2. 抓出連結資料。
    3. 將頭尾的步行刪除,因從車站出發。
    4. 抓出節點資料,利用關鍵字及路線校正,獲得正式名稱。
    5. 路線顯示。
  5. PTX程式:
    1. 找出同一家捷運公司的起迄站,並對應出各車站代碼。
    2. 利用代碼搜尋。
    3. 跟Google不太一樣,須建立header才行,請查說明文件
    4. 找出單程票票價。
    5. 將桃捷與北捷的票價加總,並顯示。
  6. 一開始使用圖片,但發現無法放大縮小,因此改為使用網頁瀏覽器,可以放大縮小,寫了個Html來展示台北捷運路網圖。
  7. 介面優化/程式優化,進行中。
    1. 介面優化:
      1. 步行圖示:🏃。
      2. 連接圖示:⬇。
      3. 端點站圖示:🌑。
      4. 轉乘節點圖示:🔘。
      5. 起訖站互換圖示:⇅。
      6. 路網圖圖示:🚇。
      7. 增加所有權聲明。
      8. 時間與票價介面優化。
      9. 時間與票價介面間距增加。
      10. 新增等待畫面。
      11. 新增第二頁面,顯示相關聲明、部落格及電子郵件。
      12. 修正A12、A13、A14a區間之文字訊息。
    2. 程式優化:
      1. 新增起訖站互換功能。
      2. 新增切換路網圖功能,及第一次無法切換設定。
      3. 新增端點站/轉乘站判斷功能。
      4. 新增焦點功能,每次查詢時,查詢結果可以置頂。
      5. 步行的顏色修正。
      6. 永春站的place_id修正。
      7. A18 高鐵桃園站的關鍵字修正。
      8. A13 機場第二航廈站的搜尋改善,使用fewer_transfers。
      9. 發現A12-A13之區間會有error,經查結果為google無論如何搜尋,都會跑出機場電車,該區間改成跳出文字訊息。
      10. BL 22 南港的關鍵字修正。
      11. 新增語音辨識功能,點選"起"或"迄"後,會出現google語音辨識起迄站,提高方便性。
  8. 製作APP的Icon [6]。
  9. 給公司的同事看過後,有人問到怎麼沒有台鐵和高鐵呢?若要達成台鐵及高鐵需要進行以下規劃及確認:
    1. 站點確認,台鐵太多站了,考量到此APP主要為桃捷及北捷,故預計規劃為北北桃生活區之區域,包含:
      1. 台鐵:五堵、汐止、汐科、南港、松山、台北、萬華、板橋、浮洲、樹林、南樹林、山佳、鶯歌、桃園、內壢、中壢、埔心、楊梅、富岡、新富,共19站。
      2. 高鐵:南港、台北、板橋、桃園,共4站。
      3. 已確認上述24站的place_id。
      4. 三鐵共構: 南港、台北、板橋,先使用同一組place_id。
    2. Google,確定參數"transit_mode=subway|train"適用於台鐵及高鐵。
    3. PTX,確認有台鐵及高鐵的票價資訊,已查車站代碼。
    4. 台鐵使用黑灰相間之格式,而高鐵則使用其網站主體配色(橘色)。
  10. 經過一個禮拜的努力,終於完成台鐵及高鐵的轉乘資料,由於不再是只有捷運,因此APP改名為「大眾轉乘」。
  11. 這幾天開始準備APP上架的相關事宜,開發APP到現在終於有第一個要上架的APP啊,超快,申請差不多一小時就過了,大家可以在Google Play上找到我的APP
  12. 成本估算如下,只要每日不超過1000人使用,應該就不需多付,當然我沒有開通付費功能,所以如果額度用完就沒了
    1. PTX:
      1. 免費。
      2. 呼叫次數:每日20,000次(一般會員),若每人一天兩次(上下班兩次),每次最多四種(北捷、機捷、台鐵、高鐵),20000/2/4,每日大約可供2500人使用。
      3. 參考資料:會員分級
    2. Google Map API:
      1. 每月有200美元的抵免額。
      2. 呼叫次數:每月40,000次(抵免額),若每人一天兩次(上下班兩次),每月22工作天,40000/22/2,每日大約可供909人使用。
      3. 參考資料:價目表
  13. 發佈後,有個朋友問是不是可以提供時刻表,回去查了一下PTX,桃捷、台鐵和高鐵可以提供時刻表,但北捷則因為班次較密集,使用時刻表意義不大,改成提供班次間距會比較好,只是這又是一個大工程了,而且是否要抓取整日的時刻表呢?還是提供查詢當下時間點之後的時刻表呢?有待商榷。
  14. 使用後第一個受惠的就是我,要去南京復興上課,平常都是做紅線轉綠線,使用了APP後發現,Google提供了一條,坐到松山火車站後,步行到松山捷運站,這樣的規劃非常不錯,去回程人少,而且都有位置坐,真的不錯,沒使用這個APP還不知道還可以這樣坐。
  15. 花了一兩個禮拜在這個APP上頭,是時候休息一下,看看書,等充完電後再來把時刻表補齊吧。
  16. 時刻表規劃:
    1. 北捷:提供班距說明。
    2. 桃捷:提供班距說明。
    3. 台鐵:提供起迄站時刻表。
    4. 高鐵:提供起迄站時刻表。

注意事項:

  1. header的使用須注意加密方式,時間格式為GMT,須扣除8小時,"x-date: "後面有空格,網址有時候用https會失敗,有時候會成功,目前使用http。
  2. 產生的json,可先用JSON Editor Online進行轉譯,比較容易了解。
  3. 如果不使用PTX,可使用Swagger將所有資料抓下來後,寫進資料庫也是可以,之前作法是將上傳到Firebase。
  4. 桃捷台北車站與北捷台北車站需步行,需多加留意程式撰寫。
  5. 上方的圖示是從Blogger中的"插入特殊字元"功能用出來的,可以搜尋關鍵字,找出你想要的特殊字元,就是上方的那些圖示,在網頁上呈現的結果,會與APP上呈現的結果不太一樣。
  6. 北捷的路網圖要跟北捷申請授權,也就是填一份授權申請書,回寄給北捷即可。
  7. 憑證keystore,自己包的APK使用的憑證,和從Google Play下載的APK憑證會不一樣,所以在Google Cloud Platform限制使用時,要特別注意其使用的SHA1會不一樣。
  8. 在Directions API中有一個參數為alternatives,若設定為true,則會像google map一樣顯示出多條替代路徑,而我沒有採用的原因有1)太多條,不知道哪一條才是我要的,還是用預設最符合我需求的那條即可,2)太多條,計算的量不一樣,API的價格也不一樣。
  9. 發現使用的憑證錯誤,會導致API設定後無法使用,將進行釐清到底要使用哪個憑證?
    1. 無:沒有限制,可使用,看來只能使用這個了,多加了API限制。
    2. 應用程式簽署憑證(google核發):經修改五分鐘後測試,無法使用。
    3. 上傳憑證(原app):經修改五分鐘後測試,無法使用。


改進事項:

  1. 抵達A13時,有時候會出現Error,因會出現到A12轉乘機場內的接駁車造成程式錯誤,轉乘錯誤: A13(fewer_transfers)、確認json資料(For input string: "ot")。
  2. A1-A5區間至A7的票價錯誤,因PTX未更正正確資料,已請同仁處理。
  3. 板南線任意站到南港展覽館站會出現錯誤。
  4. 起訖站互換功能錯誤。
  5. 目前使用上,若起訖站含有轉乘站(台北、桃園、板橋、南港、A1、A18),或地理位置鄰近(北門),會出現顯示不易理解之情況。
  6. ...
參考文獻:

  1. Developer Guide | Directions API | Google Developer
  2. Place ID Finder | Maps JavaScript API | Google Developer
  3. 入門指南‧PTX API Documentation
  4. MOTC Helper
  5. JSON Editor Online
  6. 台北捷運路網圖
  7. 3418 free SVG and PNG icons for your games and apps | Game-icons.net



2 則留言:

  1. 你好,是否可跟你請教 inventor如何建立header的呢?
    我有看PTX的教學文件,但沒有什麼頭緒

    回覆刪除
    回覆
    1. 你好,Header的建立是使用Connectivity Components/Web/RequestHeaders這個function去實作的,詳細作法可以參考Pura Vida大大的文章https://puravidaapps.com/filedownload.php,裡面有使用到Header的功能,而且也有AIA可以下載使用,PTX還會使用到相關雜湊演算法可以到Extensions找,有問題可以再問我,感謝。

      刪除