KODING SANA SINI

Membangun aplikasi pengumpulan ulasan produk membutuhkan lingkungan pengembangan yang stabil dan efisien. Sebelum kita mulai menulis kode, ada beberapa hal yang perlu dipersiapkan, mulai dari pemilihan teknologi hingga konfigurasi awal sistem. Dengan menggunakan FastAPI sebagai backend, Vue.js untuk frontend, serta MongoDB sebagai database, kita bisa membangun aplikasi yang cepat, responsif, dan scalable.

Dalam artikel ini, kita akan membahas langkah-langkah awal untuk menyiapkan lingkungan pengembangan, termasuk instalasi dependency, pengaturan database, serta konfigurasi dasar yang akan membantu proyek berjalan dengan lancar. Mari kita mulai! 🚀

Integrated Development Environment (IDE)

Integrated Development Environment (IDE) adalah perangkat lunak yang dirancang untuk membantu pengembang dalam menulis, mengedit, dan mengelola kode dengan lebih efisien. IDE biasanya dilengkapi dengan berbagai fitur seperti code editor, debugger, compiler atau interpreter, serta integrasi dengan sistem kontrol versi seperti Git. Dengan menggunakan IDE, pengembang dapat meningkatkan produktivitas karena berbagai alat yang dibutuhkan tersedia dalam satu tempat, sehingga proses pengembangan menjadi lebih cepat dan terorganisir. Beberapa contoh IDE populer untuk pengembangan aplikasi berbasis Python dan JavaScript adalah VS Code, PyCharm, dan WebStorm.

Untuk IDE yang akan Saya gunakan yaitu visual code studio. vscode ini menjadi salah satu IDE yang paling banyak digunakan oleh para programmer. Saya menggunakan vscode karena banyak extension-extension dari vscode yang dapat mempercepat kita dalam melakukan coding. Kamu bisa download Visual Code Studio pada link berikut:

https://code.visualstudio.com/

Repository Project

Selanjutnya yang kita siapkan adalah repository project yang berfungsi untuk menyimpan source code. Repository ini penting untuk menjadi tempat penyimpanan agar memudahkan kita ketika akan men-deploy aplikasi. Berikut postingan yang dapat kamu baca terkait repository.

Pada platform yang kamu pilih, buatlah 3 repository sebagai berikut

• Repository untuk scraper
• Repository untuk backend
• Repository untuk frontend

Jangan lupa clone setiap repository ke local computer kamu yaa.

Deployment Environment

Selanjutnya kita perlu mempersiapkan lingkungan untuk deployment baik di local computer ataupun di server. Kita akan menggunakan docker serta docker swarm untuk menjalankan database, backend, dan frontend sistem nantinya. Penjelasan terkait docker dan docker swarm dapat dilihat pada postingan berikut.

Setup Database Server

Selanjutnya kita akan melakukan instalasi dan konfigurasi database. Database yang digunakan adalah MongoDB yang akan kita install pada di docker swarm. Buka kembali portainer yang diinstall sebelumnya (contoh localhost:9000 pada instalasi sebelumnya) kemudian pilih environment tempat mongoDB akan diinstall.

Setelah memilih environment tempat instalasi, kemudian:

• Pilih Menu Stack
• Klik Add Stack

Pada halaman “Create Stack” isi field Name dengan nama stack yang diinginkan, misal mongodb. Untuk Build Method pilih Web Editor karena kita akan memasukan konfigurasinya melalui web editornya portainer. Lalu dibagian Web Editor kita akan masukan docker compose untuk mengkonfigurasi mongodb. Berikut untuk isi docker compose yang perlu dimasukan.

version: "3.6"
services:
  mongodb:
    image: mongo:latest
    restart: always
    ports:
      - 27017:27017
    environment:
      MONGO_INITDB_ROOT_USERNAME: <default username yg diinginkan>
      MONGO_INITDB_ROOT_PASSWORD: <default password yg diinginkan>
    volumes:
      - <full path volume persistent mongodb data>:/data/db

Pada konfigurasi diatas kita akan membuat sebuah service yang bernama mongodb dengan keterangan sebagai berikut.

• image: adalah instruksi yang menentukan image Docker yang akan digunakan untuk menjalankan sebuah service, dalam hal ini kita menggunakan mongodb terbaru.
• restart: untuk mengintruksikan docker untuk melakukan restart ketika terjadi crash atau error tak terduga
• ports: konfigurasi port. <port yang diekspos>:<port internal docker>
• environtment: variable-variable yang akan dimasukan kedalam service, dalam hal ini kita memasukkan variable default untuk username dan password mongodb
• volumes: untuk mengatur dimana data akan disimpan. jika tidak didefinisikan maka docker akan menyimpan data mongodb di path bawaan docker

Setelah itu kamu bisa membiarkan isian lainnya dengan nilai defaultnya. Kemudian klik “Deploy the stack” dan tunggu proses deployment-nya.

Setelah proses deployment selesai, jika tidak ada error, buka kembali halaman stack dan akan muncul stack baru bernama mongodb. Klik pada stack mongodb untuk melihat detail stack tersebut.

Pada halaman detail stack akan ada daftar service yang mana isinya adalah service yang kita definisikan lewat konfigurasi sebelumnya. klik pada arah panah nama service untuk melihat log service dan pastikan ada log service yang berstatus running untuk memastikan service sudah berjalan dengan baik.

Setup Database Client

Setelah berhasil melakukan konfigurasi untuk database server, selanjutnya kita membutuhkan database client untuk memudahkan kita dalam mengelola database seperti membuat database, membuat collection, memasukan data, menghapus data, dan lain – lain.

Ada beberapa database client GUI untuk mongoDB yang dapat kamu coba diantaranya:

• MongoDB Compass
• Studio 3T
• Mongo Express

Pada postingan ini kita akan menggunakan MongoDB Compass yang merupakan Database Client GUI yang dikeluarkan oleh official MongoDB-nya sendiri.

Setelah melakukan download dan install database client maka langkah selanjutnya adalah melakukan koneksi ke database menggunakan kredensial yang kita config di langkah sebelumnya. Kurang lebih seperti berikut penampakannya untuk mongoDB Compass.

Pada form input “New Connection” mongoDB Compass kita perlu menyediakan beberapa input sebagai berikut:

• URI: informasi host mongodb. dalam hal ini host mongodb ada di localhost port 27017. maka URInya mongodb://localhost:27017
• Name: nama koneksi
• Authentication Method: jenis autentikasi yang dipilih dalam hal ini adalah Username/Password
• Username: masukan username yang sebelumnya dikonfigurasi
• Password: masukan password yang sebelumnya dikonfigurasi
• Authentication Database: database yang dituju. dalam hal ini kita isi admin

Setelah informasi yang dibutuhkan sudah diinput, kemudian klik Save & Connect untuk melakukan koneksi ke database server mongoDB. Dengan demikian kita sudah melakukan setup kebutuhan awal untuk membangun Aplikasi Pengumpulan Ulasan Produk.

Tahap Selanjutnya

Selanjutnya kita akan membuat komponen pertama dari 4 komponen aplikasi yaitu Backend. Saya akan membahas bagaimana cara membuat service backend untuk aplikasi pengumpulan ulasan produk menggunakan FastAPI.