Bangun Bookmark Manager Full-Stack dengan OpenCode dalam 30 Menit (Langkah demi Langkah)

Apa yang Sedang Kita Bangun

Lupakan daftar fitur. Cara terbaik untuk mempelajari sebuah alat adalah dengan membangun sesuatu menggunakannya.

Dalam tutorial ini, Anda akan menggunakan OpenCode — AI coding agent open-source dengan 120K+ bintang GitHub — untuk membangun bookmark manager lengkap dari nol. Aplikasi ini akan memiliki:

• REST API dengan Express.js dan TypeScript
• Database SQLite dengan full-text search
• Sistem tag untuk mengatur bookmark
• Frontend yang sederhana namun fungsional
• Unit tests

Setiap fitur OpenCode diperkenalkan pada saat Anda membutuhkannya — bukan di bagian fitur yang abstrak. Pada akhirnya, Anda akan mengetahui cara menginstal OpenCode, mengonfigurasi model, menggunakan mode Build dan Plan, menyiapkan MCP servers, dan membuat agent khusus — semuanya karena Anda menggunakannya untuk membangun proyek nyata.

Waktu: ~30 menit Prasyarat: Node.js 18+ terinstal, terminal (macOS, Linux, atau WSL di Windows) Biaya: Gratis (menggunakan model OpenCode Zen)

Fase 1: Menginstal OpenCode dan Menyiapkan Proyek (5 menit)

Instal OpenCode

Buka terminal Anda dan jalankan salah satu perintah ini:

# Option 1: npm (recommended)
npm i -g opencode-ai@latest

# Option 2: Homebrew (macOS/Linux)
brew install sst/tap/opencode

# Option 3: One-line installer
curl -fsSL https://opencode.ai/install.sh | bash

Verifikasi instalasi:

opencode --version

Anda seharusnya melihat nomor versi. Per Maret 2026, rilis stabil terbaru tersedia di repositori GitHub OpenCode.

Buat Direktori Proyek

mkdir bookmark-manager && cd bookmark-manager
git init
npm init -y

Jalankan OpenCode untuk Pertama Kalinya

opencode

Ini akan membuka TUI (Terminal User Interface) OpenCode — antarmuka interaktif layar penuh yang dibangun dengan Bubble Tea. Anda akan melihat input chat di bagian bawah dan panel percakapan di area utama.

Pilih Model

Pada peluncuran pertama, OpenCode akan meminta Anda untuk memilih model. Anda memiliki tiga jalur:

Gratis (model Zen): Ketik /models dan pilih salah satu dari model Zen gratis. Untuk tutorial ini, Grok Code Fast 1 atau GLM 4.7 berfungsi dengan baik. Ini gratis dan tidak memerlukan API key.

Lokal (Ollama): Jika Anda memiliki Ollama terinstal, OpenCode akan mendeteksinya secara otomatis. Model yang direkomendasikan untuk Ollama adalah glm-4.7:cloud.

Berbayar (bawa kunci Anda sendiri): Ketik /connect untuk menghubungkan API key Anthropic, OpenAI, atau Google Anda. Kunci disimpan secara lokal di ~/.local/share/opencode/auth.json.

Untuk tutorial ini, model apa pun bisa digunakan. Model dengan kapabilitas lebih tinggi (Claude Sonnet 4.6, GPT-5.4) akan menghasilkan hasil yang lebih baik pada tugas-tugas kompleks, tetapi model Zen gratis sudah cukup untuk menangani semua yang kita bangun di sini.

Fase 2: Scaffolding Proyek dengan Mode Build (4 menit)

Secara default, OpenCode dimulai dalam mode Build. Mode Build memberikan AI agent akses penuh untuk membuat file, mengedit kode, dan menjalankan perintah. Inilah yang kita inginkan untuk scaffolding.

Prompt Pertama Anda

Ketik ini ke dalam chat OpenCode:

Set up a TypeScript Node.js project with Express for a bookmark manager REST API.
Use SQLite via better-sqlite3 for the database. Add TypeScript, ts-node, and
nodemon as dev dependencies. Create a src/ directory with an index.ts entry point
that starts an Express server on port 3000.

OpenCode akan:

1. Membuat tsconfig.json
2. Menginstal dependencies dengan npm install
3. Membuat src/index.ts dengan pengaturan server Express
4. Memperbarui package.json dengan script start

Perhatikan TUI — Anda akan melihat agent mengeksekusi perintah terminal, membuat file, dan menjelaskan apa yang dilakukannya di setiap langkah. Ini bukan sekadar pembuatan kode di ruang hampa; OpenCode memiliki akses penuh ke filesystem dan terminal Anda.

Verifikasi Bahwa Ini Berjalan

Setelah OpenCode selesai, katakan padanya:

Run the server and verify it starts correctly on port 3000.

OpenCode akan menjalankan npx nodemon src/index.ts dan mengonfirmasi bahwa server sedang mendengarkan. Anda akan melihat output seperti Server running on http://localhost:3000.

Apa yang Baru Saja Terjadi (Fitur: Mode Build)

Mode Build adalah agent default OpenCode. Ia memiliki akses ke semua tools: baca/tulis file, eksekusi terminal, dan pengeditan kode. Menurut dokumentasi OpenCode, Anda dapat menganggapnya sebagai AI pair programmer dengan akses penuh ke lingkungan pengembangan Anda.

Fase 3: Membuat Model Data dan Database (4 menit)

Desain Skema

Ketik prompt ini:

Create a database module at src/db.ts that:
1. Initializes a SQLite database at ./data/bookmarks.db
2. Creates a bookmarks table with: id (auto-increment), url (text, unique),
   title (text), description (text, nullable), created_at (datetime),
   updated_at (datetime)
3. Creates a tags table with: id (auto-increment), name (text, unique)
4. Creates a bookmark_tags junction table for many-to-many relationships
5. Enables WAL mode for concurrent read performance
6. Creates an FTS5 virtual table for full-text search on title and description
Export a function to get the database instance.

OpenCode akan menghasilkan modul database lengkap. Perhatikan bagaimana ia menangani pengaturan FTS5 (Full-Text Search 5) — ini adalah fitur SQLite yang akan memperkuat fungsionalitas pencarian kita nanti.

Inisialisasi Database Saat Server Dimulai

Import the database module in index.ts and initialize it when the server starts.
Log a confirmation message.

Buat Konfigurasi opencode.json

Ini adalah momen yang tepat untuk memperkenalkan konfigurasi proyek. Buat file dengan memberi tahu OpenCode:

Create an opencode.json file in the project root with the project name
"bookmark-manager" and a rule that says "This is a TypeScript Express API
using better-sqlite3. Follow RESTful conventions. Use async/await. Return
JSON responses with consistent error formatting."

Ini membuat file konfigurasi proyek yang dibaca OpenCode saat startup. Ini memberikan konteks persisten kepada AI tentang proyek Anda — standar pengkodean, keputusan arsitektur, dan batasan — sehingga Anda tidak perlu mengulanginya di setiap prompt.

Fase 4: Membangun Endpoint REST API (5 menit)

Hasilkan Route

Create a routes module at src/routes/bookmarks.ts with these endpoints:
- POST /api/bookmarks — create a bookmark (validate url and title are present)
- GET /api/bookmarks — list all bookmarks with pagination (page, limit params)
- GET /api/bookmarks/:id — get a single bookmark with its tags
- PUT /api/bookmarks/:id — update a bookmark
- DELETE /api/bookmarks/:id — delete a bookmark and its tag associations
Use proper HTTP status codes. Return JSON with a consistent shape:
{ success: boolean, data: any, error?: string }

Daftarkan Route

Import the bookmark routes in index.ts and register them. Also add
express.json() middleware and a global error handler.

Uji dengan curl

Start the server, then create a test bookmark using curl:
curl -X POST http://localhost:3000/api/bookmarks \
  -H "Content-Type: application/json" \
  -d '{"url": "https://opencode.ai", "title": "OpenCode - AI Coding Agent"}'
Then fetch all bookmarks to verify it was saved.

OpenCode akan mengeksekusi perintah-perintah ini di terminal Anda dan menunjukkan responsnya. Di sinilah alat ini bersinar — Anda tidak pernah meninggalkan terminal, dan AI memverifikasi pekerjaannya sendiri.

Fase 5: Menambahkan Pencarian dengan FTS5 (4 menit)

Perkenalkan Mode Plan

Sebelum membangun pencarian, mari kita gunakan mode Plan untuk memikirkan implementasinya. Ganti mode:

/plan

Sekarang Anda berada dalam mode Plan. AI dapat membaca kode Anda dan menganalisisnya tetapi tidak dapat mengubah file apa pun. Ini berguna untuk perencanaan sebelum membuat perubahan.

Analyze my current database schema and FTS5 table. Plan how to implement a
search endpoint that queries the FTS5 table and returns bookmarks ranked by
relevance. Consider edge cases: empty queries, special characters, partial
matches.

OpenCode akan memeriksa kode Anda, menulis rencana ke .opencode/plans/, dan menjelaskan pendekatannya tanpa menyentuh file apa pun. Baca rencana tersebut, sesuaikan jika perlu, lalu beralih kembali:

/build

Implementasikan Pencarian

Based on the plan, implement a GET /api/bookmarks/search?q=query endpoint
that uses the FTS5 virtual table for full-text search. Include snippet
highlighting and relevance ranking. Handle edge cases from the plan.

Uji Pencarian

Create three more test bookmarks with different titles and descriptions,
then test the search endpoint with a query that should match two of them.

Apa yang Baru Saja Terjadi (Fitur: Mode Plan)

Workflow Plan/Build adalah cara pengembang berpengalaman menggunakan OpenCode untuk tugas-tugas kompleks. Rencanakan terlebih dahulu, tinjau pendekatannya, lalu bangun. File rencana disimpan di .opencode/plans/ dan dapat dirujuk nanti oleh build agent. Ini mencegah AI membuat keputusan struktural besar secara mendadak.

Fase 6: Mengimplementasikan Sistem Tag (4 menit)

Buat Endpoint Tag

Create a routes module at src/routes/tags.ts with:
- POST /api/tags — create a new tag
- GET /api/tags — list all tags with bookmark counts
- POST /api/bookmarks/:id/tags — add a tag to a bookmark
- DELETE /api/bookmarks/:id/tags/:tagId — remove a tag from a bookmark
- GET /api/bookmarks?tag=tagname — filter bookmarks by tag (update existing
  list endpoint to support this query parameter)
Register the tag routes in index.ts.

Uji Alur Tag

Create two tags: "dev-tools" and "tutorials". Add the "dev-tools" tag to
the OpenCode bookmark. Then fetch bookmarks filtered by the "dev-tools" tag.

Fase 7: Membangun Frontend Sederhana (5 menit)

Hasilkan Frontend

Create a public/ directory with a single-page frontend:
- index.html with a clean, minimal design (no framework, just HTML/CSS/JS)
- A form to add bookmarks (url, title, description)
- A search bar that queries the search endpoint with debounced input
- A list of bookmarks showing title, url, tags, and a delete button
- A tag filter sidebar that shows all tags with counts
- Use fetch() for API calls. Mobile responsive. No build step needed.
Serve the public/ directory as static files from Express.

OpenCode akan menghasilkan frontend lengkap — struktur HTML, styling CSS, dan JavaScript untuk interaksi API — dalam satu langkah. Keuntungan membangun ini di terminal dengan AI agent adalah ia dapat segera menguji apakah frontend terhubung ke API.

Uji Full Stack

Start the server, open http://localhost:3000 in a description, and verify
that adding a bookmark from the form, searching, and filtering by tag all
work correctly.

Fase 8: Menambahkan Test dengan Agent Kustom (5 menit)

Buat Agent Test Kustom

Di sinilah fitur agent kustom OpenCode berperan. Alih-alih menggunakan agent Build generik untuk testing, kita akan membuat yang terspesialisasi.

Tambahkan ini ke opencode.json Anda:

{
  "agents": {
    "test": {
      "name": "Test Writer",
      "instructions": "You are a testing specialist. Write comprehensive tests using Vitest. Focus on edge cases and error paths. Never modify source code — only create and edit test files.",
      "tools": ["read", "write", "terminal"]
    }
  }
}

Sekarang beralih ke agent test:

/agent test

Hasilkan Test

Write comprehensive tests for the bookmark API using Vitest and supertest.
Cover:
- Creating a bookmark with valid data
- Creating a bookmark with missing required fields
- Fetching all bookmarks with pagination
- Searching with FTS5 (matching and non-matching queries)
- Adding and removing tags
- Deleting a bookmark removes its tag associations
Use an in-memory SQLite database for test isolation.

Jalankan Test

Install vitest and supertest as dev dependencies, add a test script to
package.json, then run the test suite.

Apa yang Baru Saja Terjadi (Fitur: Agent Kustom)

Agent kustom memungkinkan Anda membuat persona yang terfokus dengan instruksi khusus dan akses alat tertentu. Agent test yang kita buat hanya bisa membaca file, menulis file test, dan menjalankan perintah terminal — ia tidak dapat mengubah kode sumber. Batasan ini mencegah masalah umum di mana AI "memperbaiki" kode sumber Anda saat test gagal, alih-alih memperbaiki test tersebut.

Anda dapat membuat agent untuk alur kerja khusus apa pun: code review, dokumentasi, migrasi database, script DevOps. Dokumentasi agent OpenCode memiliki lebih banyak contoh.

Bonus: Menghubungkan MCP Server untuk Fungsionalitas Tambahan

Jika Anda ingin memperluas bookmark manager Anda, Anda dapat menghubungkan alat eksternal melalui server MCP (Model Context Protocol).

Contoh: Menambahkan Link Preview MCP Server

Bayangkan Anda ingin OpenCode mengambil metadata secara otomatis (judul, deskripsi, favicon) dari URL saat membuat bookmark. Anda dapat menghubungkan server MCP yang melakukan pengambilan HTTP:

Tambahkan ini ke opencode.json Anda:

{
  "mcp": {
    "link-preview": {
      "type": "local",
      "command": ["npx", "link-preview-mcp-server"]
    }
  }
}

Sekarang OpenCode memiliki alat baru yang tersedia: ia dapat mengambil metadata URL sebagai bagian dari alur kerjanya. Saat Anda memintanya untuk "menambahkan bookmark untuk https://example.com dan mengisi otomatis judul serta deskripsinya," ia akan menggunakan server MCP untuk mengambil data tersebut.

Remote MCP Servers

Untuk layanan cloud, gunakan server MCP jarak jauh dengan penanganan OAuth otomatis:

{
  "mcp": {
    "cloud-storage": {
      "type": "remote",
      "url": "https://mcp.example.com/storage",
      "headers": {
        "Authorization": "Bearer ${STORAGE_TOKEN}"
      }
    }
  }
}

OpenCode mendeteksi respons 401 dan memulai alur OAuth secara otomatis jika server mendukung Dynamic Client Registration.

Bonus: Menggunakan OpenCode dalam CI/CD

OpenCode memiliki mode CLI yang berjalan tanpa TUI — sangat cocok untuk otomatisasi. Anda dapat menggunakannya di GitHub Actions atau pipeline CI apa pun:

# Run a single prompt and exit
opencode -p "Review the changes in the last commit for security issues" --no-tui

# Use a specific model
opencode -m "claude-sonnet-4-6" -p "Generate a changelog entry for this release" --no-tui

Untuk bookmark manager kita, Anda dapat menambahkan langkah CI yang menjalankan OpenCode untuk meninjau PR secara otomatis. Integrasi GitHub OpenCode menyediakan versi alur kerja yang lebih efisien untuk hal ini.

Struktur Proyek Lengkap

Setelah mengikuti tutorial ini, proyek Anda akan terlihat seperti ini:

bookmark-manager/
  opencode.json          # OpenCode project config + custom agents + MCP
  package.json
  tsconfig.json
  src/
    index.ts             # Express server entry point
    db.ts                # SQLite database module with FTS5
    routes/
      bookmarks.ts       # CRUD + search endpoints
      tags.ts            # Tag management endpoints
  public/
    index.html           # Single-page frontend
  tests/
    bookmarks.test.ts    # API test suite
  data/
    bookmarks.db         # SQLite database (gitignored)
  .opencode/
    plans/               # Plans from Plan mode sessions

Apa yang Telah Anda Pelajari

Dengan membangun proyek nyata, Anda telah mempraktikkan kemampuan OpenCode berikut:

Perbedaan utama antara OpenCode dan alat coding AI lainnya adalah ia sepenuhnya open source, berjalan di terminal Anda, dan tidak menyimpan kode atau data konteks Anda. Anda mengontrol modelnya, data tetap lokal, dan komunitas dengan 800+ kontributor membuatnya terus berkembang cepat.

Untuk tim yang menggunakan beberapa alat AI, OpenCode berfungsi dengan baik sebagai pelengkap berbasis terminal untuk asisten IDE. Di ZBuild, kami sering menggunakannya bersama alat berbasis editor untuk bagian yang berbeda dari alur kerja pengembangan.

Langkah Selanjutnya

Sekarang setelah Anda memiliki bookmark manager yang berfungsi dan pemahaman yang solid tentang OpenCode, berikut adalah beberapa arah untuk dieksplorasi:

1. Tambahkan autentikasi — Gunakan agent Build untuk menambahkan auth berbasis JWT dengan akun pengguna
2. Deploy ke produksi — Minta OpenCode untuk menghasilkan Dockerfile dan deploy ke Fly.io atau Railway
3. Bangun ekstensi browser — Buat ekstensi Chrome yang menambahkan bookmark melalui API
4. Eksplorasi lebih banyak model Zen — Coba Big Pickle, MiniMax M2.1, atau jalankan model lokal melalui Ollama
5. Buat lebih banyak agent kustom — Agent "refactor", agent "docs", atau agent "audit keamanan"

Dokumentasi OpenCode dan repositori awesome-opencode memiliki lebih banyak plugin, tema, dan konfigurasi komunitas untuk dieksplorasi.

Sumber

• OpenCode — Dokumentasi Resmi
• OpenCode — Repositori GitHub
• OpenCode — Model Zen
• OpenCode — Dokumentasi Agent
• OpenCode — MCP Servers
• OpenCode — Mode CLI
• OpenCode — Konfigurasi
• OpenCode — Integrasi GitHub
• Ollama — Integrasi OpenCode
• awesome-opencode — Sumber Daya Komunitas
• Composio — MCP dengan OpenCode
• Computing for Geeks — Setup OpenCode AI