1. บทนำ
ภาพรวม
ใน Codelab นี้ คุณจะได้สร้างผู้ช่วย AI ส่วนตัวที่จะช่วยคุณวิเคราะห์ข้อมูลธุรกิจและทำงานอื่นๆ ผ่าน UI แชท โดยจะใช้บริการ Cloud Run เพื่อโฮสต์ Agent ส่วนตัว
Agent จะใช้แซนด์บ็อกซ์ของ Cloud Run แซนด์บ็อกซ์ของ Cloud Run เป็นสภาพแวดล้อมรันไทม์แบบเนทีฟ ปลอดภัย และรวดเร็วเป็นพิเศษ ซึ่งสร้างขึ้นมาโดยเฉพาะสำหรับการเรียกใช้โค้ดและเวิร์กโหลดของ Agent ที่ไม่น่าเชื่อถือ โดยเริ่มทำงานในระดับมิลลิวินาที แซนด์บ็อกซ์ช่วยให้ Agent AI เขียน เรียกใช้ และทดสอบโค้ดแบบไดนามิกได้ทันทีเพื่อแก้ปัญหาการวิเคราะห์ที่ซับซ้อน
หมายเหตุ: วิธีการทำให้มั่นใจว่าการพัฒนาจะราบรื่นเมื่อเรียกใช้ในเครื่องเทียบกับการเรียกใช้ในเวอร์ชันที่ใช้งานจริง
- ในเวอร์ชันที่ใช้งานจริง (แซนด์บ็อกซ์ของ Cloud Run): Agent จะเรียกใช้โค้ดอย่างปลอดภัยภายในเพลย์กราวด์ที่แยกจากกันและอยู่ในคอนเทนเนอร์ผ่านไบนารีแซนด์บ็อกซ์เฉพาะ (/usr/local/gcp/bin/sandbox)
- ในเครื่อง (เครื่องของคุณ): เมื่อเรียกใช้ในเครื่อง แอปจะตรวจพบว่าไม่มีสภาพแวดล้อมแซนด์บ็อกซ์ของเวอร์ชันที่ใช้งานจริง (IS_LOCAL_MODE = True) Agent จะเรียกใช้สคริปต์ Python และคำสั่งเชลล์โดยตรงในเทอร์มินัลของระบบในเครื่องโฮสต์ในเครื่องของคุณ
สิ่งที่คุณจะได้สร้าง
ในสถานการณ์นี้ คุณจัดการร้านกาแฟในเมืองมหาวิทยาลัยที่กำลังเตรียมตัวสำหรับสุดสัปดาห์ที่มีพิธีรับปริญญาครั้งใหญ่ คุณต้องการให้ Agent ตรวจสอบเพื่อเปรียบเทียบข้อมูล ณ จุดขาย (POS) แบบดิบกับกำหนดการจัดพิธีของมหาวิทยาลัยเพื่อค้นหาคอขวดในการดำเนินงานที่ซ่อนอยู่
Agent ใช้แซนด์บ็อกซ์ที่ปลอดภัยเพื่อเขียนและเรียกใช้สคริปต์ Python โดยวิเคราะห์ความซับซ้อนของเครื่องดื่มเทียบกับจำนวนแคชเชียร์เพื่อแนะนำการปรับพนักงานและการปรับสินค้าคงคลัง
Agent จะส่งการแจ้งเตือนไปยังเจ้าของผ่าน UI แชทจำลองพร้อมคำแนะนำเกี่ยวกับสินค้าคงคลังและพนักงานที่กำหนดเป้าหมาย และจะรอรับสิทธิ์อย่างชัดแจ้งก่อนที่จะอัปเดตสเปรดชีตด้วยสิ่งที่ต้องทำในการดำเนินงานสำหรับผู้จัดการร้านกาแฟ
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้างบริการ Cloud Run
- วิธีติดตั้งใช้งาน Agent ประเภท ADK ในบริการ Cloud Run
- วิธีให้ Agent เรียกใช้โค้ดในแซนด์บ็อกซ์ภายในบริการ Cloud Run
- วิธีสร้าง UI แชทโดยใช้ WebSocket เพื่อโต้ตอบกับ Agent ที่ทำงานอยู่เบื้องหลัง
2. การตั้งค่าและข้อกำหนด
กำหนดค่ารหัสโปรเจ็กต์และภูมิภาค
GOOGLE_CLOUD_PROJECT=<YOUR_PROJECT_ID>
REGION=us-west2
gcloud config set project $GOOGLE_CLOUD_PROJECT
gcloud config set run/region $REGION
ตัวแปรสภาพแวดล้อมที่จะใช้ตลอด Codelab นี้มีดังนี้ คุณสามารถบันทึกตัวแปรเหล่านี้ในไฟล์สภาพแวดล้อมและ "source" ไฟล์ดังกล่าว ตรวจสอบว่าได้ตั้งค่ารหัสโปรเจ็กต์และภูมิภาค (ไม่บังคับ) อย่างถูกต้อง
SA_NAME=coffee-shop-agent-sa
SERVICE_ACCOUNT_ADDRESS=$SA_NAME@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com
เปิดใช้ API ที่จำเป็นสำหรับ Codelab นี้
gcloud services enable --project $GOOGLE_CLOUD_PROJECT \
run.googleapis.com \
cloudbuild.googleapis.com \
artifactregistry.googleapis.com \
sheets.googleapis.com \
aiplatform.googleapis.com
3. สร้างบัญชีบริการและสเปรดชีต
เราขอแนะนำให้สร้างบัญชีบริการเฉพาะสำหรับบริการ Cloud Run เพื่อให้สิทธิ์เฉพาะบทบาทที่จำเป็นเท่านั้น
สร้างบัญชีบริการสำหรับบริการ Cloud Run
gcloud iam service-accounts create $SA_NAME \
--description="Service account for the Coffee Shop Agent Codelab" \
--display-name="Coffee Shop Agent SA"
เนื่องจาก Agent ใช้ Gemini API (GOOGLE_GENAI_USE_VERTEXAI=1) ให้สิทธิ์บัญชีบริการนี้เป็นบทบาทผู้ใช้แพลตฟอร์ม Agent ในโปรเจ็กต์
gcloud projects add-iam-policy-binding $GOOGLE_CLOUD_PROJECT \
--member="serviceAccount:$SERVICE_ACCOUNT_ADDRESS" \
--role="roles/aiplatform.user"
หากต้องการให้คุณเรียกใช้และทดสอบ Agent ในเครื่องโดยใช้บัญชีบริการนี้ ให้สิทธิ์ข้อมูลประจำตัว Google Cloud ส่วนตัวของคุณในการปลอมตัวเป็นบัญชีบริการนี้
gcloud iam service-accounts add-iam-policy-binding \
coffee-shop-agent-sa@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com \
--member="user:$(gcloud config get-value account)" \
--role="roles/iam.serviceAccountTokenCreator"
สร้างสเปรดชีต
สเปรดชีตนี้แสดงยอดขายที่เกิดขึ้นเมื่อปีที่แล้วในช่วงสุดสัปดาห์ที่มีพิธีรับปริญญา
- สร้าง Google ชีตใหม่ใน Google ไดรฟ์
- คัดลอกค่าที่คั่นด้วยคอมมา (CSV) ต่อไปนี้ลงใน Google ชีตใหม่ (เช่น เลือกเซลล์ A1 แล้ววาง)
Day,Time,Drip_Coffee,Cold_Brew,Extra_Espresso,Alt_Milk_Oz,Pastries,Cashiers_Working,Wait_Time_Minutes
Saturday,07:00:00,95,15,5,30,80,2,9
Saturday,08:00:00,80,25,10,35,60,2,7
Saturday,09:00:00,30,30,20,40,20,1,4
Saturday,10:00:00,40,130,95,50,25,2,4
Saturday,11:00:00,25,45,25,40,15,1,5
Saturday,12:00:00,30,35,15,45,20,1,3
Saturday,13:00:00,15,20,10,30,10,1,2
Saturday,14:00:00,45,60,30,65,30,2,8
Saturday,15:00:00,20,30,15,35,15,1,3
Saturday,16:00:00,25,35,10,50,20,1,4
Saturday,17:00:00,10,20,5,35,10,1,2
Saturday,18:00:00,20,40,10,190,65,2,12
Saturday,19:00:00,10,15,5,40,15,1,2
Sunday,07:00:00,90,10,5,35,75,2,8
Sunday,08:00:00,75,20,10,40,65,2,6
Sunday,09:00:00,25,25,15,35,15,1,3
Sunday,10:00:00,60,35,15,60,50,2,7
Sunday,11:00:00,20,30,10,35,10,1,3
Sunday,12:00:00,25,40,10,55,20,1,3
Sunday,13:00:00,15,25,5,40,10,1,2
Sunday,14:00:00,30,50,15,180,60,2,11
Sunday,15:00:00,15,25,10,45,15,1,3
Sunday,16:00:00,20,45,20,40,15,1,4
Sunday,17:00:00,10,25,10,30,10,1,2
Sunday,18:00:00,25,145,110,45,20,2,16
Sunday,19:00:00,15,30,15,35,10,1,4
- เมื่อยังเลือกข้อมูลอยู่ ให้คลิกข้อมูล > แบ่งข้อความเป็นหลายคอลัมน์ ในเมนูด้านบนของ Google ชีต
ตรวจสอบว่าบัญชีบริการมีสิทธิ์ผู้แก้ไขในสเปรดชีต ซึ่งคล้ายกับวิธีที่คุณให้สิทธิ์เข้าถึงแก่เพื่อนร่วมทีม
- คัดลอกอีเมลแบบเต็มของบัญชีบริการใหม่
echo $SERVICE_ACCOUNT_ADDRESS
- จาก Google ชีต ให้คลิกแชร์ที่มุมขวาบน
- วางอีเมลของบัญชีบริการ ตั้งค่าสิทธิ์เป็นผู้แก้ไข แล้วคลิกแชร์ (คุณยกเลิกการเลือก "แจ้งให้ทราบ" ได้)
- บันทึกรหัสสเปรดชีตที่คุณจะส่งไปยัง Agent เช่น https://docs.google.com/spreadsheets/d/<YOUR_SPREADSHEET_ID>/edit?gid=0#gid=0
SPREADSHEET_ID=<THE SPREADHSEET ID FROM ITS URL>
4. สร้าง Agent ประเภท ADK
ขั้นแรก ให้สร้างไดเรกทอรีสำหรับโค้ด
mkdir coffee-mgr-agent && cd coffee-mgr-agent
สร้างไฟล์ requirements.txt
fastapi>=0.100.0
uvicorn>=0.22.0
google-adk>=1.27.1
google-auth
google-api-python-client
สร้าง Dockerfile
FROM python:3.11-slim
ENV PYTHONUNBUFFERED=1
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY main.py .
EXPOSE 8080
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8080"]
สร้างไฟล์ main.py
import os
import asyncio
import subprocess
from pathlib import Path
from typing import List
from fastapi import FastAPI, HTTPException, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse
from pydantic import BaseModel
from google.adk.agents import LlmAgent as Agent
from google.adk.tools import FunctionTool
from google.adk.apps import App
from google.adk import Runner
from google.adk.sessions import InMemorySessionService
from google.genai import types
SANDBOX_CLI = '/usr/local/gcp/bin/sandbox'
IS_LOCAL_MODE = not Path(SANDBOX_CLI).exists()
active_connections: list[WebSocket] = []
SPREADSHEET_ID = os.environ.get("SPREADSHEET_ID")
# And
def run_sandbox_process(args: list[str]):
cmd = args[2:] if IS_LOCAL_MODE and args[:2] == ['do', '--'] else ([SANDBOX_CLI] + args if not IS_LOCAL_MODE else args)
return subprocess.run(cmd, capture_output=True, text=True, timeout=10)
def execute_sandbox_command(command: str) -> str:
"""Executes arbitrary POSIX shell/bash commands inside sandbox."""
mode = "LOCAL" if IS_LOCAL_MODE else "CLOUD RUN SANDBOX"
print(f"[ADK Sandbox Tool] Starting {mode} shell run...")
try:
res = run_sandbox_process(['do', '--', '/bin/sh', '-c', command])
if res.returncode != 0:
return f"Execution Failed!\nExit Code: {res.returncode}\nStdout:\n{res.stdout}\nStderr:\n{res.stderr}"
return res.stdout
except Exception as err:
return f"Internal Sandbox Tool Error: {str(err)}"
def get_sheets_service():
"""Initializes and returns the Google Sheets client service."""
from google.auth import default
from googleapiclient.discovery import build
credentials, _ = default(scopes=[
'https://www.googleapis.com/auth/spreadsheets',
'https://www.googleapis.com/auth/cloud-platform'
])
return build('sheets', 'v4', credentials=credentials)
def read_spreadsheet_values(spreadsheet_id: str, range_name: str) -> str:
"""Reads a range of cells from a Google Spreadsheet."""
try:
service = get_sheets_service()
result = service.spreadsheets().values().get(spreadsheetId=spreadsheet_id, range=range_name).execute()
rows = result.get('values', [])
return str(rows) if rows else "No data found in the specified range."
except Exception as e:
return f"Read Error: {str(e)}"
def update_spreadsheet_values(spreadsheet_id: str, range_name: str, values: List[List[str]]) -> str:
"""Updates a range of cells in a Google Spreadsheet with the provided values."""
try:
service = get_sheets_service()
result = service.spreadsheets().values().update(
spreadsheetId=spreadsheet_id, range=range_name,
valueInputOption="USER_ENTERED", body={'values': values}).execute()
return f"Successfully updated {result.get('updatedCells')} cells in {range_name}."
except Exception as e:
return f"Write Error: {str(e)}"
def create_spreadsheet_tab(spreadsheet_id: str, tab_name: str) -> str:
"""Creates a new sheet tab in a Google Spreadsheet if it doesn't already exist."""
try:
service = get_sheets_service()
# Check if tab exists
spreadsheet = service.spreadsheets().get(spreadsheetId=spreadsheet_id).execute()
for sheet in spreadsheet.get('sheets', []):
if sheet.get('properties', {}).get('title') == tab_name:
return f"Sheet tab '{tab_name}' already exists."
# Create tab
body = {'requests': [{'addSheet': {'properties': {'title': tab_name}}}]}
service.spreadsheets().batchUpdate(spreadsheetId=spreadsheet_id, body=body).execute()
return f"Successfully created new sheet tab '{tab_name}'."
except Exception as e:
return f"Error creating sheet tab: {str(e)}"
# ==========================================
# 3. ADK AGENT & RUNNER SETUP
# ==========================================
root_agent = Agent(
name='secure_coding_assistant',
description='ADK agent capable of executing shell commands and managing Google Spreadsheets.',
model=os.environ.get('GEMINI_MODEL', 'gemini-3.1-flash-lite'),
instruction=(
f'You are an expert AI Business Analyst for a coffee shop during university graduation weekend.\n'
f'The Google Spreadsheet ID you are managing is: "{SPREADSHEET_ID}". Use this ID for all sheet operations.\n'
'1. Comparative Analysis Policy:\n'
f' - Ingest historical POS data from the "POS-2025" sheet tab using read_spreadsheet_values with spreadsheet_id="{SPREADSHEET_ID}".\n'
' - Receive the current graduation schedule directly from the manager\'s prompt (the manager will paste it and indicate it is the same schedule sequence as last year).\n'
' - Write a python3 script via the sandbox tool to:\n'
' a. Correlate the 2025 product spikes (Cold Brew, Alt Milk, Extra Espresso) with the specific ceremonies ending at those times.\n'
' b. Map those beverage profiles to the pasted schedule (which is the same sequence) to predict exactly when and where the 2026 spikes will occur.\n'
' c. Identify expected wait-time bottlenecks in 2026 based on the 2025 wait times for those same profiles.\n'
'2. Bottleneck Diagnostics (Playbook):\n'
' - If a predicted high-volume slot in 2026 is expected to have Wait_Time_Minutes > 10:\n'
' - If Cashiers_Working < 2: Recommend scheduling another cashier.\n'
' - If Cashiers_Working == 2 and complex items (Cold Brew, Extra Espresso, Alt Milk) spike: Deduce that the bottleneck is barista output, not cashiers. Recommend adding a "Support Barista" role to handle fulfillment.\n'
'3. Human-in-the-Loop Policy:\n'
' - Present your detailed data discoveries, wait-time bottlenecks, and actionable recommendations (stocking and staffing changes) to the manager.\n'
' - Highlight only two or three findings for specific ceremonies.\n'
' - Frame your recommendations as a clean list of suggested tasks for the manager\'s TODO list.\n'
' - Explicitly ask: "Would you like me to add these tasks to your \'TODO-2026\' TODO list?"\n'
' - Do NOT modify any spreadsheet data until explicit approval is given.\n'
'4. Post-Approval Policy:\n'
f' - Upon receiving explicit user approval, first verify if the "TODO-2026" sheet tab exists in spreadsheet "{SPREADSHEET_ID}".\n'
f' - If the "TODO-2026" sheet tab does not exist, use the tool create_spreadsheet_tab to create it in spreadsheet "{SPREADSHEET_ID}".\n'
f' - Once the tab exists, use update_spreadsheet_values to append the approved adjustments as tasks to the "TODO-2026" sheet tab.\n'
' - Write the rows under the headers: Task (the actionable job, e.g., "Schedule a Support Barista role for Saturday morning"), Category ("Staffing" or "Inventory"), Ceremony, and Date_Added (today\'s date).\n'
' - Always confirm to the user exactly what tasks you have written to their "TODO-2026" TODO list.'
),
tools=[
FunctionTool(func=execute_sandbox_command),
FunctionTool(func=read_spreadsheet_values),
FunctionTool(func=update_spreadsheet_values),
FunctionTool(func=create_spreadsheet_tab)
]
)
adk_app = App(name="secure_sandbox_app", root_agent=root_agent)
runner = Runner(app=adk_app, session_service=InMemorySessionService(), auto_create_session=True)
app = FastAPI(title="Secure ADK Sandbox Assistant")
# ==========================================
# 4. ENDPOINTS & WEBSOCKET ROUTING
# ==========================================
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept()
active_connections.append(websocket)
await websocket.send_text("🔌 System: Connected. Agent is ready...")
try:
while True:
owner_reply = await websocket.receive_text()
print(f"Owner replied via WS: {owner_reply}")
await websocket.send_text("_Agent is running tools and thinking..._")
new_message = types.Content(parts=[types.Part(text=owner_reply)])
events = await asyncio.to_thread(
runner.run,
user_id="local_user",
session_id="local_session",
new_message=new_message
)
final_response = "".join(
part.text
for event in events
if event.content and event.content.parts
for part in event.content.parts
if part.text
) or "Agent completed execution updates without text output."
await websocket.send_text(final_response.strip())
except WebSocketDisconnect:
active_connections.remove(websocket)
class UserPrompt(BaseModel):
prompt: str
@app.post("/chat")
def chat_with_agent(payload: UserPrompt):
"""Fallback HTTP POST endpoint if UI is not used."""
try:
events = runner.run(
user_id="local_user",
session_id="local_session",
new_message=types.Content(parts=[types.Part(text=payload.prompt)])
)
final_response = "".join(
part.text
for event in events
if event.content and event.content.parts
for part in event.content.parts
if part.text
)
return {"status": "success", "response": final_response.strip()}
except Exception as e:
raise HTTPException(status_code=500, detail=f"Agent loop failed: {str(e)}")
@app.get("/", response_class=HTMLResponse)
async def get_chat_ui():
"""Serves the warm coffee-themed chat interface."""
return """
<!DOCTYPE html>
<html>
<head>
<title>Coffee Shop Agent</title>
<!-- Load marked.js for client-side markdown rendering -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
body { display: flex; height: 100vh; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#sidebar { width: 250px; background: #3E2723; color: #EFEBE9; padding: 20px; }
#sidebar h2 { font-size: 1.3em; margin-top: 10px; color: #FFF; border-bottom: 1px solid #5D4037; padding-bottom: 10px; }
#main { flex-grow: 1; display: flex; flex-direction: column; background: #FAF8F6; }
#chat-history { flex-grow: 1; padding: 20px; overflow-y: auto; background: #F5EFEB; }
#input-area { padding: 20px; border-top: 1px solid #D7CCC8; background: #FAF8F6; display: flex;}
input {
flex-grow: 1;
padding: 12px;
border-radius: 6px;
border: 1px solid #D7CCC8;
margin-right: 10px;
font-size: 1em;
background: #FFF;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus {
outline: none;
border-color: #8D6E63;
box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.25);
}
button {
padding: 10px 24px;
background: #6D4C41;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
font-size: 1em;
transition: background-color 0.2s, transform 0.1s;
}
button:hover {
background: #5D4037;
}
button:active {
background: #4E342E;
transform: scale(0.98);
}
.message { margin-bottom: 15px; padding: 12px 16px; border-radius: 8px; max-width: 85%; line-height: 1.5; }
.user-msg { background: #EFEBE9; color: #3E2723; align-self: flex-end; margin-left: auto; border: 1px solid #D7CCC8;}
.agent-msg { background: #fff; color: #3E2723; border: 1px solid #E0DCD8; box-shadow: 0 1px 3px rgba(62,39,35,0.06); }
.msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.agent-name { font-weight: bold; color: #5D4037; margin: 0; font-size: 0.95em;}
.user-name { font-weight: bold; color: #8D6E63; margin: 0; font-size: 0.95em;}
.msg-timestamp { font-size: 0.8em; color: #8D6E63; font-weight: normal; }
.day-divider {
display: flex;
align-items: center;
text-align: center;
color: #8D6E63;
margin: 20px 0;
font-size: 0.85em;
font-weight: bold;
}
.day-divider::before, .day-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #D7CCC8;
}
.day-divider:not(:empty)::before {
margin-right: .5em;
}
.day-divider:not(:empty)::after {
margin-left: .5em;
}
/* Markdown Styling inside Messages */
.message p { margin: 4px 0 8px 0; }
.message p:last-child { margin-bottom: 0; }
.message ul, .message ol { margin: 4px 0 8px 0; padding-left: 20px; }
.message li { margin-bottom: 3px; }
.message h1, .message h2, .message h3, .message h4 { margin: 12px 0 6px 0; font-size: 1.15em; color: #3E2723; font-weight: bold; }
.message h1:first-child, .message h2:first-child, .message h3:first-child { margin-top: 0; }
/* Table Styling */
.message table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 0.95em; }
.message th, .message td { border: 1px solid #D7CCC8; padding: 8px 10px; text-align: left; }
.message th { background-color: #F5EFEB; font-weight: bold; color: #3E2723; }
.message tr:nth-child(even) { background-color: #FAF8F6; }
/* Code / Blockquote styling */
.message code { background: #EFEBE9; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em; color: #5D4037; }
.message pre { background: #F5EFEB; padding: 10px; border-radius: 5px; overflow-x: auto; margin: 8px 0; border: 1px solid #D7CCC8; }
.message pre code { background: none; padding: 0; }
.message blockquote { margin: 8px 0; padding-left: 12px; border-left: 4px solid #6D4C41; color: #5D4037; }
</style>
</head>
<body>
<div id="sidebar">
<h2>☕ Coffee Shop Monitor</h2>
<p>Monitoring sheet...</p>
</div>
<div id="main">
<div id="chat-history"></div>
<div id="input-area">
<input type="text" id="msg" placeholder="Message Coffee Shop Monitor..." onkeypress="if(event.key === 'Enter') sendMessage()">
<button onclick="sendMessage()">Send</button>
</div>
</div>
<script>
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
const history = document.getElementById('chat-history');
// Scroll to the bottom on load to show latest messages
history.scrollTop = history.scrollHeight;
ws.onmessage = function(event) {
// Parse markdown content from the agent
const parsedHtml = marked.parse(event.data);
const timeStr = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
history.innerHTML += `
<div class="message agent-msg">
<div class="msg-header">
<span class="agent-name">Inventory Agent APP</span>
<span class="msg-timestamp">${timeStr}</span>
</div>
<div>${parsedHtml}</div>
</div>`;
history.scrollTop = history.scrollHeight;
};
function sendMessage() {
const input = document.getElementById('msg');
const text = input.value;
if (!text) return;
// Parse user markdown if any (optional, but keeps styling consistent)
const parsedHtml = marked.parse(text);
const timeStr = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
history.innerHTML += `
<div class="message user-msg">
<div class="msg-header">
<span class="user-name">You</span>
<span class="msg-timestamp">${timeStr}</span>
</div>
<div>${parsedHtml}</div>
</div>`;
ws.send(text);
input.value = '';
history.scrollTop = history.scrollHeight;
}
</script>
</body>
</html>
"""
if __name__ == "__main__":
import uvicorn
port_val = int(os.environ.get('PORT', 8080))
uvicorn.run(app, host='0.0.0.0', port=port_val)
5. ติดตั้งใช้งานบริการ Cloud Run
แทนที่จะสร้างอิมเมจ คุณจะใช้ Buildpack ของ Google Cloud เพื่อแปลงซอร์สโค้ดของแอปพลิเคชันเป็นอิมเมจคอนเทนเนอร์ที่พร้อมใช้งานจริงสำหรับ Cloud Run
gcloud beta run deploy coffee-mgr-agent \
--source=. \
--region=$REGION \
--sandbox-launcher \
--max-instances=1 \
--session-affinity \
--allow-unauthenticated \
--no-cpu-throttling \
--set-env-vars GOOGLE_GENAI_USE_VERTEXAI=1,GOOGLE_CLOUD_PROJECT=$GOOGLE_CLOUD_PROJECT,GOOGLE_CLOUD_LOCATION=global,SPREADSHEET_ID=$SPREADSHEET_ID \
--service-account $SERVICE_ACCOUNT_ADDRESS
6. แชทกับ Agent
หลังจากการติดตั้งใช้งาน คุณจะเห็น URL: https://coffee-mgr-agent-YOUR_PROJECT_ID.YOUR_REGION.run.app
เปิด URL นี้ในเบราว์เซอร์
ส่งพรอมต์ต่อไปนี้ไปยัง Agent
The 2026 graduation schedule was just posted. It's the same schedule as last year. Can you review last year's POS data to help me prepare for this year?
Saturday, June 13:
College of Business (8:30 a.m.)
College of Science and Mathematics (12:30 p.m.)
College of Liberal Arts (4:30 p.m.)
Sunday, June 14:
College of Agriculture (8:30 a.m.)
College of Architecture (12:30 p.m.)
College of Engineering (4:30 p.m.)
Agent ควรตอบกลับด้วยคำแนะนำที่คล้ายกับคำแนะนำต่อไปนี้
Based on the 2025 POS data, I have correlated graduation ceremony patterns with beverage demand spikes. Last year, the post-ceremony windows consistently experienced high demand for complex items (Cold Brew, Extra Espresso, and Alt Milk). Key Data Discoveries for 2026 - College of Business (Saturday 8:30 a.m. ceremony): - Significant demand spike observed at 10:00 a.m. Saturday. - Data: 130 Cold Brews and 95 Extra Espresso shots. This is a primary bottleneck for barista output. - College of Engineering (Sunday 4:30 p.m. ceremony): - Significant demand spike observed at 6:00 p.m. Sunday. - Data: 145 Cold Brews and 110 Extra Espresso shots. This is the highest intensity period of the weekend. - Alt-Milk Surge (Saturday/Sunday 2:00 p.m. post-ceremonies): - Consistent, high-volume Alt Milk consumption (65-180 oz) after the 12:30 p.m. ceremonies. Diagnostic & Staffing Recommendations Given that these complex beverage items (Cold Brew, Extra Espresso) correlate directly with your high-traffic post-ceremony windows, the risk of hitting wait times > 10 minutes is high. Assuming you typically have 2 cashiers, my diagnostic is that these are barista output bottlenecks, not cashier bottlenecks. Suggested Tasks for your TODO-2026 List: 1. Staffing: Schedule a dedicated "Support Barista" for Saturday 9:30 a.m. – 11:00 a.m. to handle the Cold Brew/Espresso rush. 2. Staffing: Schedule a dedicated "Support Barista" for Sunday 5:30 p.m. – 7:00 p.m. to manage the high volume after the Engineering ceremony. 3. Inventory: Pre-stage extra Alt Milk cartons at the mobile station for Saturday 1:30 p.m. and Sunday 1:30 p.m. shifts. Would you like me to add these tasks to your 'TODO-2026' TODO list?
จากนั้น Agent จะขอสิทธิ์จากคุณ (Human-in-the-Loop) ในการสร้าง/อัปเดตชีตแท็บสิ่งที่ต้องทำ-2026
ตอบกลับ Agent ด้วย Yes
ตอนนี้เมื่อดูชีตแท็บสิ่งที่ต้องทำ-2026 คุณจะเห็นข้อมูลที่คล้ายกับข้อมูลต่อไปนี้
Task Category Ceremony Date_Added Schedule a Support Barista role for Saturday morning rush Staffing College of Business 2025-05-22 Schedule a Support Barista role for Sunday evening rush Staffing College of Engineering 2025-05-22 Pre-stage extra Alt Milk cartons at mobile station Inventory College of Science/Math & Architecture 2025-05-22
7. ยินดีด้วย
ขอแสดงความยินดีที่ทำ Codelab นี้เสร็จสมบูรณ์
เราขอแนะนำให้ดูเอกสารประกอบของ Cloud Run, เอกสารประกอบของ แซนด์บ็อกซ์ของ Cloud Run และ เอกสารประกอบของ ADK
สิ่งที่เราได้กล่าวถึง
- วิธีสร้างบริการ Cloud Run
- วิธีติดตั้งใช้งาน Agent ประเภท ADK ในบริการ Cloud Run
- วิธีให้ Agent เรียกใช้โค้ดในแซนด์บ็อกซ์ภายในบริการ Cloud Run
8. ล้างข้อมูล
หากต้องการหลีกเลี่ยงการเรียกเก็บเงินจากบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในบทแนะนำนี้ คุณสามารถลบโปรเจ็กต์หรือลบทรัพยากรแต่ละรายการก็ได้
ตัวเลือกที่ 1: ลบทรัพยากร
ภาพรวมโดยย่อของขั้นตอนในการล้างข้อมูลโปรเจ็กต์และหลีกเลี่ยงการเรียกเก็บเงินที่ไม่จำเป็นมีดังนี้
ลบบริการ Cloud Run
gcloud run services delete coffee-mgr-agent --region $REGION
ลบบัญชีบริการ: นำบัญชีบริการสเปรดชีตเฉพาะออก
gcloud iam service-accounts delete $SERVICE_ACCOUNT_ADDRESS
ตัวเลือกที่ 2: ลบโปรเจ็กต์
หากต้องการลบโปรเจ็กต์ทั้งหมด ให้ไปที่ จัดการทรัพยากร เลือกโปรเจ็กต์ที่คุณสร้างขึ้นในขั้นตอนที่ 2 แล้วเลือกลบ หากลบโปรเจ็กต์ คุณจะต้องเปลี่ยนโปรเจ็กต์ใน Cloud SDK คุณสามารถดูรายการโปรเจ็กต์ทั้งหมดที่พร้อมใช้งานได้โดยเรียกใช้ gcloud projects list หากต้องการใช้บรรทัดคำสั่งต่อไป คุณสามารถใช้คำสั่งนี้ได้ด้วย
gcloud projects delete ${GOOGLE_CLOUD_PROJECT}