Automation

สร้าง Mini Project ด้วย n8n + AI

เข้าใจ Webhook + Ngrok ผ่าน Mini Project “ดูดวงมือถือ”

17 Aug 202525 min readChatGPTAI AgentDashboard

สร้าง Mini Project ด้วย n8n + AI

เข้าใจ Webhook + Ngrok ผ่าน Mini Project “ดูดวงมือถือ”

Connect with me and follow our journey: Linkedin, Facebook

สวัสดีครับ! 🙌 ยินดีต้อนรับกลับมาสู่ซีรีส์ AI Automation ที่ผมตั้งใจทำเพื่อแบ่งปันความรู้และประสบการณ์ด้านการสร้าง Automation Tools ให้ใช้งานได้จริงในชีวิตประจำวันและการทำงาน

ก่อนหน้านี้เราได้เรียนรู้หลายหัวข้อไปแล้ว เช่น

และในตอนนี้ (EP.4 ของ n8n) เราจะมาทำความรู้จักกับ Webhook และ Ngrok ซึ่งถือเป็นพื้นฐานสำคัญสำหรับใครที่อยากเชื่อมต่อระบบ Automation ให้ใช้งานได้แบบจริงจัง 🚀

ทำความรู้จัก Webhook และ Ngrok

Webhook คืออะไร?

Webhook คือ กลไกที่ช่วยให้โปรแกรมหนึ่งส่งข้อมูลไปยังอีกโปรแกรมหนึ่งแบบเรียลไทม์ ผ่านการ “ยิง” ค่าข้อมูลไปยัง URL ที่กำหนดไว้ เช่น การส่งค่าจากฟอร์มออนไลน์ เข้าสู่ n8n เพื่อประมวลผลต่อได้ทันที ไม่ต้องรอการดึงข้อมูลซ้ำ ๆ

พูดง่าย ๆ คือ Webhook คือ “ผู้ส่งข่าว” ที่จะบอกให้ระบบอื่นรู้ว่า ตอนนี้มีเหตุการณ์เกิดขึ้นแล้วนะ

Ngrok คืออะไร?

ปัญหาที่มักเจอกับ Webhook คือ เวลาคุณทำงานบนเครื่อง Localhost (เช่น http://localhost:5678) จะไม่สามารถรับ Request จากอินเทอร์เน็ตภายนอกได้

ตรงนี้เองที่ Ngrok เข้ามาช่วย — มันทำหน้าที่เหมือน “อุโมงค์” ที่เปิดให้โลกภายนอกเข้าถึง Localhost ของคุณผ่าน URL ที่ใช้งานได้จริง (public URL) โดยไม่ต้องไปเช่า Hosting หรือ Server เพิ่ม

วิธีติดตั้งและใช้งาน Ngrok

การที่เราจะใช้ Webhook นั้นจำเป็นต้องมี Webhook URL ซึ่งถ้าคนที่ติดตั้ง local host จะไม่มี URL ที่ออกไปข้างนอกได้ (สังเกตได้จาก เวลากด Webhook เราจะได้ http://localhost:

ถ้าคนอยากใช้ Local host แล้วอยากใช้งาน Webhook ต้องมีการติดตั้ง project เสริม Ngrok (แต่ถ้าติดตั้งบน Render ก็สามารถใช้งานได้เลยไม่ต้องติดตั้ง Ngrok)
Ngrok จะคล้ายๆเป็นอุโมงค์ที่ xxx
วิธีสมัครใช้งาน กดสมัครให้เรียบร้อย

กด Download → Download และติดตั้งให้เรียบร้อย

ทำตามคำแนะนำที่เหลือของ Website โดย

สร้าง Folder เปล่าขึ้นมา แล้วนำ File จากใน Zip ที่ Load ได้ไปวาง

กลับไปที่ https://dashboard.ngrok.com/get-started/your-authtoken

กดเปิดให้เห็นรหัส → กด Copy ในบันทัด ngrok config add-authtoken $YOUR_AUTHTOKEN

https://dashboard.ngrok.com/get-started/setup/windows

กดเปิดโปรแกรม ngrok

นำ code ที่ได้ไปวางแล้วกด Enter

ในบันทัดถัดมา ใส่คำสั่ง

ngrok http http://localhost:5678

ถ้าเห็นหน้าตาแบบนี้แปลว่าเสร็จ (ถ้าไม่ได้ลองถาม ChatGPT เพื่อแก้ไขดูครับ)

ลองกดที่ตรงนี้

กด Visit Site

คุณก็จะสามารถเข้า n8n local host ผ่าน URL ได้แล้ว

Static Domain

แต่ทุกครั้งที่ Run จะเปลี่ยน URL นะครับ ถ้าจะทำ Static Domain สามารถทำได้โดยไปที่ (พอกดที่ Static Domain อาจมีคำให้กดก่อนจะได้ code แบบด้านล่าง)

ngrok config add-authtoken $YOUR_AUTHTOKEN

ใส่เข้าไปใน code → เปลี่ยนตัวท้ายเป็น 5678

ngrok http — url=excited-distinctly-tapir.ngrok-free.app 5678

คุณจะได้ Static Domain (เค้าจะให้แค่คนละ 1 อันนะ) → ของผมเป็น Link: https://excited-distinctly-tapir.ngrok-free.app/

พอกด Static Domain ก็จะเข้ามาหน้า n8n

เรียกใช้ Webhook

ไปที่ n8n → On webhook call

ต้องเปลี่ยน http://localhost:5678 ไปเป็น Static Domain ก็จะเรียก Webhook ได้

Mini Project: ดูดวงจาก Mobile Phone

ไปที่ n8n → Add first step… → Webhook.

มีหมวด Test กับ หมวด Production
- ถ้าเป็นหมวด Test ต้องกด Test ถึงจะรับค่า
- ถ้า Production จะรับค่าได้เลย (เปิด Executions)

แก้ไข Path เพื่อให้จำได้ง่าย → ผมแก้ไขเป็น BerHengHeng

ไปที่ Lovable → พิม Prompt ตามด้านล่าง
(link ให้กด click ไปที่ URL จะเท่ากับการ Copy แล้วเอามาวาง)
อย่าลืมเปลี่ยน http://localhost:5678 เป็น Static Domain (แต่ละคนไม่เหมือนกัน)

สร้างเว็บสำหรับดูดวงจากเบอร์มือถือ โดยให้ผู้ใช้งานกรอกฟอร์มดังนี้

ชื่อ
เบอร์มือถือ
วัน เดือน ปี เกิด
Email

เมื่อกดดูดวงให้ส่งค่าในฟอร์มไปที่ Webhook URL:
https://excited-distinctly-tapir.ngrok-free.app/webhook-test/BerHengHeng

โทนเว็บขอเป็นสีม่วงขาว ดูน่าดึงดูด
ชื่อ Web คือ BerHengHeng

ระหว่างรอคำตอบกลับมา แสดง Animation สวยงามด้วย
เมื่อได้ค่าคำตอบแล้ว ให้แสดงผลให้สวยงาม

ระหว่างรอผล เอากลับมาที่ n8n ต่อ pipeline รอ → เพิ่ม Edit Fields เข้าไป

เพิ่ม AI Agent เข้าไป

เมื่อ Add ครบจะได้แบบนี้

เข้าไปที่ AI Agent เปลี่ยนเป็น Define below

ใส่ Prompt เข้าไป (หรืออาจจะให้ ChatGPT ช่วยเขียน Prompt ก็ได้)

Result จาก ChatGPT (Prompt: กำลังจะใส่ system prompt ช่วยเขียนให้หน่อย กำลังทำ application ดูดวงจากเบอร์มือถือที่ได้รับมา ใช้ชื่อนามสกุล เพศ วันเดือนปีเกิด ประกอบ (แต่เน้นที่เบอร์มือถือเป็นหลัก) ผลลัพธ์ขอดวงโดยรวม (ทำนายผลว่าใน 15 วันข้างหน้าจะเกิดอะไรขึ้น อะไรที่ดีๆ อะไรที่ต้องระวัง) พร้อมเลขเด็ด 2 ตัว 1 เลขและ 3 ตัว 1 เลข)

System Prompt (ภาษาไทย — วางทั้งบล็อกนี้)
คุณคือ “ที่ปรึกษาดวงเลขศาสตร์มือถือ” ทำหน้าที่วิเคราะห์ดวงจากหมายเลขโทรศัพท์มือถือเป็นหลัก (ให้น้ำหนัก ≥70%) และใช้ ชื่อ–นามสกุล, เพศ, วัน–เดือน–ปีเกิด เป็นข้อมูลประกอบ (≤30%) เพื่อสรุปแนวโน้ม “15 วันข้างหน้า” เป็นภาษาไทยแบบกระชับ ชัดเจน เป็นมิตร มีเหตุมีผลเชิงเลขศาสตร์ (เช่น รูปแบบตัวเลข รายคู่ที่กลมกลืน การซ้ำ การเรียง) โดยหลีกเลี่ยงการรับรองผลแบบเด็ดขาด

ข้อมูลนำเข้า (Inputs)

phone_number (string) — หมายเลขโทรศัพท์ของผู้ใช้
full_name (string) — ชื่อ–นามสกุล
gender (string) — เพศตามที่ผู้ใช้ระบุ
birthdate (string, YYYY-MM-DD) — วันเกิด

วิธีประมวลผล (Guidelines)

ทำความสะอาดเบอร์โทร: ตัดช่องว่าง/ขีด/วงเล็บ/รหัสประเทศ (+66 → แทนด้วย 0 ข้างหน้า) แล้ววิเคราะห์เลข 10 หลักสุดท้ายเป็นหลัก
ให้น้ำหนักการอ่านดวงจาก “แพทเทิร์นของตัวเลข” เช่น

การซ้ำ (เช่น มีเลขเดียวกันติดกัน)
การเรียงขึ้น/ลง (เช่น 123, 321)
การสะท้อน/คู่เลขที่กลมกลืน (เช่น AB-BA)
ความถี่ของแต่ละตัวเลขรวมถึงผลรวมกลุ่มหลัก ๆ

ใช้ชื่อ–นามสกุล เพศ วันเกิด เป็น “ตัวปรับน้ำหนัก” โทนคำแนะนำ (เช่น โฟกัสงาน/ความรัก/สุขภาพ) แต่ “อย่า” ขัดกับสัญญาณหลักที่มาจากเบอร์
โทนการสื่อสาร: เชิงบวกแต่ตรงไปตรงมา แยก “สิ่งที่เด่น/ควรระวัง” พร้อม “ข้อแนะนำที่ทำได้จริง” ใน 15 วันข้างหน้า หลีกเลี่ยงคำตัดสินชี้ขาด (ใช้ถ้อยคำเช่น “มีแนวโน้ม/ควรระวัง/เหมาะกับ/ควรหลีกเลี่ยง”)
เลขเด็ด:

ให้ 2 หลัก จำนวน 1 เลข และ 3 หลัก จำนวน 1 เลข
สร้างจาก “องค์ประกอบของเบอร์” โดยยึดหลักนี้:
--- เลข 2 หลัก: เลือก “สองตัวที่พบถี่ที่สุดในเบอร์” จัดเรียงตาม “ลำดับปรากฏครั้งแรก” (ถ้าถี่เท่ากันให้เรียงตามการพบก่อนหลัง)
--- เลข 3 หลัก: เลือก “สามตัวที่พบถี่ที่สุด” จัดเรียงตาม “ลำดับปรากฏครั้งแรก”
--- กรณีตัวเลขถี่เท่ากันทุกตัว: ใช้ “สองหลักท้าย” เป็นเลข 2 ตัว และใช้ “สามหลักกลาง (ตำแหน่ง 4–6)” กลับด้านเป็นเลข 3 ตัว
หลีกเลี่ยงเลขขึ้นต้นด้วยศูนย์ทั้งหมด (เช่น 000) และหลีกเลี่ยงชุดที่ซ้ำกันระหว่าง 2 และ 3 หลัก

ความยาวผลลัพธ์:

บทสรุปรวม: 3–5 บรรทัด
จุดเด่น (บวก): 2–4 ข้อ (แบบหัวข้อสั้น ๆ)
ข้อควรระวัง: 2–4 ข้อ (แบบหัวข้อสั้น ๆ)
ข้อแนะนำเชิงปฏิบัติ: 2–3 ข้อ

ขอบเขตและความรับผิดชอบ: ไม่ให้คำแนะนำทางการแพทย์ กฎหมาย การเงินแบบเฉพาะบุคคล หลีกเลี่ยงข้อมูลอ่อนไหว ใช้ภาษาสุภาพ และเพิ่มข้อความกำกับว่าเป็นความเชื่อส่วนบุคคล

ขอบเขตเวลา

อ้างอิง “15 วันถัดจากเวลาปัจจุบัน” ของผู้ใช้ (Asia/Bangkok)
แสดงวันที่เริ่ม–สิ้นสุดในรูปแบบ YYYY-MM-DD

รูปแบบผลลัพธ์ (ให้ตอบเฉพาะ JSON เท่านั้น)
{
"timeframe": {
"start_date": "",
"end_date": ""
},
"overall_summary": "<สรุปดวงรวม 3–5 บรรทัด>",
"positives": ["<ข้อดีเด่น 1>", "<ข้อดีเด่น 2>"],
"cautions": ["<ข้อควรระวัง 1>", "<ข้อควรระวัง 2>"],
"action_tips": ["<คำแนะนำที่ทำได้จริง 1>", "<คำแนะนำที่ทำได้จริง 2>"],
"lucky_numbers": {
"two_digit": "",
"three_digit": ""
},
"confidence": "low|medium|high",
"disclaimer": "ผลการทำนายเป็นความเชื่อส่วนบุคคล ใช้วิจารณญาณ และไม่ใช่คำปรึกษาทางการแพทย์/กฎหมาย/การเงิน"
}

ตัวอย่างการตอบ (สมมุติ)
{
"timeframe": {
"start_date": "2025-08-10",
"end_date": "2025-08-24"
},
"overall_summary": "15 วันข้างหน้าเด่นเรื่องงานเอกสารและการสื่อสาร นัดหมายมีโอกาสปิดดีลเล็ก ๆ ได้ แต่การเดินทางสั้น ๆ อาจติดขัดเรื่องเวลา ควรเผื่อช่วงกันพลาด รายรับเสริมมีลุ้นจากงานเก่า/ลูกค้าเก่า ความสัมพันธ์ราบรื่นขึ้นเมื่อสื่อสารตรงประเด็น",
"positives": ["การสื่อสารเจรจาเด่น", "มีโอกาสได้ผู้ช่วย/พาร์ตเนอร์", "รายรับเสริมจากงานต่อเนื่อง"],
"cautions": ["ตารางชน/เลื่อนนัดง่าย", "เอกสารผิดพลาดเล็กน้อยถ้าไม่ทวน", "ควรเลี่ยงตัดสินใจเร่งด่วนยามค่ำ"],
"action_tips": ["จดเช็กลิสต์เอกสารก่อนส่ง", "กันเวลาสำรองในการเดินทาง", "ทักลูกค้าเก่าหรือรีแอคติเวตงานค้าง"],
"lucky_numbers": {
"two_digit": "28",
"three_digit": "281"
},
"confidence": "medium",
"disclaimer": "ผลการทำนายเป็นความเชื่อส่วนบุคคล ใช้วิจารณญาณ และไม่ใช่คำปรึกษาทางการแพทย์/กฎหมาย/การเงิน"
}

ในส่วน Chat Model เลือก Generative AI ที่ต้องการ (ในตัวอย่างจะเลือก Google Gemini Chat Model)

กลับไปที่ Webhook

ปรับช่องนี้เป็น Post แล้วให้กด Listen for test event

เมื่อกด Listen for test event สัญลักษณ์ของ trigger จะพร้อมรับข้อมูล → ให้กลับไปกรอกข้อมูลใน lovable ให้เสร็จแล้วกด “ส่ง”

ของแต่ละคนหน้าตาจะไม่เหมือนกันนะครับ

ผลลัพธ์ที่ได้คือ การรับตัวแปรที่เข้ามาสำเร็จแล้ว

ไปที่ Node Edit Fields → ลากค่าที่เกี่ยวข้องเข้าไป

กด Execute step → จะได้ค่าที่เราต้องการ

ไปที่ AI Agent → ไปที่ Expression และกดขยายด้านล่าง

หลักการก็คือ เปลี่ยน Input ให้เป็น Input ที่ User ใส่เข้ามา (ถ้า Prompt ต่างไป ตำแหน่งที่ใส่จะแตกต่างกัน แต่สามารถดูเป็น Concept ได้)

ก่อนแก้ไข

หลังแก้ไข

กด Execute step → จะได้ผลลัพธ์ที่ Generative AI สร้างขึ้นมา (อย่าลืม Save)

Clean format เพื่อแก้ไข /, // → เพิ่ม Node “Code”

// 1) ดึง raw text จาก step ก่อนหน้า
let raw = $json.output; // ปรับชื่อ field ให้ตรงของคุณ
raw = String(raw).trim();

// 2) ล้างของแถมที่พบบ่อย: code fence, คำว่า json, อัญประกาศโค้ง
let s = raw
// ตัดบล็อกโค้ด Markdown json ...
.replace(/^[a-z]*\s*/i, '') // ตัด json (บรรทัดแรก)
.replace(/$/m, '') // ตัด (บรรทัดท้าย)
// ตัดคำว่า json นำหน้า (เช่น "json\n{ ... }")
.replace(/^json\s*/i, '')
// ตัดอัญประกาศโค้ง/ตรงที่ครอบทั้งก้อน
.replace(/^[“”"']+/, '')
.replace(/[“”"']+$/, '')
.trim();

// 3) กันพลาด: ดึงเฉพาะส่วนที่เป็น {...} ยาวที่สุด
const start = s.indexOf('{');
const end = s.lastIndexOf('}');
if (start !== -1 && end !== -1 && end > start) {
s = s.slice(start, end + 1);
} else {
return { error: 'No JSON object found in text', preview: raw };
}

// 4) พยายาม parse
let obj;
try {
obj = JSON.parse(s);
} catch (e) {
// เผื่อกรณีเป็น JSON ที่ถูก stringify ซ้ำ (มี escape เต็มไปหมด)
try {
obj = JSON.parse(JSON.parse("${s.replace(/"/g, '\\"')}"));
} catch (e2) {
return { error: 'JSON parse failed', detail: e.message, cleaned_text: s };
}
}

// 5) ส่งออกทั้งแบบ object และ pretty string (เผื่อ debug)
return {
pretty_json: obj,
pretty_text: JSON.stringify(obj, null, 2),
};

เมื่อผมใช้ Code แบบด้านบนเพื่อแปลง Format output ผมจะได้หน้าตาแบบนี้

ผมเพิ่ม Code อีก Node นึงเพื่อมัดรวมทั้งหมดเป็น respond_message

// ดึงข้อมูลจาก JSON ที่ parse แล้ว (ในกรณีนี้อยู่ใน $json.pretty_json)
const data = $json.pretty_json; // ปรับให้ตรงกับ field ที่คุณได้มาจริง

// สร้างข้อความให้อ่านง่าย
const respond_message = `
📅 ช่วงเวลา: ${data.timeframe.start_date} ถึง ${data.timeframe.end_date}

🔮 สรุปดวงโดยรวม:
${data.overall_summary}

✨ สิ่งที่เด่น:
${data.positives.map((p, i) => ${i + 1}. ${p}).join("\n")}

⚠️ ข้อควรระวัง:
${data.cautions.map((c, i) => ${i + 1}. ${c}).join("\n")}

💡 คำแนะนำ:
${data.action_tips.map((t, i) => ${i + 1}. ${t}).join("\n")}

🎯 เลขเด็ด:

2 หลัก: ${data.lucky_numbers.two_digit}
3 หลัก: ${data.lucky_numbers.three_digit}

📌 ระดับความมั่นใจ: ${data.confidence}

📝 หมายเหตุ:
${data.disclaimer}
`.trim();

// ส่งออกเป็นตัวแปรเดียว
return {
respond_message
};

ขั้นตอนต่อมาเพิ่ม Node: “Respond to Webhook”

กลับมาที่ Webhook Node แรก

เปลี่ยนค่าในช่อง Respond เป็น “Using ‘Respond to Webhook’ Node

กลับไปที่ Webhook Node สุดท้าย

เปลี่ยน setting ในช่อง Respond with เป็น All Incoming Items

ลอง Test เพื่อดู output

ผลลัพธ์ออกมา ok แล้วแต่ fotmat ยังไม่ถูกต้อง ให้ไปไปที่ Lovable อีกครั้งแล้วบอก Loveable ว่า

Note: แต่ละปัญหาไม่เหมือนกัน ต้องปรับ prompt ตามปัญหาที่เจอนะครับ

ตอนนี้ output ในช่องคำทำนายของคุณ ยังเป็นแบบนี้อะครับ
"""
ไม่พบข้อความคำทำนาย
[
{
"respond_message": "📅 ช่วงเวลา: 2025-08-17 ถึง 2025-09-01\n\n🔮 สรุปดวงโดยรวม:\nหมายเลขโทรศัพท์ของคุณ Nattapong ในช่วง 15 วันข้างหน้า มีแนวโน้มเด่นด้านการเงินและโอกาสใหม่ ๆ ที่เข้ามา แต่ควรระวังเรื่องอารมณ์ที่อาจขึ้นลงง่าย การตัดสินใจทางการเงินควรไตร่ตรองให้รอบคอบ เนื่องจากมีเลข 9 ซ้ำค่อนข้างมาก อาจทำให้ใจร้อนได้ง่าย การสื่อสารที่ชัดเจนจะช่วยลดความเข้าใจผิดกับคนรอบข้างได้\n\n✨ สิ่งที่เด่น:\n1. มีโอกาสทางการเงินเข้ามา\n2. เสน่ห์ส่วนตัวโดดเด่น\n3. ได้รับการสนับสนุนจากคนรอบข้าง\n\n⚠️ ข้อควรระวัง:\n1. อารมณ์แปรปรวนง่าย\n2. การตัดสินใจเร่งรีบอาจผิดพลาด\n3. ระวังเรื่องสุขภาพเล็กน้อย\n\n💡 คำแนะนำ:\n1. ทำสมาธิหรือกิจกรรมผ่อนคลายเพื่อควบคุมอารมณ์\n2. ปรึกษาคนใกล้ชิดก่อนตัดสินใจเรื่องสำคัญ\n3. ดูแลสุขภาพให้แข็งแรง\n\n🎯 เลขเด็ด:\n- 2 หลัก: 89\n- 3 หลัก: 890\n\n📌 ระดับความมั่นใจ: medium\n\n📝 หมายเหตุ:\nผลการทำนายเป็นความเชื่อส่วนบุคคล ใช้วิจารณญาณ และไม่ใช่คำปรึกษาทางการแพทย์/กฎหมาย/การเงิน"
}
]
"""
ขอให้แปลงเป็นข้อความปกติได้ไหม

ผลลัพธ์ที่ได้

มาถึงขั้นตอนปรับเป็น Production

เราต้องทำการเปลี่ยน URL จาก “https://excited-distinctly-tapir.ngrok-free.app/webhook-test/BerHengHeng” เป็น “https://excited-distinctly-tapir.ngrok-free.app/webhook/BerHengHeng” ซึ่ง version free เปลี่ยนเองไม่ได้ ต้อง prompt เปลี่ยนนะครับ
เปิด mode: Active และเปลี่ยนจาก Editor เป็น Executions

คุณจะดู Flow ที่มันเคลื่อนไหวไม่ได้แล้ว และถ้ากรอกข้อมูล มันจะ auto-run ให้เลย

Key Takeaways

Webhook = ประตูรับข้อมูลเข้าระบบแบบเรียลไทม์
Ngrok = อุโมงค์เปิดทางให้ Localhost ใช้งาน Webhook ได้จริง
การทดลองทำ Mini Project “ดูดวงจากเบอร์มือถือ” ช่วยให้เราเข้าใจการทำงานของ Webhook, Ngrok และการเชื่อมต่อกับ AI Agent

จากการเรียนรู้ใน EP นี้ เราได้เข้าใจทั้งแนวคิดและวิธีใช้งาน Webhook และ Ngrok แบบลงมือทำจริง ผ่าน Mini Project ที่สนุกและได้ประโยชน์ ใครที่กำลังเริ่มต้นกับ Automation หรืออยากลองทำ AI Project ง่าย ๆ นี่คืออีกหนึ่งตัวอย่างที่คุณสามารถนำไปต่อยอดได้ทันที

Data Science Explore the world of data science with Donato_Story

Dashboard Discover the power of data visualization with Donato_Story

Donato_Journey Join me on my journey (Thai version)

Course_Review Discover the training courses with Donato_Story (Thai version)