Course:CPE 400 Section:CPE 41S1

Name/s:Apolinario, Gian Kyle Date Performed:

Mangahas, Timothy James
Ocariza, Aaron Kyle 10/01/ 2024
Iringan, Raymart
Viernes, Joice Ann Eisley
Viñas, Gabriel Edmund G.
Date Submitted: 10/01/2024
Instructor:Engr. Mon Arjay
Malbog

Laboratory Activity No. 4

ThingSpeak Integration with ESP8266 and Web App
Development

1. Objective(s):
In this laboratory activity, you will:
1. Set up and configure ThingSpeak to receive data from the ESP8266.
2. Program the ESP8266 to send sensor data to ThingSpeak.
3. Create a simple web application to read and visualize data from ThingSpeak.

2. Intended Learning Outcomes (ILOs):

At the end of the activity student shall able to:

● Set up an IoT channel on ThingSpeak to receive and visualize sensor data.
● Use ESP8266 to send data to ThingSpeak.
● Develop a basic web app to display real-time data from ThingSpeak.

3. Materials
● ESP8266 development board (NodeMCU or similar)
● USB cable for programming the ESP8266
● Computer with Arduino IDE installed
● ThingSpeak account
● Text editor (for web app development)
● Wi-Fi network
● DHT 11
4. Discussion
 ThingSpeak is an open-source Internet of Things (IoT) analytics platform that
provides a cloud-based solution for collecting, storing, analyzing, and
visualizing sensor data. It allows users

to easily set up "channels" where data can be uploaded, processed, and

visualized using charts and other tools. ThingSpeak supports integration with
MATLAB, providing advanced data analysis capabilities, making it an ideal
choice for IoT applications, educational purposes, and research. You can
configure fields in a channel to represent different types of data, such as
temperature, humidity, etc. Once the channel is set up, ThingSpeak provides an
API for both reading from and writing to the channel, which makes it a powerful
tool for IoT projects.

In this lab, we will explore how to use ThingSpeak to collect data from an
ESP8266 module. The ESP8266 will act as an IoT device, gathering sensor data
and transmitting it to ThingSpeak for visualization and analysis.

ESP8266 Integration

The ESP8266 is a Wi-Fi-enabled microcontroller, widely used for IoT projects

due to its small size, low cost, and ability to connect to wireless networks easily.
This module can be programmed using the Arduino IDE, making it very
accessible for students and hobbyists alike.

In this lab, we will use the ESP8266 to send data (e.g., temperature or humidity)
to ThingSpeak. The ESP8266 will be connected to a sensor to gather data and
will then transmit this data to a ThingSpeak channel over Wi-Fi using HTTP
requests. ThingSpeak's RESTful API will be used to send and retrieve data,
which means we can perform actions like logging sensor readings and
visualizing them in real time.
5. Procedures
Creating Account to Thingspeak
1. Visit the ThingSpeak Website:
● Go to https://thingspeak.com.
2. Sign Up for a MathWorks Account:
● ThingSpeak is owned by MathWorks, so you need a MathWorks account to
use ThingSpeak.
● On the homepage, click on the "Get Started for Free" button or the "Sign Up"
link.
3. Provide Personal Information:
● Enter your first name, last name, and email address. Make sure to use a
valid email address because you will need to verify your account.
● Create a password for your MathWorks account.
4. Verify Your Email Address:
● After submitting your information, MathWorks will send you a verification email.
● Open the email and click on the verification link to confirm your account.
5. Complete Registration:
● After verifying your email, log in to your MathWorks account using your email
and password.
6. Once logged in, go back to the ThingSpeak website.
● Click on "Sign In" and use your MathWorks credentials to access ThingSpeak.
Create a Channel:
1. Once logged in, click on the "Channels" tab from the top navigation bar and select
“my Channels”.

.
2. Click on the "New Channel" button to begin creating your new channel.
3. Configure your Channel
● Channel Name: Enter a meaningful name for your channel (e.g.,
"Home Temperature Monitoring").
● Description: Provide a description of your channel (e.g., "Channel to
monitor temperature and humidity at home").
● Field Setup:
■ Fields represent the different data types you will be collecting
(e.g., temperature, humidity).
■ You can add up to eight fields. Provide names for each field to describe
the data.
■ Create a field for:
■ temperature
■ humidity
● Metadata (Optional): You can enter metadata like latitude, longitude, and
elevation to provide geographic context if applicable. This is useful if you are
working with data related to a specific location.
● Channel Settings:
■ Make Channel Public: If you want others to be able to view your
channel, check the "Make Public" box.
■ Leave it unchecked if you want to keep your data private.
● Scroll down and click the "Save Channel" button to create your channel.
4. Once done, you will be redirected to Private view with the default design for
visualization of humidity and temperature.
5.
Getting Your Channel ID and API Keys

Once the channel is created, you will see a Channel ID at the top of your
channel's page. This is a unique identifier for your channel.

API Keys:

● Click on the "API Keys" tab within your channel.

● You will see both Write API Key and Read API Key:
○ Write API Key: Use this key to send data to the channel.
○ Read API Key: Use this key to read data from the channel.

Setting up the DHT11 and ESP8266 Connections

1. Wiring the DHT11 to ESP8266

● Place the DHT11 on the breadboard.
● Connect VCC of the DHT11 to 3.3V on the ESP8266.
● Connect GND of the DHT11 to GND on the ESP8266.
● Connect DATA of the DHT11 to a digital GPIO pin on the ESP8266
(e.g., D8, which is GPIO15).
● Add a Pull-Up Resistor (10kΩ) between the DATA pin and VCC to stabilize
the signal.
 2. Check your connection to see if there is no loss. Then you're done.

Connecting ESP8266 to ThingSpeak

Set Up Arduino IDE for ESP8266

1. Install the ESP8266 Board Package:

● Open Arduino IDE.
● Go to File > Preferences.
● In the Additional Boards Manager URLs field, enter:

http://arduino.esp8266.com/stable/package_esp8266com_i
ndex.json

● Click OK.
● Go to Tools > Board > Boards Manager and search for ESP8266. Install
the ESP8266 by ESP8266 Community package.
2. Select the Correct Board and Port.
3. Install Required Libraries
● Ensure you have the following libraries installed in the Arduino IDE:
■ ESP8266WiFi.h: This library is used to connect your ESP8266 to a
Wi-Fi network.
■ ESP8266HTTPClient.h: This library is used for making HTTP requests
to ThingSpeak.
● To install a library, go to Sketch > Include Library > Manage Libraries
and search for the required library.

Write the Arduino Code to Connect to ThingSpeak

In this part, we will create an Arduino code to test sending data to

ThingSpeak. Please note that the data will be hardcoded using random
number generation to simulate temperature and humidity values. In the
supplemental activity, you will replace this with code to read and send
actual data from the DHT11 sensor.

// Example sensor data (random values for demonstration)

float temperature = random(20, 30);

1. Open Arduino IDE, create a new sketch, and copy the code below:
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>

// Replace with your network credentials

const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

// ThingSpeak Channel and API Key

const char* apiKey = "YOUR_THINGSPEAK_WRITE_API_KEY";
const char* server = "api.thingspeak.com";
const char* channelID = "YOUR_CHANNEL_ID";

void setup() {
Serial.begin(115200); // Start serial communication for
debugging

// Connect to Wi-Fi
WiFi.begin(ssid, password);
Serial.print("Connecting to ");
Serial.println(ssid);

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

delay(500);
Serial.print(".");
}

Serial.println("");
Serial.println("Connected to Wi-Fi");
}

void loop() {
if (WiFi.status() == WL_CONNECTED) {
WiFiClient client;
HTTPClient http;

// Example sensor data (random values for

demonstration)
float temperature = random(20, 30);

// Create the URL for the HTTP request

String url = String("/update?api_key=") + apiKey +
"&field1=" + String(temperature);

// Start the connection to the ThingSpeak server

http.begin(client, String("http://") + server + url);

// Send the HTTP GET request

 int httpCode = http.GET();

// Check the response

if (httpCode > 0) {
String payload = http.getString();
Serial.println("Data sent successfully");
Serial.println(payload);
} else {
Serial.print("Error: ");
Serial.println(httpCode);
}

http.end(); // Close connection

}

delay(15000); // Wait 15 seconds before sending the

next data point

2. Update the Code

● Replace YOUR_WIFI_SSID and YOUR_WIFI_PASSWORD with
your Wi-Fi credentials.
● Replace YOUR_THINGSPEAK_WRITE_API_KEY with your ThingSpeak
channel's Write API Key.
● Replace YOUR_CHANNEL_ID with your ThingSpeak Channel ID.
3. Upload the Code
● Connect the ESP8266 to your computer using the USB cable.
● Upload the Sketch:
■ Click the Upload button in Arduino IDE to upload the code to
your ESP8266.
■ Make sure the correct board and port are selected under Tools.
4. Monitor Data on ThingSpeak
● Monitor Serial Output:
■ Open the Serial Monitor in Arduino IDE (Ctrl + Shift + M or
Tools
> Serial Monitor) to see the connection status and data sent
to ThingSpeak.
■ You should see messages like "Connected to Wi-Fi"
and "Data sent successfully".
● View the Data on ThingSpeak:
■ Go to your ThingSpeak channel.
■ Under the "Private View" tab, you should see your data
 visualized in a chart corresponding to the fields you set up.

6. Supplemental Activity
Supplemental Activity #1: Reading Data from DHT11 Sensor

In this activity, you will replace the random data simulation with real-time readings from
the DHT11 sensor. The goal is to read temperature and humidity data from the DHT11
sensor and send it to ThingSpeak for visualisation.

Instructions:

1. Connect the DHT11 sensor to the ESP8266 using the wiring instructions
provided earlier.
2. Modify the Arduino code:
○ Replace the part of the code that simulates temperature and humidity
values with DHT11 sensor readings.
3. Send the Data to ThingSpeak:
○ Use the readings obtained from the DHT11 sensor to populate
the data fields for temperature and humidity and send them to
ThingSpeak.
4. Testing:
○ Upload your code to the ESP8266 and monitor the Serial Monitor to
ensure data is being read correctly from the sensor and sent to
ThingSpeak.

Expected Output:

● The ESP8266 will read temperature and humidity values from the DHT11
sensor and send them to ThingSpeak.
● ThingSpeak will display the actual sensor readings, which you can visualize on
your channel.
Supplemental Activity #2: Create Your Own Web App to Fetch Data from
ThingSpeak

In this activity, you will create a web app that retrieves data from ThingSpeak. The web
app should be designed using Bootstrap to ensure a modern, responsive layout.

Instructions:

○ Set Up the Web App:

• Create an HTML file that includes a Bootstrap template
to give your web app a responsive design.
• Add the required JavaScript code to interact with the ThingSpeak
API.
○ Fetch Data from ThingSpeak:
○ Use JavaScript to make HTTP GET requests to ThingSpeak to
fetch the latest temperature and humidity data.
○ Use AJAX or the Fetch API to retrieve the data.

3. Design the Web App Using Bootstrap:

○ Header: Add a header with the title "IoT Sensor Data Dashboard".
○ Data Display: Include a section that displays the latest temperature
and humidity values fetched from ThingSpeak.
○ Data Visualization: Optionally, add a chart to visualize the data trends
using a
JavaScript charting library like Chart.js.
4. Testing:
○ Open the HTML file in a browser and verify that the web app
fetches data from ThingSpeak and displays it properly.

Expected Outcome:

● The web app should have a responsive design and display the latest
temperature and humidity
readings from ThingSpeak.
● The data should be fetched in real-time and updated whenever new data
is available in your ThingSpeak channel.

Example Structure for Web App:

● HTML File:
○ Bootstrap: Link to Bootstrap CSS and JS for responsive design.
○ JavaScript: Use JavaScript to make API requests to ThingSpeak.
○ User Interface:
■ A header titled "IoT Sensor Data Dashboard".
 ■ A section displaying real-time temperature and humidity.
■ A button to refresh the data manually (optional).
7. Conclusion:

What conclusion can you make based on the activity?

Based on supplemental activity 1, we implemented ThingSpeak based WIFI

SSID for the connectivity of Node MCU. The modified Arduino code comes with

a 1 sec (1000) interval. With the use of DHT11 sensor, the temperature and

humidity of the room should be fetched. Once done, test the code by connecting

to WIFI and the output or code data should be sent successfully. In order to view

the visualization, go to ThingSpeak private view that shows a chart of the

corresponding fields. Upon completing the Activity, we have successfully

interfaced our circuit and web app to interact together by setting up a channel

independently for the purpose of reading the temperature and humidity data the

provided RESTful API keys allowed us to either write or read sensor data in real

time. We first tried sending data to ThingSpeak to see if our circuit is responding

and by using serial monitor in the arduino IDE to see the status.

Google Drive Link:

https://drive.google.com/drive/folders/1ANWZ4vQQjEZS1zQP2AFGACuILqNpb4dI?usp=sharing
8. Assessment (Rubric for Laboratory Performance):

Criteria Unsatisfactory Satisfactory (2) Exemplary (3) Score

(1)
Successfully sets up
Unable to set up Sets up the
Setting up an IoT the ThingSpeak
an IoT channel or ThingSpeak
Channel on channel with all
improperly channel but with
ThingSpeak necessary fields
configured the some errors in
configured correctly
fields. configuration or
and visualizations
incomplete fields.
added.
Sends data from
Sending Data from Unable to send Sends data to
ESP8266 to
ESP8266 to data from the ThingSpeak but with
ThingSpeak
ThingSpeak ESP8266 to minor errors or
accurately and
ThingSpeak. inconsistencies.
regularly without any
issues.
Develops a fully
Unable to Creates a web app functional web app
Developing a Web create a web that connects to that connects to
App for Real-Time app or the app ThingSpeak but with ThingSpeak,
Data does not limited functionality or displays real-time
connect to minor design issues. data, and uses a
ThingSpeak. responsive design.
Other Comments/Observations:

Evaluated by: Date:

Printed Name and Signature of Faculty Member