9.3 Blynk Tutorial

Setup Blynk

1. Go to Blynk Official Website

2. Sign Up for a new account and login

3. Once you get redirected to Blynk Console, go to Developer Zone > My Templates and click the "New Template Button"

4. Give the project name and description (optional)

5. After creating the project, navigate to "Datastreams" and click the "edit" button

6. Click on "New Datastream" button

7. Click on "Virtual Pin"

8. You can leave everything as it is for now and click "Create".

Note: There are different data types available (Integer, Double, and String). You may need to change this depending on your needs, but for now we are going to use integer.

9. Now go to the Web Dashboard section and drag the "Switch" to the dashboard

Note: you can adjust the layout of the "Switch" by dragging the small arrow in the bottom right corner

10. Hover your cursor on the "Switch" and click the setting icon

11. Change the Title to "LED" (Optional) and select Integer V0 (V0) for the Datastream, then click the "Save" button

Note: Usually after selecting the datastream, additional options will show. For this tutorial I've set the On/Off label for demonstration purpose, however keep it mind that this is optional.

12. Click the "Save and Apply" Button

12. Now select "Devices" in the Blynk Console side bar and click the "New Device" button

13. Click "From Template"

14. Choose the template that we've created previously and click the "Create" button

15. Copy all the information in the notification

16. This will be your main web dashboard. If you want to edit it, you can refer back to step 9

Setup Wokwi

1. Go to Wokwi Official Website and create a new ESP32 project (you should've known how by now)

2. Copy this code and paste it into the wokwi project that you have created

#define BLYNK_TEMPLATE_ID ""
#define BLYNK_TEMPLATE_NAME ""
#define BLYNK_AUTH_TOKEN ""

#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>

// Your WiFi credentials
char ssid[] = "Wokwi-GUEST";
char pass[] = "";

// LED pin
const int ledPin = 2;

void setup() {
  // Initialize Serial Monitor
  Serial.begin(115200);
  
  // Initialize LED pin as output
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);  // Start with LED off
  
  // Connect to Blynk
  Blynk.begin(BLYNK_AUTH_TOKEN, ssid, pass);
  
  Serial.println("Connecting to Blynk...");
}

// Blynk function that runs when Virtual Pin V0 changes
BLYNK_WRITE(V0) {
  int buttonState = param.asInt(); // Get button state (0 or 1)
  
  if (buttonState == 1) {
    digitalWrite(ledPin, HIGH);  // Turn LED ON
    Serial.println("LED turned ON");
  } else {
    digitalWrite(ledPin, LOW);   // Turn LED OFF
    Serial.println("LED turned OFF");
  }
}

void loop() {
  Blynk.run(); // Keep Blynk connection alive
}

Note: This code is used to connect to out Blynk Project that we've created. Notice how there is an led pin with number 2 — we'll try to toggle it using our switch in the Blynk dashboard.

3. Replace this code section with the information that you've just copied in step 15 of the Blynk Setup tutorial

#define BLYNK_TEMPLATE_ID ""
#define BLYNK_TEMPLATE_NAME ""
#define BLYNK_AUTH_TOKEN ""

4. Create this sketch in your wokwi project

5. Go to the Library Manager section in your wokwi and add "Blynk"

Note: For reference, you can look up to this Wokwi Project

6. Start the Simulation

7. Wait until the Serial Monitor shows "Connecting to Blynk.."

8. Click the LED Switch in the Blynk Dashboard