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 打開螢幕不休眠選項

App Inventor #7 ESP32 語音控制-IOT 專案必備程式庫範例 (Voice Control ESP32 with IoT Essential Code Base/Voice command )

 

前言:

大家好, 歡迎收看本週的Weekend project with Stonez56。
本周要進行的是 App Inventor 第7集 -  語音控制ESP32 - IOT 專案必備程式庫範例

本週要來示範如何設計App inventor 2 語音控制 APP, 只要加上我之前介紹的IoT專用必備程式庫, (請參考下方的#27連結), 為了讓初學者更好上手, 本次採用沒有放入MQTT的程式庫, 讓範例更簡單一點. 我們先來看一下實際的操作影片. https://www.youtube.com/watch?v=senjdb-cREY&t=40s

整個範例做完,你就可以以語音來控制遠端的 ESP32 了.  本次範例, 除了可以控制ESP32上的LED開 & 關, 也可以控制伺服馬達的開 & 關, 這集也加上了多語功能的控制, 中文和英文都可以喔. 範例中也設定了法文, 西班牙文, 和日文,有興趣的朋友可以自行加上這些語言的控制程式碼. 

#27 AsyncWifimanager ElegantOTA ESP32 (WiFi 密碼管理+ WiFi 韌體更新)
https://stonez56.blogspot.com/2021/07/asyncwifimanager-elegantota-esp32-wifi.html 

請先到上方的連結, copy 所有的程式嗎, 再複製到 Arduino 編輯程式中存檔.

也要記得把  esp32_servo.h 檔案給儲存下來.

好, 那我們就開始吧今天的練習吧~

Source code:

37_vioceControl_ESP32_ECBv1.ino

#include "esp32_servo.h" //------->
#define myLED 2          //------->

#include <AsyncElegantOTA.h>
const char *FOTA_USERNAME = "un"; 
const char *FOTA_PASSWORD = "pw"; 
/****************************************************************************************************************************
  Async_AutoConnect_ESP32_minimal.ino
  For ESP8266 / ESP32 boards
  Built by Khoi Hoang https://github.com/khoih-prog/ESPAsync_WiFiManager
  Licensed under MIT license
 *****************************************************************************************************************************/
#if !(defined(ESP32))
#error This code is intended to run on the ESP32 platform! Please check your Tools->Board setting.
#endif
#include <ESPAsync_WiFiManager.h> //https://github.com/khoih-prog/ESPAsync_WiFiManager
AsyncWebServer webServer(80);

#define DEVICE_NAME "VoiceCommandESP32"  //------->
DNSServer dnsServer;

void setup()
{
    pinMode(myLED, OUTPUT);  //------->
    servo_setup();           //------->
    // put your setup code here, to run once:
    Serial.begin(115200);
    while (!Serial)
        ;
    delay(200);
    Serial.println("\nStarting Async_AutoConnect_ESP32_minimal on " + String(ARDUINO_BOARD));
    Serial.println(ESP_ASYNC_WIFIMANAGER_VERSION);

    ESPAsync_WiFiManager ESPAsync_wifiManager(&webServer, &dnsServer, DEVICE_NAME);  //------->

    //ESPAsync_wifiManager.resetSettings();   //reset saved settings
    //ESPAsync_wifiManager.setAPStaticIPConfig(IPAddress(192, 168, 132, 1), IPAddress(192, 168, 132, 1), IPAddress(255, 255, 255, 0));
    ESPAsync_wifiManager.autoConnect();
    if (WiFi.status() == WL_CONNECTED)
    {
        Serial.print(DEVICE_NAME);  //------->
        Serial.print(F(" Connected. Local IP: "));
        Serial.println(WiFi.localIP());
    }
    else
    {
        Serial.println(ESPAsync_wifiManager.getStatus(WiFi.status()));
    }

    webServer.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
        { request->send(200, "text/plain", "Hi! I am ESP32S. access to URL /update to update firmware"); });  //------->

    webServer.onNotFound([](AsyncWebServerRequest *request)   
        { request->send(404, "text/plain", "Page not found!"); });  //------->
    
    // move the motors  //-------> NEW ADDITION Codes
    webServer.on("/go", HTTP_GET, [](AsyncWebServerRequest *request)
        {
            String motor = "";
            String rotation = "";
            // Get input value from URL/go?motor=msg1&rotation=msg2
            if(request->hasParam("motor") && request->hasParam("rotation")){
                if(request->hasParam("motor")){
                    AsyncWebParameter* p = request->getParam("motor");
                    Serial.print(p->name().c_str());
                    Serial.println(p->value().c_str());
                    motor = p->value();
                }
                if(request->hasParam("rotation")){
                    AsyncWebParameter* p = request->getParam("rotation");
                    Serial.print(p->name().c_str());
                    Serial.println(p->value().c_str());
                    rotation = p->value();
                }

                if(rotation == "0"){
                    digitalWrite(myLED, LOW);
                }else if(rotation == "1"){
                    digitalWrite(myLED, HIGH);
                }else{
                    servo_spin(rotation.toInt());
                }
                request->send(200, "text/plain", "Command executed!");
            }else{
                request->send(200, "text/plain", "Error command!");
                Serial.println("Error commands!");
            }
        });
    
    //AsyncElegantOTA.begin(&webServer); // Start ElegantOTA WITHOUT username & password
    AsyncElegantOTA.begin(&webServer, FOTA_USERNAME, FOTA_PASSWORD); // Start ElegantOTA with username & password 

    webServer.begin();
    Serial.println("HTTP server started");
}

void loop() {

}

esp32_servo.h

// ESP32Servo by John K. Bennett,autoConnectKevin Harrington Version 0.11.0
// https://github.com/jkb-git/ESP32Servo/blob/master/src/ESP32_Servo.h
#include <analogWrite.h>
#include <ESP32PWM.h>
#include <ESP32Servo.h>
#include <ESP32Tone.h>

/** Define SERVO pins **/

#define SERVO_PIN2 13   //
Servo SERVO_LR; //left right

const int MAX_ANGLE = 170; //keep servo at minimum range
const int MIN_ANGLE = 10;
int SERVO_LR_POS = 90;

void servo_setup()
{
    SERVO_LR.setPeriodHertz(50); // standard 50 hz servo
    // http://yehnan.blogspot.com/2013/09/arduinotower-pro-sg90.html
    SERVO_LR.attach(SERVO_PIN2, 500, 2400);

    //init position 90 degree for LR & UD
    SERVO_LR.write(SERVO_LR_POS);
}

void servo_spin(int angle){
    // motor protection
    if(angle > MAX_ANGLE) angle = MAX_ANGLE;
    if(angle < MIN_ANGLE) angle = MIN_ANGLE;
    
    SERVO_LR.write(angle);
}

MIT App Inventor 2 - Voice Recognition

** Hi All, I have received few requests to ask me to post App here in the Blog **

Get this .APK File From here!


Hi Guys, I wished you all had a happy holidays!

It's been a while since I published my last tutorial.  This morning, when I checked MIT App Inventor 2 web editor, I found few new interesting new components.

One of them specially caught my eyes is the "SpeechRecognizer" under Media block.
Checked the explanation on the right, I decided to do a quick test on this new component.

What I want to do here is very simple:

1. Click "Speak" button to talk to the App
2. The App send the voice to SpeechRecognizer 
3. The App then show the particular sentence into a Text next to "You've said"

Here is the Screen1 Layout:

Here are all the components I've used in this tutorial, a button, two labels, and SpeechRecognizer1 component as shown below.

Here are the programming blocks. Only few blocks to get the Speech Recognizer to work. I was very surprised!

First, initial varibles and text to blank or "".

Secondly, when "SpeakBTN" clicked, just call "SpeechRecognizer1" to GetText. 

After get your Voice to Text, just set it to label.

Well, that's all need you do do the complete Voice Recognizer App.
See the YouTube Video for the demo below.



I guess you might want to give it a try now!

The End.
==================================================================


** Hi, 收到幾位朋友希望我把 .APK 放到這裡可以直接下載！沒問題，已經放到底下連結 **

請由此下載 Android APP .APK 檔案

哈囉大家好，但願大家都有一個開心的假期！

距離上次我發布新的教學已經有一段時間 了。這個早上，我在查看MIT App Inventor 2時
我發現了幾個有趣的新東西。

第一個吸引我的目光的是音樂裡的「聲音辨識」。看一下解釋後，我決定針對這個新東西做個小測試。

我要做的測試非常簡單：

1. 按下「說話按鈕」後對他說話
2. 程式把你說的話丟給聲音辨識系統
3. 辨識完後再將你說的話顯示出來

Here is the Screen1 Layout:

下圖是這次測試所用到的原件，一個按鈕、兩個文字元件和一個聲音辨識元件。

這些是程式方塊。其實，只要這些方塊就能使聲音辨識起作用讓我還蠻驚訝的呢！

首先，先設定變數和把文字設定成空格。

再來，當「說話按鈕」被按下時，就叫聲音辨識元件辨識並得到字串.

當系統辨識完後，就將它設成文字。

只要有上方這幾行程式就能完成你的聲音辨識App了。
請觀看底下的示範影片。


我想你現在一定迫不及待想去試試看了吧！