Description

Membuat Database MySQL

Database ini akan digunakan untuk menyimpan tiap data lokasi dan cuacanya secara real time, yang ditambahkan pengguna pada halaman frontend. Dimana flownya frontend terkoneksi dengan backend, method POST pada backend akan menerima data dari frontend dan menyimpan data tersebut ke database MySQL. Dimana database tersebut sudah dikoneksikan ke backend yang terhubung ke API External (OpenWeatherMap)
Langkah - langkah : 

1. Masuk ke salah satu server VM, disini saya menggunakan VM 3 (110.239.71.90)
2. Buat database untuk menyimpan data lokasi dan cuaca 
3. Buat tabel dengan kolom id, city, temperature, dan description
   

Membuat Backend Python Flask

Backend Python Flask ini berfungsi menerima data yang dimasukkan pengguna pada tampilan frontend. Data ini kemudian dapat diambil atau diperbarui sesuai kebutuhan. Pada backend ini terdapat konfigurasi koneksi ke database, dan 3 endpoint yaitu, endpoint POST untuk menerima dan menyimpan data, endpoint GET untuk mendapatkan dan menampilkan data , dan endpoint PUT untuk memperbarui data. Pada backend ini pula terjadi koneksi secara langsung ke API External yang mana datanya dapat ditampilkan dan dipanggil pengguna pada halaman frontend 
Langkah - langkah :

1. Konfigurasi koneksi database
   
2. Endpoint POST, untuk menerima dan menyimpan data lokasi dan cuaca serta koneksi ke API External (OpenWeatherMap)
   
3. Endpoint GET, untuk mendapatkan dan menampilkan data lokasi dan cuaca yang ada pada database MySQL
   
4. Endpoint PUT, untuk memperbarui data lokasi dan cuaca, baik melalui frontend maupun backend
   

Membuat Frontend dengan ReactJS

Pembuatan Frontend menggunakan framework ReactJS agar tampilannya menjadi lebih menarik dan memudahkan dalam membaca data. Berfungsi untuk Mengirimkan data lokasi yang diinginkan pengguna ke backend menggunakan metode POST, Menampilkan data lokasi yang telah tersimpan di database dalam bentuk yang lebih mudah dibaca, sehingga pengguna dapat melihat data cuaca dari suatu lokasi secara real-time.

1. Membuat Component ListCuaca.js
      
2. Membuat Component TambahKota.js
   
3. Membuat Component EditKota.js
   
4. Membuat File Aplikasi App.js
   
5. Membuat File CSS App.css
   

Pengujian

1. FrontEnd
   
   
    
2. Backend
    
    
3. Database MySQL
   

Terlihat bahwa program yang dijalankan pada frontend berhasil, dimana data berhasil dikirimkan ke server backend, begitu pula sebaliknya data API yang ada di backend dapat dikirimkan ke frontend dan dikemas menjadi lebih menarik, dengan menggunakan method POST pada backend. Lalu pada backend juga terlihat data yang sudah dikirimkan dari frontend, dan dari backend data berhasil disimpan pada database MySQL.
Sekian, Terima kasih :)