ทดลองสร้าง MVP เมี๊ยวหมอ AI แมวดูดวง จาก GPT-4o

วันก่อนผ่านไปเห็นในเฟสบุ๊คพบว่าทุกคนกำลังตื่นเต้นกับ ChatGPT เวอร์ชั่นใหม่ ที่ฉลาดและทำงานเร็วกว่าเดิมมาก โดยมี GPT-4o โมเดลใหม่ของ OpenAI อยู่เบื้องหลังความสุดยอดเหล่านี้ (ล่าสุดจะเปิดตัว GPT-5 อีกแล้ว ของเก่าตดยังไม่ทันหายเหม็นเลย)

ต่างคนต่างป้อนคำสั่ง(Prompt) เพื่อให้ AI ทำงานตามที่ต้องการ บางคนให้เป็นผู้ช่วยค้นหาข้อมูลต่างๆให้ บางคนให้เป็นเพื่อนคุยแก้เหงา บางคนให้มันช่วยแต่งเพลงแต่งกลอนให้ แต่มีอยู่อันนึงที่ผมชอบมากเป็นพิเศษนั่นคือ เราสามารถใช้ ChatGPT เป็นหมอดูทำนายทายทักเรื่องดวงชะตาได้แล้ว ซึ่งผมจำได้ว่าเวอร์ชั่นเก่ามันยังทำแบบนี้ไม่ได้ และจะตอบกลับมาอย่างเป็นนัยๆว่า “มันไม่เชื่อเรื่องดวง” ฮ่าๆๆ

แม้จะนิยามตัวเองว่าไม่ได้เป็นคนเชื่อเรื่องดวงชะตามากมาย แต่ก็ไม่วายยามว่างชอบเปิดเว็บมายโหรา ไม่ก็ Line ดูดวงเพื่อทำนายดวงชะตาอยู่บ้าง นี่ยังไม่นับรวมประสบการณ์ดูดวงแบบออฟไลน์กับแม่หมอรุ่นป้า ที่โดนเพื่อนลากไปดูด้วยกันแถวตลาดศาลเจ้า ตัวเมืองสุราษฎร์ธานีเมื่อสมัยที่ผมยังเป็นเด็กน้อยวัยมัธยม มนุษย์เรากับเรื่องดูดวงเป็นของคู่กัน ซึ่งผมเชื่อว่าไม่ใช่แค่ประเทศไทยแต่เป็นกันทั้งโลก

หลังจากทดลองใส่ Prompt เพื่อทำการดูดวงใน ChatGPT เวอร์ชั่นใหม่นี้ สิ่งหนึ่งที่ผมรู้สึกได้คือ มันทายแม่นใช้ได้ ก็เลยปิ๊งไอเดียว่าน่าลองเอามาทำเป็น Web Application ง่ายๆในคอนเซ็ปต์ดูดวงกับ AI พร้อมกับใส่คาแรคเตอร์น่ารักๆให้มันสักหน่อย ให้ User พอยิ้มได้จากความน่ารักและก็ได้ทำนายดวงไปพร้อมๆกัน โปรเจคจำพวกใช้โมเดลจาก OpenAI ผมอยากลองทำมานานมากแล้วแต่ก็ยังไม่มีโอกาสได้ทำ

แต่ไหนๆจะทำแล้ว ผมเลยคิดว่าเราวิเคราะห์โปรเจคแบบจริงจังไปเลย ให้มีลักษณะเป็นหนึ่ง Case Study เหมือนเป็น Startup ตัวนึงที่ครอบคลุมทั้ง 3 ขาหลักคือ Business, Design และ Technology แอพตัวทดลองที่ทำเสร็จแล้วก็จะเป็น MVP (Minimum Viable Product) หรือ ผลิตภัณฑ์ที่เล็กที่สุดที่สามารถใช้งานได้ เพื่อเอาไปทดสอบตลาดและนำ Feedback กลับมาพัฒนาต่อไปในอนาคตครับ(ถ้ามันเวิร์คอ่ะนะ)

ประเด็นการเล่าเรื่องโปรเจคนี้ทั้ง 3 ส่วน
1. Non-Technical ฝั่ง Business ได้แก่ Product Concept, Competitive Analysis และ Business Model Canvas
2. Non-Technical ฝั่ง Design ได้แก่ AI Character Development, Persona Development, User Flow, Design System และ Wireframe
3. Technical ได้แก่ Prompt Development, Tech Stack Selection, System Architecture, Software Development และ Deployment

เริ่มต้นจาก Non-Technical ฝั่ง Business

Product Concept

เราจะสร้าง AI Chatbot ให้เป็นแมวที่สามารถตรวจดูดวงชะตาตามหลักโหราศาสตร์ไทยได้อย่างแม่นยำ มีความยืดหยุ่นสูง สามารถใช้งานได้ครอบคลุมตั้งแต่ ดูดวงโหราศาสตร์ไทย ดูดวงเลข 7 ตัว 9 ฐาน ดูดวง 10 ลักขณา ดูดวงสมพงษ์ เนื้อคู่ ความรัก ฯ คอนเซ็ปต์นี้คิดจาก Insights ที่ว่าคนไทยทุกเพศทุกวัยชอบดูดวง แม้กระทั่งคนรุ่นใหม่ ปัจจุบันเทรนด์คนรักสัตว์ก็กำลังมา และเป็นตลาดที่มีความเติบโตสูง

ผมตั้งสมมุติฐานว่า ถ้าเรามีแมว AI ที่เป็นหมอดูแม่นๆ คาแรคเตอร์น่ารักๆ น่าติดตาม เพิ่มขึ้นเป็นอีกหนึ่งผู้เล่นในตลาดสายมู มันน่าจะพอไปได้อยู่

Related Link
ในเอเชีย ตลาดสัตว์เลี้ยงไทยเป็นรองแค่จีน
https://shorturl.at/MmhCj
88% ของคนไทยเชื่อเรื่องมู
https://shorturl.at/w0jIn

ถ้าลองไปสำรวจตาม Social Media หรือแอพดูวิดีโอสั้นๆอย่าง Tiktok และ Reels ทุกวันนี้จะมีกลุ่มที่เรียกว่า Pet Influencer ด้วย ผมตั้งชื่อเล่นว่า ช่องดูหมาแมว ซึ่งผมกับแฟนชอบดูอยู่เป็นประจำ แต่ละ Channel นั้นมีผู้ติดตามจำนวนไม่น้อยเลย

ช่อง Cielmeowmun ซึ่งเป็นช่องแมวสองพี่น้อง ชิเอลกับคิรัวร์ มีผู้ติดตามกว่า 5.2 ล้านคน, ถัดไปทางขวา Japan and friends ช่องของจุ๊มเหม่ง หมาโกลเด้นและผองเพื่อน ด้วยผู้ติดตามกว่า 4 ล้านคน อีกสองช่องที่เหลือคือ Gluta Story ที่เลี้ยงทั้งหมา(จร)และแมว กับช่องข้าวเหนียวแมวมีม ที่มีผู้ติดตามไม่ต่ำกว่าล้านทั้งคู่

แม้กระทั่งตอนที่ผมกำลังนั่งเขียนบทความอยู่นี้ก็มี Talk of the town ที่คนให้ความสนใจกันมากคือ ข่าวที่น้องหมาไซบีเรียนหมวยเล็กถูกราดน้ำร้อนใส่ ที่ใน Google Trends ล่าสุดก็ขึ้นมาถึง 4 ช่อง คิดเป็น 20% ในกระดานแสดงคีย์เวิร์ดยอดนิยมในประเทศไทยวันนี้

ทีนี้ลองคิดภาพ จุ๊มเหม่งหรือพี่ชิเอลแมวมึน ดูดวงแบบโคตรแม่น ด้วยจริตสุดน่ารัก แล้วค่อย Upsell ขายของสายมู อย่างเช่น ทำบุญออนไลน์ แพคเกจแก้ปีชง วัตถุมงคลเสริมดวง นั่นแหละครับหน้าตาของ Product ที่ผมคิด

เราจะหารายได้ด้วยโมเดล Freemium and Upselling ซึ่งมาจากคำ 3 คำคือ
1. Free
User สามารถเข้าถึงฟังก์ชันพื้นฐานของผลิตภัณฑ์ได้โดยไม่ต้องเสียค่าใช้จ่าย
2. Premium
หาก User อยากให้ AI ฉลาดมากยิ่งขึ้นสามารถเปลี่ยนไปใช้แบบ Premium ได้ มี AI Chatbot ตัวนึงชื่อ Replika ซึ่งให้บริการ AI เพื่อนคลายเหงาก็ใช้กลยุทธ์ประมาณนี้เช่น ถ้าอยากให้ AI คุยเรื่องโคนันได้ ก็ซื้อ Knowledge ในแอพให้มันอ่าน เราจะทำแบบเดียวกันนั้น
3. Upselling
เมื่อผู้ใช้เริ่มติด เราจะขายของสายมูเพิ่มเติมเพื่อสร้างรายได้

Competitive Analysis

ตำราพิชัยสงคราม ของซุนวูได้กล่าวไว้ “รู้เขา รู้เรา รบร้อยครั้งชนะร้อยครั้ง” ดังนั้นเราจึงต้องทำ Competitive Analysis ด้วยจะได้รู้ว่า เราอยู่ตรงไหนในตลาด

ผมสร้าง Matrix ง่ายๆขึ้นมาเพื่อพล็อตกราฟ ลองเช็คดูว่าถ้าเราทำแอพแนวนี้ออกมา จะพอมีโอกาสในตลาดมั้ย? โดยสิ่งที่เราสนใจคือ เรื่องของคุณภาพและราคา เราจะลากแกน X แทนราคา และลากแกน Y แทนคุณภาพ จะสามารถอธิบายกราฟนี้ได้เป็นกลุ่มผู้เล่นในตลาด 4 กลุ่มได้แก่

1. High Price, High Quality

กลุ่มหมอดูแบบดั้งเดิมที่มีชื่อเสียงโด่งดัง มีคนบอกต่อเพราะสามารถดูดวงได้อย่างแม่นยำ

2. Low Price, High Quality

กลุ่มนี้เราใส่ชื่อตัวเอง, Myhora และเพราะเป็นบริการออนไลน์ที่ราคาไม่แพงมาก และเป็นบริการที่มีคุณภาพสูง

3. Low Price, Low Quality

กลุ่มนี้ใช้กลยุทธ์ราคาถูกในการดึงดูด User อาจจะมีคุณภาพไม่มากนัก

4. High Price, Low Quality

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

ผมค่อนข้างมั่นใจว่า ยังไม่เคยมีบริการ AI แมวดูดวงอย่างแน่นอนหลังจากการลองเช็คคีย์เวิร์ดเหล่านี้ใน Google มาสักพักหนึ่ง ซึ่งนั่นเองจะทำให้แอพแมวดูดวงของเป็นเจ้าแรกในตลาดไปโดยปริยาย (ที่หาเจอคือคำว่า บริการดูดวงกับ AI ส่วนแมวดูดวง ปรากฎว่าแมวนั้นไม่ใช่ชื่อสัตว์ แต่เป็นชื่อคน )

Business Model Canvas
ปิดท้ายการวิเคราะห์ฝั่งธุรกิจ ด้วย Business Model Canvas ซึ่งจะทำให้เราจะเห็นภาพรวมธุรกิจของเราทั้งหมด ผมชอบที่มันมีลักษณะเป็นคำถามประมาณว่า ใคร ทำอะไร ที่ไหน อย่างไร เพื่อใคร? ไปดูการวิเคราะห์แอพของเรากันครับ

1. กลุ่มลูกค้า (Customer Segments)
ได้แก่ คนรักสัตว์, คนที่ชื่นชอบการดูดวง, คนที่ชอบเรื่องเทคโนโลยี และคนวัยหนุ่มสาวที่มองหาความบันเทิงและแอพที่แปลกใหม่

2. ข้อเสนอคุณค่า (Value Propositions)
ได้แก่ ความบันเทิง เพราะ แอพของเราจะมอบประสบการณ์ที่สนุกและไม่เหมือนใครผ่านการทำนายดวงด้วย AI, ความสะดวกสบายเพราะ User สามารถเข้าถึงการทำนายดวงได้ง่ายๆ ผ่าน Chatbot ที่ให้บริการตลอด 24 ชั่วโมง

3. ช่องทางการตลาด (Channels)
User สามารถดาวน์โหลดแอพพลิเคชั่นได้โดยตรงจาก App Store และหน้าเว็บไซต์ Official,เพื่อให้เป็นที่รู้จักและติดตลาด เราจะใช้ Social Media เช่น Facebook, Instagram, TikTok ช่วยโปรโมทอีกแรง อันนี้รวมไปถึงอินฟลูเอนเซอร์และบล็อกเกอร์สายมู และสายสัตว์เลี้ยงด้วย

4. การรักษาความสัมพันธ์กับลูกค้า (Customer Relationships)
คาแรคเตอร์น่ารักๆของน้องแมวจะช่วยดึงดูดให้ User เกิดความพึงพอใจและใช้งานแอพต่อไป นอกจากนั้นเราจะมีฝ่าย Support คอยช่วยเหลือหากเกิดปัญหาในการใช้งาน, แอพของเราจะมีการอัพเดทเป็นประจำเพื่อแก้ไขบั๊กที่อาจจะเกิดขึ้น, มี Online Community เพื่อ User มาแบ่งปันประสบการณ์ใช้งานร่วมกัน

5. ช่องทางรายได้ (Revenue Streams)
User ใช้บริการแบบ Free ได้ แต่หากอยากได้ความสามารถของแอพที่เพิ่มขึ้นก็มีบริการแบบ Premium ให้ซื้อเพิ่มเติมในลักษณะ In App Purchased, แอพจะได้รายได้จากการโฆษณาภายในแอพ รายได้การขายสินค้าและบริการ เช่น ทำบุญออนไลน์ สินค้าสายมู เป็นต้น

6. ทรัพยากรหลัก (Key Resources)
OpenAI API ที่เราใช้สำหรับการสร้าง Chatbot, โปรแกรมเมอร์ผู้พัฒนาและดูแลแอพ, Content Creator ผู้สร้างเนื้อหาสำหรับการทำการตลาดและเทรนนิ่ง AI, และทีมการตลาด

7. กิจกรรมหลัก (Key Activities)
การพัฒนาและการดูแลแอพให้มีความน่าสนใจอยู่เสมอ, การตลาด และการเก็บ วิเคราะห์ข้อมูลเพื่อนำมาพัฒนาแอพต่อไปในอนาคต

8. พันธมิตรหลัก (Key Partnerships)
OpenAI, อินฟลูเอนเซอร์ บล็อกเกอร์สายมู สายสัตว์เลี้ยง, แบรนด์สายมูและแบรนด์ที่เกี่ยวกับสัตว์เลี้ยง

9. โครงสร้างต้นทุน (Cost Structure)
ค่าใช้บริการ OpenAI API, ค่าเซิร์ฟเวอร์, ค่าจ้างโปรแกรมเมอร์, งบประมาณสำหรับการโฆษณา ค่าจ้างอินฟลูเอนเซอร์, ค่าจ้างทีมการตลาด

Non-technical ฝั่ง Design

AI Character Development
“เมี๊ยวหมอ” แม่นด้วย น่ารักด้วย

คอนเซปต์คือ น้องแมวของผมจะต้องน่ารักและเก่งที่สุด ผมจึงเริ่มค้นหา Reference ต้นแบบ จนมาพบกับรูปน้องแมวตัวนึงที่กำลังนั่งดูไพ่ยิปซีจากเว็บไซต์ Reddit ผมชอบมาก ตรงตามที่คิดไว้เลย(จริงๆอยากได้รูปแมวถือกระดานชนวนเหมือนกัน แต่หาไม่เจอ) จึงขออนุญาตหยิบยืมมาเป็นต้นแบบก่อน จากนั้นก็ค่อยๆสร้าง Profile ให้มันจนกลายเป็น “เมี๊ยวหมอ” (มาจากคำว่า เมี๊ยว ซึ่งเป็นเสียงร้องของแมว ผสมกับคำว่า แม่หมอ) ตามรูปข้างล่างนี้

เมี๊ยวหมอ แมวนักพยากรณ์ จะทำหน้าที่เป็นหมอดูสุดฉลาดที่สามารถทำนายดวงชะตาให้กับ User ได้อย่างแม่นยำ เมี๊ยวหมอจะเรียก User ว่า “นุด” และเรียกตัวเองว่า “เลา” เพื่อสร้างความมีชีวิตชีวาของบทสนทนา ขณะเดียวกันหาก User เลือกที่จะถามคำถามอื่นๆนอกเหนือจากนี้ เมี๊ยวหมอจะตอบว่า ไม่สามารถคุยเรื่องนั้นได้และถามย้อนกลับมาเพื่อให้ User เริ่มทำการดูดวงตามหน้าที่หลักของมัน

คาแรคเตอร์ของ AI ที่เราเพิ่งสร้างเป็นสิ่งสำคัญมาก เพราะเราจะเอาข้อมูลชุดนี้ไปสร้างเป็น Prompt (ชุดคำสั่ง) เพื่อป้อนเข้าสู่ GPT-4o โมเดล AI ที่เราเลือกใช้สำหรับโปรเจคนี้ให้มันทำงานได้ถูกต้องตามที่เราต้องการต่อไปครับ

UX/UI Design
เราจะทำ 4 อย่างได้แก่ Persona Development เพื่อจำลอง User ของเรา, User Flow เพื่อให้รู้ขั้นตอนการใช้งานระบบของ User, Design System เพื่อกำหนดแนวทางการใช้สี ฟอนท์ ไอคอนต่างๆให้เป็นไปในทิศทางเดียวกันทั้งโปรเจค สุดท้ายคือสร้าง Wireframe เพื่อเอาสิ่งที่เราคิดทั้งหมดมาเขียนเป็นแบบร่างเพื่อใช้ในการพัฒนาจริง

Persona Development

จากรูปคือการอธิบาย User Target ด้วย Venn Diagram จะเห็นจะว่ามีวงกลม 2 วงซ้อนทับกัน ซ้ายมือคือ Believer หรือ กลุ่มคนที่ชอบดูดวง ขวามือคือ Pet Lover หรือ กลุ่มคนที่รักสัตว์ พื้นที่ตรงกลางที่วงกลมทั้งสองมาซ้อนทับกันพอดีก็จะเป็น User Target หลักของแอพเรานั่นคือ กลุ่มคนรักสัตว์ที่ชอบดูดวงด้วย

ต่อไปนี้ผมจะสร้าง Persona ของ 3 คน ที่มีโอกาสเป็น User ของเรา
(เงื่อนไขบังคับคือ ทั้ง 3 คนจะต้องใช้สมาร์ทโฟนเป็น)

1. กลุ่มคนรักสัตว์ที่ชอบดูดวง
เป็นกลุ่ม User หลักของเรา ได้แก่ ป้าโก๊ะ ชาวกรุงเทพ อายุ 62 ปี อดีตเจ้าของร้านกาแฟ ซึ่งปัจจุบันอยู่ในวัยเกษียณ ไม่ได้ทำงานแล้ว ป้าโก๊ะเป็นคนชอบดูดวงมาก อีกทั้งยังเป็นคนรักสัตว์ที่บ้านเลี้ยงไว้ทั้งหมาและแมว Pain Point ของป้าโก๊ะคือ ยังไม่เคยเห็นว่ามีแมวที่สามารถดูดวงได้ด้วย

2. กลุ่มคนรักสัตว์ที่เฉยๆกับการดูดวง
อาจจะเป็น User ของเราในอนาคต ได้แก่ หมอตูน ชาวจังหวัดฉะเชิงเทรา อายุ 33 ปี อาชีพแพทย์แผนไทย หมอตูนเป็นคนรักสัตว์ที่บ้านเลี้ยงแมวไว้ 2 ตัว หมอตูนเฉยๆกับการดูดวง แต่ไม่ได้ต่อต้านเพราะ ล่าสุดกำลังจะเปิดคลินิคของตัวเองยังมองหาฤกษ์ที่ดีที่สุดด้วยการไปดูดวง Painpoint ของหมอตูนคือเรื่อง Accessiblity ที่รู้สึกว่าการดูดวงนั้นเข้าถึงยากและดูจริงจังไปหน่อย

3. กลุ่มคนชอบดูดวงที่เฉยๆกับการเลี้ยงสัตว์
มีพื้นฐานที่ดี ถ้าคนกลุ่มนี้เปิดใจ เค้าจะเป็น User ของเราในอนาคต ได้แก่ พอล ชาวจังหวัดนนทบุรี อายุ 24 ปี อาชีพคนขับรถส่งอาหาร พอลชอบดูดวงออนไลน์ระหว่างนั่งรอรับออเดอร์ Painpoint ของพอลคือ เริ่มเบื่อกับการดูดวงแบบเดิมๆแล้ว

User Flow
เราออกแบบ User Flow ของแอพ ให้เป็น 6 steps ดังนี้
1. Opening the App
User จะเข้าสู่หน้าจอต้อนรับ ซึ่งจะเป็น Landing Page ที่แนะนำบริการทั้งหมด มีปุ่ม Get Started เพื่อให้กดเพื่อเริ่มใช้งาน
2. Authentication
สำหรับ User เก่าให้ Login ส่วน User ใหม่ให้เข้าสู่การสมัครสมาชิกเพื่อเริ่มใช้งาน
3. Onboarding
สำหรับ User ใหม่ให้แนะนำการใช้งาน เนื่องจากเพิ่งเคยใช้เป็นครั้งแรก
4. Main Screen
User เข้าสู่หน้าจอหลักของแอพ นั่นคือ หน้าจอแชทกับ AI เมี๊ยวหมอ
5. Setting / Help
User สามารถตั้งค่าการใช้งานแอพหรือติดต่อ Help & Support
6. Profile Management
User สามารถเข้าถึงและแก้ไขข้อมูลของตัวเองได้จาก Main Screen

เราจะเริ่มออกแบบเฉพาะ Feature ที่สำคัญที่สุดสำหรับการสร้าง MVP ก่อน นั่นคือ หน้าจอหลัก(Main Screen) ที่ User คุยกับ AI เมี๊ยวหมอเพื่อทำนายดวงชะตา ดังนั้น ในส่วนของหน้าจออื่นๆ ที่จะต้องออกแบบทั้งโปรเจคเต็มรูปแบบ เช่น Landing Page, Sign Up & Login, Onboarding, Setting & Help และ Profile Management จะไม่ได้รวมอยู่ในบทความนี้ด้วย

Design System
ต่อมาเป็นการสร้าง UI Design System ของแอพ ซึ่งเราจะออกแบบดังนี้
1. Colors
จะใช้สีหลักคือ สีเหลืองอ่อน(มาก) รหัสสี #fef9f3 นอกจากนั้นใช้ สีดำที่ไล่เฉดลงเรื่อยๆ ครอบคลุมสีเทาไปจนถึงสีขาว (เลือกสีให้เข้ากับรูปน้องแมวต้นฉบับ)
2. Typography
ใช้ฟ้อนท์ชื่อ Inter กำหนดขนาดตั้งแต่ h1 - h6, p และ small
3. UI Components
ใช้ UI Components เพื่อความสะดวกและลดเวลาการทำงานลง ตัวที่ใช้นี้ชื่อ shadcn-ui ผมชอบมาก เว็บบล็อกที่ได้อ่านอยู่นี้ก็ใช้ตัวนี้เหมือนกัน
4. Icons
ใช้ Icon Packs จาก ant-design ทั้งแบบ Outlined และ Filled

Wireframe
การทำ Wireframe ทำได้ 3 แบบ ได้แก่ Low-fidelity Wireframes, Medium-fidelity Wireframes และ High-fidelity Wireframes เรียงตามลำดับจากความละเอียดน้อยไปหามาก โปรเจคนี้ผมทำแบบ Lofi ก่อน วาดสิ่งที่คิดลงไปบน Ipad จนได้ Main Screen ในสองขนาดหน้าจอคือ Desktop / Tablet และ Mobile ปรับแก้จนเข้าที่เข้าทางจึงนำไปทำแบบ Hifi ในโปรแกรม Figma ต่อ

หน้าจอนี้แบ่งออกเป็น 2 ส่วน ฝั่งซ้ายเป็นส่วนของ Branding มีรูปและชื่อของเมี๊ยวหมอ ด้านล่างเป็นคำบรรยาย ส่วนฝั่งขวาช่องแชท สามารถระบุได้ชัดเจนว่า ข้อความนั้นๆเป็นของใคร (ของ User หรือของ AI) ด้านล่างมีช่อง Input ให้ User สามารถส่งข้อความโต้ตอบกับเมี๊ยวหมอได้ ตรงนี้ออกแบบคล้ายกับแอพพลิเคชั่น Chatbot อื่นๆ

เมื่อได้ทุกอย่างครบ ก็ถึงเวลาเขียนโค้ดเพื่อพัฒนาโปรเจคจริง

เข้าสู่พาร์ท Technical

Tech Stack Selection
เริ่มต้นจากการเลือก Tech Stacks สำหรับการพัฒนาโปรเจคก่อน ในส่วนนี้มักเลือกจากความถนัดของนักพัฒนาเป็นหลัก ซึ่งแน่นอนว่าด้านล่างนี้คือ เครื่องมือที่ผมถนัดทั้งหมด เพราะทั้งโปรเจคมีแค่ผมคนเดียว ฮ่าๆๆ

Frontend
ในส่วนของการสร้างหน้าเว็บใช้ Next.Js (Typescript) ร่วมกับ shadcn/ui ซึ่งเป็น UI Components ที่ผมชอบมาก ใช้ง่าย ประหยัดเวลาการทำงาน อีกทั้งตัวดีไซน์ก็มีความมินิมัล เหมาะกับโปรเจคของเรา ในส่วน Icons ผมใช้ของ ant-design

Backend
ใช้ Nest.Js ร่วมกับ MongoDB (NoSQL Database) โปรเจคเกือบทั้งหมดที่ผมเคยทำในบริษัทใช้ Nest.Js ผมรู้สึกว่านี่เป็น Node.Js Framework ที่แบ่งสัดส่วนของ directory ได้ดี มีความเป็นระบบสูง ทำให้การ Scale Up Project ขึ้นไปในอนาคตสามารถทำได้ง่าย

เพื่อความรวดเร็วในการพัฒนา สโคปงานสร้าง MVP นี้จะมีเฉพาะ Frontend ก่อน เราจะยังไม่พัฒนาในส่วนของ Backend และ Database (ดังนั้นเราจะ Call API ไปยัง OpenAI ผ่าน Frontend ด้วย Vercel AI SDK ก่อน หลังจากนั้นจึงค่อย Migrate Code นี้เป็น Nest.Js ภายหลัง)

System Architecture
ผมจะวาดภาพเพื่อให้เห็นการทำงานของโปรแกรมของ เริ่มจาก
1. User เมื่อเข้ามาถึง Main Screen แล้วจะส่ง Request ซึ่งเป็นข้อความที่ต้องการถาม AI เมี๊ยวหมอ มายัง Web App
2. Web App ได้รับ Request นั้นก็ทำการส่งต่อข้อมูลไปยัง OpenAI ด้วยการ Call API (method POST) ตรงนี้เราใช้ Vercel AI SDK เป็นเครื่องมือช่วยอำนวยความสะดวกในขั้นต้นก่อน ในเวอร์ชั่นแก้ไขเราจะเรียกมันผ่าน Backend ที่เป็น Nest.Js แทน
3. OpenAI ได้รับ Request ก็ทำการประมวลผลและส่ง Response กลับไปหา Web App และ Chat Data จะถูกเก็บไว้ใน Database MongoDB หลังจากเสร็จสิ้นกระบวนการนี้
4. Web App จะแสดง Response นั้นลงบนหน้าเว็บให้ User เห็น เป็นการจบการทำงานใน 1 Request

Prompt Development
การจะใช้งาน OpenAI API เพื่อทำโปรเจคจะต้องสมัครสมาชิกแบบเสียเงินก่อน ผมเลือกใช้แพคเกจแบบ Pay as you go คือ ใช้เท่าไหร่เสียเงินเท่านั้น และแน่นอนโมเดลที่เราเลือกคือ GPT-4o ซึ่งผมคิดว่าคุ้มค่าที่สุด เป็นตัวใหม่ล่าสุด ประหยัด และมีประสิทธิภาพดี ระบบจะให้เราเติมเงินขั้นต่ำ 5 USD เพื่อเริ่มใช้งาน เมื่อทำขั้นตอนนี้เสร็จเราจะเข้าสู่ Dashboard ของ OpenAI

Prompt Development คือ การสร้างคำสั่งป้อนเข้าสู่ AI เพื่อดึงศักยภาพการทำงานสูงสุดของมันออกมา ทำให้ AI ตอบกลับได้ตรงความต้องการของเรามากที่สุดพร้อมบริบทที่ครบถ้วนโดยไม่เกิดอาการหลอน (Hallucination) สโคปของงานนี้รวมไปถึงการพัฒนาฐานข้อมูลโดยการเทรนข้อมูลให้กับโมเดลด้วย

Menu Bar จะอยู่ทางขวามือ มีหลายตัวเลือกให้ลองสำรวจ แต่วันนี้เราจะสนใจเฉพาะ Playground ในส่วนของ Chat ก่อน เราจะเอาคาแรคเตอร์ของ AI Chatbot ที่เราออกแบบไว้แล้วก่อนหน้ามาสร้างเป็น Prompt เพื่อให้ GPT-4o ทำงานตามที่เราต้องการนั่นคือ เป็นหมอดูด้านโหราศาสตร์ไทยที่เก่งกาจ และ Keep คาแรคเตอร์เป็นเมี๊ยวหมอ แมวส้มสก็อตติช โฟลด์สุดน่ารัก (จะเห็นว่ามีปุ่มนึงชื่อ Fine-Tuning ตรงนั้นคือการป้อน Datasets เพื่อเข้าไปเทรนโมเดลให้มีประสิทธิภาพการทำงานดีขึ้น หากในอนาคตอยากให้ AI ของเราเก่งขึ้น ก็สามารถกลับมาทำสิ่งนี้ได้)

ผมนั่งปรับ Prompt ลองคุยโต้ตอบกับ AI อยู่สักพักหนึ่งก็ถึงจุดพึงพอใจ(ณ เวลานี้) ตอนนี้ผมได้เมี๊ยวหมอ แมวนักพยากรณ์มาเรียบร้อยแล้ว และด้านล่างนี้คือ Final Prompt ที่ผมใช้ครับ

Software Development
ผมจะไม่เล่าเรื่องการเขียนโค้ดโดยละเอียดบรรทัดต่อบรรทัด แต่จะเล่าโดยภาพรวมว่า ต้องทำยังไงบ้าง จึงได้ MVP นี้มา

1. Init Project
เริ่มต้นจากการ Init Project ก่อน รวมถึง Install Library ที่จำเป็นต้องใช้ก็จะมี Next.Js, shadcn/ui, ant-design และ Vercel AI SDK

2. Connect OpenAI API
ค่อยๆเริ่มเขียนโค้ดจากการเชื่อมต่อ Web App ของเรากับ OpenAI โดยใช้ Vercel AI SDK ช่วยอำนวยความสะดวก ในส่วนนี้เราจะต้องมี API Key ซึ่งสามารถ Generate ได้จากหน้า Dashboard เดียวกันกับตอนที่เราสร้าง Prompt เมื่อเชื่อมต่อสำเร็จเราจะได้ Return 200 (Success) กลับมาในหน้า Console แบบนี้

ถึงตอนนี้เราก็สามารถคุยกับ AI เมี๊ยวหมอ เหมือนใน Playground ที่ใช้เทสได้แล้ว เพียงแต่จะเป็นการคุยแบบ Technical นั่นคือ Send and Get Response ผ่าน API

3. Frontend Integration
พอเชื่อมต่อกับ OpenAI ได้ เราจะเริ่มสร้างหน้า main screen ตามที่ได้ออกแบบไว้ เสร็จแล้วก็รวมร่างกับข้อที่ 2 ระหว่างนี้ทดสอบแสดงผลข้อความที่ได้ Return กลับมาบนหน้าว่างๆก่อน

โอเคใช้ได้ จากนั้นก็ค่อยๆสร้าง UI ตามแบบ ค่อยๆ debugging ไปเรื่อยๆ พอ Integrate ทุกอย่างเสร็จก็จะได้ Web App เมี๊ยวหมอพยากรณ์แบบนี้เลย น่ารักมาก

ลองคุยกับเมี๊ยวหมอเล็กน้อย ไม่มีปัญหาอะไร ใช้งานได้ดี

Deployment
หลังจากเขียนโค้ดเสร็จเรียบร้อย ตอนนี้เราได้ MVP มาแล้วครับ แต่ยังเอาไปให้ User เทสไม่ได้เพราะเราพัฒนาโปรเจคนี้บน localhost ตอนนี้จะมีแค่ผมที่สามารถใช้แอพนี้ได้ เราจะต้องเอาไป Deploy ขึ้น Host ก่อน แล้วเราก็จะได้ URL สำหรับ Web App มา ทีนี้ก็จะเอาไปเปิดผ่าน Browser จากที่ไหนก็ได้

ผมเลือก Deploy โปรเจคนี้บน Vercel ที่ Developer ทุกคนน่าจะรู้จักกันดี เพราะมันทั้งง่ายและสะดวกสบายมาก รองรับการพัฒนาแอพในหลายๆภาษา หลาย Framework มี CI/CD ให้ ที่สำคัญมี Free Tier ให้ใช้

การ Deploy ก็ง่ายๆ แค่ 3 ขั้นตอนคือ
1. เอาโค้ดขึ้น Github
2. Config ค่า Environment ให้เรียบร้อย
3. กด Deploy ใน Vercel (ใครถนัดใช้ CLI ก็ไม่ว่ากันนะครับ)

แค่นี้ก็เป็นอันสิ้นสุดการสร้าง MVP เมี๊ยวหมอ AI Chatbot ของเราครับ หลังจากนี้จะเป็นการทดสอบตลาดโดยให้ User ลองใช้ Web App จริง จะได้ผลเป็นอย่างไร จะมี Feedback ดีๆกลับมาพัฒนาผลิตภัณฑ์นี้ต่ออย่างไร สามารถติดตามที่บล็อก อาจานพอล ได้เช่นเดิมครับ (นั่นคือ จะเวิร์คเหมือนที่คิดไว้มั้ย ฮ่าๆๆ)

บทความนี้ผมเขียนซะยืดยาว ท่านใดที่อ่านมาถึงตรงนี้ต้องขอขอบพระคุณเป็นอย่างสูงครับ หากอยากลองเล่นแอพให้น้องแมวทำนายดวงให้เชิญที่ลิงค์ด้านล่างได้เลยครับผม

ทดลองเล่นแอพ: https://meowmore-ai.vercel.app/