Description

"Backend Integration with IoT using Flask and Wokwi"

Proyek ini menggabungkan teknologi backend berbasis Python Flask dengan simulator IoT Wokwi, untuk menunjukkan cara integrasi data perangkat IoT ke dalam sistem backend yang aman dan mudah diakses. Proyek ini berfungsi sebagai contoh sederhana namun komprehensif tentang bagaimana data IoT dapat dikumpulkan, dikelola, dan dimanipulasi melalui REST API dan disimpan di dalam database MySQL.

Pada bagian backend, aplikasi Flask dikembangkan dengan tiga endpoint utama: POST, PUT, dan GET. Endpoint POST memungkinkan pengguna menambahkan data baru dari perangkat IoT, PUT untuk memperbarui data yang ada, dan GET untuk mengambil data. Aplikasi ini terhubung ke database MySQL yang berjalan di server virtual (VM), sehingga data dari perangkat dapat disimpan dan dikelola dengan baik.

Untuk simulasi IoT, proyek ini menggunakan platform Wokwi, di mana perangkat virtual seperti ESP32 dapat diprogram untuk mengirim data secara otomatis ke backend Flask melalui protokol HTTP. Misalnya, perangkat dapat dikonfigurasi untuk mengirim data sensor setiap beberapa detik, mensimulasikan pengiriman data secara real-time dari perangkat IoT ke server.

Portofolio ini mencakup:

1. Pengembangan Backend dengan Flask: Implementasi API yang efisien untuk menerima data dari perangkat IoT.
2. Simulasi Perangkat IoT dengan Wokwi: Menggunakan Wokwi untuk membuat simulasi yang realistis dari perangkat IoT.
3. Manajemen Database MySQL: Menyimpan data dari perangkat secara otomatis di MySQL, yang berjalan di VM, untuk manajemen data yang aman dan terstruktur.
4. Integrasi Frontend dan Backend: Simulasi Wokwi yang terhubung ke backend, menyediakan antarmuka sederhana untuk menguji koneksi antara perangkat dan server.

Proyek ini memberikan pemahaman tentang proses mengembangkan aplikasi yang menghubungkan perangkat IoT dengan sistem backend dan database, serta cara memanfaatkan Flask dan Wokwi untuk membangun, menguji, dan menjalankan simulasi IoT berbasis cloud.

berikut Langkah-langkahnya:
1. Membangun Aplikasi Backend di Python Flask
Kita akan membuat aplikasi Flask sederhana dengan tiga endpoint utama: POST, PUT, dan GET yang terhubung ke MySQL di VM.
Langkah-langkah:
1. Siapkan Struktur Aplikasi Flask
o Buat direktori proyek, misalnya flask_app.
o Buat file utama app.py untuk aplikasi Flask.
2. Instalasi Kebutuhan
o Di terminal, pastikan Anda berada di direktori proyek, lalu install dependensi:

Konfigurasi Database
• Tambahkan konfigurasi untuk menghubungkan aplikasi Flask ke MySQL di VM.
Sudo apt update

Sudo apt install mysql-server

Mysql -u root -p

Create database

Membuat Endpoint
• Tambahkan tiga endpoint: POST, PUT, dan GET untuk menangani data dalam database.


Kemudian setelah itu merunning

1. Menguji Endpoint POST /data
Endpoint ini digunakan untuk menambahkan data baru ke database.
• Method: POST
• URL: http://127.0.0.1:5000/data
• Headers: Content-Type: application/json
• Body (JSON):
json
Copy code
{
 "name": "John Doe",
 "age": 25
}
• Langkah di Postman:
1. Pilih metode POST.
2. Masukkan URL di atas.
3. Buka tab Body, pilih raw, lalu pilih JSON di dropdown.
4. Masukkan JSON body seperti contoh di atas.
5. Klik tombol Send.
• Response yang diharapkan:
json
Copy code
{
 "message": "Data berhasil ditambahkan!"
}

2. Menguji Endpoint PUT /data/<id>
Endpoint ini digunakan untuk memperbarui data pengguna berdasarkan id.
• Method: PUT
• URL: http://127.0.0.1:5000/data/1 (ubah 1 menjadi ID data yang ingin diperbarui)
• Headers: Content-Type: application/json
• Body (JSON):
json
Copy code
{
 "name": "Jane Doe",
 "age": 30
}
• Langkah di Postman:
1. Pilih metode PUT.
2. Masukkan URL di atas (pastikan mengganti <id> dengan ID yang ada di database).
3. Buka tab Body, pilih raw, lalu pilih JSON di dropdown.
4. Masukkan JSON body seperti contoh di atas.
5. Klik tombol Send.
• Response yang diharapkan:
json
Copy code
{
 "message": "Data berhasil diperbarui!"
}

3. Menguji Endpoint GET /data
Endpoint ini digunakan untuk mengambil semua data dari database.
• Method: GET
• URL: http://127.0.0.1:5000/data
• Langkah di Postman:
1. Pilih metode GET.
2. Masukkan URL di atas.
3. Klik tombol Send.
• Response yang diharapkan: Response akan berupa daftar data yang ada di tabel users, misalnya:
json
Copy code
[
 {
   "id": 1,
   "name": "John Doe",
   "age": 25
 },
 {
   "id": 2,
   "name": "Jane Doe",
   "age": 30
 }
]


Dengan cara ini, Anda dapat menguji setiap endpoint menggunakan Postman untuk memastikan aplikasi berfungsi dengan baik dalam menangani operasi CRUD pada data.

2. Membangun Frontend dengan Wokwi (IoT Simulator)
Wokwi adalah simulator IoT yang memungkinkan Anda membuat visualisasi perangkat IoT dan dapat terhubung ke backend melalui HTTP API.
Langkah-langkah:
1. Membuat Simulasi di Wokwi
o Buka Wokwi dan buat proyek baru.
o Pilih perangkat yang akan digunakan, seperti ESP32 atau NodeMCU.
2. Hubungkan ke Backend
o Gunakan kode untuk mengirim data ke endpoint backend menggunakan HTTP.
o Misalnya, tambahkan kode berikut pada bagian firmware (misalnya untuk ESP32)

Terkoneksi

Hubungkan LCD dengan ESP32 sebagai berikut : 

1. Menambahkan Komponen LCD dan DHT22 ke Wokwi

2. Saya Menambahkan Tabel di Mysql

A. VCC pada LCD dihubungkan ke 3.3V pada ESP32. 
B. GND pada LCD dihubungkan ke GND.2 pada ESP32. 
C. SDA pada LCD dihubungkan ke pin ESP: 21 pada ESP32. 
D. SCL pada LCD dihubungkan ke pin ESP: 22 pada ESP32. 

Hubungkan DTH22 dengan ESP32 
VCC pada DTH22 dihubungkan ke 3.3v pada ESP32. 
SDA pada DTH22 dihubungkan ke ESP: 4 pada ESP32. 
GND pada DRH22 dihubungkan ke GND.1 pada ESP32. 

3. Menambahkan EndPoint POST,PUT dan GET di bagian app.py untuk integrasi suhu

4. Buat code wokwi yang terhubung dengan Backend 

5. Jalankan Backend 

5. Hasil di wokwi 

POST, dan PUT