App Inventor 第10集 - 自己來寫 YouBike 2.0 APP (下集)

 大家好, 歡迎收看本週的Weekend project with Stonez56。 

本周要進行的是 App Inventor 第10集 -  自己來寫 YouBike 2.0 APP (下集), 這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的!  

上集影片請點此: https://youtu.be/D78-eDRFiXM 

對了,如果你沒有看過上一集, 請記得到右上角這邊, 按一下先觀看上集再來看下集.  那相信看過上一集的朋友都在等待這一集呢!   這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。好, 那我們就開始吧今天的練習吧~

本集目標:

* 資料由政府資料開放平臺即時更新

* 美化使用者介面 (加入 Splash)

* 加入 App 開機畫面

* 移動 maker 更加順暢

* 打開 App 自動讀入 Json

* 取得手機所在位置定位

* 顯示附近 YouBike 車輛數目 (比對 YouBike 2.0 App 數量)

使用位置感測器, 注意權限:

* 位置權限要授權給 MIT App Companion 

* 若是下載為 APK, 位置權限要授權給 APK

* GPS 精準要打開

如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可! 

影片時間軸：

00:00 Start

00:37 本集可以學到什麼?

02:14 YouBike 2.0 App 示範

03:28 美化 YouBike 2.0 App

04:30 App 起始畫面 (Splash) 

14:25 直讀政府公開YouBike資料

22:34 設定位置感測器(GPS)

35:17 顯示所有站點及每一站點車輛數

47:54 在我位置做標記

上集影片請點此: https://youtu.be/D78-eDRFiXM 

App Inventor 相關教學影片: * MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition) https://youtu.be/msV4V6af6tA * App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2) https://youtu.be/kIONEfLO4sI * App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor) https://youtu.be/u5J4FJQ5UQQ * App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2) https://youtu.be/x545mFSZWgg * App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM * App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE * App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) https://youtu.be/senjdb-cREY *App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE

App Inventor 第9集, 自己來寫 YouBike 2.0 APP (上集)

大家好, 歡迎收看本週的Weekend project with Stonez56。

本周要進行的是 App Inventor 第9集 - 自己來寫 YouBike 2.0 APP (上集) 

這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的!

上集內容主要包括程式流程:

1. 讀入 YouBike 2.0 JSON 資料並做先期處理
2. 把所有地區送入, 清單選擇器按鈕
3. 使用者選擇某一地區後
4. 在清單顯示器內顯示所有的站點, 位置, 總共單車量, 剩餘單車量
5. 移動地圖到所選的地點, 並呈現出 YouBike 圖示
   
   

下集內容包括: (製作中, 敬請期待~ 10/22 TBD)

1. 資料由政府資料開放平臺即時更新
2. 更新程式流程並且美化使用者介面
3. 取得手機所在位置定位
4. 顯示附近 YouBike 車輛數目

YouBike 2.0 資料是由政府資料開放平臺的下載而來的, 每幾分鐘便會做更新. 本程式會把 YouBike 2.0 json 資料下載到電腦上, 以節省去一直查詢政府雲端資料庫的時間.

參考資料:

• Online Json Parser http://json.parser.online.fr/
• YouBike2.0臺北市公共自行車即時資訊https://data.gov.tw/dataset/137993
• YouBike 2.0 Json file: https://tcgbusfs.blob.core.windows.net/....../youbike......
• YouBike 2.0 Json file: https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json
• APP 地圖使用: App Inventor 內建之 OpenStreet Map: https://www.openstreetmap.org/#map=8/23.611/120.768
• TextUtils extension: https://community.appinventor.mit.edu/t/all-rescued-extensions-from-appybuilder-community/27169/47?page=3

如果你時間不夠, 也可以從以下的時間軸挑選想看的部份即可!

影片時間軸：

00:00 開始

00:21 取得 YouBike 即時資訊

01:04 Json 線上編排後讀取 (Json Parser Online)

02:20 YouBike 2.0 APP 成果展示

03:32 開始APP頁面設計

07:23 簡化資料方便偵錯

17:52 開始程式設計

18:29 讀取上傳檔案的位置以 // 表示

29:50 如何取得站別的資訊 (Json)

55:19 如何移動地圖到 YouBike 站點

1:02:15 如何顯示 YouBike 圖示

App Inventor 相關教學影片:

* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition) https://youtu.be/msV4V6af6tA * App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2) https://youtu.be/kIONEfLO4sI * App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor) https://youtu.be/u5J4FJQ5UQQ * App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2) https://youtu.be/x545mFSZWgg * App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM * App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE * App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) https://youtu.be/senjdb-cREY *App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE

App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧

大家好, 歡迎收看本週的Weekend project with Stonez56。

本周要進行的是 App Inventor 第8集 -   AI2 Companion 一直斷線怎麼辦?

在使用 App Inventor 時, 我比較喜歡是在手機上安裝 AI2 Companion 來測試 App 以確保App

的畫面設計與預期的相符合, 但是你是不是常常發生ai2 companion常常發生斷線的問題? 

斷線後, 你必須在App inventor裡, 重新產生QR Code, 掃描, 等待ai2 companion再次連線,

真的是很麻煩呢! 本集我們就來在Android手機上做一些設定讓ai2 companion永遠連線, 這樣子以後就很方便喔!

也可以從以下的時間軸挑選想看的部份即可! 

影片時間軸： 

00:00 開始

00:54 為什麼 AI2 會斷線?

01:31 Android 手機設定打開發人員選項

02:12 在版本號碼上點7次

03:04 打開螢幕不休眠選項