Embedded Files
This tutorial explains the steps involved in building a Chatbot Block to control the operations of a Buzzer Block in the Temperature & Fire Monitoring & Alerting Tinker Block Application.
Pre-requisites:
Pre-requisites:
Before building Chatbot Block, please make sure to build:
Temperature Block, Fire Block, Buzzer Block, Processor Block and Power Block
IoT-based Server Block
IoT-based Device Control Block
Device Integration Block
1. Query and view live temperature & humidity data in the Chatbot
1. Query and view live temperature & humidity data in the Chatbot
1. Open Landbot Chatbot builder tool by clicking this link: https://landbot.io
2. Sign in with your Google account.
3. Create a new "Web" based Chatbot and select "Start from Scratch" option.
4. Add three buttons "View Temperature", "View Humidity" and "Operate Buzzer" as shown in the image below:
5. Drag the "+" symbol to the right of the "Temperature" button and select "Low Code" --> "Code" menu option.
6. Add the below Java script code within the Code block that opens up in Landbot designer:
Change 99999 to the Channel ID of your ThingSpeak Channel.
Change the "1" in "1.json" to a suitable number, depending on which field in your ThingSpeak channel is set to read Temperature sensor data.
Change "field1" to "field2" or "field3"...... depending on which field in your ThingSpeak channel is set to read Temperature data.
Refer to "Channel Setting" tab within your ThingSpeak channel to ascertain this. If "Field1" in Channel Settings is set to "Temperature", then, retain "1.json" and "field1" in the code below. If "Field2" in Channel Settings is set to "Temperature, then change "1.json" to "2.json" and "field1" to "field2".
View the Java script code for reading data from the Temperature Block...
// URL of the JSON data
const url = 'https://api.thingspeak.com/channels/999999/fields/1.json?results=1';
// Function to fetch and process the JSON data
async function fetchData() {
try {
// Fetch the data from the server
const response = await fetch(url);
// Check if the request was successful
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// Decode the JSON object
const data = await response.json();
// Access the nested data correctly
const temperatureData = data.feeds[0].field1;
console.log(`Temperature #1: ${temperatureData}`);
return temperatureData;
} catch (error) {
// Handle any errors that occur during the fetch
console.error('Error fetching data:', error);
}
}
// Call the function to fetch and process the data
fetchData()
.then(temperatureData => {
console.log(`Temperature #2: ${temperatureData}`);
// Set the Landbot variable
this.setCustomData({
temperaturesensorvalue: temperatureData
});
return temperatureData;
})
.catch(error => {
console.error('Error:', error); // Handle any errors
});
7. After adding the java script code into the "Code" block, your Chatbot design looks like this.
8. After adding the code, click on "Fields" button and add a new variable "temperaturesensorvalue" and click "Create".
9. Select the format of the variable as "Text" and click "Create" button as shown in the below two images.
10. Click and drag the "+" symbol to the right of "Code" block and add a "Button" block. Name the button as "View Temperature" as shown in the image below.
11. Click and drag the "+" symbol to the right of the "Buttons" block and add a "Messages" block as shown in the image below.
12. In the "Messages" block, add the text:
Temperature: @temperaturesensorvalue Deg Celsius
Make sure the variable name is exactly same as the one you created earlier in steps 8 and 9. Check the spelling.
13. The chatbot is now ready for testing. Click "Publish" button and copy the link to the published chatbot and paste it into a new browser window.
14. When the chatbot starts, click on "View Temperature" button as shown below:
15. Click the second "View Temperature" button as shown below:
16. The most recent temperature sensor reading received by ThingSpeak platform will be displayed as shown below:
17. Enhance the chatbot to read the Humidity sensor value and display the same. Once you enhance the chatbot to read the humidity sensor value, blocks will look like the one shown in the below image:
View the Java script code for reading data from the Humidity Block...
// URL of the JSON data
const url = 'https://api.thingspeak.com/channels/999999/fields/2.json?results=1';
// Function to fetch and process the JSON data
async function fetchData() {
try {
// Fetch the data from the server
const response = await fetch(url);
// Check if the request was successful
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// Decode the JSON object
const data = await response.json();
// Access the nested data correctly
const humidityData = data.feeds[0].field2;
console.log(`Humidity #1: ${humidityData}`);
return humidityData;
} catch (error) {
// Handle any errors that occur during the fetch
console.error('Error fetching data:', error);
}
}
// Call the function to fetch and process the data
fetchData()
.then(humidityData => {
console.log(`Humidity #2: ${humidityData}`);
console.log(humidityData); // Process the returned data
// Landbot.setVariable('@humiditysensorvalue', humidityData);
// Set the Landbot variable
this.setCustomData({
humiditysensorvalue: humidityData
});
return humidityData;
})
.catch(error => {
console.error('Error:', error); // Handle any errors
});
2. Remotely control the operation of the Buzzer Block from the Chatbot
2. Remotely control the operation of the Buzzer Block from the Chatbot
Enhance the chatbot to remotely control the operation of a Buzzer Block. Once you enhance the chatbot to control buzzer block operations, the chatbot blocks will look like the one shown in the below image:
View the Java script code to turn on the Buzzer Block...
fetch('https://api.thingspeak.com/talkbacks/99999/commands.json?api_key=XXXXXXXXXXXXXXXX&command_string=TURN_ON&position=1', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ "id": 78912 })
})
.then(response => response.json())
.then(response => console.log(JSON.stringify(response)))
View the Java script code to turn off the Buzzer Block...
fetch('https://api.thingspeak.com/talkbacks/99999/commands.json?api_key=XXXXXXXXXXXXXXXX&command_string=TURN_OFF&position=1', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ "id": 78912 })
})
.then(response => response.json())
.then(response => console.log(JSON.stringify(response)))
Page updated
Google Sites
Report abuse