# EdgeOne Makers Tutorial EdgeOne CLI itu pinter, dia gak butuh `package.json` atau `edgeone.json` di awal. Dia cuma butuh **folder** `cloud-functions/` dan **folder** `agents/`. Kita *setup* manual dari nol ya. Ikutin langkah-langkah super simpel ini: ### Step 1: Bikin Struktur Kosong Buka terminal, lalu jalanin perintah ini buat bikin struktur folder murni: ```bash mkdir pharma-bot cd pharma-bot mkdir cloud-functions mkdir agents mkdir agents\pharma ``` ### Step 2: Bikin UI Web (Tanpa File HTML Terpisah) Biar kita gak kena jebakan *static file server* yang kadang rewel pas *local dev*, kita suruh server-nya aja yang nge-render HTML-nya. Bikin file di `cloud-functions/index.ts` (ini bakal nge-handle route `/`): ```tsx export const onRequestGet = async (req, context) => { const html = ` PharmaBot - Start from Scratch

๐Ÿค– PharmaBot Test Drive

Langsung dari kosongan, no config!

Belum ada chat...

`; return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8' } }); }; ``` ### Step 3: Bikin Otak Agent (Session Mode) Bikin file di `agents/pharma/index.ts`. Folder `pharma` ini otomatis bakal jadi route `/pharma`. ```tsx export const onRequestPost = async (req, context) => { const url = new URL(req.url); let message = url.searchParams.get("message") || ""; if (!message) return Response.json({ error: "message required" }, { status: 400 }); // 1. Ambil History Chat (Pakai context.store bawaan) const history = await context.store.getMessages({ conversationId: context.conversation_id, limit: 5 }); // 2. Panggil LLM bawaan Makers (Makers Models) const aiResp = await fetch(context.env.AI_GATEWAY_BASE_URL + "/chat/completions", { method: "POST", headers: { "Authorization": `Bearer ${context.env.AI_GATEWAY_API_KEY}`, "Content-Type": "application/json" }, body: JSON.stringify({ model: "@makers/deepseek-v4-flash", messages: [ { role: "system", content: "Kamu adalah asisten farmasi yang sedang dalam mode testing dari folder kosong." }, ...context.store.toOpenAIInput(history), { role: "user", content: message } ] }) }); const result = await aiResp.json(); const reply = result.choices?.[0]?.message?.content || "Gagal generate response"; // 3. Simpan ke Memory biar nyambung await context.store.appendMessage({ conversationId: context.conversation_id, role: "user", content: message }); await context.store.appendMessage({ conversationId: context.conversation_id, role: "assistant", content: reply }); return Response.json({ reply }); }; ``` ### Step 4: Gas Jalankan! Sekarang struktur folder lu murni cuma punya 2 file TypeScript. Jalanin aja di terminal: ```bash edgeone makers dev ``` **Perhatikan log-nya:** Kalau sukses, CLI bakal nge-*build* dan bilang: `Build completed (dev) with 2 route(s)` (Route `/` dan Route `/pharma`). Buka `http://localhost:8088`. Langsung tes ketik "Halo dokter" dan klik Kirim. Dengan cara dari nol gini, kita punya kendali penuh 100% atas project-nya tanpa ada *ghost file* yang bikin *error*. Sikat bro, kalau udah nyala lampu hijaunya, baru kita bahas cara nyuntikin **Blob Storage** buat login-nya! ๐Ÿš€ Kalau muncul AGENT RUNTIME ERROR GIMANA NIH? Mantap bro! ๐ŸŽ‰ Selamat, arsitektur *from scratch*\-nya **SUKSES BESAR**! Buktiinnya gampang: 1. Routing UI ke `/` jalan. 2. Routing Agent ke `/pharma` jalan. 3. Header `makers-conversation-id` terkirim dan diterima platform. 4. `context.store` (Memory) juga jalan, keliatan dari `conversation_id: "conv-2atgf6zg"` yang dibalikin di respons error-nya. Lalu kenapa muncul `{"code":"AGENT_RUNTIME_ERROR","message":"Invalid URL"}`? **Penyebabnya:** Di *local development* (`edgeone makers dev`), variabel environment `context.env.AI_GATEWAY_BASE_URL` kadang `undefined` (belum disuntikkan otomatis oleh CLI kalau kita belum pakai *template* atau *link project*). Akibatnya, waktu kode lu nge-gabungin `undefined + "/chat/completions"`, hasilnya jadi string `"undefined/chat/completions"`. Pas dioper ke `fetch()`, JavaScript nolak karena itu bukan URL yang valid! ๐Ÿ˜‚ ### Solusinya: Kasih Fallback URL Kita tambahkan *fallback* URL default EdgeOne Makers di kode Agent-nya. Coba update file `agents/pharma/index.ts` jadi kayak gini: ```tsx export const onRequestPost = async (context) => { // 1. Ambil message dari URL (sesuai pattern lo) const url = new URL(context.request.url); const message = url.searchParams.get("message") || ""; if (!message) { return Response.json({ error: "message required" }, { status: 400 }); } // 2. LOGIKA KUNCI 1: Fallback URL + Hapus Trailing Slash // Ini mencegah error "Invalid URL" atau double slash (misal: v1//chat/completions) const baseUrl = (context.env.AI_GATEWAY_BASE_URL || "https://ai-gateway.edgeone.link/v1").replace(/\/+$/, ""); // 3. LOGIKA KUNCI 2: Validasi API Key SEBELUM fetch // Jangan biarkan fetch jalan kalau key-nya kosong, langsung stop di sini const apiKey = context.env.AI_GATEWAY_API_KEY || context.env.MAKERS_MODELS_KEY || ""; if (!apiKey) { return Response.json({ error: "API Key belum diset di Environment Variables!" }, { status: 500 }); } try { // 4. LOGIKA KUNCI 3: Fetch yang bersih dan terstruktur const aiResp = await fetch(baseUrl + "/chat/completions", { method: "POST", headers: { "Authorization": `Bearer ${apiKey}`, "Content-Type": "application/json" }, body: JSON.stringify({ model: "@makers/deepseek-v4-flash", messages: [ { role: "system", content: "Kamu adalah asisten farmasi yang sangat membantu dan empatik." }, { role: "user", content: message } ] }) }); // 5. LOGIKA KUNCI 4: Catch error dari Gateway sebelum di-parse JSON if (!aiResp.ok) { const err = await aiResp.json().catch(() => ({})); return Response.json({ error: `LLM Gateway Error (Status: ${aiResp.status})`, details: err }, { status: aiResp.status }); } const result = await aiResp.json(); const reply = result.choices?.[0]?.message?.content || "Gagal generate response"; // Opsional: Simpan ke history kalau context.store ada if (context.store && context.conversation_id) { await context.store.appendMessage({ conversationId: context.conversation_id, role: "user", content: message }); await context.store.appendMessage({ conversationId: context.conversation_id, role: "assistant", content: reply }); } return Response.json({ reply }); } catch (error) { // Catch kalau network-nya sendiri yang putus return Response.json({ error: "Network/Fetch Error", details: error.message }, { status: 500 }); } }; ``` Save filenya (dev server otomatis *hot-reload*), terus coba **Kirim** chat lagi di browser! **Kemungkinan Skenario Selanjutnya:** * **Skenario A (Sukses)**: Agent langsung ngejawab "Halo! Ada yang bisa saya bantu terkait kesehatan Anda hari ini?". Berarti fondasi kita udah 100% kelar! ๐Ÿ† * **Skenario B (Muncul** `LLM Gateway Error: 401 Unauthorized`**)**: Berarti URL udah bener, tapi lu butuh API Key. Nanti kita tinggal jalanin `edgeone makers link` atau ambil API key dari Makers Console, tapi coba Skenario A dulu aja. Gimana bro, udah muncul jawaban dari "dokter"-nya belum? ๐Ÿฉบโœจ Lalu kita upload dulu ke Gitlab / sebenarnya bisa aja by create and link project tapi disini biar kita bisa milih existing project, kemudian nanti supaya bisa akses API key, kita bisa isi dari project yang udah ada baru jalanin edgeone makers dev Expekstasi Agent: Halo! Selamat datang. ๐Ÿ˜Š Saya adalah asisten farmasi di sini, dan saya sangat senang bisa membantu Anda. Ada yang bisa saya bantu hari ini? Apakah Anda sedang mencari informasi mengenai obat tertentu, suplemen, atau mungkin ingin berkonsultasi tentang keluhan kesehatan yang sedang Anda alami? Silakan ceritakan kebutuhan Anda, ya. Saya siap membantu dengan penuh perhatian dan kerahasiaan. Mantap bro! Karena fondasinya udah jalan mulus, sekarang kita masuk ke *core feature* yang udah lu rencanain dari awal: **Sistem Login & Register pakai Blob Storage**. Konsepnya simpel: 1. User **Register** -> Data (username, password, alergi) disimpan ke Blob Storage (`users/.json`). 2. User **Login** -> Server cek password di Blob. Kalau bener, balikin *Session ID*. 3. Frontend simpan *Session ID* ini di `localStorage`. 4. Pas chat sama Agent, kita kirim *Session ID* ini biar Agent bisa baca profil user dari Blob dan ngasih saran yang *personalized* (ingat alergi user!). Kita mulai dari **Step 1: Bikin Sistem Register & Login**. ### 1\. Bikin Function Register Buat folder `auth` di dalam `cloud-functions`, lalu bikin file `cloud-functions/auth/register.ts`: ```tsx import { getStore } from "@edgeone/pages-blob"; import { createHash } from "crypto"; export const onRequestPost = async (context) => { const body = await context.request.json(); const { username, password, allergies } = body; if (!username || !password) { return Response.json({ error: "Username & Password wajib diisi" }, { status: 400 }); } const blob = getStore("users"); // Cek apakah username udah ada const existing = await blob.get(`${username}.json`); if (existing) { return Response.json({ error: "Username udah dipakai, ganti yang lain bro" }, { status: 400 }); } // Hash password (jangan simpan plain text!) const passHash = createHash("sha256").update(password).digest("hex"); // Simpan ke Blob Storage const userProfile = { username, passHash, medicalProfile: { allergies: allergies || "Belum ada data", conditions: [] }, createdAt: Date.now() }; await blob.set(`${username}.json`, JSON.stringify(userProfile)); return Response.json({ success: true, message: "Registrasi berhasil! Silakan login." }); }; ``` ### 2\. Bikin Function Login Bikin file `cloud-functions/auth/login.ts`: ```tsx import { getStore } from "@edgeone/pages-blob"; import { createHash } from "crypto"; export const onRequestPost = async (context) => { const body = await context.request.json(); const { username, password } = body; const blob = getStore("users"); const userFile = await blob.get(`${username}.json`); if (!userFile) { return Response.json({ error: "Username tidak ditemukan" }, { status: 404 }); } const user = JSON.parse(userFile); const passHash = createHash("sha256").update(password).digest("hex"); if (user.passHash !== passHash) { return Response.json({ error: "Password salah!" }, { status: 401 }); } // Kalau sukses, balikin username (nanti ini jadi "session" sederhana) return Response.json({ success: true, username: user.username, allergies: user.medicalProfile.allergies }); }; ``` ### 3\. Update UI di `cloud-functions/index.ts` Sekarang kita ubah UI kita biar ada form login-nya. Ganti isi `cloud-functions/index.ts` dengan kode di bawah ini: ```tsx export const onRequestGet = async (req, context) => { const html = ` PharmaBot - Login & Chat

๐Ÿฉบ PharmaBot

Login / Register

Halo, ! Ada yang bisa dibantu?

Alergi kamu:

Belum ada chat...
`; return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8' } }); }; ``` ### 4\. Bikin Agent-nya Baca Data User dari Blob Terakhir, update `agents/pharma/index.ts` biar dia *aware* sama user yang login: ```tsx import { getStore } from "@tencent/pages-blob"; export const onRequestPost = async (context) => { const request = context.request; const url = new URL(request.url); const message = url.searchParams.get("message") || ""; const username = url.searchParams.get("user") || "Guest"; if (!message) return Response.json({ error: "message required" }, { status: 400 }); // BACA BLOB: Cek profil user yang lagi login let userProfile = { medicalProfile: { allergies: "Tidak diketahui" } }; try { const blob = getStore("users"); const userFile = await blob.get(username + ".json"); if (userFile) userProfile = JSON.parse(userFile); } catch (e) { // Kalau gagal baca blob, lanjut pakai data default } // 1. Ambil History Chat const history = await context.store.getMessages({ conversationId: context.conversation_id, limit: 5 }); // 2. Panggil LLM bawaan Makers const baseUrl = context.env.AI_GATEWAY_BASE_URL || "https://ai-gateway.edgeone.link/v1"; const apiKey = context.env.AI_GATEWAY_API_KEY || ""; // INJECT PROFIL USER KE SYSTEM PROMPT (pakai join, anti syntax error) const systemPrompt = [ "Kamu adalah asisten farmasi profesional dan empatik.", "Kamu sedang berbicara dengan pasien bernama: " + username, "Riwayat Alergi Obat Pasien: " + userProfile.medicalProfile.allergies, "", "Aturan Keras:", "1. JANGAN PERNAH menyarankan obat yang mengandung bahan pemicu alergi pasien.", "2. Jika ada potensi interaksi obat berbahaya, beri peringatan keras.", "3. Jawab singkat, padat, dan jelas." ].join("\n"); const aiResp = await fetch(baseUrl + "/chat/completions", { method: "POST", headers: { "Authorization": "Bearer " + apiKey, "Content-Type": "application/json" }, body: JSON.stringify({ model: "@makers/deepseek-v4-flash", messages: [ { role: "system", content: systemPrompt }, ...context.store.toOpenAIInput(history), { role: "user", content: message } ] }) }); const result = await aiResp.json(); if (result.error || !result.choices) { return Response.json({ error: "LLM Gateway Error", details: result }); } const reply = result.choices?.[0]?.message?.content || "Gagal generate response"; // 3. Simpan ke Memory await context.store.appendMessage({ conversationId: context.conversation_id, role: "user", content: message }); await context.store.appendMessage({ conversationId: context.conversation_id, role: "assistant", content: reply }); return Response.json({ reply }); }; ``` ### Langkah Eksekusi: 1. **Save semua file di atas** (Register, Login, index.ts UI, dan Agent). 2. **Restart dev server** (`Ctrl+C` terus `edgeone makers dev`). 3. Buka `http://localhost:8088`. 4. **Register** dulu (misal: user `budi`, password `123`, alergi `Amoxicillin`). 5. **Login** pakai akun tadi. 6. Tes chat: "Saya lagi pusing banget, obat apa ya yang aman?" **Ekspektasi Hasil:** Agent harusnya ngejawab dengan **sadar** kalau lu alergi Amoxicillin, jadi dia gak bakal asal nyaranin obat sembarangan! Sikat bro, kalau ada *error* pas register/login, atau kalau agent-nya udah mulai pinter ngasih saran medis, kabarin aja! Kita udah nyentuh *core business logic*\-nya nih! ๐Ÿ’Š๐Ÿ”ฅ Siap bro! Sekarang kita **upgrade total** PharmaBot lu biar jadi chat yang beneran interaktif dengan: * โœ… **Chat history yang persisten** (bisa scroll up liat percakapan sebelumnya) * โœ… **Tailwind CSS** buat UI yang kece * โœ… **Conversation ID by EdgeOne** yang proper * โœ… **Tombol "Chat Baru"** buat reset percakapan * โœ… **Logika login/register** yang lebih rapi Mari kita update 4 file sekaligus. Ganti satu-satu ya: ### 1\. Update `cloud-functions/index.ts` โ€” UI Tailwind + Chat History ```tsx export const onRequestGet = async (context) => { const html = ` PharmaBot - AI Farmasi
๐Ÿ’Š

PharmaBot

Asisten Farmasi AI Pribadi

`; return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8' } }); }; ``` ### 2\. Update `cloud-functions/auth/login.ts` โ€” Balikin conversationId ```tsx import { getStore } from "@tencent/pages-blob"; import { createHash } from "crypto"; export const onRequestPost = async (context) => { const body = await context.request.json(); const { username, password } = body; const blob = getStore("users"); const userFile = await blob.get(username + ".json"); if (!userFile) { return Response.json({ error: "Username tidak ditemukan" }, { status: 404 }); } const user = JSON.parse(userFile); const passHash = createHash("sha256").update(password).digest("hex"); if (user.passHash !== passHash) { return Response.json({ error: "Password salah!" }, { status: 401 }); } // Kalau belum punya conversationId, bikin baru if (!user.conversationId) { user.conversationId = "conv-" + username + "-" + Date.now().toString(36); await blob.set(username + ".json", JSON.stringify(user)); } return Response.json({ success: true, username: user.username, allergies: user.medicalProfile.allergies, conversationId: user.conversationId }); }; ``` ### 3\. Update `cloud-functions/auth/register.ts` โ€” Set initial conversationId ```tsx import { getStore } from "@tencent/pages-blob"; import { createHash } from "crypto"; export const onRequestPost = async (context) => { const body = await context.request.json(); const { username, password, allergies } = body; if (!username || !password) { return Response.json({ error: "Username & Password wajib diisi" }, { status: 400 }); } const blob = getStore("users"); const existing = await blob.get(username + ".json"); if (existing) { return Response.json({ error: "Username udah dipakai, ganti yang lain bro" }, { status: 400 }); } const passHash = createHash("sha256").update(password).digest("hex"); const userProfile = { username, passHash, medicalProfile: { allergies: allergies || "Belum ada data", conditions: [] }, conversationId: "conv-" + username + "-" + Date.now().toString(36), createdAt: Date.now() }; await blob.set(username + ".json", JSON.stringify(userProfile)); return Response.json({ success: true, message: "Registrasi berhasil! Silakan login." }); }; ``` ### 4\. Bikin File Baru: `cloud-functions/auth/update-conv.ts` โ€” Update conversationId pas "Chat Baru" ```tsx import { getStore } from "@tencent/pages-blob"; export const onRequestPost = async (context) => { const body = await context.request.json(); const { username, conversationId } = body; const blob = getStore("users"); const userFile = await blob.get(username + ".json"); if (!userFile) return Response.json({ error: "User not found" }, { status: 404 }); const user = JSON.parse(userFile); user.conversationId = conversationId; await blob.set(username + ".json", JSON.stringify(user)); return Response.json({ success: true }); }; ``` ### 5\. Bikin File Baru: `cloud-functions/chat/history.ts` โ€” Endpoint ambil history chat ```tsx export const onRequestGet = async (context) => { // conversation_id otomatis dari header makers-conversation-id const convId = context.conversation_id; if (!convId) return Response.json({ messages: [] }); try { const messages = await context.agent.store.getMessages({ conversationId: convId, limit: 100, order: "asc" }); return Response.json({ messages: messages || [] }); } catch (e) { return Response.json({ messages: [] }); } }; ``` ### 6\. `agents/pharma/index.ts` โ€” Gak perlu diubah! Logikanya udah bener, conversation\_id otomatis ke-route dari header `makers-conversation-id`. * * * ### ๐ŸŽฏ Hasil yang lu dapet: * UI **cantik banget** pakai Tailwind (gradient biru-cyan, rounded corners, shadow) * **Chat history persisten** โ€” refresh page, chat lama masih ada! * **Tombol "Chat Baru"** yang bikin conversation\_id baru dan reset UI * **Typing indicator** pas agent mikir * **Bold text support** (kalau agent pakai `*bold**` otomatis jadi ``) * **Conversation ID by EdgeOne** yang proper di-route ke instance yang sama ### ๐Ÿ“‹ Checklist eksekusi: 1. **Save semua 6 file** di atas (2 file baru: `update-conv.ts` dan `history.ts`) 2. **Restart dev server** (`Ctrl+C` โ†’ `edgeone makers dev`) 3. Buka `http://localhost:8088` 4. Login pakai akun `ratna` yang lama 5. Tes chat, scroll up liat history, klik "Chat Baru", chat lagi โ€” semua harus nyambung! ๐Ÿš€ Kabarin bro kalau ada yang error atau mau sekalian kita **deploy ke production**! ๐ŸŒ