Pengembangan Perangkat Lunak dengan Devin: Mengirimkan Vertical Slice (Bagian 2)

Selamat datang kembali! Dalam tutorial pertama dari seri ini, Devin menghidupkan kembali repo fp-ts-exercises lama saya dan membuka PR peningkatan dependensi yang rapi. Di bagian kedua ini, kita menaikkan tingkat kesulitan dan membangun fitur full-stack.

Anda dapat mengakses semua tutorial dalam seri Devin di sini:

1. Penyiapan dan Pull Request Pertama (Bagian 1)
2. Mengirimkan Vertical Slice dengan Devin (Bagian 2) 
3. Integrasi, Pengujian, dan CI/CD (Bagian 3) 
4. Keamanan, Deployment, Pemeliharaan (Bagian 4)

Pada saat Anda mencapai akhir bagian kedua ini, Anda akan memiliki:

• Sebuah playground Next.js 14, tempat pembelajar mengedit kode di browser;
• Tes Vitest langsung yang berubah menjadi hijau (atau merah) secara real time; dan
• Sebuah backend NestJS dengan basis data SQL yang menyimpan progres hanya dengan UUID anonim di localStorage.

Sepanjang jalan, kita akan membiarkan Devin membuat daftar tugasnya sendiri, menyaksikannya menangani tiket front-end dan back-end sekaligus, dan turun tangan saat ia tersandung masalah konfigurasi. Saya akan menunjukkan di mana saya menghabiskan (dan menghemat) ACU, apa yang saya perbaiki secara manual, dan bagaimana menjaga sesi tetap efisien.

Rekap dan Prasyarat

Sepanjang seri tutorial ini, kita mengerjakan repo latihan fp-ts saya yang (sebelumnya) terbengkalai.

Proyek ini adalah kumpulan tantangan kecil untuk mengajarkan konsep pemrograman fungsional (seperti Option, Either, dll.) di TypeScript. Saat ini, ini adalah repo clone-and-run: pembelajar mengunduhnya, mengedit file secara lokal, dan menjalankan tes di terminal mereka sendiri.

Tujuannya adalah mengubah latihan tersebut menjadi playground interaktif berbasis browser, di mana orang dapat membaca penjelasan, mengutak-atik kode di editor dalam halaman, dan melihat tes lulus (atau gagal) seketika. Pembelajar juga akan memiliki opsi untuk masuk guna menyimpan progres mereka.

Apa yang kami capai di bagian pertama

Ingat bahwa dalam tutorial pertama, kami:

• Memodernisasi repo fp-ts lama: dependensi terbaru, linting, pemeriksaan tipe.
• Menghubungkan Devin ke GitHub dan membuktikan ia dapat membuka pull request yang bersih.

Alat lokal yang Anda butuhkan untuk bagian kedua

Untuk tutorial kedua ini, kita akan membutuhkan:

• Node 20+ dan npm 10 (sudah mendukung workspaces secara bawaan).
• Docker yang menjalankan container PostgreSQL (atau instance PostgreSQL lokal).

Pengaturan Devin yang direkomendasikan

Saya merekomendasikan pengaturan berikut untuk Devin:

• Tetapkan batas lunak 5 ACU per sesi di Settings > Usage & limits; kita akan menjalankan sesi baru untuk setiap fase.
• Biarkan tab timelapse terlihat untuk menjeda atau mendorong Devin jika macet.

Biarkan Devin Menulis Rencana Permainan

Saya pikir akan menarik untuk memulai dengan menguji kemampuan perencanaan Devin. Saya membuat sebuah prompt dan meminta Devin, menggunakan fitur “Ask” (saat ini gratis dalam Beta), untuk membantu saya merencanakan pekerjaan yang akan kita lakukan hari ini.

Prompt:

Saya ingin mengubah repo Node + TypeScript fp-ts-exercises yang sudah ada (saat ini latihan CLI clone-and-run) menjadi platform pembelajaran berbasis browser yang melacak progres. 

Pengalaman target: 

- Pembelajar membuka aplikasi web Next.js, memilih sebuah latihan, mengedit kode di browser, dan melihat tes Vitest lulus atau gagal seketika. 

- Progres (slug yang diselesaikan) disimpan di sisi server dan dimuat ulang pada kunjungan berikutnya, namun kami belum menambahkan akun pengguna (gunakan UUID anonim yang disimpan di browser). 

Pilihan teknologi yang saya pertimbangkan: 

- Frontend: Next.js 14 (React 18, App Router) 

- Editor & runner kode: Sandpack + @vitest/browser 

- API: NestJS 13 dengan @nestjs/graphql (Apollo Driver) 

- Basis data: Prisma 5 dengan PostgreSQL 

- Workspace: npm workspaces biasa (apps/web, apps/api, packages/exercises) 

Usulkan rencana implementasi langkah demi langkah (daftar tugas) untuk mewujudkan vertical slice ini. Estimasikan biaya ACU relatif untuk setiap tugas dan tandai langkah yang memakan waktu lama (misalnya, migrasi besar atau instalasi dependensi berat).

Devin dengan informatif mengembalikan daftar tugas enam fase dengan estimasi ACU untuk masing-masing, dan menandai langkah “instalasi dependensi berat”.

Jawaban Devin:

Fase 1: Penyiapan Workspace (2–3 ACU)

• Inisialisasi struktur npm workspace (1 ACU)
• Buat direktori apps/web, apps/api, dan packages/exercises
• Konfigurasikan package.json root dengan definisi workspace
• Pindahkan file latihan yang ada ke packages/exercises/src/
• Menyiapkan frontend Next.js 14 (1–2 ACU — Waktu lama: instalasi dependensi)Inisialisasi Next.js dengan App Router di apps/webKonfigurasikan TypeScript dan Tailwind CSSSiapkan struktur routing dasar

Fase 2: Migrasi Paket Latihan (3–4 ACU)

• Ekstrak konten latihan ke paket bersama (2 ACU)
• Buat packages/exercises dengan ekstraksi metadata latihan
• Parse file latihan yang ada untuk mengekstrak:
• Instruksi
• Kode awal
• Solusi
• Definisikan antarmuka TypeScript untuk struktur latihan
• Menerapkan sistem penemuan latihan (1–2 ACU)
• Bangun pemindai sistem file (seperti logika fs.readdirSync di exercise.js:17–28)
• Ekspor metadata latihan: title, description, difficulty, tests

Fase 3: Backend API (4–5 ACU)

• Menyiapkan API NestJS dengan GraphQL (2 ACU — Waktu lama: instalasi dependensi)
• Inisialisasi proyek NestJS di apps/api
• Konfigurasikan server Apollo GraphQL
• Siapkan endpoint pemeriksaan kesehatan dasar
• Menerapkan Prisma + PostgreSQL (2 ACU — Waktu lama: penyiapan basis data)
• Rancang skema untuk:
• Sesi pengguna
• Latihan yang diselesaikan
• Siapkan klien Prisma dan migrasi
• Buat resolver pelacakan progres
• Manajemen sesi pengguna anonim (1 ACU)
• Hasilkan UUID dan simpan di localStorage browser
• Aktifkan persistensi progres berbasis sesi tanpa autentikasi

Fase 4: Fitur Inti Frontend (5–6 ACU)

• Antarmuka penjelajahan latihan (2 ACU)
• Daftarkan latihan berdasarkan kategori (option, either, task, dll.)
• Tampilkan indikator progres dan status penyelesaian
• Aktifkan pemilihan dan navigasi latihan
• Integrasi editor Sandpack (2–3 ACU — Waktu lama: penyiapan Sandpack)
• Konfigurasikan Sandpack dengan dukungan TypeScript
• Muat kode awal dan dependensi fp-ts
• Siapkan sistem file untuk file latihan + tes
• Integrasi runner Vitest di browser (1 ACU)
• Ganti pemanggilan Vitest execSync (exercise.js:45–47) dengan @vitest/browser
• Aktifkan eksekusi tes real-time dan tampilan hasil

Fase 5: Pelacakan Progres (2–3 ACU)

• Manajemen progres sisi klien (1 ACU)
• Siapkan Apollo Client untuk GraphQL
• Sinkronkan progres dengan backend
• Deteksi penyelesaian latihan (1–2 ACU)
• Adaptasi logika deteksi keberhasilan yang ada (exercise.js:48–49)
• Picu pembaruan progres backend saat tes lulus

Fase 6: Polesan & Deployment (2–3 ACU)

• Peningkatan UI/UX (1–2 ACU)
• Pastikan desain responsif
• Tambahkan status loading dan penanganan error
• Perbaiki tampilan instruksi latihan
• Penyiapan deployment produksi (1 ACU)
• Konfigurasikan Docker untuk kedua aplikasi
• Kelola variabel lingkungan
• Siapkan deployment basis data

Perkiraan Biaya Total: 18–24 ACU

Secara keseluruhan, rencananya cukup bagus. Saya mengubah beberapa hal, terutama di fase enam, karena kita akan membahas deployment di tutorial keempat.

Fase 1: Workspace & Kerangka Front-End

Tujuan: Menjalankan npm workspaces, memindahkan file lama, dan membuat kerangka Next.js 14 kosong.Pembakaran ACU: 3,66 (rencana 1–2).Hasil: Repo kini memiliki /apps/web, packages/exercises bersama, dan aplikasi Next.js yang siap Tailwind berjalan di localhost:3000.

Prompt-nya

Saya meminta Devin membangun rencana yang dibuatnya untuk fase pertama. Devin yang bersifat agentic tidak memiliki konteks dari apa yang sebelumnya mungkin Anda tanyakan di fitur “Ask Devin”, jadi Anda harus membuat prompt terpisah dan memberikan konteks.

Saya tidak akan menempelkan semua prompt di artikel ini, namun berikut yang pertama:

Prompt:

Tugas: Inisialisasi struktur npm workspace dan frontend Next.js untuk platform browser fp-ts-exercisesKonteks:

Saya mengonversi sistem pembelajaran berbasis CLI fp-ts-exercises yang ada menjadi platform berbasis browser. Sistem saat ini memiliki latihan yang diorganisasi dalam 10-from-either.exercise.ts:1-3 dengan konfigurasi TypeScript di tsconfig.json:88 dan penyiapan Vitest di vitest.config.ts:7.

Persyaratan:

• Buat struktur npm workspace:
• package.json root dengan konfigurasi workspace untuk apps/web, apps/api, packages/exercises
• Pindahkan file latihan yang ada dari src/ saat ini ke packages/exercises/src/
• Pertahankan konvensi penamaan file latihan saat ini (.exercise.ts dan .solution.ts)
• Inisialisasi frontend Next.js 14 di apps/web:
• Gunakan App Router (bukan Pages Router)
• Konfigurasikan TypeScript dengan pengaturan ketat serupa seperti tsconfig.json:88 saat ini
• Tambahkan Tailwind CSS untuk styling
• Buat struktur routing dasar untuk penjelajahan latihan
• Pertahankan kompatibilitas:
• Pastikan struktur dan impor latihan yang ada tetap berfungsi
• Biarkan dependensi fp-ts dapat diakses di seluruh workspace
• Pertahankan pola konfigurasi Vitest saat ini

Hasil yang diharapkan:

• package.json terkonfigurasi workspace di root
• Aplikasi Next.js di apps/web/ dengan TypeScript dan Tailwind
• Latihan yang telah dimigrasikan di packages/exercises/
• Struktur routing dasar (/exercises, /exercises/[category], /exercises/[category]/[slug])

Tumpukan Teknologi:

• Next.js 14 dengan App Router
• TypeScript (mode ketat)
• Tailwind CSS
• npm workspaces (bukan yarn/pnpm)

Pengajuan:

• Pastikan skrip lint dan typecheck lulus
• Buat PR dengan perubahan Anda

Semua prompt yang saya tulis berikutnya mengikuti pola yang sama: sorotan tugas, konteks, persyaratan, hasil yang diharapkan, tumpukan teknologi, dan detail pengajuan.

Apa yang sebenarnya dilakukan Devin

Ia memerlukan waktu cukup lama untuk menentukan langkah (sekitar empat menit), tetapi kemudian:

1. Membuat kerangka workspace
2. Memigrasikan semua folder latihan ke packages/exercises/src.
3. Membuat bootstrap Next.js 14 dengan App Router, TypeScript, dan Tailwind.
4. Menambahkan skrip lint & type-check ke aplikasi frontend (setelah saya mendorongnya).

Mengapa biaya ACU melonjak

Biaya ACU melonjak karena:

• Devin menghabiskan satu menit penuh melakukan loop ulangi npm install setelah timeout mirror.
• Ia mencoba menghentikan server dev dan proses dengan q di Vim, lalu Ctrl-C, dan keduanya gagal. Saya memberinya sedikit waktu untuk mencoba memperbaiki sendiri, namun akhirnya saya turun tangan secara manual dan keluar dari proses pada kedua kali itu. Setiap menit tambahan berarti ACU tambahan, dan saya tidak akan menangkap masalah ini dengan cepat jika saya tidak mengikuti tindakan Devin dari dekat.

Intervensi manusia dan pelajaran yang dipetik

Berikut ringkasan perbaikan yang perlu saya lakukan:

Memindahkan pohon file besar lebih cepat dilakukan secara manual, dan jauh lebih murah karena Devin menagih berdasarkan waktu/tugas. Saya menyeret folder-foldernya, melakukan commit, dan membiarkan agen mengambil struktur baru. Ia dapat menarik perubahan saya dengan baik dan melakukan merge sendiri!

Meski begitu, saya harus memintanya menjalankan skrip lint dan typecheck, meskipun saya sudah menentukannya di prompt awal. Pada akhirnya ia menjalankan keduanya, tetapi gagal. Devin tetap menganggapnya sukses dan melanjutkan PR.

Saya memperbaiki kedua masalah secara lokal, menjalankan skrip sendiri dan menjalankan server pengembangan web baru untuk memastikan ia berjalan seperti yang diharapkan, lalu mendorong commit.

Fase 2: Memaketkan Latihan

Tujuan:  Ekstrak semua file tantangan ke paket packages/exercises yang dapat digunakan ulang dan hasilkan metadata untuk setiap latihan.Pembakaran ACU:  0,6 (rencana 2+).Hasil: Paket bersama mengekspor metadata bertipe yang dapat diimpor aplikasi web dan API di masa depan dengan import { exercises } from '@exercises/registry'.

Apa yang sebenarnya dilakukan Devin

Devin membuat:

• Antarmuka TypeScript terstruktur untuk latihan, metadata, kategori, dan katalog penuh.
• Parser latihan yang:
• Mengekstrak metadata dari komentar kode dan tanda tangan fungsi
• Mem-parse kode awal, kode solusi, dan test case Vitest
• Menghasilkan tag secara otomatis dari penggunaan fp-ts
• Mengonversi nama camelCase menjadi judul yang mudah dibaca
• Sistem penemuan latihan yang:
• Memindai sistem file untuk pasangan .exercise.ts dan .solution.ts
• Membangun katalog berbasis slug (misalnya, option-01)
• Mengorganisasi latihan berdasarkan kategori dengan cache untuk kinerja
• Ekspor yang nyaman untuk kueri latihan dan kategori:
• getExercises(), getExerciseBySlug(), getExercisesByCategory(), getCategories(), getCategoryBySlug()

Mengapa Devin selesai di bawah anggaran

Devin berhasil menjaga biaya ACU tetap rendah—berikut caranya:

• Tidak ada instalasi berat atau panggilan jaringan
• Pemindahan file sederhana; Devin menggunakan git mv (murah) alih-alih salin-tempel plus diff
• Pembuatan metadata murni TypeScript, cepat untuk direncanakan dan dijalankan

Intervensi manusia

Tidak ada kali ini!

Belajar dari sebelumnya, saya checkout branch Devin dan menjalankan skrip secara lokal. Semuanya terkompilasi dan registry mengekspor definisi tipe yang bersih, sehingga menjadi materi input yang sempurna untuk UI dan API yang akan kita bangun berikutnya.

Fase 3: API NestJS + GraphQL

Tujuan: Menjalankan layanan NestJS 13 yang mengekspos progres latihan melalui GraphQL dan menyimpan data di PostgreSQL dengan Prisma.Pembakaran ACU: 4,2 (rencana 4).Hasil: apps/api berjalan di localhost:4000/graphql. Anda dapat melakukan query dan mutate catatan progres yang diindeks oleh ID sesi anonim.

Apa yang sebenarnya dilakukan Devin

Untuk fase ketiga, Devin:

1. Membuat API NestJS lengkap di apps/api dengan TypeScript dan Apollo GraphQL
2. Mengintegrasikan PostgreSQL dengan ORM Prisma dan menyiapkan skema dengan model Session dan CompletedExercise
3. Menerapkan manajemen sesi anonim menggunakan UUID (tanpa perlu auth)
4. Membangun resolver GraphQL untuk pembuatan/validasi sesi, kueri latihan, dan pelacakan progres
5. Menghubungkan backend ke paket latihan bersama (packages/exercises) untuk penemuan data
6. Mengonfigurasi CORS untuk mendukung komunikasi dengan frontend Next.js
7. Memastikan kompatibilitas tipe antara skema GraphQL dan antarmuka TypeScript yang ada
8. Menyiapkan skrip pengembangan, alur migrasi basis data, dan integrasi Prisma Studio

Di mana Devin tersandung

Ini adalah masalah yang saya temui selama fase ketiga dan perbaikan yang harus saya lakukan:

Pelajaran yang dipetik

Ini yang saya simpulkan:

• Konfigurasi vs. kode: Devin unggul setelah boilerplate kerangka kerja siap, tetapi mendiagnosis masalah dependensi masih memerlukan campur tangan manusia.
• Selalu jalankan secara lokal: Saya sudah membuat basis data PostgreSQL lokal di mesin saya, dan instruksi PR untuk menjalankan migrasi Prisma dan memulai lingkungan dev jelas dan mudah diikuti (lihat gambar di bawah). Komentar Devin mengatakan berhasil menjalankan API secara lokal, namun npm run dev crash sampai reflect-metadata ditambahkan.

• Devin bagus dalam menangani komentar PR. Saya mengomentari PR, menjelaskan kepada Devin bahwa saya mencoba menjalankan API secara lokal dan menemui error. Ia segera memberikan emoji mata kecil, dan sesi dilanjutkan sendiri untuk memperbaiki error tersebut, dan perbaikan didorong beberapa menit kemudian.

• Selalu periksa file rahasia: Devin telah meng-commit file .env dengan variabel DATABASE_URL, yang berisi nama pengguna dan kata sandi dummy. Setelah ditarik secara lokal, saya mengganti nama pengguna dan kata sandi ke identitas basis data lokal saya dan memastikan untuk menghapus file dari pelacakan git dan menambahkannya ke .gitignore. Kita akan lihat di tutorial mendatang cara menangani rahasia dengan aman.

Fase 4: Sandpack Playground & Tes Langsung

Tujuan: Memberikan editor browser kepada pembelajar yang menjalankan solusi fp-ts dan pemeriksaan Vitest secara real time.Pembakaran ACU: 7,2 (rencana 3–4).Hasil: Mengunjungi /exercises/option-01 membuka tampilan terpisah: editor Sandpack di kiri, terowongan tes di kanan, dan pesan sukses muncul saat semua spesifikasi lulus.

Apa yang sebenarnya dilakukan Devin

Berikut yang dilakukan Devin untuk fase keempat:

• Membangun halaman daftar latihan dan navigasi dengan dukungan kategori dan slug dinamis
• Mengintegrasikan editor Sandpack dengan TypeScript, fp-ts, dan dukungan sistem file real time
• Mengganti runner tes CLI dengan Vitest di browser dan umpan balik langsung
• Menghubungkan frontend ke backend melalui Apollo Client untuk pelacakan progres berbasis sesi
• Menerapkan UI responsif dengan status loading dan penanganan error

Di mana Devin membakar ACU ekstra

Devin membakar lebih banyak ACU dari yang diharapkan untuk fase ini—berikut alasannya:

Pelajaran yang dipetik

Kesimpulan saya kali ini:

• Menonton diam-diam = boros uang. Biarkan tab Timelapse terbuka, dan jika Devin berulang, dorong atau jeda.
• Hapus kode mati lebih awal. Devin tidak benar-benar menghapus kode basi sendiri, kecuali Anda memintanya. Saya sempat keliru meminta memindahkan file tanpa secara eksplisit menyuruh menghapusnya, sehingga kita berakhir dengan beberapa entry point yang sangat membingungkan Devin di fase ini.

Devin memang memakan waktu di sini. Ia berulang-ulang, mencoba menyelesaikan masalah yang sama, tidak menghubungkan backend dan frontend dengan benar, melakukan perubahan, me-restart server, memeriksa di browser apakah berhasil, dll. Sama seperti pekerjaan pengembangan biasa, saya kira…

Sekarang kita memiliki aplikasi yang fungsional. Saya dapat meluncurkan kedua server API dan web, menavigasi ke localhost, mengedit fungsi stub, menekan Simpan, dan melihat panel tes berubah dari merah menjadi hijau. Lalu saya menyadari ia hanya mengerjakan setengah jalan, dan meng-hardcode tes dan solusi latihan pertama di setiap halaman latihan. Saya menyorotkannya, dan setelah lebih banyak loop, ia dapat memperbaikinya dan mendorong perbaikan.