Workshop · Medical Laboratory × AI

AI-Assisted Web App Development for Medical Laboratory

สร้าง Web App สำหรับงานห้องปฏิบัติการ
ด้วย Google Sheets + Google Apps Script + AI Coding Agent

Claude Code / Codex + Visual Studio Code

Google SheetsDatabase

Google Apps ScriptBackend / Automation

AI Coding AgentClaude Code / Codex

Visual Studio CodeDevelopment Workspace

Web Appfor Medical Laboratory

ทนพ.พีรภัทร ภักตะภา

นักเทคนิคการแพทย์ชำนาญการ
กลุ่มงานเทคนิคการแพทย์และพยาธิวิทยาคลินิก
โรงพยาบาลอำนาจเจริญ

Laboratoryงานห้องปฏิบัติการ

Dataข้อมูล

AIปัญญาประดิษฐ์

Web Appระบบใช้งานจริง

Innovationเพื่อสุขภาพที่ดีกว่า

Part 1 · Mindset

วันนี้เราไม่ได้มาเรียน Programming

ไม่ใช่เป้าหมายของวันนี้

~~จำ JavaScript~~
~~จำ Syntax~~
~~เขียน Code ทุกบรรทัดเอง~~
~~ต้องเป็น Programmer ก่อน~~

เป้าหมายของวันนี้

รู้ว่าจะใช้ AI
เปลี่ยนปัญหาหน้างาน
ให้กลายเป็น Web Application
ได้อย่างไร

Workflow ที่อยากให้จำ

Problemปัญหาจากหน้างาน

Requirementความต้องการของระบบ

Promptสื่อสารกับ AI

AIช่วยสร้าง

Web Appระบบที่ใช้งานได้

Testทดสอบการใช้งาน

Improveปรับปรุงให้ดีขึ้น

Deployนำไปใช้งานจริง

Part 1 · Mindset

Lab มีปัญหาที่พร้อมถูกเปลี่ยนเป็น App

ปัญหาที่พบในห้องปฏิบัติการทุกวัน

สต็อกน้ำยาปริมาณคงเหลือไม่ชัดเจน

วันหมดอายุเสี่ยงใช้ของหมดอายุ

คลังเลือดตรวจสอบยาก เลือดขาด/เกิน

Calibrationติดตามรอบการสอบเทียบ

Maintenanceแจ้งซ่อมและติดตามสถานะยาก

Incident Reportบันทึกและติดตามไม่เป็นระบบ

TATไม่ทราบสถานะ ล่าช้า

Quality Controlบันทึกผล QC และวิเคราะห์แนวโน้มยาก

เอกสาร ISO 15189จัดเก็บและค้นหายาก

ตารางเวร / วันลาจัดตารางยาก เปลี่ยนแปลงบ่อย

การติดตามสิ่งส่งตรวจไม่ทราบสถานะของสิ่งส่งตรวจ

…และอีกมาก
ในงานประจำวัน

ปัญหาอื่น ๆ ที่เกิดขึ้น

Excel หลายไฟล์ข้อมูลกระจัดกระจาย เวอร์ชันไม่ตรงกัน

กระดาษเอกสารจำนวนมาก เสี่ยงสูญหาย

ข้อมูลซ้ำกรอกหลายครั้ง เกิดความผิดพลาด

ค้นย้อนหลังยากใช้เวลานาน ไม่สะดวก

ตามงานผ่าน LINEข้อมูลกระจาย ติดตามยาก

รายงานซ้ำทุกเดือนเสียเวลา สิ้นเปลืองทรัพยากร

เมื่อเปลี่ยนเป็น Digital Workflow

Web AppFrom Problems to Better Solutions

ลดงานซ้ำ
จัดการข้อมูลได้ในที่เดียว
ทำงานได้อย่างมีประสิทธิภาพ
ยกระดับคุณภาพ
ห้องปฏิบัติการ

งานอะไรที่เราทำซ้ำ ๆ และสามารถเปลี่ยนเป็น Digital Workflow ได้?

Part 1 · Mindset

AI เปลี่ยนวิธีสร้าง Software

Traditional Development

1มี Idea
2หา Programmer
3เขียน Requirement
4รอพัฒนา
5เขียน Code
6แก้ Code
7Testing
8ได้ระบบ

AI-Assisted Development

1มี Idea
2อธิบายปัญหาให้ AI
3AI วิเคราะห์
4AI เสนอ Architecture
5AI สร้าง Code
6เราตรวจสอบ
7ปรับ Prompt
8ได้ Prototype

Key Message

เราไม่จำเป็นต้องเป็น
Programmer เต็มตัว

แต่ต้องเป็น

เจ้าของปัญหา
ที่อธิบายปัญหา
ได้ชัดเจน

Part 1 · Mindset

Project ตัวอย่าง — Lab Reagent Inventory Web App

ระบบบริหารคลังน้ำยาและวัสดุห้องปฏิบัติการ

Lab Reagent Inventory · Web App Lab User (Demo)

Dashboard Search reagents, lot number…

Total Reagents1,248

Low Stock28

Expiring Soon56

Expired12

Recent Alerts

Reagent	Lot Number	Expiry Date	Status
Reagent A	LOT-A102	2027-03-15	Low Stock
Reagent B	LOT-B215	2026-11-02	Expiring Soon
Reagent C	LOT-C330	2026-08-01	Expired
Reagent D	LOT-D418	2027-06-30	Low Stock

Stock Status

Total

Low Stock
Expiring Soon
Expired

Features

เพิ่มรายการน้ำยา

Lot Number

Expiry Date

จำนวนคงเหลือ

Minimum Stock

ตำแหน่งจัดเก็บ

ค้นหา

แก้ไขข้อมูล

Stock Alert

Expiry Alert

Dashboard

Part 2 · Architecture

ระบบ Web App ของเราประกอบด้วยอะไร?

ผู้ใช้งานMedical Technologist

User

Web BrowserHTML+CSS+JavaScript

Frontend

Google Apps ScriptBackend / Business Logic

Backend

Google SheetsDatabase

Database

Code

AI Coding Layer

Claude Code/Codex

อ่าน Project

สร้างและแก้ไข Code

VS CodeWorkspace สำหรับ Files ทั้งหมด

User→ Frontend→ Backend→ Database

AI Coding Agent ช่วยเราสร้างและดูแล Code

Part 2 · Architecture

Google Sheets = Database

คลิกการ์ดด้านล่างเพื่อดูในตาราง

Lab_Reagent_Database FileEditViewInsertData

F3fx2026-11-02

	A	B	C	D	E	F	G	H	I
1	ID	ItemCode	ItemName	Category	LotNumber	ExpiryDate	Quantity	MinimumStock	Location
2	1	RG-001	Reagent A	Chemistry	LOT-A102	2027-03-15	24	10	Fridge-01
3	2	RG-002	Reagent B	Hematology	LOT-B215	2026-11-02	8	12	Fridge-02
4	3	RG-003	Reagent C	Immunology	LOT-C330	2027-01-20	40	15	Shelf-B2
5	4	RG-004	Control D	QC	LOT-D418	2026-12-31	6	5	Fridge-01
6
7
8

Reagents+

1 Row = 1 Record

แถวสีเขียวในตาราง

1 Column = 1 Variable

คอลัมน์สีฟ้าในตาราง

ข้อมูลที่มีโครงสร้างดี
คือรากฐานของ Web App ที่ดี

Part 2 · Architecture

Google Apps Script = Backend

Google Apps
Script Backend

รับข้อมูลจาก Web

อ่าน Google Sheet

เพิ่มข้อมูล

แก้ไขข้อมูล

ค้นข้อมูล

คำนวณ

ตรวจสอบข้อมูล

ส่งข้อมูลกลับ Frontend

Deploy เป็น Web Application

ตัวอย่าง Code

Code.gs

1
2
3

function doGet() { ... }

function saveData() { ... }

ไม่จำเป็นต้องมี
Server ของตัวเอง

ลำดับการรับส่งข้อมูล

Frontend GAS Google Sheets GAS Frontend

Part 2 · Architecture

VS Code = Workspace ของเรา

คลิกรายการเพื่อไฮไลต์บนหน้าจอ

Explorerจัดการ Files

Editorเขียนและแก้ Code

Terminalเปิด Terminal และพิมพ์ Command

Extensionsติดตั้ง Extensions

AI Panelใช้ Claude Code / Codex

Git / Version Control

Lab-Reagent-App — Visual Studio Code

6 4

EXPLORER

LAB-REAGENT-APP

Code.gs

Database.gs

Utils.gs

Index.html

CSS.html

JavaScript.html

Code.gsIndex.html

function doGet() {
  return HtmlService
    .createHtmlOutputFromFile('Index');
}

function saveData(data) {
  const sheet = getSheet_();
  sheet.appendRow(data);
}

PROBLEMSOUTPUTTERMINAL

PS C:\Lab-Reagent-App>

Claude Code/Codex

main0 ↓ 0 ↑

Google Sheets= Database

GAS= Engine

VS Code= โต๊ะทำงาน

AI= Coding Partner

Part 3 · Setup

Step 1 — ติดตั้ง Visual Studio Code

1 เข้าเว็บไซต์
Visual Studio Code

2 Download for Windows

3 เลือก User Setup

4 Install

5 Launch
Visual Studio Code

คำแนะนำ

สำหรับผู้ใช้ทั่วไป:

User Setup ใช้งานง่าย
ไม่จำเป็นต้องใช้ Administrator

Checklist หลังติดตั้ง

คลิกเพื่อติ๊ก

VS Code เปิดได้

เห็น Welcome Screen

สามารถเปิด Extensions ได้

สามารถเปิด Terminal ได้

Part 3 · Setup

ทำความรู้จักหน้าตาของ VS Code

คลิกหมายเลขเพื่อไฮไลต์บนหน้าจอ

Lab-Reagent-App — Visual Studio Code

1 5

EXPLORER

LAB-REAGENT-APP

Code.gs

Database.gs

Utils.gs

Index.html

CSS.html

JavaScript.html

EXTENSIONS

Search Extensions

Claude CodeInstall

CodexInstall

Code.gsIndex.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body> ... </body>
</html>

PROBLEMSOUTPUTTERMINAL

PS C:\Lab-Reagent-App>

mainLn 4, Col 22HTML

Activity Barเมนูหลักด้านซ้าย

ExplorerFiles ใน Project

Editorพื้นที่เปิดและแก้ Code

Terminalพิมพ์ Command

Extensionsติดตั้งเครื่องมือเสริม

ไม่จำเป็นต้องจำทุกเมนู — รู้เฉพาะส่วนที่ใช้ก่อน

Part 3 · Setup

Step 2 — ติดตั้ง Node.js

Download Node.js LTS

Install

Restart VS Code

Open Terminal

Check Version

TERMINALpowershell

# คำสั่งตรวจ Version

PS> node --version

vXX.X.Xตัวอย่างผลลัพธ์

PS> npm --version

XX.X.Xตัวอย่างผลลัพธ์

คำอธิบาย

Node.js

npm

clasp

+ อื่น ๆ

Node.js ทำให้เราใช้ npm ได้
npm ใช้ติดตั้ง clasp
และเครื่องมือพัฒนาอื่น ๆ

Part 3 · Setup

AI Coding Agent คืออะไร?

ความสามารถ

อ่านหลายไฟล์
ใน Project

เข้าใจโครงสร้าง
Code

สร้าง File ใหม่

แก้ File เดิม

รัน Command

วิเคราะห์ Error

ช่วย Refactor
และ Debug

ตัวอย่างเครื่องมือ

Claude Code Codex

Chatbot

ถาม

ตอบ

Coding Agent

อ่าน Project

วางแผน

แก้ Files

ตรวจสอบ

Part 3 · Setup

Option A — ติดตั้ง Claude Code

1เปิด VS Code
2กด Extensions
3หรือ Ctrl+Shift+X
4ค้นหา Claude Code
5ตรวจสอบ Publisher
6กด Install
7เปิด Claude Code Panel

EXTENSIONS: MARKETPLACE

Claude Code

Claude Code Anthropicverified publisher5

Install6

ตรวจสอบ Publisher ก่อนกด Install

Claude Code สามารถ

อ่าน Workspace วางแผน แก้ Files และแสดง Diff ได้

Code.gs
function saveData(data) {
-  sheet.appendRow(data);
+  validate_(data);
+  sheet.appendRow(data);
}

Part 3 · Setup

Claude Code — Sign in และเริ่มใช้งาน

Install Extension

Open Claude Code

Sign in

Browser Authentication

Return to VS Code

Ready

Claude Code

Lab-Reagent-AppCode.gsIndex.html

ตัวอย่าง Prompt

Read this project and explain the architecture.

Checklist

คลิกเพื่อติ๊ก

AI Panel ใช้งานได้

มองเห็น Workspace

สามารถอ้างอิง Files ได้

สำหรับ Workshop:

เริ่มต้นจาก VS Code Extension ได้เลย

Part 3 · Setup

Option B — ติดตั้ง Codex

เปิด Extensions

ค้นหา Codex

ตรวจสอบ Publisher

Install

Sign in

เปิด Codex Panel

เปิด Project Folder

Lab-Reagent-App — Visual Studio Code

EXPLORER

LAB-REAGENT-APP

Code.gs

Database.gs

Utils.gs

Index.html

CSS.html

Code.gs

Codex

Context

Workspace Code.gs

คำอธิบาย

Codex สามารถใช้ Context
จาก Workspace และ Files
ที่กำลังเปิดอยู่

Workspace Files

Codex

Part 3 · Setup

Claude Code หรือ Codex — ต้องใช้ทั้งสองหรือไม่?

Claude Code

by Anthropic

ความสามารถพื้นฐานร่วมกัน

อ่าน
Files

Plan

แก้
Code

Review

Test

ข้อความหลัก

ไม่จำเป็นต้องใช้
ทั้งสองพร้อมกัน

Codex

by OpenAI

ความสามารถพื้นฐานร่วมกัน

อ่าน
Files

Plan

แก้
Code

Review

Test

Shared Workflow คลิกความสามารถ เพื่อดูตำแหน่งใน Workflow

Open Project

AI อ่าน Files

Prompt

Plan

AI แก้ Code

Review

Test

เลือก 1 ตัวให้คล่องก่อน

แล้วค่อยทดลองตัวอื่น

Part 4 · Models & Safety

Claude Code — เลือก Model อย่างไร?

ชื่อและรุ่น Model
อาจเปลี่ยนตามช่วงเวลาและบัญชี

Haiku

เร็ว — งานง่าย

จุดเริ่มต้นใน Workshop

Sonnet

สมดุล — Daily Coding

Recommended Starting Point
for Workshop

Opus

Reasoning สูง — งานซับซ้อน

แนวคิดการเลือก คลิกการ์ด เพื่อจับคู่งานกับ Model

Simple taskFast Model

Normal codingBalanced Model

Complex architectureReasoning Model

Part 4 · Models & Safety

Codex — เลือก Model อย่างไร?

Codex

Select Model

Default / Recommended

Fast

Balanced

High Reasoning

แนวทางเริ่มต้น

เริ่มจาก Model ที่ระบบแนะนำ

แล้วปรับตาม Complexity ของงาน

ตัวอย่างงาน คลิกงาน เพื่อเลือก Model

Rename ButtonFast

Add Search / FilterBalanced

Refactor Entire ProjectHigh Reasoning

Model ที่แสดงอาจแตกต่างตาม Plan และช่วงเวลา

Part 4 · Models & Safety

Model เก่งที่สุด ไม่จำเป็นสำหรับทุกงาน

คลิกชั้น หรือ งาน เพื่อดู Model ที่เหมาะ

งานง่าย

งานปานกลาง

งานซับซ้อน

ออกแบบ Architecture
Refactor ทั้งระบบ
Debug หลาย Files

High Reasoning
Model

เพิ่ม Search
เพิ่ม Filter
เพิ่ม Dashboard

Balanced Model

เปลี่ยนชื่อปุ่ม
ปรับสี
แก้ข้อความ

Fast Model

Right Model for the Right Task

Part 4 · Models & Safety

Permission Mode — ให้ AI ทำได้แค่ไหน?

คลิกโหมด เพื่อดูว่า AI ทำอะไรได้

PLAN

AI อ่านและเสนอแผน

ไม่แก้ Code

MANUAL

AI ขออนุญาตก่อนแก้

AUTO

AI แก้ไขได้มากขึ้น
ตามสิทธิที่กำหนด

มือใหม่:

เริ่มจาก PLAN
หรือ MANUAL

ลำดับการทำงาน

AI Suggest

Human Review

Approve

Edit

Human-in-the-loop

Part 4 · Models & Safety

AI ทำ — แต่เราต้อง Review

ตัวอย่างความเสี่ยง

Code ผิด
Logic ผิด
ลบ Function เดิม
Security Issue
Requirement ผิด

AI Generated

≠Correct

AI Suggest

Review

Understand

Accept

Test

AI Suggest Again

Human Responsibilities

ตรวจ Diff
ทดสอบ
ตรวจข้อมูล
ตรวจ Workflow
Backup

Part 5 · Project Setup

สร้าง Project Folder ให้เป็นระเบียบ

Bad Naming

Name

New Folder

New Folder 2

Test123

final-final2

final-real-final

ตัวอย่างโครงสร้าง

Name

Documents

└── LabProjects

└── lab-reagent-inventory

ชื่อที่แนะนำในตัวอย่าง lab-reagent-inventory

1 Project = 1 Folder

ตั้งชื่อให้อ่านแล้วรู้ทันทีว่าเป็นระบบอะไร

Part 5 · Project Setup

นำ Folder เข้า VS Code Workspace

1File

FileEditSelection

2Open Folder

FileEdit

3lab-reagent-inventory

Open Folder

Documents LabProjects

lab-reagent-inventory

4Select Folder

Open Folder

…

Folder: lab-reagent-inventory

Select FolderCancel

EXPLORER

LAB-REAGENT-INVENTORY

แนวคิด

Workspace: Folder และ Files ของ Project
ที่เปิดใน VS Code
AI อ่าน Files ภายใน Workspace

เปิด Folder ให้ถูก
ก่อนเริ่มคุยกับ AI

Part 5 · Project Setup

Workspace ทำให้ AI เข้าใจทั้ง Project

Files ใน Workspace

Code.gs

Database.gs

Utils.gs

Index.html

CSS.html

JavaScript.html

appsscript.json

ส่วนประกอบที่ AI เชื่อมโยง

Frontend

Backend

Database

Configuration

Chatbot:

Copy Code ทีละส่วน

Coding Agent:

Read Entire Workspace

Context เปลี่ยนคุณภาพของคำตอบ

Part 5 · Project Setup

ก่อนสร้าง App — ออกแบบ Data ก่อน

ระบบคลังน้ำยาต้องเก็บอะไร?

Identification

ItemCode

ItemName

สร้าง Google Sheet Database

ทำสำเนา Google Sheet Mock Data (.xlsx)ไฟล์ประกอบ: Lab_Reagent_Database.xlsx

Lab_Reagent_Database

	A	B	C	D	E	F	G	H	I	J	K	L	M
1	ID	ItemCode	ItemName	Category	LotNumber	ExpiryDate	Quantity	Unit	MinimumStock	Location	Note	CreatedAt	UpdatedAt
2	1	RG-001	NaCl 0.9%	Reagent	LOT-A102	2027-03-31	12	box	5	Fridge A	demo	2026-09-01	2026-09-20
3	2	RG-002	QC Level 1	Control	LOT-B215	2026-12-15	4	vial	2	Fridge B	demo	2026-09-01	2026-09-18
4	3	RG-003	Calibrator X	Calibrator	LOT-C330	2026-11-30	6	vial	3	Shelf C1	demo	2026-09-02	2026-09-15
5	4	RG-004	Wash Buffer	Reagent	LOT-D418	2027-01-31	10	bottle	4	Shelf C2	demo	2026-09-03	2026-09-12
6	5	RG-005	QC Level 2	Control	LOT-B216	2026-12-15	4	vial	2	Fridge B	demo	2026-09-03	2026-09-10

Reagents

การจัดข้อมูลคลิก เพื่อดู Column

Drop-down สำหรับ Category

Date Format

Data Validation

ข้อความเน้น

Header ชัดเจน

1 Column = 1 Variable

หลีกเลี่ยง Merge Cell

ใช้รูปแบบข้อมูลให้สม่ำเสมอ

Part 5 · Project Setup

สร้าง Google Apps Script Project

1เปิดจาก Google Sheets

Extensions→Apps Script

Lab_Reagent_Database

ABCD 1IDItemCodeItemNameCategory 21RG-001NaCl 0.9%Reagent 32RG-002QC Level 1Control 4 5 6 7 8 9 10

2ข้อมูลเชื่อมต่อ

Project Settings→Script ID

Apps Script Lab Reagent Inventory ชื่อ Project

Project Settings

General settings

Project name

Lab Reagent Inventory

IDs

Script ID

1AbC2dEf-EXAMPLE-SCRIPT-ID-xYz789

ตัวอย่าง (dummy ID)

เก็บ Script ID ไว้

สำหรับเชื่อมกับ VS Code

Part 5 · Project Setup

clasp — สะพานระหว่าง GAS กับ VS Code

VS Code

Local Files

clasp

Google Apps Script

GAS

PushLocal Files → Google Apps Script

PullGoogle Apps Script → Local Files

Download Project

Upload Code

Open Apps Script

Manage Project

Edit Locally

Run on Google Apps Script

Part 5 · Project Setup

clasp คืออะไร และทำหน้าที่อะไร?

ชื่อเต็ม

Command Line Apps Script Projects

เครื่องมือจัดการ Google Apps Script ผ่านคำสั่ง
เชื่อม Files ในเครื่องกับ Project บน Google
Coding Agent สามารถเรียกใช้เครื่องมือนี้แทนเราได้
เมื่อมีเครื่องมือและสิทธิ์พร้อม

ลำดับแนวคิด

VS Code

clasp

Google Apps Script

หน้าที่หลัก

สร้างหรือเชื่อม
Project

Pull —
ดึง Code จาก GAS

Push —
ส่ง Code ขึ้น GAS

จัดการ Version
และ Deployment

เรา:ระบุงาน อนุญาตการเข้าถึง และตรวจผล

AI:เตรียมเครื่องมือ เชื่อม Project และรันคำสั่งที่จำเป็น

เข้าใจว่าเครื่องมือทำอะไร แล้วให้ AI ช่วยจัดการขั้นตอน

Part 5 · Project Setup

เชื่อม GAS — เราอนุญาต แล้วให้ AI จัดการ

สิ่งที่ผู้ใช้เตรียม

1ระบุ Project หรือ Script ID ที่ต้องการ

2ลงชื่อเข้าใช้ Google Account ที่มีสิทธิ์แก้ไข Project

3เปิด Apps Script API และยืนยันสิทธิ์ Google ตามวิธีเชื่อมต่อ

4อนุญาตให้ AI ใช้เครื่องมือและเครือข่ายสำหรับงานนี้

5ตรวจการแก้ไขและผลทดสอบก่อนส่ง Code

สิ่งที่ AI ช่วยทำ

ตรวจเครื่องมือที่มีและเตรียมส่วนที่ขาด

เชื่อมกับ Project เป้าหมาย

อ่าน Code เดิมหรือดึง Files เมื่อจำเป็น

แก้ไข ตรวจสอบ และทดสอบ

ส่ง Code ขึ้น GAS ตามขอบเขตที่อนุญาต

ระบุ Project

ยืนยันบัญชีและสิทธิ์

AI เชื่อมต่อ

AI แก้ Code

เรา Review

Push

ตัวอย่าง Prompt

ช่วยเชื่อมกับ GAS Project นี้: [Script ID หรือ URL]
ตรวจเครื่องมือและสิทธิ์ที่ต้องใช้ แล้วช่วยเตรียมส่วนที่ขาด
อ่าน Code เดิมก่อนแก้ไข และสรุปส่วนที่จะเปลี่ยน
หลังทดสอบผ่านให้แสดงผลการแก้ไขก่อนส่ง Code ขึ้น GAS

เราไม่ต้องทำทุกคำสั่งด้วยตัวเอง
แต่ต้องระบุเป้าหมาย อนุญาต และตรวจผล

Part 6 · Prompting

Prompt ที่ไม่ดี — ทำไม AI ถึงสร้างไม่ตรงใจ?

ตัวอย่าง Prompt

USER

สร้าง Web App คลังน้ำยาให้หน่อย

?ใช้ Database อะไร?

?มี Field อะไร?

?ใครใช้งาน?

?ต้องมี Dashboard ไหม?

ข้อมูลที่ AI
ยังต้องรู้

?ต้องมี Search ไหม?

?ต้องมี Alert ไหม?

?UI แบบไหน?

?ต้อง Deploy อย่างไร?

Prompt สั้นได้
แต่ Context ต้องพอ

Garbage In → Garbage Out

Part 6 · Prompting

Prompt Framework — R-C-T-F-C

Simple but
Powerful
Prompt

ตัวอย่าง

Role: Senior Full-stack Developer

Context: Medical Laboratory

Task: Create Reagent Inventory Web App

Features: CRUD + Search + Dashboard

Constraints: Google Sheets + GAS

คลิกตัวอักษรเพื่อดูตัวอย่างที่ตรงกัน

Part 6 · Prompting

Master Prompt — เริ่ม Project ด้วย Prompt เดียว

Master Prompt

คุณคือ Senior Full-stack Developer และ System Analyst

ช่วยพัฒนา Web Application สำหรับบริหารคลังน้ำยาในห้องปฏิบัติการทางการแพทย์

ใช้ Google Sheets เป็น Database และ Google Apps Script เป็น Backend

Frontend ใช้ HTML, CSS และ JavaScript และต้อง Deploy เป็น Google Apps Script Web App

ระบบต้องมีการเพิ่ม แก้ไข ค้นหา และดูรายการน้ำยา มี Lot Number, Expiry Date, Quantity, Minimum Stock และ Location

สร้าง Dashboard แสดงจำนวนรายการทั้งหมด รายการใกล้หมด รายการต่ำกว่า Minimum Stock และรายการใกล้หมดอายุ

UI ต้อง Responsive ใช้งานง่ายบน Computer และ Smartphone

ก่อนแก้ Code ให้ตรวจสอบ Files ทั้งหมดใน Workspace และอธิบาย Architecture ที่เสนอ

อย่าเขียนระบบทั้งหมดทันที ให้สร้างเป็นขั้นตอน และตรวจสอบว่าแต่ละส่วนทำงานก่อนดำเนินขั้นต่อไป

ลำดับแนวคิด

AISenior Full-stack
Developer

PlanArchitecture ที่เสนอ

Codeสร้างเป็นขั้นตอน

Web AppGoogle Apps Script
Web App

Part 6 · Prompting

ให้ AI วางแผนก่อนเขียน Code

Prompt

ก่อนเขียน Code

1. อ่าน Files ทั้งหมดใน Workspace

2. วิเคราะห์ Requirement

3. เสนอ File Structure

4. เสนอ Database Schema

5. เสนอ Development Plan

ยังไม่ต้องแก้ Code
จนกว่าจะแสดง Plan เสร็จ

AI Output

Architecture

Web App

FrontendBackendDatabase

File Structure

lab-reagent-inventory/ ├─ Code.gs ├─ Database.gs └─ Index.html …

Database

Table: Reagents

Fields: ID, ItemName, LotNumber, ExpiryDate, Quantity, MinimumStock, Location

Development Steps

Think Plan Build

~~Generate Everything at Once~~

Part 6 · Prompting

หลัง AI เข้าใจ Project แล้ว Prompt สั้นได้

Prompt 1

เพิ่มช่องค้นหาน้ำยาจากชื่อหรือ Lot Number

Prompt 2

เพิ่ม Filter รายการที่หมดอายุภายใน 90 วัน

AI Context

Workspace
Files
Architecture
Previous Conversation

Prompt 3

ทำ Dashboard ให้ดูทันสมัยขึ้น แต่ห้ามแก้ Backend

Prompt 4

กด Save แล้วข้อมูลไม่เข้า Google Sheet
ช่วยหาสาเหตุและแก้เฉพาะส่วนที่จำเป็น

Context ทำให้ Prompt สั้นลงได้

Part 6 · Prompting

AI ช่วยจัด File Structure ให้เป็นระบบ

EXPLORERคลิกกลุ่มเพื่อไฮไลต์ไฟล์

lab-reagent-inventory

Code.gs

Database.gs

Utils.gs

Index.html

CSS.html

JavaScript.html

appsscript.json

.clasp.json

Separation
of Concerns

อ่านง่าย

แก้ง่าย

Debug ง่าย

AI เข้าใจง่าย

Part 7 · Ship & Iterate

Push Code จาก VS Code กลับไป Google Apps Script

Claude Code /
Codex

แก้ Files
ใน VS Code

Human
Review

Terminal

Google
Apps Script

Web App

Terminal

lab-reagent-inventory

$clasp push

$clasp open-script

Warning

Review ก่อน Push

Local Files สามารถเปลี่ยน
Project ฝั่ง GAS ได้

Part 7 · Ship & Iterate

Error ไม่ใช่จุดจบ — แต่คือ Prompt ใหม่

Error

TypeError

Data not saved

Function not found

ตัวอย่าง Prompt

เมื่อกด Save ระบบขึ้น Error นี้:
[วาง Error]

ตรวจสอบ Files ที่เกี่ยวข้องและหาสาเหตุ
แก้เฉพาะส่วนที่จำเป็น
ห้ามลบ Function เดิมที่ยังใช้งานได้
หลังแก้ให้อธิบายว่า Error เกิดจากอะไร

AI ทำ

Analyze

Locate File

Fix

Explain

Test

Debug with AI

ไม่ใช่ Random Editing

Part 7 · Ship & Iterate

Build→Test→Improve→Deploy

From Medical Technologist to Digital Lab Innovator

Formula

Medical Technologist

Data

Digital Workflow

Laboratory Innovation

กลับสู่วงจรCircular
Innovation Loop

Build

Test

Feedback

Prompt

AI Modify

Test Again

Deploy

เราไม่จำเป็นต้องรู้ Code ทุกบรรทัด

แต่เราต้องรู้ปัญหา

รู้ Workflow

รู้ข้อมูล

และรู้ว่าจะสื่อสารสิ่งเหล่านั้นกับ AI อย่างไร

From Lab User
to Digital Lab Innovator

ทนพ.พีรภัทร ภักตะภา

ขอบคุณครับ

ทนพ.พีรภัทร ภักตะภา

นักเทคนิคการแพทย์ชำนาญการ

กลุ่มงานเทคนิคการแพทย์และพยาธิวิทยาคลินิก
โรงพยาบาลอำนาจเจริญ

phaktaphap@gmail.com

สแกนเข้ากลุ่มไลน์

สอบถาม · ติดตาม · แลกเปลี่ยน
prompt ที่ใช้ได้ผล

ถาม–ตอบ