เซฟได้มีโอกาสไปร่วมงาน “Prompt to Product ปั้นโปรดักส์เงินล้านได้ โดยไม่ต้องโค้ด”จัดโดยกลุ่มคอมมูนิตี้ NO-CODE THAILAND และทาง Gang Connecter ในวันอาทิตย์ที่ผ่านมา (วันอาทิตย์ที่ 9 มีนาคม 2025 ณ Yell Advertising ลาดพร้าว18) เป็น Workshop 1 วันเต็มที่ช่วยเปลี่ยนไอเดียทางธุรกิจให้เป็น Digital Product ที่ใช้ได้จริงโดยไม่ต้องเขียน Code! และที่สำคัญคือฟรี ไม่มีค่าใช้จ่าย ! โดยส่วนตัวเราเคยได้ยิน Concept นี้มาบ้างแล้วแต่ไม่เคยได้ลองทำมันสักที พอมีงานแบบนี้ก็จะได้ลองทำซะที บทความนี้เลยอยากมาเขียนรีวิวงาน แชร์ความรู้และประสบการณ์ที่ได้จากการไปงานนี้มาให้ทุกคนได้อ่านกันคับ
พูดถึงงานและเนื้อหา
งานแบ่งออกเป็น 2 ช่วงคือปูพื้นฐานและ Workshop เริ่มต้นช่วงเช้าจะเป็นการเรียนในหัวข้อต่าง ๆ ตั้งแต่การคิดไอเดียแอปเพื่อแก้ปัญหาธุรกิจ โดยใช้ Business Lean Canvas (สอนโดย P’โอปอ) และมาเรียนรู้ต่อในส่วนของพื้นฐานในการพัฒนาระบบ (By P’โอปอ, P’Top) และสอนใช้เครื่องมือ Bolt.new (By P’Natt) เนื้อจัดหนักจัดเต็มมากเลยได้สรุป Key Takeaways มาฝากทุกคนค้าบ
- Business Canvas จะเหมาะกับผลิตภัณฑ์ที่เป็นด้าน Supply Chain มากกว่า แต่ถ้าเป็น Business Lean Canvas จะเหมาะกับพวก Digital Product
- เจ๊งตั้งแต่บนกระดาษ – ก่อนที่จะเริ่มทำ Product อะไรให้เราลองตอบในแต่ละช่องของใน canvas ก่อนเพื่อทำความเข้าใจกับมันให้มากขึ้นเช่น
- มีปัญหาจริงไหม (Problem)
- ตลาดใหญ่เพียงพอไหมและสามารถขยายได้ไหม (Customer Segments)
- Unfair Advantage อาจจะเป็นสิ่งที่ลอกเลียนได้ยาก, Connection ที่คนอื่นไม่มา, CoFounder ในทีม
- จะเจ๊งไม่เจ๊งดูได้จาก 3 ส่วนนี้คือ
- Key Metric: ดูว่า Product ของเรายังไปได้ดีไหมแล้ววัดผลอย่างไร (Perform) ไหม ซึ่งควรคิดตั้งแต่แรกไม่ใช่มาคิดทีหลัง ตัวอย่างเช่น Netflix -> Subscriber, Retention Rate
- Cost Structure: มีค่าใช้จ่ายอะไรบ้าง
- Revenue: จะหารายได้อย่างไร เช่น Subscribe หรือการขาย product ให้คนอื่นก็นับเป็นหนึ่งในนั้น
- https://madebyai.info เป็นเว็บที่สามารถดูเทมเพลต Lean Canvas และใช้ AI ช่วยคิดได้
- ในการพัฒนาระบบแบ่งออกเป็น 3 ส่วนคือ Frontend (FE), Workflow, Backend (BE) โดยฝั่ง FE มันคือสิ่งที่ผู้ใช้เห็นหรือใช้งาน เช่น ปุ่ม, ฟอร์ม ส่วนถัดมาคือ Workflow เป็นส่วนที่เมื่อเราทำอะไรบางอย่างบน FE จะเกิดอะไรบางอย่างเช่น เมื่อเราคลิกปุ่ม ระบบจะไปดึงข้อมูล ส่วนสุดท้ายคือ Backend คือส่วนหลังบ้านเหมือนในครัวที่เราไม่รู้ว่าเกิดอะไรขึ้น แต่จริงๆระบบทำอะไรบางอย่างเช่น มีการเก็บข้อมูลลงฐานข้อมูล
| FE | Workflow | Backend |
| – Web Page – Form – Button – Animation | – Click – API Call – Validate – Fetch Data | – Database – Authentication – Security – Background Task |
- ในต่างประเทศมี StartUp หลายตัวที่ใช้ No-code/Low-code platform ในการสร้างแอปและหารายได้หลักล้านได้
- No-code/Low-code platform มีหลายตัวให้เลือกใช้ เช่น n8n, Bolt.new, xano.com, bubble.io, lovable.dev, V0.dev
- Bolt.new เป็นแอป AI ที่เราสามารถ Prompt เพื่อสร้างแอปได้โดยไม่จำเป็นเขียนโค้ด (No Code) โดยระบบใช้ Anthropic’s Claude 3.5 Sonnetเข้ามาช่วยเขียนโค้ด ซึ่งมาพร้อมกับความสามารถที่สามารถเชื่อมต่อกับฐานข้อมูล Supabase ได้ทันที พร้อม Deploy แอปขึ้น Production ได้เลย
- สมัครลองใช้งานได้ฟรี แต่มีโควต้าโทเคนจำกัด แต่ Package Pro จะได้ 10M Token/เดือน ราคาอยู่ที่ $20/เดือน
- สมัครได้ที่ https://bolt.new/?rid=6pttk8 (รับฟรี 200K tokens เมื่อสมัครผ่านลิงก์ที่เซฟให้และซื้อแพคเกจ Pro) **ถ้าทำแอปยังไงก็เกินโควต้าฟรี เพราะแอปที่ทำใช้ไป 8M Token
- ตัวอย่างงานที่สร้างด้วย Bolt.new:
- P’Natt แบ่งโปรเจกต์เป็น 3 ประเภท
- No Memory needed – ไม่ต้องบันทึกลงฐานข้อมูลหรือบันทึกลงบนบราวเซอร์ชั่วคราว ฟีลแบบใช้งานแต่ละครั้งแล้วทิ้งเช่น แปลงไฟล์, Pomodoro **เหมาะกับคนเริ่มต้น
- Memory + Easy Logic – มีการเก็บข้อมูลเพื่อมาเรียกใช้ ซึ่งต้องต่อกับฐานข้อมูล แต่ Logic ง่าย ๆ เช่น บันทึกโน้ตและสรุป
- Memory + Sophisticate Logic – มีทั้งเก็บข้อมูลและ Logic แบบซับซ้อน
- Programming 101: หลักการคือด้านซ้ายเราป้อน Input เข้าไปแล้วในกล่องตรงกลาง ซึ่งระบบทำอะไรบางอย่างหรือประมวลผล และได้ผลลัพธ์ Output ออกมา
- ซึ่งเราควรเข้าใจก่อนว่าแอปพลิเคชันของเราจะมีฟีเจอร์อะไรบ้าง (แบ่งออกมาเป็น Module) แล้วนำมาวาดเป็น System Architecture ที่เป็นการกำหนดการเชื่อมโยงระหว่างส่วนประกอบต่างๆ เช่น Server, Database, API
- เมื่อเริ่มต้นในการสร้างโปรเจกต์ให้ใส่เกี่ยวกับ Project Overview และ Styling ที่อยากได้ ซึ่งหากมีรูป Wireframe สามารถแปะเข้าไปได้ นี่คือตัวอย่างของ prompt
Create a Voice Recording Note app where I can dump my thoughts and review them in a day by recording my voice or typing a note. Please set up the project following this information:
• Project Name: thoughtfully
• Project Logo URL: https://...
• Primary Color: #000000
• Secondary Color: #FFFFFF
• Background Color: #FAFAFA
Tasks:
1. Use ReactJS with Tailwind CSS. Also, create a global style sheet and apply it to all elements in the app.
2. Set up the project to connect with Supabase.
3. Implement the Login/Signup page as the first page.
4. Create a _redirects file for Netlify to handle client-side routing properly.- เวลาสั่งงานให้ไล่ไปทีละฟีเจอร์ โดยบอกว่ากำลังทำฟีเจอร์อะไร มี Requirement (ความต้องการ) อะไรบ้างและผลลัพธ์ที่ได้เป็นอะไร โดยให้ระบุเจาะจงและทำทีละ Task ต่อครั้ง
- เนื่องด้วย AI มีความจำที่จำกัดอาจจะทำให้จำได้ไม่หมด ตัวแอปจะมีฟีเจอร์ Knowledge ที่เราสามารถใส่ Project prompt เข้าไปได้
- Don’t get all in with AI’s Solution – ถ้าติด bug ลองให้ AI แก้ก่อนสัก 2-3 ครั้ง ถ้าไม่ได้ลอง copy error ไปถามแชทบอทตัวอื่น แต่ถ้าไม่ได้ลองถามเพื่อน คอมมูนิตี้ต่าง ๆ เช่น Stack Overflow (Ask Human)
ก่อนที่จะไปต่อกันในช่วงบ่ายก็มีข้าวเที่ยงให้เติมพลังเป็นข้าวผัดอเมริกัน (งานเลี้ยงดีสุดๆ งานฟรีแน่นะ >< ) แล้วไปลุยกันต่อในช่วงบ่าย โดยให้แต่ละคนที่มีไอเดียได้มา Pitching เพื่อให้เพื่อนๆในงานสามารถเลือกได้ว่าอยากไปรวมอยู่กับกลุ่มไหน หลังจากนั้นทางงานก็จะมีเวลาให้เรา 3 ชม.ในการพัฒนาไอเดียนั้นขึ้นมาเป็น App จริงๆ ขึ้นมา (ถ้าเป็น coding hackathon น่าจะตามตั้งแต่ขึ้นโปรเจกต์และทำฟีเจอร์ Login 555) และมานำเสนอช่วงท้ายเป็น Product Showcase
ซึ่งเซฟได้มาอยู่กับกลุ่ม Home Coming ทำแอปคอนเซปต์ด้านฮีลใจ บันทึก Mood อารมณ์ต่าง ๆ โดยมีพี่พี (เจ้าของไอเดีย ทีมทำนิทรรศการ Homecoming), พี่มุก, และพี่กาย โดยใช้เวลาช่วงแรกประมาณ 30-45 นาทีแรกในการ Develop Concept เพิ่มเติมก่อนว่าอยากให้แอปออกมาเป็นแบบไหน มีฟีเจอร์อะไรบ้าง โดยในทีมก็มีการ Research ต่าง ๆ ตั้งแต่ มีอารมณ์อะไรบ้าง (Emotion wheel), แอปที่มีอยู่ที่สามารถบันทึกอารมณ์ได้เช่น State of Mind ใน Health ของ Apple ซึ่งในกลุ่มรู้สึกเหมือนกันว่าถ้าบันทึกอารมณ์เฉยๆ ทำไปสักพักคนก็จะเบื่อแล้วไม่อยากบันทึก จะทำอย่างไรดี ? ในกลุ่มจึงได้คอนเซปต์และ pain ในการทำแอปนี้มา…
“บางทีเวลาเรามี mood หรืออารมณ์ต่าง ๆ เราไม่รู้ว่าจะ express สิ่งเหล่านั้นออกมาอย่างไรดี แอปนี้จะช่วยนำเสนอผ่านรูปแบบต่าง ๆ ให้ไม่ว่าจะเป็น ภาพ เสียง เพลง”
หลังจากที่ได้ Core Concept แล้วก็นำมาแตกเป็นฟีเจอร์และลองวาด Wireframe หลังจากนั้นแต่ละคนในกลุ่มก็ลอง Prompt เพื่อพัฒนาแอปขึ้นมากันคนละแอป ในคอนเซปต์เดียวกันดู ตลอด 3 ชม.เป็นเวลาที่สนุกมากๆ ได้เห็นแต่ละคนพัฒนาและต่อยอดกันคนละแบบ บางคนเป็นเลือกเสียงธรรมชาติให้ เลือกสีให้ หรือให้ AI ช่วยสร้างรูปภาพ express ความรู้สึกให้
สร้างแอป ECHO MOOD
“Feel your mood, Hear your song”
แอป ECHO MOOD เป็นแอปที่สามารถบันทึกอารมณ์และความรู้สึกในพื้นที่ปลอดภัยของคุณ โดย ECHO MOOD จะช่วยแนะนำเพลงแทนความรู้สึก เก็บลงเป็น gallery เพลงรายเดือนให้ นอกจากนี้มีฟีเจอร์ที่จะช่วยสร้าง Your Mood Journey ให้เห็นว่าตลอดทั้งปี อารมณ์ของคุณเป็นอย่างไร สามารถเข้าไปเล่นได้ที่ mood.safe.th
ในพาร์ทนี้ เซฟอยากจะแชร์ประสบการณ์และกระบวนต่าง ๆ ที่ใช้ในการพัฒนาแอปนี้ขึ้นมา ซึ่งวันงานใช้เวลา 3 ชม.ในการได้แอปสำหรับ DEMO ทำงานได้จริงขึ้นมา และเซฟใช้เวลา 1 วันในการเก็บ Bug เพื่อให้ทุกคนได้เล่นจริง แต่ก่อนเริ่มต้นขอเคลมก่อนว่าเซฟจบสาย IT เคยแตะๆงาน Full Stack Dev แต่ตอนนี้ผันตัวมาเป็นสาย Business ปัจจุบันทำ Product Manager (เปิดเป็น Data & AI Counsult ชื่อ ECSIGHT TECH) ค้าบ เลยทำให้เข้าใจ Code และเทคต่างๆ
เริ่มต้นเซฟได้นำคอนเซปต์ที่คุยกันในกลุ่มมาวาด Wireframe แบบง่าย ๆ บน iPad ก่อนเพื่อให้เห็นภาพว่าเราจะมีประมาณกี่หน้าออกมาลักษณะอย่างไรและลิสต์ออกมาว่าต้องมีฟีเจอร์อะไรบ้าง
- Login/Signup Feature
- Record your Emotion => เลือกอารมณ์และเขียนความรู้สึกได้
- Your Song for Your Mood => ระบบเลือกเพลงที่ตรงกับความรู้สึกให้
- Your Mood Journey => Bar แสดงสีของอารมณ์ตลอดทั้งปี
- Your Gallery => แกลอรี่เพลงจากอารมณ์ในแต่ละวัน
ตัวอย่าง Workflow หลัก
Input (Emotion + Details) => Process (เลือกเพลงจากอารมณ์) => Result (เพลง)
ตอนแรกอยากสร้างเป็นเสียงหรือดนตรีจากอารมณ์และความรู้สึก แต่ด้วยเวลาที่จำกัด + หา Tools ที่ฟรีไม่ได้ ก็เลยเลือกเป็นให้เป็นการเลือกเพลงจากอารมณ์แทนแล้วกัน ในส่วนของ Process ระบบจะใช้ AI ไปค้นหาเพลงและเลือกเพลงมาให้เรา โดยเซฟเลือกใช้ AI จาก Gemini เนื่องจากต่อ API ได้ฟรี (มีโควต้า) และในส่วนเพลงจะเลือกจาก YouTube เพราะเซฟเคยต่อกับ API มาก่อนและลองไปค้นหา Document แล้วว่ามี API ส่งเพลงกลับมาได้
**ข้อดีของการเข้าใจ Workflow คือเราสามารถ Plugin / Plugout แต่ละก้อนได้หมด เช่น ในอนาคตเราอาจจะเปลี่ยนเป็น Spotify แทน Youtube ก็ได้ หรือเปลี่ยนวิธีการแสดงผลลัพธ์เป็นอย่างอื่นก็ได้
หลังจากนั้นเซฟก็เริ่มจากใช้เครื่องมือ ChatGPT มาช่วยงานในส่วนของ Branding ช่วยเลือกสี เขียน Tagline และคำอธิบายแอป
รวมทั้งช่วยสร้างชุดข้อมูลเรื่องสีให้เรา เพราะเราอยากได้เป็นภาษาไทย (ง่าย ๆ คือขี้เกียจพิมพ์เอง 555) ก็ส่งให้รูปให้มันเพื่อให้มันช่วย Extract ชุดข้อมูลให้ โดยเรามีการกำหนดรูปแบบผลลัพธ์ข้อมูลที่อยากได้ เพื่อเวลาเลือกจะค่อยๆ แสดงทีละชั้น ซึ่งอิงจากคอนเซปต์ของ The Wheel of Emotions
หลังจากนั้นก็เริ่ม Prompt ลง bolt โดยใส่ชื่อแอป คำอธิบายแอป สไตล์สี และรูป Wireframe ลงไปเพื่อให้ได้โครงแอปก่อน แล้วเซฟก็จะแชทค่อย ๆ คุยทีละฟีเจอร์เพื่อปรับแต่งแอปไปเรื่อยๆ ซึ่งแต่ละฟีเจอร์ที่คุยก็จะมีการแคปรูป Wireframe เฉพาะหน้านั้นเพื่อพูดคุย แล้วคุยทีละองค์ประกอบ เพราะบางทีตัว Bolt ทำมาแค่ FE แต่ไม่ได้ใส่ Logic Function มาให้ เราก็ต้อง Prompt เพื่อบอกมันว่ากดสิ่งนี้ อยากให้เกิดอะไรชึ้น
มาเจาะลึกในส่วนของฟังก์ชันหลักในการทำงานกันดีกว่า
1. Your Song for Your Mood
หลักการคือเราต้องการให้คนเลือกอารมณ์และเขียนบรรยายความรู้สึกและสามารถแปลงเป็นเพลงได้ ซึ่งตรงนี้ส่วนนี้เซฟจะใช้ LLM อย่าง Gemini ในการทำความเข้าใจความรู้สึกและแนะนำเพลงออกมาให้ก่อนโดยขอแค่เพลงเดียว เลยใช้เรื่องของ Prompt Engineering เพื่อสั่งมันว่าจากข้อมูลนี้ให้ช่วยส่งชื่อเพลงกลับมาโดยเขียนในลักษณะที่กำหนด หลังจากนั้นก็จะนำชื่อเพลงและศิลปินที่ได้ไปค้นหาใน Youtube แล้วส่งเพลง URL และ Thumbnail กลับมา
ซึ่งเซฟมีใช้ ChatGPT ช่วยเพื่อให้มันแนะนำว่าเราจะเอา Key ของแต่ละแอปได้ที่ไหน
- เอา API Key ของ Gemini ได้ที่ Google AI Studio
- เอา API Key ของ YouTube Data ได้ที่ Google Cloud Console (ไปที่ YouTube Data API v3) **ถ้าไม่ใช่เดฟจะหายากหน่อย
หลังจากนั้นก็เอา key มาแปะใน Bolt ซึ่งข้อดีของ Bolt คือมันสร้างเป็นไฟล์ ENV (Environment) ให้ **ปกติแล้วพวก Key ต่าง ๆ มันเหมือนเป็นกุญแจเข้าบ้านเรา ซึ่งถ้ากุญแจเหล่านี้หลุดออกไปอาจจะทำให้ใครมีใครแอบเข้าบ้านยามวิกาลและขโมยของได้ ซึ่งถ้าไปอยู่ในไฟล์ทั่วไป ผู้ใช้งานที่เป็น dev จะสามารถดูโค้ดและอาจจะเจอ key เหล่านี้ แต่ถ้า key อยู่ใน ENV เขาจะไม่เห็น
ปัญหานึงที่พบคือมันไม่สามารถรันได้ ซึ่งลอง fix ด้วย bolt ดูก็แล้วก็ยังไม่ได้ ซึ่งคิดว่า Function ที่มันเขียนน่าจะมีอะไรบางอย่างผิดปกติแน่ ๆ เซฟก็เลยไปหา docs ด้านนอกว่าเวลาเรียกใช้ Function ใช้งานอย่างไร จากที่ค้นพบคือบางที Bolt มีชุดข้อมูลเก่าไม่อัปเดต ทำให้บางฟังก์ชันทำงานไม่ได้ เช่น เรียก Gemini ที่ยังเป็น v1 ซึ่งน่าจะเป็นฟังก์ชันเก่าที่ปิดไปแล้ว เราก็เลย copy ฟังก์ชันจาก docs ส่งให้ bolt แล้วบอกว่าใช้ฟังก์ชันนี้แทน ซึ่งก็สามารถใช้งานได้ทันที
2. Your Mood Journey
ส่วนนี้ค่อนข้างจะต้องอธิบายละเอียดให้กับมันเนื่องจากเป็นเรื่อง Data Visualization ในตอนแรกสิ่งที่ bolt ทำให้จะเป็น bar แยกออกจากกันหมด เราก็จะต้องอธิบายว่าอยากได้เป็น stack bar แค่ 1 bar เท่านั้น และให้ดึงข้อมูลส่วน mood level 2 (เนื่องจากเราส่งข้อมูลไปแบบ JSON) มาแสดง ซึ่งพูดคุยกับ bolt ประมาณ 6-7 ครั้งกว่าจะปรับแต่งออกมาได้ตรงตามที่ต้องการ ซึ่งส่วนนี้ถ้าเราไม่เข้าใจ data และวิธีการแสดงผลอาจจะได้ไม่ตรงตามที่ต้องการ
ส่วนสำคัญและปัญหาที่ใช้เวลาแก้นาน
จริงๆ ระบบนี้จะง่ายมากถ้าแค่มี Your Song for Your Mood คือแปลงอารมณ์เป็นเพลง แต่ด้วยความที่เซฟอยากได้หน้า dashboard ที่โชว์ Your Mood Journey ได้และเก็บเป็น gallery ได้เลยต้องทำพวก Login/Register และบันทึกลง DB ซึ่งส่วนนี้แหละที่ติดปัญหาทำให้ต้องมาทำต่ออีกวัน 555+ คือวัน DEMO มันสามารถบันทึกลง DB และทำฟีเจอร์ได้ครบถ้วนแล้วแต่ปัญหาคือ สร้างผู้ใช้อื่นไม่ได้ก็ไม่รู้เหมือนกันว่าทำไม เรา Login ได้แค่ Account เดียวที่เราสร้างไปอันแรก ตอน Demo Showcase ก็เลยได้ใช้แค่ Account ของเรา แต่ทำงานได้จริงน้าตอนนั้น
พอกลับมาบ้านก็เลยค้างคาใจ เลยลองแก้ดู ซึ่งมีไอเดียนึงที่อยากทำเพิ่มด้วยคือ 3rd Party Authentication หมายความว่าเราสามารถ Login ด้วย Google, Facebook ได้ ซึ่งถ้าในมุมนักพัฒนาปกติเราจะใช้ Firebase Authentication ที่เป็นเครื่องมือที่ทำให้เราต่อกับ 3rd Party ได้ง่าย เซฟก็เลยบอก bolt ว่าอยากต่อกับ firebase auth เพื่อทำ login/register สรุป แตก !! 555 คือแก้เท่าไหร่ก็แก้ไม่ได้ ทั้งลองไล่ดูโค้ดดูเบื้องต้น แก้ config ค่าให้ถูก ลอง code จาก firebase ให้ prompt ก็ยังไม่ได้สักที เลยตัดใจ แล้วบอก Bolt ว่าไม่เอาแล้ว ให้ใช้แบบ Login/Register แบบ email-password ปัญหาที่ตามมาคือ ขึ้นหน้าขาว 5555+ สาเหตุมาจากที่บางทีมันลบค่าแต่มันลบไม่ครบทุกที่ ยังเหลือบางที่ และปัญหาอันนึงมาจากเรื่อง Database ที่เราใช้ Supabase บางทีมันแก้แค่ Function แต่มันยังไม่ไปแก้ใน DB ให้เรา
และเซฟพึ่งมารู้ตอนหลังว่าจริงๆแล้ว Supabase เองก็มีฟีเจอร์ Authentication ที่สามารถทำ 3rd Party Authentication ได้เหมือนกับ Firebase เลย !!และนั่นคือสาเหตุที่หาตั้งนานว่าทำไมเรา Login ได้ user เดียวทั้ง ๆ ที่ไม่มี Code เก็บอีเมลเรา หรือใน table database ก็ไม่ได้บันทึกอีเมลนี้อยู่ (งมหาครึ่งวัน) เราก็เลยลอง prompt เพื่อแก้ไขส่วนนี้ก็แก้ไม่ได้สักที เลยลองไปสร้าง user โดยตรงใน Supabase Auth มันก็บอก error อีก เอาล่ะ 555 ก็เลยลองไปถามเพื่อนอย่าง chatGPT ว่าแก้ยังไงดี
ลองแก้ตามก็แล้วก็ยังไม่ได้อีก งมหาไปประมาณ 2 ชม.ได้ ก็ยังแก้ไม่ได้ เลยลองเปลี่ยนไปถาม Google พบว่ามีคนพบปัญหาเดียวกับเราเหมือนกัน
ปัญหานี้แก้ได้ด้วยการที่เราต้องสร้าง Function เพื่อ handle new users ซึ่งทาง Supabase มี docs แนะนำไว้ให้ในเว็บเลย: https://supabase.com/docs/guides/auth/managing-user-data#advanced-techniques พอนำ Function นี้ส่งให้ Bolt เพื่อช่วยเพิ่มปุ๊บ สรุปใช้งานได้แล้ววว และนี่คือสาเหตุหลักตั้งแต่วัน Demo ที่สร้าง user ใหม่ไม่ได้สักที แต่พอเป็นปัญหาเรื่องสิทธิและการดึงข้อมูลจาก DB แก้เหนื่อยมาก แม้ว่า bolt สามารถกด rollback ไปตรง Prompt ที่เราสั่งได้ก็จริงแต่ใน DB บางทีมันไม่ไปด้วย ก็เกิดปัญหาได้อยู่ดี เล่นเกือบหมด token เพราะใช้ไปทั้งหมดประมาณ 8.2M Token ตอนนี้เลยไม่อยากทำอะไรเพิ่มละ เดี๋ยวเครดิตหมดแล้วติด Bug (ถือคติที่ว่า ถ้ามันใช้งานได้ อย่าไปยุ่งอะไรกับมัน 555)
Logo
หลังจากที่ได้แอปออกมาแล้ว ก็ถึงเวลาทำ Logo ของแอปเลยใช้เครื่องมืออย่าง Adobe Fonts ในการหา Font จาก Ref ว่ามันคือ Font อะไรแล้ว เอามาสร้าง Logo บน Adobe Express (คล้าย Canva แต่เป็นของ Adobe) ส่วนตัว mascot ก็ให้ทาง ChatGPT ช่วยออกแบบให้ โดยคอนเซปต์เป็นรูปร่างตัวอักษร O แล้วเอามาเปลี่ยนสี ประกอบร่างกันกับ Logo แล้ว export ไฟล์ไปให้ Bolt อีกที
วิดีโอ DEMO
และนี่คือแอป Echo Mood ที่ได้
สรุป (ในมุมมองของเซฟ)
- Bolt เป็นเครื่องมือที่สร้างแอปได้แบบ No Code ก็จริง แต่รู้สึกว่ายังไม่ได้เหมาะกับ End Business User ที่ไม่มีพื้นฐาน dev เท่าไหร่ เพราะหลาย Bug ที่ติดปัญหา ต้องใช้ความเข้าใจด้าน technical แต่ถ้าทำเพื่อทดสอบไอเดีย คิดว่าได้อยู่
- มองว่าคนที่ได้เปรียบในการใช้เครื่องมือนี้คือ UI Designer เพราะสามารถอัป wireframe ให้ bolt แล้วแปลงเป็นระบบได้ ซึ่งถ้าพอเข้าใจ Software Development ได้ด้วยก็จะยิ่งได้เปรียบ
- ถามว่าต้องรู้มากแค่ไหน มองว่าเบื้องต้นต้องพอเห็นภาพในหัวว่าอยากทำแอปอะไรมี Wireframe ประมาณไหน สามารถแตกเป็น Feature Module เป็น และต้องรู้ว่าจะมี Input และ Output เป็นอะไร ที่เหลือใช้เครื่องมือ AI ช่วยในส่วน Process ได้ แต่แอปจะทำได้ตรงตามที่เราต้องการได้ถ้าเราสามารถสั่งได้ละเอียดและไล่ step-by-step เป็น
- ถ้าทำแอปแบบไม่ซับซ้อน ไม่ต้องเก็บลง Database อันนี้ทำได้ไม่ยาก แต่ถ้าต้องมีฟังก์ชัน หรือเก็บลงฐานข้อมูล เช่นทำระบบ User ต่อ API 3rd party อันนี้อาจจะต้องเข้าใจ code เพราะมี concern หลายจุดรวมทั้ง Security แม้ระบบพยายามทำให้ปลอดภัยแต่คงต้องรีวิวโค้ดดูอีกที
- ออกแบบ Flow ให้ดีก่อนที่จะไป prompt ช่วยได้เยอะ เพราะถ้าเปลี่ยนไปมา บางทีมันมีหลายไฟล์ที่เกี่ยวข้องกันแล้วแก้ได้ไม่ครบ (เหมือนกับในมุม dev ที่ถ้าเปลี่ยนชื่อฟังก์ชันทีนึงกระทบกับหลายไฟล์แล้วต้องมานั่งตามแก้)
- หลายปัญหา Bolt ไม่สามารถแก้ให้ได้ ต้องใช้เครื่องมืออื่นมาช่วยเช่น ChatGPT ค้นหาใน Google อ่าน docs หรือหาคนเชี่ยวชาญ มา debug บางทีอาจจะไวกว่า
- สุดท้ายสมัครได้ที่ https://bolt.new/?rid=6pttk8 (รับฟรี 200K tokens เมื่อสมัครผ่านลิงก์ที่เซฟให้และซื้อแพคเกจ Pro)