Web Server Relays – ESP32 + Android App

In this project, we are going to do a Home Automation setup using ESP32 Web server and controlling it through an Android application. Check the video below to see it in action.

First, let me thankPCBWay logofor sponsoring this project. For those who don’t know, PCBWay is a PCB manufacturer and PCB assembler company in china they provide high-quality PCB prototyping for a low cost. Check out their website here.

Things Required

Componentschip icon
Amazonamazon
Banggoodbanggood
AliExpressali express
ESP32 Doit Dev Board
cart icon
cart icon
cart icon
12v Relay
cart icon
cart icon
cart icon
TIP120
cart icon
cart icon
cart icon
2.2k Resistor
cart icon
cart icon
cart icon

Circuit

Schematic
PCB

PCB Prototyping From PCBWay

Step 1: Download Gerber Files

Step 2: Upload in PCBWay

  • Now click the +Add Gerber File button.
  • Then choose the file from your computer and upload.
  • After uploading you can view an image of the PCB
  • There are a lot of settings to choose from, I just left everything to default except the color. Black is my fav ????
  • Now choose your shipping method and country and click on save to cart button.
  • Then create an account or login if you already have an account in PCBWay.
  • Make the payment and your PCB will reach you in a few days ????.

Android App To Send HTTP Requests

Click the Install button to install the HTTP Request Shortcuts app in your android phone.

A Short note on this application

Place shortcuts (widgets) on your home screen to submit HTTP requests to all your favorite RESTful APIs, web services, and other URL resources. Great for home automation & IoT projects!

This app is open-source, find it on Github: https://github.com/Waboodoo/HTTP-Shortcuts. It’s also completely free and contains no ads, because who wants those anyway.

Configuring

  • After installation open the application.
  • Click on the + button in the bottom right corner.
  • Then select Regular Shortcut from the create new shortcut menu.
  • Now write the Shortcut Name & Description.
  • You can also change the icon by clicking on the icon at the top.
  • Now click on the Basic Request Settings.
  • From the Basic Request Settings choose,
  • GET as the method.
  • Type the webserver URL for turn ON/OFF the Relay as shown.
  • Now click the back arrow.
  • After entering all the details the final page will look like this.
  • Now press the Tick button to save.
  • Now we have successfully added Button for one relay.
  • Like the same add buttons for all the relays.
  • For adding shortcut in home screen, press and hold any button and select create shortcut button.

Code

Leave a Reply