DEV Community: Sakib Mahmud

HonoSphere - A Temperature and Humidity Monitoring IoT Project Using ESP32 and Cloudflare Workers

Sakib Mahmud — Sun, 16 Mar 2025 08:30:53 +0000

Hey everyone! Today, I’m thrilled to introduce HonoSphere – an IoT project that combines an ESP32 microcontroller, environmental sensors, and the magic of Cloudflare Workers to deliver real-time environmental monitoring. In this post, I'll dive into how Cloudflare Workers make HonoSphere free and cost-effective, and why this project is perfect for beginners looking to explore the world of IoT.

For the complete source code and more details, check out the HonoSphere repository on GitHub.

What is HonoSphere?
Why Cloudflare Workers?
Tech Stack Overview
Getting Started
- Backend Setup
- ESP32 Firmware Setup
Use Cases
Future Upgrades & Attachables
Wrapping Up

What is HonoSphere?

HonoSphere is an innovative IoT project designed to monitor environmental conditions like temperature, humidity, heat index, mold risk, and vapor pressure deficit (VPD) in real-time. It uses an ESP32 and a DHT11 sensor to capture data, then sends this information to Cloudflare Workers where it’s processed and stored in a Cloudflare D1 Database. The data is finally visualized on a dynamic web dashboard built with HTML, Tailwind CSS, and Chart.js.

This Project is Useful For:

IoT Enthusiasts & Beginners:

An accessible project for anyone starting with IoT, ESP32 programming, and sensor integration.
Smart Home Automation:

Enhance your smart home setup by monitoring and controlling temperature and humidity for optimal comfort.
Greenhouse & Agricultural Monitoring:

Keep your plants happy with real-time environmental data to adjust watering, ventilation, and heating systems.
Office Environment & Indoor Air Quality:

Maintain a healthy workspace by tracking and managing indoor climate conditions.
Personal Weather Stations:

Create your own remote weather station to gather local climate data for personal use or community sharing.
Educational Projects:

A practical project for learning about sensor networks, cloud computing, and real-time data visualization.

Why Cloudflare Workers?

One of the standout features of HonoSphere is its use of Cloudflare Workers. Here’s why they make this project an ideal choice for beginners and budget-conscious makers:

Free Tier and Cost-Effectiveness:

Cloudflare Workers offer a generous free tier, allowing you to run your code at the edge without incurring hefty costs. This means you can deploy your IoT project without worrying about monthly fees or scaling issues.
Ease of Deployment:

Cloudflare Workers simplify the deployment process. With just a few commands and minimal configuration, you can get your backend up and running in minutes.
Low Maintenance:

Since Cloudflare Workers are serverless, there’s no need to manage servers or worry about infrastructure. This leaves you free to focus on building and improving your IoT project.
Edge Computing Benefits:

By running your code on Cloudflare’s global network, you benefit from low latency and high performance, ensuring your IoT data is processed quickly and reliably no matter where you are.
Beginner-Friendly Environment:

The developer tools, documentation, and community support make Cloudflare Workers a great entry point for those new to serverless computing and IoT projects.

Tech Stack Overview

Backend

Hono.js: A fast API framework that powers our endpoints.
Cloudflare Workers: Serverless computing that makes deployment free and easy.
D1 Database: A cloud-based SQL database from Cloudflare for storing sensor data.

Frontend

HTML & Tailwind CSS: For building a sleek, responsive dashboard.
Chart.js & chartjs-plugin-zoom: For interactive, eye-catching charts.

Hardware

ESP32: Your IoT microcontroller that connects to WiFi.
DHT11 Sensor: Captures temperature and humidity data.

HonoSphere Architecture

Visualize the flow of your project with this neat diagram:

Installation & Setup

Clone the Repository

Kick things off by cloning the repository to your local machine:

git clone https://github.com/Sigmakib2/HonoSphere.git
cd HonoSphere

Backend Setup

Get ready to deploy the magic on Cloudflare!

Cloudflare Workers Project

Navigate and Install Dependencies:

Jump into the Cloudflare Workers folder and install the necessary packages:

   cd cloudflare_worker
   npm install
   npm run dev

Set Up Cloudflare D1 Database:

Follow the Cloudflare D1 documentation to configure your database. Below you can see this process:

Configure Wrangler

Edit the wrangler.jsonc File:

Update your configuration to connect to your D1 database and secure your endpoints with an API key:

   {
     "d1_databases": [
       {
         "binding": "DB",
         "database_name": "honosphere",
         "database_id": "Your-d1_databases-ID"
       }
     ],
     "vars": {
       "AUTH_KEY": "YOUR_SECURE_API_KEY"
     }
   }

Tip: The AUTH_KEY is crucial—it's what keeps unauthorized users from writing data to your database!

Create & Configure the D1 Database

Create the Database:

Execute this command to create a new database called honosphere:

   npx wrangler d1 create honosphere

(If you haven’t installed Wrangler yet, run npm install wrangler -g.)

Set Up Your Database Table:

Run the schema file to create the necessary table:

   npx wrangler d1 execute honosphere --remote --file db/schema.sql

Deploy Your Worker:

Finally, deploy your Cloudflare Worker:

   npm run deploy

Once deployed, you’ll see an endpoint URL in your terminal like this:

   https://<your-project-name>.<your-worker-subdomain>.workers.dev

ESP32 Firmware Setup

Let’s power up the ESP32!

📐 Connection Diagram

Follow the Connection Diagram to connect the ESP32 and DHT11 sensor.

Navigate to the Firmware Directory:

   cd esp32_firmware/sketch

Edit the sketch.ino File:

Open the file in the Arduino IDE (or your favorite editor) and update these settings:

   // Wi-Fi Credentials
   const char* ssid = "Your_Wifi_SSID_or_Visible_name";
   const char* password = "Your_wifi_password";

   // Cloudflare Worker URL
   const char* serverURL = "https://cloudflare_worker.<your_worker_subdomain>.workers.dev/api/sensor";

   // API Key (must match Cloudflare Workers AUTH_KEY)
   const char* apiKey = "YOUR_SECURE_API_KEY";

Upload the Firmware:

Compile and upload the sketch to your ESP32. Open the serial monitor and you should see messages like:

   Connecting to WiFi...
   Connected to WiFi ✅

Watch It Work:

Every 33 seconds, the onboard LED will blink to show that data is being sent. Check your Cloudflare D1 Database (under Storage & Databases → D1 SQL Database → honosphere → readings) to see your data logged.

API Endpoints

Your deployed Cloudflare Worker exposes the following API endpoints:

1. POST `/api/sensor`

What It Does:

Accepts sensor data from the ESP32 and stores it in the database.
How to Use It:
- Headers:
- x-api-key: Must match your AUTH_KEY.
- Body:
```
{
  "temperature": 23.5,
  "humidity": 45
}
```

Response:

Success:

{ "status": "success" }

Failure (e.g., if the API key is wrong):

{ "error": "Unauthorized" }

2. GET `/api/readings`

What It Does:

Retrieves sensor readings, with optional filters.
How to Use It:

Use query parameters such as:
- period (e.g., 'day', 'week', or 'month')
- from and to (custom timestamps in milliseconds)
- hours or minutes (to get recent data)

Note: Use one filter type per request.

  GET  https://<your-project-name>.<your-worker-subdomain>.workers.dev/api/readings?minutes=1

Response: Returns an array of sensor readings:

[
  {
    "id": 3652,
    "temperature": 33.9,
    "humidity": 48.9,
    "timestamp": 1742109887052
  },
  {
    "id": 3651,
    "temperature": 33.9,
    "humidity": 48.9,
    "timestamp": 1742109874901
  }
]

Error Handling: A 400 status code is returned for invalid parameters.

Dashboard

The HonoSphere Dashboard is a slick web interface that visualizes your sensor data through interactive charts like line, bar, scatter, histogram, pie, and polar.

Dashboard Setup

Navigate to the Dashboard Directory:

   cd dashboard

Update the Endpoint URL:

In the index.html file, find the script block that constructs the API URL and update the placeholder with your Cloudflare Worker endpoint:

   async function fetchData() {
       let filter = document.getElementById('timeFilter').value;
       let fromDate = document.getElementById('fromDate').value;
       let toDate = document.getElementById('toDate').value;

       let url = `https://cloudflare_worker.<Your_worker_subdomain>.workers.dev/api/readings?${filter}`;

       if (fromDate && toDate) {
           const fromTimestamp = new Date(fromDate).getTime();
           const toTimestamp = new Date(toDate).getTime();
           url = `https://cloudflare_worker.<Your_worker_subdomain>.workers.dev/api/readings?from=${fromTimestamp}&to=${toTimestamp}`;
       }

       try {
           const res = await fetch(url);
           const data = await res.json();
           if (data.error) throw new Error(data.error);
           renderCharts(data);
       } catch (err) {
           alert('Error fetching data: ' + err.message);
       }
   }

Launch the Dashboard:

Open the index.html file with a live server or your preferred method, and watch your data come to life in vibrant charts!

User Interaction Flow

Select a Time Range: Choose a preset period (like last 1 minute, 1 hour, etc.) or set custom dates.
Load Data: Click the Load Data button to fetch sensor readings.
Visualize Charts: Your data is rendered in multiple charts—complete with zoom, pan, and full-screen features.
Full-Screen Mode: Use the full-screen button on any chart for a closer look, and exit full-screen easily.

Plugins in Action

Chart.js: Creates interactive, dynamic charts.
chartjs-plugin-zoom: Enables smooth zooming and panning.
Tailwind CSS: Ensures your dashboard looks sharp and responsive.

Additional Information

For a deeper dive, updates, or to contribute your own ideas, check out the HonoSphere GitHub repository. Enjoy exploring and monitoring your environment with HonoSphere—where tech meets nature in real-time!

Use Cases

HonoSphere’s versatility opens up a range of practical applications:

Home Automation:

Monitor your home’s climate and trigger smart devices like HVAC systems based on real-time data.
Greenhouse Management:

Keep your plants happy by tracking and adjusting temperature and humidity levels for optimal growth.
Office Environment Monitoring:

Maintain a healthy workspace by monitoring environmental conditions to reduce the risk of mold or discomfort.
Remote Weather Station:

Set up a personal weather station to collect and share local weather data with your community or for educational projects.

Future Upgrades & Attachables

The journey doesn’t stop here! HonoSphere is designed to be expandable and upgradeable. Here are a few ideas for future enhancements:

Additional Sensors:

Integrate air quality, light intensity, or CO₂ sensors for a more comprehensive environmental analysis.
Mobile App Integration:

Build a mobile app that delivers push notifications and real-time data visualization on the go.
Machine Learning Analytics:

Use machine learning to predict trends and automate alerts when environmental conditions hit critical thresholds.
Automated Actuators:

Connect devices like fans, humidifiers, or dehumidifiers that automatically adjust based on sensor data.
Enhanced Dashboard Features:

Expand your dashboard with custom reports, historical data analysis, and more detailed filtering options.
Community Data Sharing:

Create a platform for users to share and compare their environmental data, fostering a community of smart monitoring enthusiasts.

Wrapping Up

HonoSphere is more than just an IoT project—it’s a gateway to exploring the fascinating world of environmental monitoring, powered by the cost-effective and beginner-friendly capabilities of Cloudflare Workers. Whether you’re a hobbyist or a seasoned developer, HonoSphere provides an accessible platform to learn, innovate, and experiment with IoT technologies without breaking the bank.

For the full project details and source code, head over to the HonoSphere GitHub repository.

Happy coding, and here’s to building a smarter, more connected world!

Building Nirmol: A Bangla Offensive Language Detection API and Dataset

Sakib Mahmud — Wed, 20 Mar 2024 14:53:52 +0000

Nirmol is a Bangla/Bengali/Banglish offensive/bad/slang words Detection API available on GitHub as open source. Before Nirmal was created, there was no good API or any other solution to detect swearing or bad words in the Bengali language.

Motivation

Although such API is available for English or other popular languages, I could not find any kind of solution for the Bengali language even after searching a lot. I needed such a solution mainly for the platform I'm working with other developers to build.

In the platform, we are building, a Bengali-speaking person can fill in his/her data, and after publishing it can be seen by anyone on the internet. Many mischievous users use profanity which can cause considerable damage.

My job was to design the whole system properly and find some microservices-based solutions for minor problems. Finally, I was able to create a solution to this problem myself.

Design and Development

There can be several solutions to this problem like we can filter out Bengali words using artificial intelligence or we can create a collection where negative or bad words will be kept together to create a filter-out system.

Since our entire platform is already very complex initially we don't have much competition power. So in that case we could not agree on using artificial intelligence. Besides, none of the existing Bengali artificial intelligence can properly detect Bangla bad words or swearing.

I created a form and shared it with my friends and acquaintances through social media and collected a list of various commonly used Bengali bad words from them. Apart from that, I created a data set myself by combining different previously published datasets. It was not so easy to build my dataset.

Then I generated a JSON file and wrote an Express JS app that gets words or sentences and then checks if that is in the JSON file or not.

Installation

You can download the dataset from the GitHub repository but here is the Direct dataset link. You can download and use this dataset for ML and AI model training.

Nirmol API is based on:

Node.js
Express.js

npm package used

body-parser
cors
fs
nodemon

Run Nirmol locally

Step 1: Clone the Nirmol repository

git clone https://github.com/Sigmakib2/Nirmol.git

Step 2: Go to the Nirmol directory

cd Nirmol

Step 3: Install node modules

npm install

Step 4: Start the project

npm start

Then, open your web browser and navigate to http://localhost:3000, and you should see "Cannot GET /" displayed on the page. To test the API you have to enter something after the '/'. For example "http://localhost:3000/hello world"

API Response

The API endpoint analyzes a sentence for offensive/slang words and provides additional information about the sentence.

For example here is a get request and response:

{ "bad_sentence": true, "bad_word_list": [ "কুত্তা" ], "normal_words": [ "একটি", "গালি", "বা", "খারাপ", "শব্দ" ], "badness": "16.67%" }

You can also use the POST method to get a response. This feature was added by Tasnim Anas.

For POST request: the endpoint is "http://localhost:3000/" and you have to send payload in the body like this:

{ "sentence": "Your sentence here..." }

Here's what the response means:

bad_sentence: Indicates whether the sentence contains any offensive/bad/slang words or not. This only returns boolean values.
bad_word_list: Lists the offensive/bad/slang words found in the sentence.
normal_words: Lists the words in the sentence that are considered normal or not offensive/bad/slang words.
badness: Indicates the proportion of offensive/bad/slang words in the sentence.

Use Cases

Here are some use cases of this API

Content moderation: Bangla websites often host user-generated content such as comments, forum posts, or user profiles. This API can be integrated into these platforms to automatically detect and filter out inappropriate language, thus maintaining a clean and respectful environment for users.
Social media platforms: Social media platforms that support Bangla language content can use this API to automatically flag or filter out offensive or inappropriate content in user posts, comments, and messages, helping to maintain a positive and safe community for users.
E-commerce platforms: E-commerce websites serving the Bangla-speaking community can utilize this API to ensure that product reviews and comments remain free from offensive language, ensuring a positive shopping experience for customers.
Educational platforms: Educational websites and software applications targeting Bangla-speaking users can use this API to monitor and filter user-generated content in discussion forums, chatrooms, or collaborative projects, promoting a respectful and constructive learning environment.
Parental control software: Parental control software can leverage this API to monitor and filter out inappropriate content in Bangla language websites and applications, helping parents protect their children from exposure to harmful or offensive material online.
Chat applications: Bangla language chat applications can integrate this API to automatically detect and filter out offensive language in user messages, helping to maintain a friendly and respectful communication environment among users.
Customer support platforms: Customer support platforms serving Bangla-speaking customers can use this API to monitor and filter out abusive or inappropriate language in customer inquiries and support tickets, ensuring a professional and respectful interaction with users.

Change The Theme in Android Studio

Sakib Mahmud — Thu, 08 Apr 2021 19:09:40 +0000

After installing android studio for the first time, you will see the default theme. Which is white and the code is not easy to read. To enable the official dark theme on your android studio, follow the steps below:

Step 1: Go to ‘File’ and from the drop-down menu click on ‘Settings’

Step 2: Expand ‘Appearance & Behavior’ menu and click on ‘Appearance’

Step 3: Expand ‘Theme’ section and select ‘Darcula’

Step 4: Click on ‘Apply’ or ‘Ok’

In this way, you can switch between any of those 3-official themes. Here IntelliJ is the light theme and Dracula is the dark theme. Read the article about this

DEV Community: Sakib Mahmud

HonoSphere - A Temperature and Humidity Monitoring IoT Project Using ESP32 and Cloudflare Workers

Table of Contents

What is HonoSphere?

This Project is Useful For:

Why Cloudflare Workers?

Tech Stack Overview

Backend

Frontend

Hardware

HonoSphere Architecture

Installation & Setup

Clone the Repository

Backend Setup

Cloudflare Workers Project

Configure Wrangler

Create & Configure the D1 Database

ESP32 Firmware Setup

API Endpoints

1. POST /api/sensor

2. GET /api/readings

Dashboard

Dashboard Setup

User Interaction Flow

Plugins in Action

Additional Information

Use Cases

Future Upgrades & Attachables

Wrapping Up

Building Nirmol: A Bangla Offensive Language Detection API and Dataset

Motivation

Design and Development

Installation

API Response

Use Cases

Change The Theme in Android Studio

1. POST `/api/sensor`

2. GET `/api/readings`