04 Pw4 Dec50132 Prosedure

P3 10%
P4 60%
Result 20%
DEPARTMENT OF ELECTRICAL ENGINEERING Discussion 10%

COURSE WORK ASSESSMENT (Session: II: 2023/2024) CLO3
TOTAL
(100%)
Name: ____________________________________Registration No.: _______________
Code & Course: DEC50132 Internet Base Controller Programme: DEE/DEP
Lecturer: Mohd Ridzuan bin Abdul Rahman
Practical Work: 1 / 2 / 3 / 4 / 5 / 6 CLO/PLO/DK/DP: CLO2/PLO5/DK3, DK4, DK6/DP1, DP4
TITLE: IOT APPLICATION WITH MIT APP INVENTOR AND THINGSPEAK

PLATFORM
LEARNING OUTCOME:
Upon completion of this practical work, students should be able to:
1. Use MIT App Inventors 2 (AI2) to build android apps to send data to the Thing Speak
platform.
2. Control LED and Buzzer on ESP32 DEVKIT NodeMCU-32S from MIT App
3. Use MIT App inventors 2 (AI2) to display humidity and temperature read from Thing
Speak platform Display data from sensor to web browser.
APPARATUS / EQUIPMENT:
1. ESP32 DEVKIT NodeMCU-32S (Arduino + Esp32).

2. USB to Micro-USB cable (Android Phone Charger).
3. Jumper Wire (Female-Female).
4. Internet connection (Access Point dedicated to the Laboratory).
5. MIT App Inventors 2 (AI2)
6. Thing Speak platform
INTRODUCTION / THEORY:
MIT App Inventor is an open-source web application for Android. Originally it was created
by Google, but it is maintained by the Massachusetts Institute of Technology (MIT). MIT app
inventor used to create software applications for Android. MIT app inventor uses graphical
interface, in which users can drag-and-drop visual objects to create an application that can run
on Android devices.
After designing app on MIT app inventor, it can be download it on Android phone using the
QR code, or APK file on PC before install it on smartphone. The App Inventor servers store
user work and help them to keep track of their projects as illustrate in Figure 1.
Lab work 4: IoT Application with MIT App Inventor and ThingSpeak Platform
1
Figure 1: MIT App Inventor 2 Illustration
App Inventor consists of the Designer and the Blocks Editor. These are described in detail in
Figure 2 and Figure 3.
Figure 2: MIT App Inventor 2 Designer
2
Figure 3: MIT App Inventor Block Editor Window
MIT Apps Inventor > ThingSpeak > ESP32
LED
Channe
LED
l
ESP32 Android
Phone with
MIT App
Figure 4: IoT Application with MIT App Inventor and ThingSpeak Platform
3
The user sends commands (ON or OFF) to LED using MIT App Inventor, by writing them
on ThingSpeak.com LED Channel
The ThingSpeak.com will collect and store data in the cloud.
The local unit (ESP32) will capture the data by reading the data from ThingSpeak.com LED
Channel and active the LED (ON or OFF)
An Android App will be also reading data from the ThingSpeak.com Status Channel and
displaying them for the user.
PART A: The ThingSpeak (Refer:Lab 3)
1. Go to www.thingspeak.com and Sign In.

2. Under My Channels, click New Channel.
3. Give your channel a name, and enable THREE (3) fields as illustrated in Figure 5 below:
• Field 1: LED
• Field 2: Temperature
• Field 3: Humidity
Figure 5: Create New Channel
4. Click Save at the bottom of the page.

5. Click API Keys tab as shown in Figure 6, and complete the Table 1 in Practical Work
Assessment Form.
4
Figure 6: API view
PART B: Wiring and Code on ESP32
1. Connect the LED to pin 23 which refers to GPIO 23 using jumper wire (Figure 7)
GPIO23  →LED1
GPIO22  → BUZZER
5V  → + (DHT Sensor)
GND  → - (DHT Sensor)
GPIO25  → out (DHT Sensor)
Figure 7: Wire Connection
5
2. Once the circuit ready, open Arduino IDE software and rewrite the code shown in Appendix
1. Change:
● ssid
● password
● channel_ID
● readAPIKey
● writeAPIKey
3. Upload the sketch. Before clicking the upload button, go to Tools → Board, and select the
board you’re using. Make sure that Board Node MCU-32S and select ESP32’s COM port.
4. Press the upload button and wait for the “Done uploading.” message.
5. Open Serial Monitor, wait until WiFi connected.
6. Observe the message printing on Serial Monitor and ThingSpeak (Field 2 and Field 3).
Write your observation in Practical Work Assessment Form.
PART C: MIT App Inventors 2 (AI2)
1. Go to http://ai.appinventor.mit.edu and login using Google account.

2. Create new project by clicking Projects>Start new project as Figure 8
Figure 8: Start a New Project
3. Fill in your project name as Figure 9 and it will saved into your project folder as Figure
10:
Figure 9: Project Name
6
Figure 10: My Project Folder
4. The Designer window will appear as Figure 11 below.
Figure 11: Designer Window
5. On the User Interface (Figure 12) Drag and drop:

• 2 Button
• 1 Label
on the main screen (Figure 13). Enter the name of the buttons and label (Figure 14) from
the options properties on the right side (Figure 15).
7
Figure 12: User Interface Figure 13: Main Screen
Figure 14: Button and Label Figure 15: Properties
6. On the User Interface drag and drop:

• 2 WebViewer
Make sure all the components are selected as Figure 16
8
Figure 16: Components in Designer Editor
7. Click on component Web1 and copy “write channel feed Url” from ThingSpeak to Web
url (Figure 17). Repeat the same step on Web2.
(1)
(3)
(2)
Figure 17: Copy url from (Write Channel) ThingSpeak to (Web1) MIT App
WEB 1 URL:
(3) → GET https://api.thingspeak.com/update?api_key=XXXXXXXXXX&field1=1
WEB 2 URL:
(3) → GET https://api.thingspeak.com/update?api_key=XXXXXXXXXX&field1=0
Note: Replace xxxxxxxxxx is your write API Key
8. Click Blocks Editor button and the window will appear as Figure 18
9
Figure 18: Components in Designer Editor
Note: These windows are linked: changes made in the Designer will be
immediately reflected in the Blocks Editor.
9. On the Blocks Screen1, click Button 1 and select the block as display in Figure 19,
Repeat the same procedure for Button 2 and you will get the display as Figure 20.
Figure 19: Select Button 1 and Button 2 Figure20: Viewer Window
10. On the Blocks Screen1, click Web 1 and select the block as display in Figure 21,
Repeat the same procedure for Web 2 and you will get the display as Figure 22
10
Figure 21: Select Button 1 and Button 2 Figure 22: Viewer Window
11. Click on pull down menu Build > App (provide QR code for APK) to download QR code
OR Build> App (save.apk to my computer) to download apk file then copy and install
the apk file at android directory to run apps on android platform.
12. At your App, click button LED ON, then observe (1) the message printing on Serial
Monitor, (2) ThingSpeak (Field 1) and (3) LED1 on board DEVKIT-ESp32. Write your
observation in Practical Work Assessment Form.
13. Repeat Step 12 above while clicking the button LED OFF.
PART D: Read data from ThingSpeak and Display on App
1. At MIT APP INVENTOR, create a new project.

2. Redraw the app designer as illustrated in Figure 23 below:
11
Figure 23: App Designer
Layout: VerticalArrangement1
User Interface: Label1, Label2, Label3
Layout: VerticalArrangement2
User interface: Label4, Label5
Connectivity: Web1, Web 2
Sensors: Clock1
3. Change the properties of the following components:

Web1 Properties:
12
Url
https://api.thingspeak.com/channels/xxxxxx/fields/2/last.txt?api_key=yyyyyyyy
Web 2 Properties:
Url
https://api.thingspeak.com/channels/xxxxxx/fields/3/last.txt?api_key=yyyyyyyyyy
Note: Replace xxxxxx with your Channel ID and replace yyyyyyyyyy with your read API
Key
Clock 1 Properties:
4. Redraw the Block Code as illustrated in Figure 24
13
Figure 24: Blocks Code
5. Click on pull down menu Build > App (provide QR code for APK) to download QR code
OR Build> App (save.apk to my computer) to download apk file then copy and install the
apk file at android directory to run apps on android platform.
6. At your App, observe (1) the message printing on Serial Monitor and (2) ThingSpeak (Field
2 and Field 3). Write your observation in Practical Work Assessment Form.
TASK:
a. Modify your app to add another TWO (2) button and create function as below:
• If button (first) is click, then send data 2 to Field1 (ThingSpeak)
• If button (second) is click, then send data 3 to Field1 (ThingSpeak)
b. Write an Arduino code to perform following task:

• If data at Field1 is 2 then TURN ON Buzzer
• If data at Field1 is 3 then TURN OFF Buzzer
Your code should have a suitable debugging message. Upload your code into ESP32, then
show your result to your lecturer.
14
APPENDIX 1
#include "ThingSpeak.h" //ThingSpeak by MathWorks Version 1.5.0
#include "DHTesp.h" //DHTesp by beegee_tokyo Version 1.17.0
#include <WiFi.h>
// Replace the next variables with your SSID/Password combination

const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";
//Mapping Library
WiFiClient client;
DHTesp dht;
//ThingSpeak Channel details

unsigned long channel_ID = xxxxx; //Replace with your Channel ID
const char* readAPIKey = "xxxx"; //Replace with your API KEY
const char* writeAPIKey = "xxxx"; //Replace with your API KEY
unsigned int fieldLedState = 1;
unsigned int fieldTemperature = 2;
unsigned int fieldHumidity = 3;
//Mapping GPIO<-->DHT Pin

const byte dhtPin = 25;
//Mapping GPIO<-->LED Pin

const byte ledPin = 2;
const byte led1 = 23;
//Global Variable
unsigned long task1Tick=0;
unsigned long task2Tick=0;
unsigned long ledTick=0;
float temperature=0.0,humidity=0.0;
const unsigned int TIME_INTERVAL_TASK1 = 15000; //15 Sec
const unsigned int TIME_INTERVAL_TASK2 = 10000; //10 sec
//User Function - setup_wifi()

//------------------------------------------------
void setup_wifi() {
delay(10);
// We start by connecting to a WiFi network
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {

delay(500);
15
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}
//------------------------------------------------
void setup() {
Serial.begin(115200); //Initialize serial
pinMode(ledPin,OUTPUT);
pinMode(led1,OUTPUT);
setup_wifi();
dht.setup(dhtPin,DHTesp::DHT22);
ThingSpeak.begin(client); // Initialize ThingSpeak
}
void loop() {
int statusCode = 0;
//Task 1
//=================================================================
if(millis()>task1Tick){
task1Tick = millis()+ TIME_INTERVAL_TASK1;
unsigned int dataTS = ThingSpeak.readIntField(channel_ID, fieldLedState, readAPIKey);
// Check the status of the read operation to see if it was successful
statusCode = ThingSpeak.getLastReadStatus();
if(statusCode == 200){
Serial.println("Data From MIT: " + String(dataTS));
}
else{
Serial.println("Problem reading channel. HTTP error code " + String(statusCode));
}
//Application on ESP32 board
if(dataTS == 0){
Serial.println("LED1 OFF");
digitalWrite(led1,LOW);
}
else if(dataTS == 1){
Serial.println("LED1 ON");
digitalWrite(led1,HIGH);
}
}
//END TASK 1
//Task 2
16
//=================================================================
if(millis()>task2Tick){
task2Tick = millis()+ TIME_INTERVAL_TASK2;
humidity = dht.getHumidity();
temperature = dht.getTemperature();
Serial.print(dht.getStatusString());
Serial.print("\t");
Serial.print(temperature, 1);
Serial.print("\t\t");
Serial.print(humidity, 1);
Serial.println();
ThingSpeak.setField(fieldTemperature, temperature);
ThingSpeak.setField(fieldHumidity, humidity);
// write to the ThingSpeak channel

int x = ThingSpeak.writeFields(channel_ID, writeAPIKey);
if(x == 200){
Serial.println("Channel update successful.");
}
else{
Serial.println("Problem updating channel. HTTP error code " + String(x));
}
}
//END TASK 2
//Blinking On board LED at Pin 2

if(millis()>ledTick){
ledTick = millis()+300;
digitalWrite(ledPin,digitalRead(ledPin)^1);
}
}
17

04 Pw4 Dec50132 Prosedure

Uploaded by

Copyright:

Available Formats

You might also like

04 Pw4 Dec50132 Prosedure

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

04 Pw4 Dec50132 Prosedure

Uploaded by

Copyright:

Available Formats

P3 10%

DEPARTMENT OF ELECTRICAL ENGINEERING Discussion 10%

TITLE: IOT APPLICATION WITH MIT APP INVENTOR AND THINGSPEAK

1. ESP32 DEVKIT NodeMCU-32S (Arduino + Esp32).

Figure 2: MIT App Inventor 2 Designer

MIT Apps Inventor > ThingSpeak > ESP32

PART A: The ThingSpeak (Refer:Lab 3)

1. Go to www.thingspeak.com and Sign In.

Figure 5: Create New Channel

4. Click Save at the bottom of the page.

PART B: Wiring and Code on ESP32

Figure 7: Wire Connection

PART C: MIT App Inventors 2 (AI2)

1. Go to http://ai.appinventor.mit.edu and login using Google account.

Figure 8: Start a New Project

Figure 9: Project Name

4. The Designer window will appear as Figure 11 below.

Figure 11: Designer Window

5. On the User Interface (Figure 12) Drag and drop:

Figure 14: Button and Label Figure 15: Properties

6. On the User Interface drag and drop:

Figure 19: Select Button 1 and Button 2 Figure20: Viewer Window

PART D: Read data from ThingSpeak and Display on App

1. At MIT APP INVENTOR, create a new project.

3. Change the properties of the following components:

4. Redraw the Block Code as illustrated in Figure 24

b. Write an Arduino code to perform following task:

// Replace the next variables with your SSID/Password combination

//ThingSpeak Channel details

//Mapping GPIO<-->DHT Pin

//Mapping GPIO<-->LED Pin

//User Function - setup_wifi()

while (WiFi.status() != WL_CONNECTED) {

// write to the ThingSpeak channel

//Blinking On board LED at Pin 2

You might also like