Lompat ke konten
dokumentasi.id
Commit d59d965
v3
Star763

3

Memulai

Halaman ini menjelaskan cara menjalankan proyek secara lokal: menyiapkan basis data D1, mengisi .env, lalu menyalakan dev server. Rincian nama variabel dan binding dibahas di Konfigurasi Environment dan Binding, sedangkan rilis ke produksi dibahas di Deployment ke Cloudflare Pages.

Prasyarat

Lingkungan pengembangan didefinisikan oleh shell.nix, yang menyediakan nodejs dan gh di dalam mkShell shell.nix:1-6. Berkas .envrc hanya berisi use nix, jadi direnv memuat shell itu saat direktori proyek dimasuki .envrc:1-1.

KebutuhanNilai di repositoryRujukan
Runtime Node.js dan CLI ghpkgs.nodejs, pkgs.gh di nativeBuildInputsshell.nix:1-6
Pemuat shelluse nix.envrc:1-1
Basis data D1binding = "DB", database_name = "githubroast"wrangler.toml:28-31
Kunci APIOPENAI_API_KEY, GITHUB_API_KEY, TELEGRAM_API_KEY.env.example:1-3
Dependencysvelte, @sveltejs/kit, @sveltejs/adapter-cloudflare, openai, wranglerpackage.json:13-34

Diagram berikut menunjukkan urutan ketergantungannya. npm run dev baru berguna setelah dependency terpasang dan database sudah diimpor.

graph TD
    nix["shell.nix: nodejs + gh"] --> deps["npm install"]
    env[".env: OPENAI_API_KEY, GITHUB_API_KEY"] --> deps
    d1["D1 database githubroast"] --> remote["wrangler d1 import --remote ./database.sql"]
    d1 --> localimp["wrangler d1 import --local ./database.sql"]
    deps --> dev["npm run dev"]
    remote --> dev
    localimp --> dev
    style nix fill:#f59e0b,color:#000
    style env fill:#f59e0b,color:#000
    style d1 fill:#336791,color:#fff
    style deps fill:#2d7d46,color:#fff
    style remote fill:#336791,color:#fff
    style localimp fill:#8b5cf6,color:#fff
    style dev fill:#2d7d46,color:#fff
%% fig: Prasyarat sebelum dev server
%% desc: shell.nix, berkas .env, dan database D1 harus siap sebelum npm run dev menyalakan dev server.
Fig. 1: Prasyarat sebelum dev servershell.nix, berkas .env, dan database D1 harus siap sebelum npm run dev menyalakan dev server.

Menyiapkan Basis Data D1

Bagian Setup di README memuat empat langkah: membuat database D1 baru, mengimpor ./database.sql ke remote, mengimpor berkas yang sama ke local, lalu menjalankan npm run dev README.md:7-10.

Nama database pada langkah pertama harus cocok dengan database_name = "githubroast" di blok [[d1_databases]], karena binding DB itulah yang dibaca handler sebagai platform.env.DB wrangler.toml:28-31. Handler memakai binding tersebut dua kali: untuk membaca riwayat roast dan untuk menyisipkan roast baru src/routes/llama/+server.js:40-44.

Berkas database.sql membuat tabel roasts dengan kolom id, gh_username, response, created_at, country, dan language, lalu satu index bernama gh_username_idx database.sql:2-11.

graph LR
    sql["./database.sql"] --> remoteimp["wrangler d1 import --remote ./database.sql"]
    sql --> localimp["wrangler d1 import --local ./database.sql"]
    remoteimp --> remotedb[("D1 remote: githubroast")]
    localimp --> localdb[("D1 local: githubroast")]
    style sql fill:#f59e0b,color:#000
    style remoteimp fill:#336791,color:#fff
    style remotedb fill:#336791,color:#fff
    style localimp fill:#8b5cf6,color:#fff
    style localdb fill:#8b5cf6,color:#fff
%% fig: Dua target impor database.sql
%% desc: Perintah wrangler d1 import dijalankan dua kali dengan flag berbeda, satu untuk database remote dan satu untuk salinan local.
Fig. 2: Dua target impor database.sqlPerintah wrangler d1 import dijalankan dua kali dengan flag berbeda, satu untuk database remote dan satu untuk salinan local.

⚠️ database.sql tidak memiliki kolom ip_address, tetapi INSERT INTO roasts menyebut enam kolom termasuk ip_address src/routes/llama/+server.js:194-207. Di database hasil impor, pernyataan itu gagal dan kegagalannya tertelan oleh catch {} yang kosong, sehingga roast tetap dikirim ke pengguna tanpa tersimpan. Bandingkan definisi tabel di database.sql:2-11 dengan daftar kolom di handler sebelum mengandalkan riwayat roast saat mengembangkan secara lokal.

Mengisi .env

+server.js mengimpor OPENAI_API_KEY dan GITHUB_API_KEY dari $env/static/private, lalu langsung memakainya pada new OpenAI({ apiKey: OPENAI_API_KEY }) src/routes/llama/+server.js:1-7. Karena diimpor sebagai static, nilainya disisipkan saat build atau saat dev server dimulai, bukan dibaca ulang per request.

VariabelSifatPemakaian
OPENAI_API_KEYwajibargumen apiKey untuk client OpenAI src/routes/llama/+server.js:1-7
GITHUB_API_KEYopsionalmemasang header Authorization: token ... bila terisi src/routes/llama/+server.js:49-51
TELEGRAM_API_KEYtidak dipakaihanya ada di .env.example, tidak dirujuk kode mana pun .env.example:1-3

Salin .env.example menjadi .env, lalu isi nilainya .env.example:1-3. Tanpa GITHUB_API_KEY, permintaan ke GitHub API dikirim tanpa token dan lebih cepat kena rate limit src/routes/llama/+server.js:49-51.

Menjalankan Dev Server

npm run dev menjalankan vite dev package.json:5-12. Konfigurasi Vite memasang lokalTunnel dengan tunnelName: 'GitHub Roast' dan lanAddress: 'github-roast.local', sehingga dev server juga bisa dibuka dari perangkat lain di jaringan lokal vite.config.js:5-12.

Untuk menguji binding D1 secara lokal, gunakan npm run preview yang menjalankan npm run build lalu wrangler pages dev package.json:5-12. Konfigurasi Pages diambil dari wrangler.toml, termasuk pages_build_output_dir = ".svelte-kit/cloudflare" wrangler.toml:4.

PerintahYang dijalankanKegunaan
npm run devvite devpengembangan UI dengan hot reload package.json:5-12
npm run previewnpm run build + wrangler pages devmenguji aplikasi beserta binding D1 lokal package.json:5-12
npm run buildvite buildmenghasilkan keluaran untuk adapter-cloudflare package.json:5-12

Setelah dev server hidup, alur request yang dilayaninya dijelaskan di Alur Permintaan Roast.