Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Arduino: NodeMCU ESP8266 IoT Wifi Relay Sensor Dashboard App

Name: Arduino: NodeMCU ESP8266 IoT Wifi Relay Sensor Dashboard App
Rating: 4.4 (58 reviews)

Learn how to build your own sonoff, create amazing IoT dashboard web apps, control switches and graph sensor data

Created byWireLabs Embedded Engineering

Last updated 2/2022

English

What you'll learn

Master Arduino ESP8266 programming
Learn how to design and code amazing and beautiful web dashboard apps
Learn how to use ChartJS to graph real-world sensor data
Learn how to prototype esp8266 nodeMcu using breadboards
Learn how to setup your coding environment and packages for maximum productivity using VS Code and Atom

Course content

7 sections • 50 lectures • 7h 40m total length

Course Intro1:46
Project demonstration2:13
What are we building2:43
What parts are we going to use5:17
Select an MCU development board, a 5V four-channel relay shield, an ADHD 22 temperature and humidity sensor, and a SAT V12 digital temperature sensor; also include breadboards and jumper wires.
Links to the parts we are going to use0:31
What software are we going to use3:01
Walks through the software stack: fritzing for diagrams; arduino ide for setup and serial monitoring; vs code with arduino package for firmware and web app; atem and joyo for diagrams.

Optional: Read more about the parts used0:28
Parts overview16:20
Block diagram overview2:21
Fritzing schematic diagram8:26
design a fritzing schematic for a nodeMCU esp8266 iot setup, wiring dht22 sensors and a four-channel relay, configure 3.3v rails, pull-ups, and data signals for a functional breadboard prototype.
Connecting the parts on breadboard8:53
Connect components on a breadboard to assemble a NodeMCU ESP8266 based four-channel relay and DHT22 sensor, wiring power, grounds, pull-ups, and data lines for a working IoT dashboard.
Optional: Replacing relay shield with LED's0:33

Dashboard app overview6:52
Intro to HTML and CSS and resources0:22
HTML and CSS Code for web dashboard - starting files0:17
HTML and CSS part 1 - Starter template17:44
HTML andd CSS part 2 - UI Boxes21:24
HTML and CSS part 3 - switch UI box17:21
HTML and CSS part 4: finalizing UI boxes26:25
HTML and CSS part 5: test and error fixes4:26
Debug and fix HTML and CSS for a web dashboard app, using the HTML preview to test responsiveness and resolving margins, gaps, and syntax errors.

Intro to javascript, knockout.js and resources0:57
MVVM pattern and ko.js7:51
JS part 1-Status and Config ViewModels21:05
Develop dynamic content for an embedded web dashboard using knockout.js in JavaScript, building status and config view models, rendering relay names and switches, loading data, charts, and updating sensors.
JS part 2 - Logs and LastValues Viewmodel20:30
JS part 3 - GraphViewModel23:15
Define the graph view model and configure chart labels, colors, and datasets to visualize relay data, temperature, and humidity. Implement ajax updates to refresh the dashboard in real time.
JS part 4 - MainViewModel and relays23:32
JS part 5- Websockets and cookie managment32:38
Finish building the dashboard with a live update loop and WebSocket relay states to the ESP8266, and implement cookie toggles for logs and data tables.

Section Intro and materials1:07
Overview of the code arhitecture8:43
Explore the ESP8266 nodeMCU firmware architecture, detailing main, wifi, sensors, relay, and web server sections, how it serves pages from flash and handles ajax, web socket, and sensor data.
Starting files0:27
Arduino setup and loop functions reference0:10
Arduino main setup and loop functions12:31
ESP8266 WiFi and op-modes reference0:34
WiFi module code22:20
Relay module: pinMode and digitalWrite reference0:13
Relay module code8:47
Multi-tasking the arduino0:15
Sensors module code28:00
Web server and ArduinoJSON 6 resources0:13
Web server module code - part 1 request handlers30:52
Web server module code -part 2 Websockets12:58
Finish the web server module by implementing websockets and adapting a reference function to handle json messages, parsing relay state and controlling relays.
Saving configurations to EEPROM16:03

Requirements

Basic familiarity with Arduino and ESP8266
Basic web technologies knowledge (HTML, CSS, Javascript)

Description

Are you web developer or embedded developer? Student? Maker? Either way, IoT is not just a buzzword any more, it is becoming increasingly in demand, so if you are looking for a slight career change, great learning opportunity or just a fun and useful project, this course is for you!

It is designed to give you everything you need to design and code a working real-world IoT home-automation prototype device.
You will gain invaluable knowledge on every step of the entire process, explained simply, efficiently and with ease.

I went into great detail and planning with each section, so that you can have a solid understanding of the goals for each section.

I've prepared block diagrams both for hardware and software, schematics, additional learning resources etc. Everything is laid down efficiently, and there is no waste of time in this course, you will learn every minute of it, simple and effective.

You will learn how to build your own Sonoff device

You will see how to code Arduino firmware for esp8266 using VS Code, which will make process of coding incredibly enjoyable, clean and professional.

You will learn how to use JavaScript library -ko.js, for building amazing web applications from scratch, that are served directly from ESP8266 flash memory

You will learn how to use Charts.js - JavaScript library for creating amazing and interactive charts to display data from your switches and sensors.

You will learn how to utilize sensors like DHT22 and DS18B20 with esp8266.

You will code your own relay control module

You will learn how to emulate eeprom on esp8266 to save configuration data

and much, much more...

Courses Offered:

1. Arduino: NodeMCU ESP8266 IoT Wifi Relay Sensor Dashboard App

2. ESP8266: IoT Electronics, Programing & Eagle PCB Design

Who this course is for:

students
makers
learners
web developers
embedded developers

Arduino: NodeMCU ESP8266 IoT Wifi Relay Sensor Dashboard App

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 16min

Building the prototype6 lectures • 37min

Preparing the coding environment5 lectures • 12min

Building the dashboard - HTML & CSS8 lectures • 1hr 35min

Building the dashboard - Javascript & ko.js7 lectures • 2hr 10min

ESP8266 Arduino firmware15 lectures • 2hr 23min

Test, Debug and Deployment3 lectures • 28min

Requirements

Description

Who this course is for: