01Instalasi

1. Buat folder dan file kosong

   Tidak perlu install apa pun. Ganti XX dengan nomor komputermu.

2. Salin peta dari media panitia

   Taruh file SVG peta Indonesia dengan nama map.svg di folder yang sama. Untuk latihan, pakai SVG peta Indonesia gratis dari Wikimedia Commons.

   Penting: SVG harus punya atribut width dan height, karena kode memakai ukuran asli gambar untuk menghitung zoom. Kalau tidak ada, buka SVG di VS Code dan tambahkan sesuai angka di viewBox.

3. Jalankan

   Klik dua kali index.html sehingga terbuka di browser. Kisi-kisi mewajibkan proyek jalan saat dibuka langsung seperti ini, tanpa server.

02Coba langsung

Demo di bawah menjalankan tiga file kode di modul ini apa adanya, dengan peta contoh dan beberapa lokasi awal.

03Kode

04Catatan penting

• Posisi pinpoint disimpan dalam koordinat peta, bukan koordinat layar. Karena itu pin tetap di tempatnya saat peta di-zoom atau digeser.
• Rumus zoom mengikuti kursor: xBaru = kursorX - (kursorX - x) * (skalaBaru / skalaLama). Hafalkan ini.
• Rute dicari dengan DFS: semua jalur tanpa melewati titik yang sama dua kali. Tiap moda dihitung sebagai jalur terpisah. Durasi = jarak / kecepatan, biaya = jarak × tarif.
• Garis untuk moda berbeda di pasangan yang sama digeser 14px supaya tidak menumpuk.

01Instalasi

1. Buat database dan project Laravel

   Pastikan MySQL sudah jalan di ServBay atau XAMPP.

2. Atur koneksi database di .env

   Laravel baru memakai SQLite secara default. Ganti blok DB_ menjadi seperti ini (hapus tanda # di depannya).

3. Pasang Sanctum dan buat semua file

   install:api memasang Sanctum dan membuat routes/api.php. Jawab yes saat ditanya menjalankan migration.

4. Isi kode, lalu migrate, seed, dan jalankan

   Uji di Postman: POST http://127.0.0.1:8000/api/auth/login dengan header Accept: application/json dan body JSON {"email":"budi@webtech.id","password":"password"}. Token dari respons dipakai sebagai Authorization: Bearer <token>.

5. Kalau panitia memberi database dump

   Import dump-nya, lalu jangan jalankan migrate:fresh (itu menghapus data). Cukup php artisan migrate untuk tabel token Sanctum jika belum ada di dump.

6. Export untuk pengumpulan

   Buat ER Diagram (dbdiagram.io, draw.io, atau MySQL Workbench), simpan sebagai XX_SERVER_MODULE/db-diagram.pdf. Zip menjadi XX_SERVER_MODULE_PHASE_1.zip tanpa folder vendor/ dan node_modules/.

02Kode

03Catatan penting

• Pesan respons harus sama persis dengan kisi-kisi, termasuk ejaannya ("Wallet added successful", "Get detail wallet successful"). Juri biasanya menguji pakai Postman Collection dari panitia.
• Register menerima full_name, tapi contoh respons memakai name. Karena itu kode menyimpan full_name ke kolom name.
• Semua format error diatur di satu tempat, yaitu bootstrap/app.php. Wallet yang tidak ditemukan otomatis 404 lewat route model binding.
• Saldo tidak disimpan sebagai kolom. Saldo selalu dihitung dari transaksi, jadi selalu akurat.
• Field tambahan di respons boleh (misalnya balance saat membuat wallet), asalkan semua field wajib ada.

01Instalasi

1. Buat project React dan pasang paket

2. Buat file .env di root project

   Saat latihan arahkan ke API Phase 1 milikmu. Saat lomba ganti dengan URL dari panitia.

3. Bersihkan file bawaan

   Hapus src/App.jsx, src/App.css, dan folder src/assets. Ganti isi src/main.jsx dan src/index.css dengan kode di bawah, lalu buat api.js, components.jsx, dan pages.jsx.

4. Jalankan backend dan frontend

   Buka dua terminal. CORS untuk api/* sudah aktif di Laravel versi baru.

   Login dengan budi@webtech.id / password dari seeder Phase 1. Untuk pengumpulan, zip folder menjadi XX_SERVER_MODULE_PHASE_2.zip tanpa node_modules/.

02Kode

03Catatan penting

• Transfer Money tidak boleh membuat endpoint baru, jadi transfer dikirim sebagai 2 transaksi: kategori "Outgoing Transfer" di wallet asal dan "Incoming Transfer" di wallet tujuan.
• API tidak punya filter per wallet. Halaman detail mengambil transaksi bulan itu (per_page=1000) lalu menyaringnya di browser.
• Endpoint report juga tidak punya filter wallet, jadi doughnut chart berisi ringkasan semua wallet di bulan itu. Tanyakan ke juri apakah ini yang dimaksud.
• Panitia memberi HTML template. Saat lomba, pakai class dan struktur dari template itu, lalu ganti index.css di sini.
• Pasangan shortcut (Alt+W, Alt+N, Alt+T) di PDF tidak terbaca rapi. Cek ulang di soal asli.

01Instalasi

1. Buat project React dan pasang router

2. Atur URL API di satu tempat

   Kisi-kisi mewajibkan base URL API hanya di satu tempat. Buat file .env di root project.

3. Siapkan file pendukung

   • Salin game.html dari media panitia ke src/game.html. Untuk latihan, buat HTML sederhana sendiri.
   • Taruh ikon icon-192.png dan icon-512.png di folder public/.
   • Hapus src/App.jsx, src/App.css, dan src/assets. Ganti index.html, vite.config.js, src/main.jsx, dan src/index.css dengan kode di bawah.

4. Jalankan dan uji di mode HP

   Di Chrome tekan F12 lalu Ctrl+Shift+M untuk mode perangkat. Cek skor di tab Lighthouse (kategori Accessibility). Uji offline lewat tab Network, pilih "Offline".

5. Build untuk pengumpulan

   Hasil build ada di dist/. Taruh isinya di folder XX_MOBILE_WEB_SERVICE_MODULE yang diunggah supaya bisa diakses dari index.html. Zip project (bukan hasil build) tanpa node_modules/.

02Kode

03Catatan penting

• Kisi-kisi tidak menjelaskan bentuk respons API. Kode memakai tebakan nama field: data, slug, thumbnail, published_at, visited_count, author.name, category.slug, tags. Buka URL API di browser dulu, lalu sesuaikan di components.jsx dan pages.jsx.
• Cara menentukan "breaking news" juga tidak dijelaskan. Contoh ini memakai 5 artikel terbaru. Cek apakah API punya field khusus.
• Halaman yang di-scroll adalah body, sementara header dan navbar position: fixed. Dengan begitu rootMargin pada IntersectionObserver bekerja.
• Tema system tidak butuh JavaScript: cukup @media (prefers-color-scheme: dark) dengan selector [data-theme='system'].
• Kalau API panitia tidak bisa diakses saat latihan, buat API tiruan di Laravel dengan 3 endpoint yang sama dan isi data palsu memakai Factory.