Loo full-stack järjehoidjate haldur OpenCode abil 30 minutiga (samm-sammult)

Mida me ehitame

Unustage funktsioonide loendid. Parim viis tööriista tundmaõppimiseks on sellega midagi ehitada.

Selles õpetuses kasutate te OpenCode — avatud lähtekoodiga tehisintellekti koodiagenti, millel on üle 120K+ GitHub stars — et ehitada nullist valmis täielik järjehoidjate haldur. Rakendusel on:

• REST API koos Express.js ja TypeScript-iga
• SQLite andmebaas koos full-text search toega
• Siltide süsteem järjehoidjate organiseerimiseks
• Lihtne, kuid funktsionaalne frontend
• Unit tests

Iga OpenCode funktsioon võetakse kasutusele hetkel, mil seda vajate — mitte abstraktses funktsioonide jaotises. Lõpuks teate, kuidas installida OpenCode, konfigureerida mudeleid, kasutada Build ja Plan režiime, seadistada MCP servereid ja luua kohandatud agente — seda kõike seetõttu, et kasutasite neid reaalse projekti ehitamiseks.

Aeg: ~30 minutit Eeltingimused: Node.js 18+ installitud, terminal (macOS, Linux või WSL Windows-is) Maksumus: Tasuta (kasutades OpenCode Zen mudeleid)

1. etapp: OpenCode installimine ja projekti seadistamine (5 minutit)

Installi OpenCode

Avage oma terminal ja käivitage üks neist käskudest:

# 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

Kontrolli installatsiooni:

opencode --version

Peaksite nägema versiooninumbrit. Seisuga March 2026 on uusim stabiilne väljalase saadaval OpenCode GitHub repository lehel.

Loo projekti kataloog

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

Käivita OpenCode esimest korda

opencode

See avab OpenCode TUI (Terminal User Interface) — täisekraanil kuvatava interaktiivse liidese, mis on ehitatud Bubble Tea abil. Näete allosas vestlussisendit ja põhiosas vestluspaani.

Vali mudel

Esimesel käivitamisel palub OpenCode teil valida mudeli. Teil on kolm teed:

Tasuta (Zen mudelid): Trükkige /models ja valige üks free Zen models. Selle õpetuse jaoks sobivad hästi Grok Code Fast 1 või GLM 4.7. Need on tasuta ja ei nõua API võtit.

Kohalik (Ollama): Kui teil on Ollama installitud, tuvastab OpenCode selle automaatselt. recommended model for Ollama on glm-4.7:cloud.

Tasuline (too oma võti): Trükkige /connect, et linkida oma Anthropic, OpenAI või Google API võti. Võtmed salvestatakse lokaalselt faili ~/.local/share/opencode/auth.json.

Selle õpetuse jaoks sobib iga mudel. Suurema võimekusega mudelid (Claude Sonnet 4.6, GPT-5.4) annavad keerukate ülesannete puhul paremaid tulemusi, kuid tasuta Zen mudelid saavad kõige siin ehitatavaga hakkama.

2. etapp: Projekti karkassi loomine Build režiimiga (4 minutit)

OpenCode käivitub vaikimisi Build mode režiimis. Build mode annab AI agendile täieliku juurdepääsu failide loomiseks, koodi muutmiseks ja käskude käivitamiseks. See on täpselt see, mida me karkassi loomiseks vajame.

Sinu esimene prompt

Trükkige see OpenCode vestlusesse:

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 teeb järgmist:

1. Loob tsconfig.json
2. Installib dependencies kasutades npm install
3. Loob src/index.ts koos Express serveri seadistusega
4. Uuendab package.json käivitus-skriptidega

Jälgige TUI-d — näete, kuidas agent käivitab terminali käske, loob faile ja selgitab igal sammul, mida ta teeb. See ei ole koodi genereerimine vaakumis; OpenCode-il on täielik juurdepääs teie failisüsteemile ja terminalile.

Kontrolli, kas see töötab

Kui OpenCode on lõpetanud, öelge talle:

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

OpenCode käivitab npx nodemon src/index.ts ja kinnitab, et server kuulab. Peaksite nägema väljundit nagu Server running on http://localhost:3000.

Mis just juhtus (Funktsioon: Build Mode)

Build mode on OpenCode'i vaikeagent. Tal on juurdepääs kõigile tööriistadele: failide lugemine/kirjutamine, terminali käsud ja koodi muutmine. Vastavalt OpenCode documentation materjalidele võite sellest mõelda kui AI paarilisest programmeerijast, kellel on täielik juurdepääs teie arenduskeskkonnale.

3. etapp: Andmemudeli ja andmebaasi loomine (4 minutit)

Disaini skeem

Sisestage see prompt:

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 genereerib täieliku andmebaasi mooduli. Pöörake tähelepanu sellele, kuidas see käsitleb FTS5 (Full-Text Search 5) seadistust — see on SQLite funktsioon, mis toetab hiljem meie otsingufunktsionaalsust.

Algatage andmebaas serveri käivitumisel

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

Loo opencode.json seadistus

Nüüd on hea hetk projekti konfigureerimiseks. Loo fail, öeldes OpenCode-ile:

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."

See loob projekti konfiguratsioonifaili, mida OpenCode loeb käivitamisel. See annab AI-le püsiva konteksti teie projekti kohta — kodeerimisstandardid, arhitektuurilised otsused ja piirangud — nii et te ei pea neid igas promptis kordama.

4. etapp: REST API otspunktide ehitamine (5 minutit)

Genereeri marsruudid (Routes)

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 }

Registreeri marsruudid

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

Testi curl abil

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 käivitab need käsud teie terminalis ja näitab teile vastuseid. Siin särab tööriist kõige rohkem — te ei lahku kunagi terminalist ja AI kontrollib oma tööd.

5. etapp: Otsingu lisamine FTS5 abil (4 minutit)

Tutvusta Plan režiimi

Enne otsingu ehitamist kasutame Plan mode'i, et teostus läbi mõelda. Vaheta režiimi:

/plan

Nüüd olete Plan mode-is. AI saab lugeda teie koodi ja seda analüüsida, kuid ei saa muuta ühtegi faili. See on kasulik planeerimiseks enne muudatuste tegemist.

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 uurib teie koodi, kirjutab plaani asukohta .opencode/plans/ ja selgitab oma lähenemisviisi ilma faile puudutamata. Lugege plaani, kohandage seda vajadusel ja lülituge tagasi:

/build

Rakenda otsing

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.

Testi otsingut

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

Mis just juhtus (Funktsioon: Plan Mode)

Plan/Build töövoog on see, kuidas kogenud arendajad kasutavad OpenCode-i keerukate ülesannete puhul. Planeeri esmalt, vaata lähenemine üle ja alles siis ehita. Plaanifailid salvestatakse kataloogi .opencode/plans/ ja neid saab hiljem viidata build agendi poolt. See takistab AI-l lennult suurte struktuuriliste otsuste tegemist.

6. etapp: Siltide süsteemi rakendamine (4 minutit)

Loo sildi otspunktid

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.

Testi sildi töövoogu

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.

7. etapp: Lihtsa frontend-i ehitamine (5 minutit)

Genereeri 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 genereerib täieliku frontendi — HTML struktuuri, CSS stiilid ja JavaScripti API-ga suhtlemiseks — ühe korraga. AI agendiga terminalis ehitamise eelis on see, et ta saab kohe testida, kas frontend ühendub API-ga.

Testi kogu rakendust (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.

8. etapp: Testide lisamine kohandatud agendiga (5 minutit)

Loo kohandatud testiagent

Siin tuleb mängu OpenCode custom agents funktsioon. Üldise Build agendi kasutamise asemel testimiseks loodame spetsialiseeritud agendi.

Lisa see oma opencode.json faili:

{
  "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"]
    }
  }
}

Nüüd lülitu testiagendile:

/agent test

Genereeri testid

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.

Käivita testid

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

Mis just juhtus (Funktsioon: Kohandatud agendid)

Kohandatud agendid võimaldavad teil luua fokuseeritud persoone koos konkreetsete juhiste ja tööriistade juurdepääsuga. Testiagent, mille me lõime, saab ainult faile lugeda, testifaile kirjutada ja terminali käske käivitada — ta ei saa muuta lähtekoodi. See piirang hoiab ära tavalise probleemi, kus AI "parandab" teie lähtekoodi, kui testid ebaõnnestuvad, selle asemel et parandada teste.

Saate luua agente mis tahes spetsialiseeritud töövoo jaoks: code review, dokumentatsioon, andmebaasi migratsioonid, DevOps skriptid. OpenCode agents documentation sisaldab rohkem näiteid.

Boonus: MCP serveri ühendamine laiendatud funktsionaalsuse jaoks

Kui soovite oma järjehoidjate haldurit laiendada, saate ühendada väliseid tööriistu MCP (Model Context Protocol) serverite kaudu.

Näide: Link Preview MCP serveri lisamine

Kujutage ette, et soovite, et OpenCode tooks järjehoidjate loomisel automaatselt URL-idelt metaandmed (title, description, favicon). Saate ühendada MCP serveri, mis teostab HTTP päringuid:

Lisa see oma opencode.json faili:

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

Nüüd on OpenCode'il saadaval uus tööriist: ta saab oma töövoo osana hankida URL-i metaandmeid. Kui palute tal "lisada järjehoidja https://example.com jaoks ja täita automaatselt title ja description," kasutab ta nende andmete hankimiseks MCP serverit.

Kaugsed MCP serverid

Pilveteenuste jaoks kasutage kaugeid MCP servereid koos automatic OAuth handling toega:

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

OpenCode tuvastab 401 vastused ja algatab automaatselt OAuth voo, kui server toetab Dynamic Client Registration-it.

Boonus: OpenCode kasutamine CI/CD-s

OpenCode-il on CLI mode, mis töötab ilma TUI-ta — ideaalne automatiseerimiseks. Saate seda kasutada GitHub Actions-is või mis tahes CI pipeline-is:

# 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

Meie järjehoidjate halduri puhul võiksite lisada CI sammu, mis käivitab OpenCode-i PR-ide automaatseks ülevaatuseks. OpenCode GitHub integration pakub sellest töövoost voolujoonelisemat versiooni.

Täielik projekti struktuur

Pärast selle õpetuse järgimist peaks teie projekt välja nägema selline:

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

Mida sa õppisid

Reaalse projekti ehitamisel harjutasid neid OpenCode'i võimekusi:

Peamine erinevus OpenCode'i ja teiste AI kooditööriistade vahel on see, et see on täielikult avatud lähtekoodiga, töötab teie terminalis ja ei salvesta teie koodi ega kontekstiandmeid. Teie kontrollite mudeleid, andmed jäävad kohalikuks ja enam kui 800+ kaastöötajast koosnev kogukond hoiab selle arengu kiirena.

Meeskondadele, kes kasutavad mitut AI tööriista, sobib OpenCode hästi terminalipõhiseks täienduseks IDE assistentidele. Ettevõttes ZBuild kasutame seda sageli koos redaktoripõhiste tööriistadega arendustöövoo erinevates osades.

Järgmised sammud

Nüüd, kui teil on töötav järjehoidjate haldur ja kindel arusaam OpenCode-ist, on siin mõned suunad edasiseks uurimiseks:

1. Lisa autentimine — Kasuta Build agenti, et lisada JWT-põhine auth koos kasutajakontodega
2. Deploy to production — Palu OpenCode-il genereerida Dockerfile ja deploy Fly.io-sse või Railway-sse
3. Ehita brauseri laiendus — Loo Chrome laiendus, mis lisab järjehoidjaid API kaudu
4. Uuri rohkem Zen mudeleid — Proovi Big Pickle, MiniMax M2.1 mudeleid või käivita kohalik mudel läbi Ollama
5. Loo rohkem kohandatud agente — "refactor" agent, "docs" agent või "security audit" agent

OpenCode documentation ja awesome-opencode repository pakuvad rohkem pluginaid, teemasid ja kogukonna konfiguratsioone uurimiseks.

Allikad

• OpenCode — Official Documentation
• OpenCode — GitHub Repository
• OpenCode — Zen Models
• OpenCode — Agents Documentation
• OpenCode — MCP Servers
• OpenCode — CLI Mode
• OpenCode — Configuration
• OpenCode — GitHub Integration
• Ollama — OpenCode Integration
• awesome-opencode — Community Resources
• Composio — MCP with OpenCode
• Computing for Geeks — Setup OpenCode AI