February 2nd, 2019 by cedcraftscodes
I wrote a detailed step-by-step tutorial to guide you through a simple IOT Project. You can turn off/on LED lights by chatting commands to your Facebook Page. In addition, can use this project in home automation projects, turning your appliances on via Facebook Chat.
NodeMcu Wifi Module
Arduino IDE
3 Colored led light.
220 Ohm Resistor
Jumper Wires
ArduinoJson
Facebook Developer Account
Facebook Page
Ngrok
XAMPP
Download Sourcecode here: NodeMcu + FB Chat Bot Source Code (136 downloads)
We need to add esp8266 to our Arduino IDE. Open up your IDE then go to “File -> Preferences” or simply hit “Ctrl + comma”
Paste http://arduino.esp8266.com/stable/package_esp8266com_index.json in additional board manager URLs.
Go to “Tools -> Board -> Boards Manager” search and install esp8266
Close and restart your Arduino IDE
Plugin your NodeMcu to your computer. You will notice that your RFID scanner will light up.
Go to Tools -> Port and select the COM Port of your NodeMCU. If you are not sure what port your NodeMcu is plugged in, go to Device Manager -> Ports (COM & LPT)
Now select NodeMcu 1.0 (ESP-12E Module) by clicking Tools -> Board. Scroll down until you find it.
After installing XAMPP, open XAMPP Control panel then start Apache and Mysql. Go to PHPMyAdmin and create a new database named chatbot. Import the chatbot.sql file. If you do not know how to import an SQL file in PHPMyAdmin, simply click on your database, click “Import -> Choose File -> Click chatbot.sql -> Open -> Go”
Create a folder named chatbot and under your htdocs folder in XAMPP. Put the bot.php, connect.php and status.php in that folder.
We need to expose our local web server so we can add it later on Facebook as a webhook. If you do not have NgRok, you can download it on their website. Register an account. Follow this tutorial on how to start an HTTP tunnel on port 80
You can also host the PHP files on your own web server but make sure it has an SSL certificate.
First, we need to create a Facebook Page for our Facebook Chat App. After creating a Facebook Page, Go to Facebook Developers.
Create a Facebook app. In the sidebar, add a product and select Messenger.
Select your page and Copy the Page Access Token. We will need it in our PHP Scripts.
Copy the URL in your NgRok and add /chatbot/bot.php (Depends on where you put the PHP Scripts)
Take note of Callback URL and Verify Token. When you are done, click Verify and Save. (If verification doesn’t work, make sure you are using HTTPS and the PHP code is deployed already)
Open bot.php and change the following codes.
1 2 | $hubVerifyToken = 'yourverifytoken'; $accessToken = "yourpageaccesstoken"; |
You also need to know what your sender id is. Just echo it out and modify the if condition. (Chat your page, say “turn on red light”)
1 2 3 4 | $senderId = $input['entry'][0]['messaging'][0]['sender']['id']; echo $senderId; if($senderId == "3153153761377068") {} |
You may also need to modify your database credentials. Open connect.php and change the database credentials.
1 2 3 4 | $servername = "localhost"; $username = "root"; $password = ""; $dbname = "chatbot"; |
After modifying the codes. Test the script by sending a message to your Facebook Page. If it replied correctly, then your PHP scripts are ready. Now we need to upload our codes to our NodeMcu Module.
If you use POSTMAN and send an HTTP POST request, the server will return a JSON data like that indicate the state of our led lights saved in DB.
1 | {"red":"0","yellow":"0","green":"0"} |
We need a way to parse the JSON in our NodeMcu. To do that, we need to install a library called ArduinoJson. To install, simply open up the codes in Arduino IDE, go to “Sketch -> Include Library -> Manage Library” then type ArduinoJson in the search bar. Install Version 5 as version 6 is still in Beta and is not reliable.
Since we are using https, we need to specify in the code the certificate thumbprint in order to establish secure communication.
Visit your URL and click the lock button beside it. Click Certificates. A window will pop up. Click Details and scroll down until you find the thumbprint.
Copy the Thumbprint
Modify the ssid and password values in the Arduino code.
1 2 | const char *ssid = "yourwifiname"; const char *password = "yourwifipassword"; |
The first parameter is your Ngrok URL pointing to our status.php code. The second parameter is the certificate thumbprint.
1 | http.begin("https://09306a69.ngrok.io/chatbot/status.php", "4571789e29a8368fd8f8433e28c456e8116369d8"); |
Plug your NodeMcu to your computer and start uploading the code. If you want to check if the device is connected to wifi successfully. Open up your Serial monitor and set the baud rate to 9600.
Test out by chatting the commands to your Facebook page!
When sending commands to our Facebook page, Facebook will send a request to our specified webhook URL. The message will then be checked and update the database status based on the commands specified.
Our module will connect to wifi and send an HTTP post request to our web server repeatedly. This method is called Polling.
The web server then returns a JSON response that will be parsed by our Arduino code using ArduinoJson library.
If you need more clarification, Comment down below!
If you like this tutorial, kindly share this post by clicking the social media buttons below 🙂
danishsharif1
October 30, 2019 at 11:57 pmdoes it work on facebook lite messenger?
cedcraftscodes
November 23, 2019 at 7:54 pmYes it works, as long as you send a message to your Facebook Page.
sircewaffles
July 4, 2020 at 1:35 pmI cannot locate the chatbot files. I’ve installed the necessary files, but cannot locate them.
I am looking at setting them up through my website.