Building an ESP32 World Clock Project: Fetching JSON API Data and Displaying Date and Time on an I2C LCD Display

Introduction:

The ESP32 microcontroller is a versatile platform that allows you to blend data fetching from JSON APIs with hardware interaction. In this tutorial, we're embarking on a fascinating journey to create a world clock project using an ESP32. We'll fetch JSON API data from the JSONPlaceholder website and the World Clock API, and then we'll showcase this data on an I2C LCD display. By the end, you'll have a functional world clock that elegantly displays the time and date from various locations.

Prerequisites:

Before diving into this project, ensure you have the following:

ESP32 Board: A powerful microcontroller with WiFi capabilities.

I2C LCD Display: A display that communicates via the I2C protocol.

Arduino IDE: The platform for programming and code upload.

Access to JSONPlaceholder API: To retrieve JSON data for practice.

Access to World Clock API: To obtain accurate global time data.

Project Overview:

This project revolves around combining the power of data fetching from JSON APIs with hardware integration. You'll fetch JSON data from both JSONPlaceholder and the World Clock API, process the data, and display the date and time from multiple locations on an I2C LCD display.

Video:

Circuit:

Code:

#include <WiFi.h>

#include <HTTPClient.h>

#include <ArduinoJson.h>

#include <Wire.h>

#include <LiquidCrystal_I2C.h>

// Set the LCD address

LiquidCrystal_I2C lcd(0x27, 16, 2); 

const char* URL = "http://worldtimeapi.org/api/timezone/Asia/Kolkata";

void setup() {

  Serial.begin(115200);

   // Initialize the LCD

  lcd.init();

  // Turn on the backlight

  lcd.backlight();

  WiFi.begin("mewt", "87654321");

  while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi...");

  }

}

void loop() {

  if (WiFi.status() == WL_CONNECTED) {

    HTTPClient http;

    http.begin(URL); // replace with your API endpoint

    int httpCode = http.GET();

    if (httpCode == HTTP_CODE_OK) {

      String jsonStr = http.getString();

      Serial.println(jsonStr);

    StaticJsonDocument<768> doc;

DeserializationError error = deserializeJson(doc, jsonStr);

if (error) {

  Serial.print("deserializeJson() failed: ");

  Serial.println(error.c_str());

  return;

}

auto datetime = doc["datetime"].as<String>(); // "2023-04-18T19:28:23.053517+05:30"

Serial.print(datetime);

 String date = datetime.substring(0, 10);

String Time = datetime.substring(11, 19);

    // Print the date and time on the LCD

    lcd.clear();

    lcd.setCursor(0, 0);

    lcd.print(date);

    lcd.setCursor(0, 1);

    lcd.print(Time);

    }

    http.end();

  }

  

  delay(10000); // wait for 10 seconds before getting new data

}

Download Code

Conclusion:

By merging the worlds of JSON API data retrieval and hardware interaction, you've successfully crafted an ESP32 world clock project that offers both educational and practical value. As you watch the I2C LCD display elegantly showcase time and date information from various global locations, you're witnessing the beauty of technology in action. This project not only enriches your skills but also embodies the harmony between programming and hardware craftsmanship. So, gather your components, follow the steps outlined in this guide, and create your very own ESP32 world clock that displays time zones across the globe in a stylish and informative manner.