« Back to projects
Simple CRUD (Phone & Movie Catalog App)
Backend (Phone Catalog)
Mobile App (Phone)
Mobile App (Movie)
Flutter Express.js Sequelize SQLite Cloudflare-Workers Cloudflare-D1 Mobile-Development Responsi Praktikum-Mobile

Overview Proyek dan Problem Statement

Proyek “Simple CRUD (Phone Catalog & Movie Catalog App)” adalah aplikasi katalog smartphone dan film sederhana yang dibuat sebagai bagian dari ujian praktikum mobile tahun 2024/2025. Tujuan utama proyek ini adalah untuk mendemonstrasikan pemahaman dan implementasi operasi CRUD (Create, Read, Update, Delete) dalam konteks aplikasi mobile dan backend.

Aplikasi ini mengatasi kebutuhan dasar untuk mengelola daftar data, memungkinkan pengguna untuk:

  • Melihat seluruh data seperti model, merek, harga, dan gambar untuk smarthpone dan judul, genre, director, tahun, dan gambar untuk film.
  • Melihat detail lengkap dari setiap data, termasuk tautan ke situs web terkait.
  • Menambahkan data baru ke dalam katalog.
  • Mengedit informasi data yang sudah ada.
  • Menghapus dara dari katalog.

Detailed Backend Architecture dan Tech Stack

Backend aplikasi ini dibangun menggunakan kombinasi teknologi yang efisien dan cocok untuk deployment serverless.

Arsitektur Backend: Backend di-deploy sebagai Cloudflare Worker. Ini memungkinkan eksekusi kode di edge, dekat dengan pengguna akhir, sehingga mengurangi latensi dan meningkatkan performa. Cloudflare Worker sangat cocok untuk aplikasi serverless karena kemampuannya untuk menjalankan fungsi secara efisien tanpa perlu mengelola server tradisional.

Tech Stack Backend:

  • Express.js: Digunakan sebagai kerangka kerja web minimalis untuk membangun API RESTful. Meskipun Express.js umumnya berjalan di Node.js, ia diadaptasi untuk berjalan di lingkungan Cloudflare Worker melalui polyfill dan penyesuaian.
  • Sequelize: ORM (Object-Relational Mapper) berbasis Promise untuk Node.js. Sequelize digunakan untuk berinteraksi dengan database, memungkinkan manipulasi data dengan cara yang lebih berorientasi objek daripada menulis SQL mentah.
  • SQLite: Database relasional ringan yang diintegrasikan langsung ke dalam Cloudflare Worker. SQLite adalah pilihan yang tepat untuk aplikasi kecil hingga menengah yang tidak memerlukan database terpusat yang kompleks, karena dapat menyimpan data langsung dalam file. Data ini akan disimpan dalam Cloudflare Worker KV (Key-Value) store, yang memungkinkan persistensi data di lingkungan serverless.

Tech Stack Frontend (Mobile App):

  • Flutter: Framework UI open-source yang dikembangkan oleh Google untuk membangun aplikasi multi-platform dari satu basis kode. Flutter dipilih untuk membangun aplikasi mobile karena kemampuannya untuk membuat antarmuka pengguna yang indah dan performa tinggi di Android dan iOS.

API Endpoints

Smartphone Catalog

Base URL API: https://ast_resp_ef_cfworkers.rafliyulistiawan.workers.dev/api/v1/phones

Berikut adalah daftar endpoint API yang digunakan untuk mengelola data smartphone:

  • GET /api/v1/phones

    • Deskripsi: Mengambil seluruh daftar smartphone.
    • Respons: Array objek smartphone, masing-masing berisi model, brand, price, dan image.

  • GET /api/v1/phones/{id}

    • Deskripsi: Mengambil detail spesifik dari satu smartphone berdasarkan ID-nya.
    • Respons: Objek smartphone yang berisi model, brand, price, image, ram, storage, dan website.

  • POST /api/v1/phones

    • Deskripsi: Menambahkan smartphone baru ke katalog.
    • Body Permintaan (JSON): Objek smartphone yang akan ditambahkan, termasuk model, brand, price, image, ram, storage, dan website.
    • Respons: Objek smartphone yang baru ditambahkan.

  • PUT /api/v1/phones/{id}

    • Deskripsi: Memperbarui informasi smartphone yang sudah ada berdasarkan ID-nya.
    • Body Permintaan (JSON): Objek yang berisi bidang-bidang yang ingin diperbarui (misalnya, model, price, dll.).
    • Respons: Objek smartphone yang telah diperbarui.

  • DELETE /api/v1/phones/{id}

    • Deskripsi: Menghapus smartphone dari katalog berdasarkan ID-nya.
    • Respons: Pesan konfirmasi penghapusan atau status kode 204 (No Content) jika berhasil.

Movie Catalog

Base URL API: https://ast_resp_ef_cfworkers.rafliyulistiawan.workers.dev/api/v1/phones

Berikut adalah daftar endpoint API yang digunakan untuk mengelola data film:

  • GET /api/v1/phones

    • Deskripsi: Mengambil seluruh daftar film.
    • Respons: Array objek film, masing-masing berisi model, brand, price, dan image.

  • GET /api/v1/phones/{id}

    • Deskripsi: Mengambil detail spesifik dari satu film berdasarkan ID-nya.
    • Respons: Objek film yang berisi model, brand, price, image, ram, storage, dan website.

  • POST /api/v1/phones

    • Deskripsi: Menambahkan film baru ke katalog.
    • Body Permintaan (JSON): Objek film yang akan ditambahkan, termasuk model, brand, price, image, ram, storage, dan website.
    • Respons: Objek film yang baru ditambahkan.

  • PUT /api/v1/phones/{id}

    • Deskripsi: Memperbarui informasi film yang sudah ada berdasarkan ID-nya.
    • Body Permintaan (JSON): Objek yang berisi bidang-bidang yang ingin diperbarui (misalnya, model, price, dll.).
    • Respons: Objek film yang telah diperbarui.

  • DELETE /api/v1/phones/{id}

    • Deskripsi: Menghapus film dari katalog berdasarkan ID-nya.
    • Respons: Pesan konfirmasi penghapusan atau status kode 204 (No Content) jika berhasil.

Tantangan Teknis dan Solusinya

Pengembangan proyek ini, terutama dengan kombinasi Cloudflare Workers dan teknologi backend lainnya, menghadirkan beberapa tantangan unik:

  1. Eksekusi Express.js di Cloudflare Worker:

    • Tantangan: Express.js dirancang untuk lingkungan Node.js, sedangkan Cloudflare Workers memiliki lingkungan runtime yang berbeda (berbasis V8 JavaScript engine). Ini berarti beberapa modul Node.js inti tidak tersedia secara langsung.
    • Solusi: Menggunakan bundler seperti Webpack atau Rollup untuk mengkompilasi kode Express.js agar kompatibel dengan Cloudflare Worker. Selain itu, menggunakan polyfill untuk fungsi Node.js yang diperlukan, atau mencari alternatif yang ramah Worker.

  2. Persistensi Data dengan SQLite di Lingkungan Serverless:

    • Tantangan: SQLite adalah database berbasis file, yang tidak secara native cocok dengan model tanpa status (stateless) dari Cloudflare Workers. Setiap permintaan bisa dilayani oleh instance Worker yang berbeda, sehingga file SQLite lokal tidak akan persisten.
    • Solusi: Menggunakan Cloudflare Worker KV (Key-Value) store untuk menyimpan data SQLite. Ini memungkinkan data di-persistensi di seluruh eksekusi Worker dan dapat diakses dari mana saja. Pendekatan ini melibatkan serialisasi dan deserialisasi data SQLite ke/dari KV store.

  3. Penanganan Asynchronous Operations:

    • Tantangan: Interaksi dengan API (fetching data, mengirim data) adalah operasi asynchronous. Menangani ini dengan benar untuk mencegah UI membeku dan memberikan umpan balik yang baik kepada pengguna adalah krusial.
    • Solusi: Menggunakan async/await di Flutter untuk menangani operasi jaringan dengan cara yang lebih bersih dan mudah dibaca. Menampilkan indikator loading dan pesan error yang informatif kepada pengguna untuk meningkatkan pengalaman.