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

Android control color RGB LED using HC-05 Bluetooth module with Arduino (Part II)

 Android control color RGB LED using HC-05 Bluetooth with Arduino(Part II)

You probably have seen my first part of Arduino hardware setup tutorial. If you haven't please visit here: My previous Arduino (Part I tutorial).

After few weeks of struggling with MIT App Inventor 2, I finally completed my second generation of Color LED Controller V2.0 App.

Basically, 2nd generation of Android APP shows a color RGB wheel on the display and you might pick any color on the display to wirelessly change the RGB color accordingly. With glide/drag capability built in the App, you may glide your finger through the color wheel to see RGB LED changes color gradually.

For the Arduino part, all the code stays the same. Yes, I haven't modified a single line of code in the Arduino.

Please watch the video below to see how it works! :)

Here are the App coding screenshot for your reference:

************************************************************

0) Sorry blog readers....here are the two missing global variable blocks.... :-)

*************************************************************

1) App Inventor 2 screen initialisation code.

2) Android to HC-05 Bluetooth connection code.

3) The button to turn on/off LED

4) Code for touch on the color wheel to change LED color

 5) Code for Glide/Drag finger across the color wheel to see the color change accordingly

6) Here is the code for RGB color code split and then send to Arduino to change RGB LED color through Bluetooth.

How RGB Color Code was Processed:==*==*==*====*====*====*====*====*====*====*====*====*====*====*==
In App Inventor, the color code string after [Split Color] will be something like "(255 255 255 255)". What I need in Arduino is only R, G B, so I have to remove last 255.

*** The last 255 is a string in color code and it will be 255 all the time***

For easier string processing, I replace " "(space) with a "." (dot).
Then, I send each color code string to Arduino as "255.255.255)"

In side Arduino, I could split R, G, and B easily with the "."(dot) and use ending ")"(parenthesis) to check if the color code is complete or not.
==*==*==*====*====*====*====*====*====*====*====*====*====*====*==


After you put all these codes into MIT App Inventor 2, you should able to build the code on your PC/Mac to generate an Android .APK to place on your Android phone to test it out with Arduino.

Please do not ask me to post the original code here for you to download. If I do so, no one would download my App from Android Play Store! ;)

If you don't want to create this App yourself, please Download this App here!

Happy coding!!

Stonez


--------------------------------------------------------------------------------------------------------------------

Part II - Android HC-05 藍芽連線控制彩色 RGB LED

你們可能已經讀過我上一次的Arduino硬體設定和下載了第一代APP。如果還沒看過，可參閱我上一個教學： Android 藍芽連線控制彩色 LED

經過幾個禮拜的努力，我終於完成我第二代的 LED 遙控 APP 了。

基本上第二代的設計是一個可以任君挑選顏色ＲＧＢ調色盤。你可以點選你想要的顏色或是用手指滑過螢幕上的任一個顏色，應用程式會透過藍芽把顏色代碼送變 Arduino 來改變 RGB LED 燈泡的顏色。

Arduino 程式碼的部分是維持跟之前一樣，一行程式碼都不用更改就能使用了。

請先看一下底下影片的示範：

MIT App Inventor 的程式代碼如下:

1) App Inventor 2 Screen1 初始化設定：

2) Android 連結到 Arduino + HC-05 藍芽模組程式碼：

3) 這組程式碼是用來開關 RGB LED

4) 這組程式碼是用來回應點選的顏色並改變 LED 顏色

 5) 這組程式碼是用來控制滑過螢幕並即時改變其顏色

6) 這組程式碼是用來把顏色編碼成 RGB 代號並且把這組編碼顏色代號以藍芽送到Arduino該LED依照代碼變色。

只要按照以上程式碼輸入MIT App Inventor 2後，你就應該可以做成一個APK檔案。

Sorry, 我不會把原始檔整會貼在這裡，所以請你動手做做看吧！！

如果不想動手做，那請從 Play Store 下載吧！

Stonez