Description

A. Database
Dalam membuat sebuah website toko online yang terintegrasi dengan API RajaOngkir, langkah pertama yang perlu dilakukan adalah merancang struktur database. Database ini berfungsi sebagai tempat penyimpanan data yang digunakan dalam sistem toko, seperti produk yang dijual, informasi pelanggan, serta transaksi yang terjadi. Setidaknya kita harus membuat beberapa tabel yaitu produk, user, dan transaksi. Tabel produk menyimpan data tentang barang-barang yang dijual, seperti nama, harga, dan stok yang tersedia. Tabel user menyimpan informasi pelanggan seperti nama, email, alamat, dan nomor telepon. Sementara tabel transaksi mencatat setiap pembelian yang dilakukan oleh pelanggan, termasuk rincian produk yang dibeli dan biaya pengiriman yang dihitung melalui RajaOngkir. Buatlah dengan kreasi sebebas mungkin, karena struktur ini akan menjadi dasar dari seluruh alur transaksi dan pengelolaan data dalam toko online yang kita bangun.

Disini saya membuat databases yang bernama store, dengan kolom sebagai berikut:

a. customers

b. orders

c. products

B. FLASK

Testing API:
a. Get /products

b. Get /products/1

c. Get orders/1 -untuk user 1

d. Post /checkout

e. PUT /orders/4/update_status

f. PUT /products/2

g. GET https://api.rajaongkir.com/starter/province

h. GET https://api.rajaongkir.com/starter/city?province=5

i. POST https://api.rajaongkir.com/starter/cost

j. POST https://api.rajaongkir.com/starter/cost

C. REACT NATIVE
Untuk bagian frontend menggunakan React, kita akan membangun antarmuka pengguna yang sederhana namun fungsional. React memungkinkan kita untuk membuat komponen-komponen terpisah seperti halaman utama yang menampilkan daftar produk, halaman detail produk, halaman checkout untuk memasukkan alamat dan menghitung ongkir, serta halaman riwayat pesanan untuk melihat status pesanan. Untuk aplikasi kali ini saya menggunakan color palette sebagai berikut:

Nah setelah menentukan palettenya, saya membuat halaman project saya sebagai berikut: 

a. api.js

b. ProductCard.js

c. Header.js

d. HomeScreen.js

c. CheckoutScreen.js

Untuk style nya bisa dilanjutkan sesuai kreativitas masing-masing.

d. OrderHistoryScreen.js, dan ProductDetailScreen.js

Untuk kedua halaman tersebut bisa ditambahkan sesuai kreativitas masing-masing. Nah dari kode yang telah kita buat tadi, kurang lebih tampilannya seperti ini:
  

a. Home

  b. Product Detail 

  c. Checkout

d. History

Nah pada bagian halaman ini user bisa menyelesaikan atau membatalkan orderannya. Jadi ketika statusnya Selesai atau Dibatalkan, tombol Selesaikan dan Batalkan yang sebelumnya ada ketika statusnya Proses tidak ada lagi. 

Note:
If you want to see the complete code, you can check out my GitHub hehe.

Credit by Dea Reigina
GitHub: @deareign
LinkedIn: Dea Reigina ( https://www.linkedin.com/in/dea-reigina-aba2a7254/ )