Studi Kasus #2: Aplikasi Wisata Indonesia – Persiapan Lingkungan Development

Studi Kasus #2: Aplikasi Wisata Indonesia – Persiapan Lingkungan Development

Halo, calon full-stack developer! 👋

Di Studi Kasus #1, kita sudah merancang database untuk aplikasi Wisata Indonesia. Sekarang saatnya menyiapkan lingkungan development (tempat kita bekerja). Kita akan menginstal semua alat yang dibutuhkan, membuat folder proyek, dan memastikan semuanya siap untuk mulai ngoding.

Bayangkan kita sedang membangun rumah. Sebelum membangun, kita perlu menyiapkan lahan, membeli bahan bangunan, dan menyusun cetak biru. Di sini, lahan adalah komputer kita, bahan bangunan adalah software yang kita instal, dan cetak biru adalah struktur folder proyek. Yuk, kita siapkan semuanya! 🚀

📋 Daftar Alat yang Dibutuhkan

Alat	Kegunaan
Node.js	Runtime JavaScript untuk menjalankan backend (server).
MySQL / MariaDB	Database untuk menyimpan data aplikasi.
React (Vite atau CRA)	Library frontend untuk membuat antarmuka pengguna.
Postman	Alat untuk menguji API backend.
VS Code	Editor kode (teks editor) untuk menulis program.
Git (opsional)	Version control untuk menyimpan riwayat kode.

💡 Catatan: Semua alat ini gratis dan tersedia untuk Windows, macOS, dan Linux. Pilih sesuai sistem operasi kamu.

⚙️ Langkah 1: Instalasi VS Code

VS Code adalah editor kode favorit para developer. Ringan, banyak ekstensi, dan gratis.

1. Buka code.visualstudio.com.
2. Klik tombol download sesuai sistem operasi kamu (Windows, Mac, Linux).
3. Jalankan file installer dan ikuti petunjuknya. Untuk Windows, pastikan centang opsi "Add to PATH" dan "Open with Code" agar lebih mudah.

Setelah terinstal, buka VS Code. Kita akan menginstal beberapa ekstensi yang berguna:

• ES7+ React/Redux/React-Native snippets – memudahkan menulis kode React.
• Prettier – memformat kode otomatis.
• MySQL (by cweijan) – untuk mengelola database langsung dari VS Code (opsional).
• Thunder Client – alternatif Postman di VS Code (opsional).

⚙️ Langkah 2: Instalasi Node.js

Node.js adalah jantung backend kita. Kita akan gunakan versi LTS (Long Term Support) karena lebih stabil.

1. Buka nodejs.org.
2. Klik tombol download versi LTS (misal 20.x).
3. Jalankan installer dan ikuti petunjuk. Pastikan centang opsi "Automatically install the necessary tools" jika diminta.

Setelah selesai, buka terminal (Command Prompt atau PowerShell di Windows, Terminal di Mac/Linux) dan ketik perintah berikut untuk memastikan instalasi berhasil:

node --version
npm --version

Harus muncul angka versi, misal v20.11.0 dan 10.2.4.

💡 Tips: npm adalah manajer paket untuk Node.js, akan digunakan untuk menginstal library.

⚙️ Langkah 3: Instalasi MySQL / MariaDB

Kita butuh database untuk menyimpan data. Pilih salah satu:

• MySQL – database relasional populer.
• MariaDB – fork dari MySQL, kompatibel.

Opsi A: Instal MySQL (dengan installer resmi)

1. Buka MySQL Installer.
2. Download versi Windows (msi) atau pilih sesuai OS.
3. Jalankan installer, pilih tipe instalasi "Developer Default".
4. Ikuti petunjuk, atur password untuk root (misal root). Catat password ini!
5. Pastikan MySQL Server berjalan (biasanya sebagai service).

Opsi B: Instal MariaDB (di Windows pakai XAMPP)

Cara termudah untuk pemula adalah menggunakan paket seperti XAMPP yang sudah termasuk MySQL/MariaDB, PHP, dan phpMyAdmin.

1. Buka apachefriends.org.
2. Download XAMPP untuk sistem operasi kamu.
3. Instal, lalu jalankan XAMPP Control Panel.
4. Klik "Start" pada Apache dan MySQL.
5. MySQL akan berjalan di port 3306 (default).

Untuk mengakses database melalui antarmuka web, buka browser ke http://localhost/phpmyadmin. Di sinilah kita akan membuat database wisata_db dan menjalankan script SQL dari Studi Kasus #1.

Verifikasi Koneksi MySQL

Buka terminal, lalu masuk ke MySQL:

mysql -u root -p

Masukkan password. Jika berhasil, akan muncul prompt MySQL. Ketik exit untuk keluar.

⚙️ Langkah 4: Instalasi Postman

Postman digunakan untuk menguji API backend kita nanti.

1. Buka postman.com/downloads.
2. Download sesuai OS.
3. Instal seperti biasa. Tidak perlu login jika tidak mau, cukup skip.

Nanti kita akan menggunakan Postman untuk mengirim request GET, POST, PUT, DELETE ke API kita.

⚙️ Langkah 5: Membuat Struktur Folder Proyek

Kita akan memisahkan folder untuk backend dan frontend. Buat folder utama, misal wisata-indonesia. Di dalamnya, buat dua folder:

wisata-indonesia/
├── backend/        # untuk kode Node.js (server, API)
└── frontend/       # untuk kode React (aplikasi web)

Buka terminal di dalam folder wisata-indonesia, lalu jalankan perintah untuk membuat folder:

mkdir backend frontend

Inisialisasi Backend

Masuk ke folder backend:

cd backend
npm init -y

Perintah ini akan membuat file package.json. Nanti kita akan menginstal paket-paket seperti express, mysql2, dll di tutorial berikutnya.

Inisialisasi Frontend (dengan Vite)

Vite adalah alat build modern untuk React, lebih cepat daripada Create React App (CRA).

Pastikan masih di folder wisata-indonesia (bukan di dalam backend). Lalu:

npm create vite@latest frontend -- --template react

Perintah ini akan membuat proyek React di folder frontend dengan template react.

Setelah selesai, masuk ke folder frontend dan instal dependensi:

cd frontend
npm install

Menjalankan Server Development

• Backend: Nanti kita akan buat server di tutorial #3.
• Frontend: Untuk mencoba, jalankan npm run dev di folder frontend. Akan muncul URL seperti http://localhost:5173. Buka di browser dan lihat halaman default React.

💡 Alternatif: Jika lebih suka Create React App, gunakan npx create-react-app frontend. Tapi Vite lebih cepat dan ringan.

📁 Struktur Folder Lengkap (Awal)

Setelah langkah di atas, struktur folder kita akan seperti ini:

wisata-indonesia/
├── backend/
│   ├── node_modules/
│   ├── package.json
│   └── package-lock.json
└── frontend/
    ├── node_modules/
    ├── public/
    ├── src/
    │   ├── assets/
    │   ├── App.jsx
    │   ├── main.jsx
    │   └── ...
    ├── index.html
    ├── package.json
    ├── vite.config.js
    └── ...

🧪 Langkah 6: Membuat Database wisata_db

Buka phpMyAdmin (jika pakai XAMPP) atau gunakan command line. Buat database baru:

CREATE DATABASE wisata_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

Kemudian jalankan script SQL dari Studi Kasus #1 untuk membuat tabel-tabel. Bisa dijalankan di terminal mysql atau di phpMyAdmin (tab SQL).

Contoh menjalankan file SQL dari terminal:

mysql -u root -p wisata_db < path/to/schema.sql

🧹 Tips Tambahan

• Gunakan Git: Inisialisasi git di folder utama untuk melacak perubahan: git init. Buat file .gitignore di masing-masing folder backend dan frontend, isi dengan node_modules dan file environment.
• Ekstensi VS Code yang direkomendasikan:
  • ES7+ React snippets
  • Prettier
  • Bracket Pair Colorizer
  • Thunder Client (untuk testing API tanpa buka Postman)
• Environment Variables: Nanti kita akan menggunakan file .env di backend untuk menyimpan konfigurasi database dan rahasia lainnya. Instal package dotenv.

🚀 Langkah Selanjutnya

Semua alat sudah terinstal dan folder proyek siap! Di Studi Kasus #3, kita akan mulai membuat server Express, menghubungkannya ke MySQL, dan membuat endpoint pertama untuk mengambil data kategori.

Pastikan kamu bisa menjalankan perintah node, npm, dan mengakses MySQL. Jika ada kendala instalasi, jangan ragu untuk bertanya di komentar atau mencari solusi di Google (ini bagian dari belajar).

Sampai jumpa di tutorial berikutnya! 👋😊

---

Ditulis dengan ❤️ untuk para pengembang yang ingin membangun aplikasi wisata.