« Back to projects
User Catalog: Cloud-Native CRUD Application
VueJS ReactJS ExpressJS Sequelize Google-Cloud-Run Google-App-Engine

Overview Proyek dan Problem Statement

Proyek “User Catalog” adalah aplikasi CRUD (Create, Read, Update, Delete) komprehensif yang dirancang untuk mendukung praktikum Teknologi Cloud Computing (TCC) tahun 2024/2025. Proyek ini bertujuan untuk mendemonstrasikan implementasi aplikasi web full-stack yang di-deploy secara cloud-native, lengkap dengan sistem autentikasi dan integrasi CI/CD.

UI

UI

Aplikasi ini mengatasi kebutuhan untuk mengelola data pengguna dalam sebuah sistem, menyediakan fungsionalitas inti berikut:

  • Registrasi Pengguna: Memungkinkan pengguna baru untuk mendaftar ke sistem.
  • Login Pengguna: Mengautentikasi pengguna yang sudah terdaftar menggunakan JSON Web Tokens (JWT) dengan kombinasi access token dan refresh token.
  • Manajemen Data Pengguna (CRUD): Setelah login, pengguna yang terautentikasi dapat melakukan operasi buat, baca, perbarui, dan hapus pada data pengguna lain.

Detailed Backend Architecture dan Tech Stack

Arsitektur backend User Catalog dirancang untuk skalabilitas dan kemudahan deployment di lingkungan cloud.

Arsitektur Backend: Backend di-deploy menggunakan Google Cloud Run, sebuah platform komputasi serverless terkelola yang memungkinkan deployment kontainer stateless secara otomatis. Cloud Run secara otomatis melakukan skala naik atau turun berdasarkan jumlah permintaan, membuatnya sangat efisien untuk beban kerja yang bervariasi. Integrasi Cloud Build memastikan alur CI/CD otomatis untuk setiap perubahan kode.

Tech Stack Backend:

  • Express.js: Kerangka kerja web minimalis dan fleksibel untuk membangun API RESTful. Express.js memfasilitasi pengembangan endpoint API yang cepat dan efisien.
  • Sequelize: ORM (Object-Relational Mapper) berbasis Promise yang digunakan untuk berinteraksi dengan database. Sequelize memungkinkan operasi database yang kuat dan aman dengan abstraksi objek.
  • Database: Proyek ini menggunakan database SQL yang terintegrasi dengan Google Cloud, seperti Cloud SQL (PostgreSQL atau MySQL), untuk persistensi data pengguna.

Tech Stack Frontend: Proyek ini menyediakan dua implementasi frontend untuk tujuan perbandingan dan pembelajaran:

  • Frontend (Vue.js): Dibangun menggunakan Vue.js, sebuah progressive framework JavaScript untuk membangun antarmuka pengguna. Frontend ini memanfaatkan ekosistem Vue untuk rendering UI dan manajemen state.
  • Frontend (React.js): Dibangun menggunakan React.js dengan Vite sebagai build tool. React.js adalah library JavaScript populer untuk membangun antarmuka pengguna, dan Vite menyediakan pengalaman pengembangan yang cepat.

Kedua frontend di-deploy menggunakan Google App Engine, sebuah Platform as a Service (PaaS) yang terkelola penuh untuk hosting aplikasi web. App Engine menangani infrastruktur, memungkinkan pengembang fokus pada kode aplikasi. Cloud Build juga digunakan untuk mengotomatisasi deployment frontend.

API Endpoints

Base URL API akan bergantung pada URL yang disediakan oleh Google Cloud Run setelah deployment.

Berikut adalah daftar endpoint API utama yang digunakan dalam aplikasi User Catalog:

  • POST /api/register

    • Deskripsi: Mendaftarkan pengguna baru.
    • Body Permintaan (JSON): { "username": "string", "email": "string", "password": "string" }
    • Respons: 201 Created jika berhasil, atau 400 Bad Request jika data tidak valid atau pengguna sudah ada.

  • POST /api/login

    • Deskripsi: Mengautentikasi pengguna.
    • Body Permintaan (JSON): { "email": "string", "password": "string" }
    • Respons: { "accessToken": "string" } (disimpan di local storage), dan refresh token yang dikirim melalui cookie.

  • GET /api/token

    • Deskripsi: Memperbarui access token menggunakan refresh token yang disimpan dalam cookie.
    • Respons: { "accessToken": "string" }

  • DELETE /api/logout

    • Deskripsi: Menghapus refresh token dari cookie dan mengakhiri sesi pengguna.
    • Respons: 204 No Content.

  • GET /api/users (Membutuhkan Access Token)

    • Deskripsi: Mengambil daftar semua pengguna yang terdaftar.
    • Respons: Array objek pengguna, masing-masing berisi ID, username, dan email.

  • GET /api/users/{id} (Membutuhkan Access Token)

    • Deskripsi: Mengambil detail spesifik dari satu pengguna berdasarkan ID-nya.
    • Respons: Objek pengguna yang berisi ID, username, dan email.

  • POST /api/users (Membutuhkan Access Token)

    • Deskripsi: Menambahkan pengguna baru (dari sisi admin/pengguna terautentikasi).
    • Body Permintaan (JSON): { "username": "string", "email": "string", "password": "string" }
    • Respons: Objek pengguna yang baru ditambahkan.

  • PUT /api/users/{id} (Membutuhkan Access Token)

    • Deskripsi: Memperbarui informasi pengguna yang sudah ada berdasarkan ID-nya.
    • Body Permintaan (JSON): Objek yang berisi bidang-bidang yang ingin diperbarui (misalnya, username, email).
    • Respons: Objek pengguna yang telah diperbarui.

  • DELETE /api/users/{id} (Membutuhkan Access Token)

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

Tantangan Teknis dan Solusinya

Pengembangan aplikasi User Catalog dengan arsitektur cloud-native menghadirkan beberapa tantangan teknis:

  1. Manajemen Otentikasi (JWT dengan Refresh Token):

    • Tantangan: Mengimplementasikan sistem otentikasi yang aman dan efisien menggunakan JWT, termasuk pengelolaan access token yang berumur pendek dan refresh token yang berumur panjang. Penyimpanan refresh token di cookie dan access token di local storage memerlukan penanganan keamanan yang cermat.
    • Solusi: Menggunakan pustaka JWT yang teruji di backend untuk pembuatan dan verifikasi token. Menerapkan mekanisme refresh token yang aman dengan menyimpan refresh token di HTTP-only cookie untuk mencegah serangan XSS, dan secara berkala memeriksa validitas refresh token saat memperbarui access token.

  2. Deployment CI/CD ke Google Cloud (Cloud Run dan App Engine):

    • Tantangan: Mengotomatiskan proses build dan deployment untuk frontend (Vue/React) dan backend (Express) ke layanan Google Cloud yang berbeda (App Engine dan Cloud Run) menggunakan Cloud Build. Konfigurasi CI/CD yang tepat untuk monorepo atau proyek terpisah bisa rumit.
    • Solusi: Membuat file cloudbuild.yaml terpisah untuk setiap komponen (backend, frontend Vue, frontend React). Menggunakan langkah-langkah Cloud Build untuk membangun image Docker untuk backend dan mendeploy ke Cloud Run, serta membangun aset frontend dan mendeploy ke App Engine. Memanfaatkan triggers Cloud Build untuk memulai build otomatis pada setiap push ke repository Git.

  3. Cross-Origin Resource Sharing (CORS):

    • Tantangan: Mengizinkan komunikasi antara frontend yang di-host di domain App Engine dengan backend yang di-host di domain Cloud Run, terutama selama pengembangan lokal dan deployment.
    • Solusi: Mengonfigurasi middleware CORS di Express.js backend untuk secara eksplisit mengizinkan permintaan dari origin frontend yang sah. Memastikan header CORS yang benar dikirimkan dalam respons dari backend.

  4. Perbedaan Pengembangan Frontend (Vue vs. React):

    • Tantangan: Memastikan fungsionalitas dan pengalaman pengguna yang konsisten di kedua implementasi frontend (Vue dan React) meskipun menggunakan kerangka kerja yang berbeda.
    • Solusi: Membuat desain API yang kuat dan tidak bergantung pada teknologi frontend tertentu. Mengikuti pola desain yang baik di kedua kerangka kerja untuk membangun komponen yang reusable dan menjaga konsistensi state.

Lessons Learned

Pengembangan proyek User Catalog memberikan wawasan mendalam tentang berbagai aspek pengembangan aplikasi modern dan cloud-native:

  • Pengalaman Cloud-Native yang Mendalam: Saya mendapatkan pengalaman langsung dengan deployment aplikasi full-stack di Google Cloud, memahami perbedaan dan keuntungan menggunakan Cloud Run untuk backend serverless dan App Engine untuk frontend yang terkelola.
  • Otomatisasi CI/CD dengan Cloud Build: Mempelajari cara mengonfigurasi dan memanfaatkan Cloud Build untuk membuat pipeline CI/CD yang efisien, yang secara signifikan mempercepat proses pengembangan dan deployment.
  • Strategi Autentikasi yang Robust: Memperdalam pemahaman tentang JWT, access token, dan refresh token, serta praktik terbaik untuk mengelola sesi pengguna dan keamanan otentikasi.
  • Fleksibilitas Frontend: Menjelajahi persamaan dan perbedaan dalam membangun aplikasi CRUD menggunakan dua kerangka kerja frontend terkemuka (Vue.js dan React.js), yang meningkatkan kemampuan adaptasi saya dalam berbagai proyek.
  • Pentingnya Desain API yang Baik: Mengonfirmasi bahwa desain API yang jelas dan terstruktur adalah kunci untuk memfasilitasi pengembangan frontend yang efisien, terlepas dari teknologi yang digunakan.