Description

1.  Buat Database di MYSQL

Pertama saya membuat database dengan nama cuaca_db, kemudian membuat table dengan nama lokasi, table lokasi nya diisi dengan id (primary key), nama_kota, dan kode_negara.

2.  Buat backend menggunakan python flask yang terhubung dengan MYSQL dan OpenWeatherMap API 

Aplikasi Flask ini adalah API sederhana yang berfungsi untuk menyimpan dan mengelola data lokasi serta mengambil informasi cuaca dari OpenWeatherMap. Aplikasi ini terhubung ke database MySQL bernama `cuaca_db`, di mana data lokasi disimpan, dan memanfaatkan kunci API OpenWeatherMap untuk mengambil data cuaca. Di bagian endpoint, API ini menyediakan beberapa fungsi utama:

1. POST `/lokasi`: Endpoint ini digunakan untuk menambahkan data lokasi baru ke dalam database. Setiap lokasi yang disimpan akan memuat informasi berupa nama kota dan kode negara.

1. PUT `/lokasi/<id>`: Endpoint ini memungkinkan pengguna memperbarui informasi lokasi berdasarkan ID tertentu. Misalnya, jika ada perubahan nama kota atau kode negara, data dapat diperbarui tanpa harus menghapus dan menambah ulang.

1. GET `/lokasi`: Endpoint ini digunakan untuk mengambil dan menampilkan semua data lokasi yang tersimpan dalam database. Respons yang dikembalikan berisi daftar lengkap kota dan negara yang sudah diinputkan.

1. GET `/cuaca/<nama_kota>`: Endpoint ini memungkinkan pengguna untuk melihat data cuaca terkini dari kota tertentu. Ketika nama kota dimasukkan, aplikasi akan mengirim permintaan ke OpenWeatherMap untuk mengambil data cuaca yang relevan. Jika data ditemukan, cuaca akan ditampilkan, tetapi jika tidak, aplikasi akan mengembalikan pesan kesalahan.

Aplikasi ini juga telah diatur untuk mendukung Cross-Origin Resource Sharing (CORS) menggunakan `flask_cors.CORS`, sehingga memungkinkan aplikasi di domain lain untuk mengakses API ini, misalnya dari aplikasi front-end. Server Flask ini berjalan pada `0.0.0.0` dengan port `5010`, sehingga dapat diakses dari jaringan lain, dan dijalankan dalam mode debug (`debug=True`) untuk mempermudah pengembangan dengan menampilkan pesan error yang lebih informatif.

3.  Buat frontend yang terhubung dengan flask backend menggunakan ReactJS 

Aplikasi React ini dirancang untuk mengelola daftar lokasi dan juga mengecek cuaca di berbagai kota. Ada beberapa fungsi utama yang bekerja untuk menghubungkan aplikasi ini dengan backend:

1. fetchLokasi: Fungsi ini mengambil daftar lokasi dari backend melalui endpoint `/lokasi` dan menyimpannya dalam state `lokasi`, sehingga bisa ditampilkan di halaman sebagai daftar kota dan kode negara.

1. fetchCuaca: Fungsi ini mengambil data cuaca dari backend untuk kota tertentu, dengan menggunakan endpoint `/cuaca/<namaKota>`. Data cuaca ini akan muncul di antarmuka, memberikan info suhu dan deskripsi cuaca. Fungsi ini bekerja dengan debounce (penundaan) 500 ms saat pengguna mengetik, jadi hanya mengirim permintaan setelah pengguna berhenti sejenak.

1. handleInputChange: Ini menangani setiap perubahan dalam input nama kota untuk cek cuaca. Dengan adanya debounce, aplikasi tidak langsung memanggil API tiap kali pengguna mengetik huruf, tapi menunggu sejenak setelah mereka selesai mengetik untuk menghemat pemanggilan API.

1. handleSubmit: Fungsi ini berperan untuk menambah atau memperbarui data lokasi. Jika sedang mengedit (ada `updateId`), data dikirim dengan metode PUT ke `/lokasi/<updateId>` untuk memperbarui kota dan kode negara yang dipilih. Kalau tidak ada `updateId`, artinya pengguna sedang menambah lokasi baru, maka data dikirim dengan metode POST ke `/lokasi`.

1. useEffect: Fungsi ini langsung dipanggil begitu halaman terbuka dan memuat daftar lokasi dari backend, sehingga pengguna bisa melihat data terbaru saat aplikasi dimulai.

Jadi, di antarmuka, pengguna bisa menambah atau memperbarui daftar lokasi yang tersimpan di backend. Selain itu, aplikasi juga memungkinkan pengguna untuk mengecek cuaca di kota tertentu berkat integrasi dengan OpenWeatherMap API.

4.  Buat CSS agar tampilan nya semakin menarik

5.  Tampilan WEB

 Fitur-fitur pada WEB:

1. User bisa Menambahkan lokasi dan ID negara nya, dengan cara klik Tambah Lokasi
2. User bisa Update lokasi dengan cara klik Edit
3. Website menampilkan hasil inputan atau updatean dari user
4. User bisa cek cuaca berdasarkan nama kota nya dengan cara memasukkan nama kota nya terlebih dahulu kemudian akan muncul muncul keterangan temperature dan deskripsi cuaca nya.