Description

Sweet Bakery adalah sebuah aplikasi berbasis web yang dirancang untuk memudahkan pengelolaan menu roti di sebuah toko roti. Dengan fitur pengelolaan menu roti yang memungkinkan pemilik toko untuk menambah, memperbarui produk, serta fitur pengecekan ongkos kirim menggunakan API RajaOngkir, Sweet Bakery memberikan solusi yang efisien dan efektif bagi pemilik toko dan pelanggan. Aplikasi ini dibangun dengan kombinasi React Native untuk frontend dan Flask untuk backend, menawarkan pengalaman pengguna yang interaktif dan performa yang stabil.

Backend - Flask:

Flask adalah framework web berbasis Python yang digunakan untuk membangun backend dari Sweet Bakery. Backend ini bertanggung jawab untuk menangani permintaan HTTP dari frontend, melakukan operasi pada database, serta berinteraksi dengan API eksternal untuk menghitung ongkos kirim. Berikut adalah komponen utama yang digunakan pada backend:

API Endpoints:

• GET /get_roti: Mengambil daftar roti yang tersedia di database.
• POST /add_roti: Menambahkan roti baru ke dalam daftar menu.
• PUT /update_roti/{id}: Memperbarui informasi roti berdasarkan ID.
• GET /shipping_cost: Menghitung ongkos kirim berdasarkan parameter yang diberikan, seperti asal, tujuan, berat, dan kurir, dengan memanfaatkan API RajaOngkir.
• Database: Backend menggunakan database relasional (misalnya MySQL atau SQLite) untuk menyimpan data menu roti, termasuk nama, harga, dan stok. Setiap roti yang ditambahkan atau diperbarui disimpan dalam tabel yang terstruktur dengan baik untuk memastikan pengelolaan data yang efisien.
• Integrasi API Eksternal: Sweet Bakery terintegrasi dengan API RajaOngkir, yang memungkinkan perhitungan ongkos kirim berdasarkan asal dan tujuan pengiriman serta berat paket. Pengguna dapat mengakses informasi biaya pengiriman secara real-time dan memilih kurir yang diinginkan (misalnya JNE).
• Keamanan dan Validasi: Flask juga menangani keamanan aplikasi dengan menerapkan validasi input untuk memastikan bahwa data yang diterima adalah valid dan mencegah serangan SQL Injection atau input yang berbahaya.

Frontend - React Native:

Frontend Sweet Bakery dibangun menggunakan React Native, sebuah framework JavaScript yang memungkinkan pembuatan aplikasi mobile dan web yang responsif. React Native mempermudah pengembangan antarmuka pengguna dengan komponen UI yang dinamis dan dapat disesuaikan. Berikut adalah fitur utama yang terdapat pada frontend:

• Tampilan Daftar Roti: Daftar roti ditampilkan dalam bentuk tabel yang mudah dibaca, dengan informasi tentang nama, harga, dan stok setiap roti. Pengguna dapat melihat menu roti yang tersedia secara langsung dan melakukan update atau penghapusan produk sesuai dengan kebutuhan.
• Fitur Pengelolaan Menu Roti: Pengguna dapat menambah, memperbarui, atau menghapus menu roti dengan formulir yang sederhana. Formulir ini menerima input untuk nama, harga, dan stok, yang akan diteruskan ke backend untuk diproses.
• Cek Ongkos Kirim: Pengguna dapat memasukkan informasi seperti asal, tujuan, dan berat paket untuk menghitung ongkos kirim. Input ini dikirim ke API backend, yang kemudian mengakses API RajaOngkir untuk mendapatkan biaya pengiriman dari berbagai kurir. Hasil ongkir akan ditampilkan dengan jelas bagi pengguna.
• Desain Responsif dan Antarmuka Pengguna: Tampilan website dirancang dengan gaya minimalis dan nyaman menggunakan warna pastel, menciptakan suasana yang tenang dan menyenangkan bagi pengguna.

Teknologi yang Digunakan:

• Backend:
  • Flask: Framework web Python yang ringan dan fleksibel untuk membuat aplikasi RESTful API.
  • MySQL/SQLite: Database relasional untuk menyimpan data produk roti.
  • SQLAlchemy: ORM untuk memudahkan interaksi antara Flask dan database.
  • API RajaOngkir: Untuk menghitung ongkos kirim secara real-time.
• Frontend:
  • React Native: Framework JavaScript untuk membangun aplikasi web responsif dengan komponen-komponen dinamis.
  • CSS/SCSS: Untuk penataan tampilan, dengan fokus pada desain responsif dan penggunaan warna pastel.
  • Axios: Digunakan untuk melakukan komunikasi HTTP antara frontend dan backend, mengirim permintaan ke API untuk mendapatkan data roti dan ongkos kirim.

Pembuatan Backend

1. Akses Server

Mengakses server dengan menggunakan SSH dan pastikan memasukkan password dengan benar.

2. Membuat Folder Backend

Membuat folder untuk backend kemudian arahkan menuju directorynya.

3. Membuat API dengan Flask

API Flask ini mengelola data roti dan menghitung biaya pengiriman menggunakan RajaOngkir. Terdapat empat endpoint utama: /get_roti untuk mengambil daftar roti dari database, /add_roti untuk menambahkan roti baru, dan /update_roti/<id> untuk memperbarui informasi roti berdasarkan ID. Endpoint /shipping_cost menghitung biaya pengiriman dengan mengirimkan permintaan ke API RajaOngkir menggunakan parameter asal, tujuan, berat, dan kurir. API ini terhubung ke database MySQL untuk menyimpan data roti dan menggunakan Flask-CORS untuk mengizinkan permintaan lintas sumber. Jika terjadi kesalahan, API mengembalikan pesan error yang sesuai.

4. Membuat Database

Pada proyek ini, kita menggunakan database MySQL untuk menyimpan data menu roti. Database ini akan digunakan untuk menyimpan dan mengelola data roti seperti nama roti, harga, dan jumlah stok yang tersedia.

5. Menjalankan Server

Aplikasi Flask akan berjalan pada http://110.239.71.90:5022 dan bisa di akses API untuk mengambil data roti, menambah roti, dan cek ongkos kirim.

Pembuatan Frontend

Membuat folder project

Masuk ke dalam folder project.

Buka vscode dengan perintah berikut.

Membuat file App.js dan App.css

App.js adalah komponen utama React dalam proyek yang mengelola logika aplikasi dan menggabungkan komponen serta fitur utama.

App.css adalah file stylesheet dalam proyek React yang berfungsi untuk mengatur tampilan visual atau gaya dari aplikasi. Di dalam file ini, bisa menentukan bagaimana elemen-elemen di App.js akan tampil, termasuk pengaturan warna, tata letak, ukuran, margin, padding, dan lain-lain.

Tampilan Web

Tampilan web yang ditampilkan adalah antarmuka sederhana untuk pengelolaan data produk roti dengan fitur tambahan untuk pengecekan ongkos kirim. Di bagian atas halaman, terdapat judul "Sweet Bakery" yang menunjukkan nama aplikasi atau toko roti, dengan subjudul "Daftar Roti" sebagai penanda bagian yang menampilkan daftar produk roti.