Description

Penghitung Ongkir React dengan API RajaOngkir

Proyek ini adalah aplikasi penghitung ongkos kirim yang menggunakan React di frontend dan terhubung dengan API RajaOngkir di backend. Aplikasi ini memungkinkan pengguna untuk menghitung biaya pengiriman berdasarkan kota asal, kota tujuan, berat barang, dan pilihan kurir. Berikut adalah langkah-langkah yang saya lakukan dalam pengembangan aplikasi ini:

1. Membuat Database dan Tabel di MySQL
   - Langkah pertama yang saya lakukan adalah membuat database di server. Saya masuk ke server menggunakan IP 110.239.71.90 dan password B154411d. Setelah berhasil login, saya membuat database bernama bagusachmad. Kemudian, saya membuat beberapa tabel untuk menyimpan data provinsi menggunakan query SQL berikut:
   
2. Membuat Folder dan File Backend (app.py)
   - Setelah database siap, saya membuat folder proyek di server dan membuat file app.py yang berisi source code untuk backend. Pada file ini, saya menulis kode menggunakan Python Flask untuk membuat API yang terhubung ke database MySQL dan juga menghubungkannya ke API eksternal RajaOngkir. API ini menangani tiga endpoint: POST, PUT, dan GET.
   
   Setelah menulis kode backend di app.py, saya menjalankan server menggunakan perintah python3 app.py untuk memastikan API Flask siap menerima permintaan dari frontend.
3. Pembangunan Frontend dengan React.js
   - Di sisi frontend, saya memanfaatkan React untuk membangun aplikasi antarmuka pengguna yang responsif. Proses dimulai dengan membuat aplikasi React baru menggunakan perintah npx create-react-app uasfs di terminal. Setelah aplikasi React berhasil dibuat, saya menjalankannya dengan npm start untuk memulai server pengembangan React dan memverifikasi bahwa aplikasi dapat diakses melalui localhost.
   
4. Mengedit app.js
   - Pada folder src, edit file app.js untuk menghubungkan frontend React dengan backend Flask dan menampilkan data ongkir dari RajaOngkir.
   
   
    
5. Membuat  File config.js
   - Untuk menghubungkan frontend dengan backend, buat file config.js yang menyimpan URL backend Anda.
   
6. Membuat Folder components dan File CostCalculator.js
   - Di dalam folder src, buat folder baru bernama components yang berisi file CostCalculator.js untuk menangani logika kalkulasi ongkir.
   
   
   
   
7. Menjalankan Aplikasi React
   - Setelah semua file selesai, jalankan aplikasi React dengan perintah npm start
8. Tampilan awal
   
9. Untuk mengisi id nya bisa disesuaikan dengan yang ada di web rajaongkir nya
   
10. Ini contoh dari hasil setelah di isi