เชื่อมได้ และส่วนใหญ่ไม่ต้องรื้อระบบเดิมทิ้งด้วย ถ้าระบบที่ใช้อยู่มี API ให้เรียก หรือเก็บข้อมูลไว้ใน Google Sheets อยู่แล้ว ก็สั่งให้ AI อย่าง Claude Code, Codex หรือ Cursor เขียนเว็บที่ดึงข้อมูลนั้นมาแสดงหรือส่งข้อมูลกลับเข้าไปได้เลย สิ่งที่ต้องรู้ก่อนเริ่มมีแค่ 2 อย่าง คือระบบเดิมเปิดช่องให้เชื่อมแบบไหน และจะเก็บ API key ไว้ตรงไหนไม่ให้หลุด
หลายคนคิดว่าทำเว็บใหม่ด้วย AI แปลว่าต้องเริ่มทุกอย่างจากศูนย์ ต้องกรอกสินค้าใหม่ ย้ายรายชื่อลูกค้าใหม่ หรือเลิกใช้โปรแกรมที่พนักงานคุ้นมือ ความจริงงานที่คุ้มที่สุดหลายงานคือการเอาข้อมูลที่มีอยู่แล้วมาแสดงในรูปแบบที่ดีขึ้น เช่น หน้าร้านออนไลน์ที่สต็อกตรงกับ POS หรือหน้า dashboard ที่อ่านจาก sheet ที่ทีมกรอกทุกวัน
ระบบเดิมของคุณเปิดให้เชื่อมแบบไหน
ก่อนเปิด AI ขึ้นมาสั่งงาน ให้ตอบคำถามนี้ให้ได้ก่อน เพราะวิธีเชื่อมจะต่างกันมากตามระบบต้นทาง
| ช่องทาง | เหมาะกับ | ข้อดี | ข้อควรระวัง |
|---|---|---|---|
| Official API ของระบบ (เช่น POS, ระบบสมาชิก) | ร้านค้าที่ใช้โปรแกรมสำเร็จรูปซึ่งมี API ให้ | ข้อมูลตรงกับระบบจริง อัปเดตตามได้ | ต้องสมัครขอ API key บางเจ้าเปิดเฉพาะแพ็กเกจที่เสียเงิน |
| Google Sheets ร่วมกับ Google Apps Script | ทีมเล็ก โรงเรียน หน่วยงานที่กรอกข้อมูลใน sheet อยู่แล้ว | เริ่มได้เร็ว คนที่ไม่เขียนโค้ดก็แก้ข้อมูลได้เอง | ข้อมูลเยอะมากจะเริ่มช้า และต้องตั้งสิทธิ์การเข้าถึงให้ดี |
| ไฟล์ export อย่าง CSV หรือ JSON | ระบบเก่าที่ไม่มี API แต่ export ไฟล์ได้ | ไม่ต้องแตะระบบเดิมเลย | ข้อมูลไม่ real-time ต้องมีคนอัปโหลดไฟล์ใหม่ |
| Webhook | งานที่ต้องรู้ทันทีเมื่อมีเหตุการณ์ เช่น มีออเดอร์ใหม่ | ไม่ต้องคอยถามระบบต้นทางซ้ำ ๆ | ต้องมี server หรือ function รับข้อมูลตลอดเวลา |
| API ส่วนตัวที่เขียนไว้เอง | คนที่มี script หรือ service ของตัวเองอยู่แล้ว | ต่อหน้าบ้านใหม่ได้โดยไม่ต้องเขียน backend ซ้ำ | ต้องดูแลเรื่องความปลอดภัยของ API นั้นเอง |
ถ้าไม่แน่ใจว่าโปรแกรมที่ใช้อยู่มี API ไหม ลองค้นชื่อโปรแกรมคู่กับคำว่า API documentation หรือถามฝ่าย support ตรง ๆ ถ้ามีเอกสาร API ให้ดาวน์โหลดหรือคัดลอกลิงก์เก็บไว้ เพราะจะต้องส่งให้ AI อ่านในขั้นต่อไป
ตัวอย่างผลงานคนไทยที่เชื่อมกับระบบเดิม
ดูของจริงก่อนจะช่วยให้นึกออกว่างานของตัวเองเข้ากับแบบไหน ผลงานเหล่านี้อยู่ในแอปเทพ และแต่ละชิ้นเชื่อมกับข้อมูลคนละแบบ
ดึงสินค้าและสต็อกจาก POS
DANK BKK ดึงรายการสินค้า ราคา และจำนวนสินค้าคงเหลือจาก StoreHub มาแสดงให้ตรงกับระบบ POS ของร้าน จุดที่น่าสนใจคือข้อมูลบางอย่างไม่ได้มีช่องแยกไว้ในระบบเดิม เว็บจึงอ่านข้อมูล THC ประเภท และน้ำหนักจากชื่อสินค้าแทน และสร้างภาพประกอบให้เมื่อสินค้าไม่มีรูป
ตรงนี้เป็นบทเรียนที่ดี เพราะข้อมูลในระบบเดิมมักไม่ได้จัดมาสวยตามที่เว็บต้องการ งานส่วนใหญ่จึงไม่ใช่การดึงข้อมูล แต่เป็นการแปลงข้อมูลที่ได้มาให้พร้อมแสดงผล
หน้าร้านที่คุยกับระบบหลังบ้านผ่าน API
Mortar Storefront + Backoffice แยกหน้าร้านกับระบบหลังบ้านออกจากกัน หน้าร้านเชื่อมกับ API เพื่อแสดงข้อมูลที่จัดการจากหลังบ้าน ส่วนผู้ดูแลเข้าสู่ระบบด้วยชื่อผู้ใช้และรหัสผ่าน หรือใช้ Google Login เมื่อตั้งค่าการเชื่อมต่อแล้ว โครงแบบนี้ทำให้เปลี่ยนหน้าตาหน้าร้านได้โดยไม่กระทบข้อมูลด้านหลัง
ใช้ Google Sheets เป็นที่เก็บข้อมูล
ระบบคัดกรองการอ่านออกเขียนได้ ใช้ Bootstrap ทำหน้าเว็บ วางไว้บน Cloudflare Pages และใช้ Google Sheets กับ Google Apps Script เป็น backend เหมาะมากกับหน่วยงานที่ทีมงานคุ้นกับ sheet อยู่แล้ว เพราะคนดูแลยังเปิดดูและแก้ข้อมูลใน sheet ได้เหมือนเดิม
ต่อหน้าบ้านใหม่เข้ากับ API ที่มีอยู่
Wrappp เป็นเว็บย่อลิงก์ที่เดิมพัฒนาจาก API ที่เจ้าของใช้เป็นการส่วนตัว แล้วค่อยเพิ่มหน้าบ้านด้วย AI ทีหลัง ถ้าคุณมี script หรือ API ที่ใช้เองอยู่แล้ว นี่คือทางลัดที่ดี ให้ AI ทำแค่หน้าบ้านที่เรียก API เดิม ไม่ต้องเขียนส่วนที่ทำงานได้อยู่แล้วใหม่
รวมหลายระบบไว้ในที่เดียว
ห้างเพชรทองมุกดา ระบบพนักงาน รวมงานการลา เงินเดือน commission กองกลาง การเบิกเงินล่วงหน้า และการกู้เงินผ่อนคืนไว้ด้วยกัน พนักงานยังดูราคาทองสดและใช้ LINE Bot ได้ด้วย เป็นตัวอย่างของเว็บที่ทำหน้าที่เป็นจุดรวม ให้พนักงานเปิดที่เดียวแล้วเจอทุกอย่างที่ต้องใช้
ใช้ไฟล์ข้อมูลแทนการต่อ API
TalentSphere AI Ecosystem นำข้อมูล JSON ของบุคลากร หลักสูตร การทำงาน และการลงทะเบียนพัฒนาทักษะมาใช้ร่วมกัน ผู้รับผิดชอบงานบุคลากรใช้งานผ่าน PWA ที่ประมวลผลฝั่งผู้ใช้ได้ วิธีนี้เหมาะกับช่วงที่ระบบต้นทางยังไม่มี API แต่ export ข้อมูลออกมาเป็นไฟล์ได้
ขั้นตอนสั่ง AI ให้เชื่อมระบบเดิม
1. ส่งเอกสาร API หรือตัวอย่างข้อมูลจริงให้ AI
AI เดารูปแบบข้อมูลของระบบที่มันไม่รู้จักไม่ได้ ถ้าเดาเองจะได้โค้ดที่ดูถูกแต่เรียกไม่ติด ให้แนบลิงก์เอกสาร API หรือวางตัวอย่าง response จริงสัก 1 ถึง 2 รายการ ถ้าเป็น Google Sheets ให้บอกชื่อคอลัมน์ทั้งหมดและยกตัวอย่างแถวข้อมูล โดยลบข้อมูลส่วนตัวของลูกค้าออกก่อน
ตัวอย่าง prompt ที่ใช้ได้
``
ฉันใช้ระบบ POS ที่มี API ตามเอกสารนี้ [ลิงก์]
ตัวอย่าง response ของรายการสินค้าอยู่ด้านล่าง
อยากได้หน้าเว็บแสดงสินค้า ราคา และจำนวนคงเหลือ
ห้ามเรียก API จาก browser โดยตรง ให้ผ่าน server function
และอ่าน API key จาก environment variable เท่านั้น
ถ้า API ไม่ตอบ ให้แสดงข้อความแจ้งผู้ใช้แทนหน้าว่าง
2. ทดสอบดึงข้อมูลก่อนทำหน้าตา
ขอให้ AI เขียน script สั้น ๆ ที่เรียก API แล้วพิมพ์ผลออกมาก่อน ถ้าขั้นนี้ยังไม่ผ่าน การทำหน้าเว็บสวย ๆ ต่อก็ไม่มีประโยชน์ ปัญหาที่เจอบ่อยในขั้นนี้คือ key ผิด สิทธิ์ไม่พอ หรือ URL ของ API เป็นของเวอร์ชันเก่า
3. เก็บ API key ไว้ฝั่ง server เสมอ
นี่คือจุดที่มือใหม่พลาดมากที่สุด ถ้าใส่ key ไว้ในโค้ดหน้าเว็บ ใครก็เปิดดูได้จากเครื่องมือของ browser วิธีที่ถูกคือให้หน้าเว็บเรียก function ของเราเอง แล้ว function นั้นค่อยไปเรียก API ของระบบเดิมโดยอ่าน key จาก environment variable บริการ hosting อย่าง Vercel, Cloudflare Pages และ Firebase มีที่ตั้งค่าแบบนี้ให้อยู่แล้ว
ถ้าเว็บแค่อ่านข้อมูลอย่างเดียว ให้ขอ key แบบอ่านอย่างเดียวจากระบบต้นทางถ้ามีให้เลือก เผื่อ key หลุดจะได้ไม่มีใครเอาไปแก้หรือลบข้อมูลร้าน
4. เก็บผลไว้ชั่วคราวแทนการเรียกทุกครั้ง
ถ้ามีคนเปิดเว็บพร้อมกันหลายคนแล้วทุกคนเรียก API ของ POS ตรง ๆ อาจชนเพดานจำนวนครั้งที่ระบบต้นทางกำหนดไว้ ให้สั่ง AI ทำ cache เช่น เก็บรายการสินค้าไว้ 5 นาทีแล้วค่อยดึงใหม่ ข้อมูลที่ไม่เปลี่ยนบ่อยอย่างหมวดหมู่สินค้าเก็บนานกว่านั้นได้
5. คิดเผื่อตอนระบบต้นทางล่ม
ระบบเดิมไม่ได้อยู่ในมือเรา วันหนึ่งมันอาจปิดปรับปรุง เปลี่ยนรูปแบบข้อมูล หรือตอบช้า เว็บที่ดีควรแสดงข้อมูลล่าสุดที่เก็บไว้พร้อมบอกเวลาที่อัปเดต หรืออย่างน้อยแสดงข้อความที่คนอ่านเข้าใจ ไม่ใช่หน้าขาวหรือ error ภาษาเทคนิค
เลือกทางไหนดีถ้ายังไม่แน่ใจ
ถ้าข้อมูลทั้งหมดอยู่ใน Google Sheets และคนใช้งานไม่ได้เยอะมาก เริ่มจาก Sheets กับ Apps Script ก่อนได้เลย เร็วที่สุดและไม่ต้องย้ายข้อมูล ถ้าข้อมูลอยู่ในโปรแกรมสำเร็จรูปที่มี API ให้ใช้ API ของเขา อย่าพยายามดึงข้อมูลด้วยการขูดหน้าเว็บ เพราะพังทุกครั้งที่เขาเปลี่ยนหน้าตา และอาจผิดเงื่อนไขการใช้งาน ถ้าระบบเก่ามากจนไม่มีอะไรให้เชื่อมเลย ใช้ไฟล์ export ไปก่อน แล้วค่อยหาทางอัตโนมัติทีหลัง
อีกข้อที่ควรถามตัวเองคือ เว็บใหม่ต้องเขียนข้อมูลกลับเข้าระบบเดิมไหม การอ่านอย่างเดียวง่ายและเสี่ยงน้อยกว่ามาก ถ้าต้องเขียนกลับ เช่น ตัดสต็อกเมื่อมีคนสั่งซื้อ ให้ทดสอบกับข้อมูลทดลองหรือบัญชี sandbox ก่อนเสมอ อย่าทดสอบกับข้อมูลร้านจริงวันแรก
สรุป
การทำเว็บด้วย AI ไม่ได้แปลว่าต้องทิ้งระบบที่ใช้อยู่ ผลงานในแอปเทพหลายชิ้นเริ่มจากข้อมูลที่มีอยู่แล้ว ทั้ง POS, API ส่วนตัว, Google Sheets และไฟล์ JSON แล้วให้ AI ช่วยทำส่วนที่ขาด สิ่งที่ทำให้งานสำเร็จคือส่งเอกสารหรือตัวอย่างข้อมูลจริงให้ AI ทดสอบการดึงข้อมูลก่อนทำหน้าตา เก็บ key ไว้ฝั่ง server และเตรียมรับมือวันที่ระบบต้นทางไม่ตอบ ถ้าอยากดูไอเดียเพิ่ม ลองเปิดหมวดธุรกิจและร้านค้าในแอปเทพ จะเห็นว่าคนไทยเอาระบบเดิมมาต่อยอดกันแบบไหนบ้าง
