Cursor AI Crash Course: Build & Launch a Real App (No Code)

1
00:00:00,000 --> 00:00:08,529
ถ้าคุณเป็น Vibe Coder และไม่ได้ใช้ Cursor เพียงเพราะคิดว่ามันเป็นของสำหรับนักพัฒนาเท่านั้น

2
00:00:08,529 --> 00:00:14,120
เพื่อนเอ๋ย คุณกำลังพลาดของดีอยู่ เพราะ Cursor คือเวิร์กสเปซ

3
00:00:14,120 --> 00:00:18,574
Vibe Coding แบบครบวงจรที่ให้คุณเข้าถึงโมเดล LLM

4
00:00:18,574 --> 00:00:24,070
ได้หลากหลายตัว ในโปรเจกต์เดียวกัน คุณสามารถสลับไปมาระหว่าง

5
00:00:24,070 --> 00:00:34,968
GPT กับ Claude ได้ในพริบตา และไม่เพียงเท่านั้น มันยังมีฟังก์ชันเสริมอีกเพียบที่จะช่วยให้คุณไปถึงเป้าหมายได้เร็วขึ้น

6
00:00:34,968 --> 00:00:40,180
และในวิดีโอวันนี้ ฉันจะสร้างเว็บแอปที่ใช้งานได้จริงด้วย

7
00:00:40,180 --> 00:00:44,634
Cursor โดยฉันจะไม่เขียนโค้ดเองแม้แต่บรรทัดเดียว

8
00:00:44,634 --> 00:00:52,309
เราจะเริ่มจากศูนย์และไปให้สุดทาง นั่นคือการดีพลอยขึ้นอินเทอร์เน็ตให้ใช้งานจริงได้

9
00:00:52,309 --> 00:00:57,142
ถ้าอยากเริ่มต้นเส้นทางกับ Cursor ดูวิดีโอนี้จนจบเลย

10
00:00:57,142 --> 00:01:01,975
สำหรับคนที่ดูช่องนี้ครั้งแรก สวัสดี ฉันชื่อ Yashica

11
00:01:01,975 --> 00:01:07,566
ฉันสนใจวงการ no-code AI อย่างจริงจังมานานกว่าสองปีครึ่งแล้ว

12
00:01:07,566 --> 00:01:14,579
ฉันดูแล Automatez AI ซึ่งเป็นบริษัทที่ฉันก่อตั้งขึ้นมาเพื่อช่วยธุรกิจต่างๆ

13
00:01:14,579 --> 00:01:22,444
นำระบบ AI ไปใช้จริง ฉันให้คำปรึกษาด้าน AI และในช่องนี้ฉันพูดถึงทุกอย่างที่เกี่ยวกับ

14
00:01:22,444 --> 00:01:28,793
no-code AI ถ้าสนใจอย่าลืมกดติดตามนะ เอาล่ะ ถ้าพร้อมจะเริ่มสร้างแล้ว

15
00:01:28,793 --> 00:01:34,764
ไปดูหน้าจอฉันกัน ถ้าเป็นครั้งแรกที่ใช้ Cursor ก็แค่ค้นหาชื่อมัน

16
00:01:34,764 --> 00:01:40,260
ไปที่เว็บไซต์ แล้วคุณจะเห็นปุ่มดาวน์โหลด กดดาวน์โหลดได้เลย

17
00:01:40,260 --> 00:01:46,893
คุณสามารถใช้ผ่านเว็บได้เหมือนกัน แต่ส่วนตัวฉันชอบดาวน์โหลดมาใช้มากกว่า

18
00:01:46,893 --> 00:01:55,327
พูดถึงเรื่องราคา คุณเริ่มจากเวอร์ชันฟรีได้ก่อน และถ้าต้องการลิมิตมากขึ้นก็อัปเกรดได้ง่ายๆ

19
00:01:55,327 --> 00:02:00,539
พอเข้าไปใน Cursor แล้ว สิ่งแรกที่ต้องทำคือไปที่หน้าต่าง

20
00:02:00,539 --> 00:02:05,183
Agent ซึ่งจะพาคุณมาที่นี่ หน้าตาจะดูคุ้นเคยใช่ไหม

21
00:02:05,183 --> 00:02:10,963
มันมีฟีลแบบ ChatGPT คือคุณพิมพ์พรอมต์แล้วก็ดูประวัติได้ตรงนี้

22
00:02:10,963 --> 00:02:17,691
ดูไม่น่ากลัวเท่าไหร่ ต่อไปเราต้องเลือกว่าจะเก็บไฟล์ที่มันสร้างไว้ที่ไหน

23
00:02:17,691 --> 00:02:24,893
ฉันแนะนำให้สร้างโฟลเดอร์ใหม่ชื่อ cursor ในเครื่องของคุณแล้วเลือกโฟลเดอร์นั้น

24
00:02:24,893 --> 00:02:29,916
เพื่อให้ไฟล์ทั้งหมดทุกอย่างถูกจัดเก็บไว้รวมกันตรงนั้น

25
00:02:29,916 --> 00:02:34,559
และตรงนี้คือที่เลือกโมเดล อย่างที่เห็น เรามี Opus

26
00:02:34,559 --> 00:02:39,203
4.8 มี GPT 5.5 วันนี้ฉันยังเข้าถึง Fable 5 Sonnet

27
00:02:39,203 --> 00:02:44,225
ได้ด้วย และยังมี Composer 2.5 ซึ่งเป็นโมเดลของ Cursor

28
00:02:44,225 --> 00:02:51,143
เอง เริ่มแรกเราจะเลือก Composer 2.5 ก่อน แล้วค่อยสลับทีหลังก็ได้ถ้าจำเป็น

29
00:02:51,143 --> 00:02:55,881
เช่นเดียวกับ Claude Code, Codex และเครื่องมืออื่นๆ

30
00:02:55,881 --> 00:03:00,809
Cursor ก็มี skills, plugins, โหมดต่างๆ, agent teams,

31
00:03:00,809 --> 00:03:05,926
orchestration ครบหมด เรียกได้ว่ามีทุกอย่างที่คุณนึกออก

32
00:03:05,926 --> 00:03:11,138
และนี่คือเหตุผลที่ตอนต้นวิดีโอฉันบอกว่ามันคือเวิร์กสเปซ

33
00:03:11,138 --> 00:03:16,161
Vibe Coding ขั้นตอนเลยไม่ต่างกันมาก เราจะเริ่มจากโหมด

34
00:03:16,161 --> 00:03:21,657
Plan วางแผนก่อนว่าต้องการสร้างอะไร จากนั้นให้มันลงมือสร้าง

35
00:03:21,657 --> 00:03:26,300
เราจะทดสอบ ปรับปรุง แล้วก็ดีพลอย งั้นขอเลือก Plan

36
00:03:26,300 --> 00:03:31,133
ตรงนี้ก่อน แล้วเราก็ต้องบอกมันเป็นภาษาอังกฤษธรรมดาๆ

37
00:03:31,133 --> 00:03:37,767
ว่าอยากได้อะไร อย่าไปโฟกัสกับส่วน "ทำอย่างไร" เช่นจะใช้ภาษาโปรแกรมอะไร

38
00:03:37,767 --> 00:03:42,600
ประมาณนั้น แต่ให้โฟกัสที่ผลลัพธ์ว่าอยากได้อะไรออกมา

39
00:03:42,600 --> 00:03:47,717
ไอเดียของฉันสำหรับสิ่งที่เราจะสร้างวันนี้คือ แอปวางแผน

40
00:03:47,717 --> 00:03:54,445
itineraries เพราะตัวฉันเองเป็นคนชอบเที่ยวมาก การวางแผนทริปมันปวดหัวสุดๆ

41
00:03:54,445 --> 00:03:59,373
ฉันเลยอยากได้แอปที่ตัวเองจะใช้จริงทุกครั้งที่เดินทาง

42
00:03:59,373 --> 00:04:03,827
แค่กรอกว่าอยากไปที่ไหน รายละเอียดเพิ่มเติม เช่น

43
00:04:03,827 --> 00:04:09,133
กี่คน กี่วัน งบประมาณเท่าไหร่ ความสนใจของฉัน ประเภทต่างๆ

44
00:04:09,133 --> 00:04:15,009
ประมาณนั้น แล้วมันจะสร้าง itinerary ให้ โดยไม่ใช่ข้อความเปล่าๆ

45
00:04:15,009 --> 00:04:19,463
แบบที่ ChatGPT หรือ Claude ให้ แต่เป็นโครงสร้าง

46
00:04:19,463 --> 00:04:24,769
Kanban ที่คุณลากวางสถานที่ต่างๆ ได้ง่ายๆ จัดเรียงใหม่ได้

47
00:04:24,769 --> 00:04:29,602
มีการควบคุมมากกว่า แล้วมันก็จะคำนวณใหม่ให้อัตโนมัติ

48
00:04:29,602 --> 00:04:37,278
ดูให้แน่ใจว่าคุณไม่ต้องย้อนไปย้อนมา สถานที่ที่อยู่ใกล้กันจะถูกจัดไว้ในวันเดียวกัน

49
00:04:37,278 --> 00:04:42,774
พอเข้าใจคอนเซปต์ใช่ไหม มันคือแอปวางแผนท่องเที่ยวแบบครบวงจร

50
00:04:42,774 --> 00:04:49,029
ไม่รวมโรงแรมหรือตั๋วเครื่องบินนะ อันนั้นเกินขอบเขตวิดีโอนี้ไปหน่อย

51
00:04:49,029 --> 00:04:56,420
หลักๆ คือการวางแผนทริป ซึ่งก็คือ itinerary นี่คือพรอมต์ที่ฉันจะส่งให้มันในโหมด

52
00:04:56,420 --> 00:05:01,348
Plan ฉันจะอ่านให้ฟัง และจะใส่ไว้ในคำอธิบายวิดีโอด้วย

53
00:05:01,348 --> 00:05:07,697
เผื่อคุณอยากคัดลอกไปใช้หรือแก้ไข ฉันบอกมันว่า ฉันอยากสร้างแอปวางแผน

54
00:05:07,697 --> 00:05:14,994
itinerary ขับเคลื่อนด้วย AI และต้องการให้คุณวางแผนผลิตภัณฑ์ก่อนที่จะเขียนโค้ด

55
00:05:14,994 --> 00:05:19,543
แนวคิดคือ ผู้ใช้ตั้งค่าทริปผ่านฟอร์มแบบมีคำแนะนำ

56
00:05:19,543 --> 00:05:24,849
เช่น จุดหมายปลายทาง จำนวนวัน ฯลฯ และแอปจะสร้าง itinerary

57
00:05:24,849 --> 00:05:30,820
รายวันเต็มรูปแบบแสดงเป็นบอร์ด Kanban โดยแต่ละคอลัมน์คือหนึ่งวัน

58
00:05:30,820 --> 00:05:38,116
และแต่ละการ์ดคือสถานที่หนึ่งแห่ง ผู้ใช้สามารถลากระหว่างวันหรือจัดลำดับใหม่ได้

59
00:05:38,116 --> 00:05:44,276
ควรคำนวณเวลาเดินทาง แสดงเวลาเดินทางรวม แนะนำลำดับที่เหมาะสมที่สุด

60
00:05:44,276 --> 00:05:50,057
ลดการย้อนไปย้อนมา เคารพเวลาเปิด-ปิดของสถานที่ แนะนำแผนใหม่ได้

61
00:05:50,057 --> 00:05:56,406
และผู้ใช้ต้องสามารถบันทึกแล้วกลับมาใช้ต่อได้ จากนั้นฉันบอกมันคร่าวๆ

62
00:05:56,406 --> 00:06:02,092
เกี่ยวกับวิธีรับข้อมูล เช่น ใช้ดรอปดาวน์ ฯลฯ แล้วก็บอกแนวทาง

63
00:06:02,092 --> 00:06:08,630
UI ว่าควรให้ความรู้สึกโมเดิร์น สะอาดตา ใช้การเคลื่อนไหวที่ละเอียดอ่อน

64
00:06:08,630 --> 00:06:14,600
ให้รู้สึกเหมือนเป็นผลิตภัณฑ์จริง ไม่ใช่เทมเพลต และก่อนเขียนโค้ด

65
00:06:14,600 --> 00:06:19,244
ขอ product spec ที่ครอบคลุมการแยกย่อยฟีเจอร์ user

66
00:06:19,244 --> 00:06:27,583
flows โครงสร้างข้อมูล การออกแบบ UI ฯลฯ และบอกไปด้วยว่ายินดีรับฟังคำแนะนำฟีเจอร์เพิ่มเติม

67
00:06:27,583 --> 00:06:32,605
อย่างที่เห็น ฉันไม่ได้โฟกัสที่การบอกมันว่าต้องใช้อะไร

68
00:06:32,605 --> 00:06:37,154
เช่น ใช้ Google Maps หรือใช้ API ตัวไหนสำหรับ AI

69
00:06:37,154 --> 00:06:41,703
ฉันไม่ได้ไปยุ่งตรงนั้น แค่โฟกัสว่าฉันต้องการอะไร

70
00:06:41,703 --> 00:06:47,957
แล้วก็ส่งไป เพื่อให้มันวางแผนภาพรวมของผลิตภัณฑ์หรือโปรเจกต์ทั้งหมด

71
00:06:47,957 --> 00:06:53,169
ซึ่งช่วยให้ AI เห็นภาพใหญ่และสร้างได้อย่างมีประสิทธิภาพ

72
00:06:53,169 --> 00:07:01,034
ตอนนี้มันถามเราว่าควรบันทึกทริปอย่างไร เพราะฉันบอกไว้ในพรอมต์ว่าผู้ใช้ต้องบันทึกได้

73
00:07:01,034 --> 00:07:08,616
สำหรับตอนนี้เราจะเลือกบันทึกในเครื่องก่อน แล้วค่อยเพิ่มฟังก์ชันยืนยันตัวตนทีหลัง

74
00:07:08,616 --> 00:07:13,828
เพื่อให้ผู้ใช้บันทึกไว้ในบัญชีของตัวเอง แบบที่แพลตฟอร์ม

75
00:07:13,828 --> 00:07:18,376
SaaS ใหญ่ๆ ทำกัน คือเราจะเพิ่มฐานข้อมูลในภายหลัง

76
00:07:18,376 --> 00:07:24,631
ตอนนี้เดินหน้าด้วยตัวเลือกนี้ก่อน ต่อมามันถามว่าเราจะใช้แผนที่อะไร

77
00:07:24,631 --> 00:07:31,738
ก็แน่นอน Google Maps จะเห็นว่า ทุกครั้งที่มันไม่ชัดเจนเกี่ยวกับอะไรสักอย่าง

78
00:07:31,738 --> 00:07:37,329
มันจะถามคำถามคุณแทนที่จะเดาเอาเอง และนี่คือแผนที่มันเสนอให้

79
00:07:37,329 --> 00:07:43,773
นี่คือฟีเจอร์ต่างๆ โครงสร้าง Kanban โดยรวมมันเป็นเอกสารที่ละเอียดมาก

80
00:07:43,773 --> 00:07:48,795
เห็นไหม มีไดอะแกรมด้วย และนี่คือ data model เยี่ยมมาก

81
00:07:48,795 --> 00:07:53,344
ว่าข้อมูลไหลอย่างไร แล้วก็หลักการออกแบบ UI จานสี

82
00:07:53,344 --> 00:07:59,125
ระยะห่าง และเลย์เอาต์ สถาปัตยกรรมทางเทคนิค ใช้ภาษาโปรแกรมอะไร

83
00:07:59,125 --> 00:08:03,578
แบ็กเอนด์อะไร ทุกอย่าง แล้วก็เฟสต่างๆ เฟสแรกคือ

84
00:08:03,578 --> 00:08:09,833
MVP แล้วเฟสสองคือเฟสขยาย เฟสสามคือเพิ่มฐานข้อมูลและระบบยืนยันตัวตน

85
00:08:09,833 --> 00:08:14,476
เฟสสี่คือเพิ่มความฉลาดให้แอป และนี่คือ to-do list

86
00:08:14,476 --> 00:08:19,593
เยี่ยมไปเลย ถ้าอยากให้ฟีดแบ็กอะไรก็บอกได้ ถ้าไม่มีก็กด

87
00:08:19,593 --> 00:08:24,142
proceed ไปที่ build ได้เลย หลังจากทำงานไป 5 นาที

88
00:08:24,142 --> 00:08:28,596
27 วินาที มันก็สร้าง MVP เสร็จ นี่คือฟีเจอร์ของ

89
00:08:28,596 --> 00:08:33,429
MVP และตอนนี้มันยังไม่ได้เชื่อมต่อ Google Maps หรือ

90
00:08:33,429 --> 00:08:39,494
AI ยัง เลยขอให้เราเลือกปารีสตอนทดสอบ มาดูกันว่ามันสร้างอะไรออกมา

91
00:08:39,494 --> 00:08:44,137
เอาล่ะ มาถึงแล้ว มันชื่อว่า Drift "plan your next

92
00:08:44,137 --> 00:08:49,065
adventure" โอเค จะไปไหนดี ไปปารีส เมื่อไหร่และกี่วัน

93
00:08:49,065 --> 00:08:53,803
เอาเป็นเจ็ดวัน ความสนใจของคุณมีอะไรบ้าง โอเค เลือก

94
00:08:53,803 --> 00:08:59,394
3 ถึง 8 หมวดหมู่ ฉันเลือกไปเก้าหมวด ต่อไป จังหวะและงบประมาณ

95
00:08:59,394 --> 00:09:04,227
คุณจะเดินทางอย่างไร เอาแบบผสม เดินเท้า ขนส่งสาธารณะ

96
00:09:04,227 --> 00:09:08,965
บวกส่วนตัว รายละเอียดเพิ่มเติม ผู้ใหญ่สองคน เอาล่ะ

97
00:09:08,965 --> 00:09:15,694
ความชอบด้านอาหาร โอเค ดี มีอะไรอีกไหม ถ้าใครอยากเขียนโน้ตก็ใส่ตรงนี้ได้

98
00:09:15,694 --> 00:09:21,474
แต่ฉันข้ามไปก่อนเพราะตอนนี้มันเป็นแค่ MVP รีวิวทุกอย่างแล้วกด

99
00:09:21,474 --> 00:09:26,307
generate นี่คือสิ่งที่มันสร้างออกมา นี่คือโครงสร้าง

100
00:09:26,307 --> 00:09:30,950
Kanban วันแรก หอไอเฟล แล้วก็วันที่สอง เอาล่ะ โอเค

101
00:09:30,950 --> 00:09:35,689
เราต้องปรับดีไซน์อีกนิด ดูอย่างอื่นต่อ เรามีแผนที่

102
00:09:35,689 --> 00:09:40,143
ต้องปรับอีกหน่อย แล้วนี่คือไทม์ไลน์ อันนี้ชอบนะ

103
00:09:40,143 --> 00:09:44,786
แล้วก็แชร์ได้ ทำเป็นรายงานได้ เจ๋ง ดาวน์โหลดก็ได้

104
00:09:44,786 --> 00:09:51,704
และมีโหมดกลางคืนด้วย เจ๋ง ลองจัดลำดับใหม่ดู สมมติอยากย้ายอันนี้ไปวันศุกร์

105
00:09:51,704 --> 00:09:56,347
มันก็บอกว่าลำดับนี้อาจใช้ไม่ได้ ขอ optimize หน่อย

106
00:09:56,347 --> 00:10:01,085
เอาล่ะ โดยรวมคอนเซปต์ดี แต่ยังต้องปรับดีไซน์อีกนิด

107
00:10:01,085 --> 00:10:06,108
และต้องเชื่อมต่อ Google Maps อีก และมันก็บันทึกไว้ใต้

108
00:10:06,108 --> 00:10:10,751
Your Trips ด้วย กลับมาดูทีหลังได้ ไม่เลวเลยสำหรับ

109
00:10:10,751 --> 00:10:16,342
MVP ที่สร้างเสร็จในห้านาที ก่อนจะไปปรับฟรอนต์เอนด์และดีไซน์

110
00:10:16,342 --> 00:10:20,796
ขอทำแบ็กเอนด์ให้ทำงานก่อน คือเชื่อม Google Maps

111
00:10:20,796 --> 00:10:26,198
นั่นแหละ ให้ฟีดแบ็กมันหน่อย ทำได้ดีมากกับ MVP น่าประทับใจ

112
00:10:26,198 --> 00:10:30,746
ตอนนี้ฉันอยากเชื่อมต่อ Google Maps และสำหรับ LLM

113
00:10:30,746 --> 00:10:36,527
ฉันอยากเชื่อมต่อกับ OpenRouter เพื่อให้เข้าถึงโมเดลได้หลายตัว

114
00:10:36,527 --> 00:10:42,307
แทนที่จะผูกกับ Claude ตัวเดียว ขอขั้นตอนว่าคุณต้องใช้อะไรบ้าง

115
00:10:42,307 --> 00:10:50,647
และฉันต้องใส่ API keys ตรงไหน หลักการคือ ตอนคุณเป็นมือใหม่และมันขอให้คุณไปหาอะไรสักอย่าง

116
00:10:50,647 --> 00:10:55,385
คุณควรขอขั้นตอนจากมันก่อน เพื่อไม่ให้เสียเวลาเปล่า

117
00:10:55,385 --> 00:11:00,786
และถามด้วยว่าต้องเอาไปใส่ไว้ตรงไหนเป๊ะๆ และตรงนี้ฉันขอใช้

118
00:11:00,786 --> 00:11:05,430
OpenRouter เพราะ OpenRouter ให้คุณเข้าถึงโมเดล AI

119
00:11:05,430 --> 00:11:10,547
ได้มากกว่าการผูกกับผู้ให้บริการเจ้าเดียว ต้องใส่ในไฟล์

120
00:11:10,547 --> 00:11:15,664
env โอเค มันต้องใช้ Google Maps API key กับ OpenRouter

121
00:11:15,664 --> 00:11:20,308
API key และต้องใช้ทั้งฝั่ง server และ client โอเค

122
00:11:20,308 --> 00:11:24,951
แล้วนี่คือขั้นตอน เดี๋ยวทำตาม และนี่คือขั้นตอนของ

123
00:11:24,951 --> 00:11:30,542
OpenRouter ขอไปเอามาก่อน ระหว่างนั้นมันขอให้เราสร้างไฟล์นี้

124
00:11:30,542 --> 00:11:35,754
ฉันเลยขอให้มันสร้างไฟล์ .env ให้เลย จะได้ใส่ credential

125
00:11:35,754 --> 00:11:40,208
ได้ง่ายๆ ระหว่างที่มันกำลังทำ ขอไปเอา keys ก่อน

126
00:11:40,208 --> 00:11:45,704
อย่างแรกไปที่ OpenRouter อย่างที่บอก มันให้คุณเข้าถึงโมเดล

127
00:11:45,704 --> 00:11:51,769
LLM หลายตัวด้วย API key เดียวและวอลเล็ตเดียว สร้างบัญชีได้ตรงนี้

128
00:11:51,769 --> 00:11:58,687
เติมเครดิต แล้วก็สร้าง API key ได้ อันนี้จำเป็นก็ต่อเมื่อแอปของคุณต้องใช้

129
00:11:58,687 --> 00:12:03,235
LLM หรือต้องเข้าถึงโมเดล AI ถ้าไม่ใช้ก็ไม่ต้องมี

130
00:12:03,235 --> 00:12:08,163
โอเค มันสร้างไฟล์ให้เราแล้ว คลิกตรงนี้ จะพาไปที่ไฟล์

131
00:12:08,163 --> 00:12:12,712
ใช่แล้ว วาง API key ตรงนี้ สำหรับโมเดลใช้ Sonnet

132
00:12:12,712 --> 00:12:18,019
5 คัดลอกชื่อโมเดลมา แล้วอัปเดตตรงนี้ บันทึก ต่อไปตั้งค่า

133
00:12:18,019 --> 00:12:23,894
Google Maps เร็วๆ ไปที่ Google Cloud Console สร้างโปรเจกต์ใหม่

134
00:12:23,894 --> 00:12:30,906
ตั้งชื่อว่า VibeCoded App Cursor เลือกมัน แล้วต้องเปิดใช้งานบริการเหล่านี้

135
00:12:30,906 --> 00:12:37,161
Places API, Routes API, Maps Static API ไปที่ตรงนี้แล้วเปิดทีละตัว

136
00:12:37,161 --> 00:12:41,804
เปิด Places API แล้วก็ Maps Static API แล้วขอ API

137
00:12:41,804 --> 00:12:47,585
key ไปที่ Credentials สร้างใหม่ ตั้งชื่อให้มัน เรื่องข้อจำกัด

138
00:12:47,585 --> 00:12:52,323
(restrictions) แน่นอนว่าทำตามนี้ได้ คุณสามารถสร้าง

139
00:12:52,323 --> 00:12:56,777
API key สองตัวที่มี restrictions ต่างกัน สำหรับ

140
00:12:56,777 --> 00:13:01,989
key แรกเราจำกัดให้ใช้กับ Places และ Routes ตามที่มันบอก

141
00:13:01,989 --> 00:13:06,443
และตอนนี้ฉันยังไม่ตั้ง application restrictions

142
00:13:06,443 --> 00:13:11,181
ใดๆ สร้างเลย ได้ key มาแล้ว ใส่ตรงนี้ จากนั้นสร้าง

143
00:13:11,181 --> 00:13:16,014
key ที่สอง เรียกว่า public API key อันนี้มีแค่ Maps

144
00:13:16,014 --> 00:13:22,268
API อย่างเดียว และไม่ต้องตั้งค่าอะไรพวกนี้ ทำทีหลังหลังดีพลอยก็ได้

145
00:13:22,268 --> 00:13:28,144
แล้ววาง key ตรงนี้ เท่านี้ก็ครบทุกอย่างที่มันต้องการจากฝั่งเรา

146
00:13:28,144 --> 00:13:32,598
อัปเดตให้มัน เฮ้ Cursor ฉันเพิ่ม OpenRouter API

147
00:13:32,598 --> 00:13:37,051
key แล้ว ตั้งค่าโมเดลแล้ว เพิ่ม Google Maps API

148
00:13:37,051 --> 00:13:41,600
key ทั้งสองตัวแยกกันแล้ว ตอนนี้ฉันยังไม่ได้เพิ่ม

149
00:13:41,600 --> 00:13:47,286
Anthropic API key ดังนั้นช่วยลบมันออกแล้วอัปเดตโค้ดให้รองรับ

150
00:13:47,286 --> 00:13:54,204
OpenRouter เมื่อเสร็จแล้วดำเนินการต่อเฟสสอง และให้ลิงก์สำหรับเริ่มทดสอบมา

151
00:13:54,204 --> 00:13:59,131
เฟสหนึ่งคือ MVP ที่เพิ่งเห็นไป เฟสสองคือแอปที่มีระบบ

152
00:13:59,131 --> 00:14:04,249
integration ทำงานแล้ว ส่งเลย ตอนที่มันสร้างเฟสสองเสร็จ

153
00:14:04,249 --> 00:14:08,797
เราจะทดสอบกับสถานที่ไหนในโลกก็ได้ ไม่ใช่แค่ปารีส

154
00:14:08,797 --> 00:14:14,767
อีกห้านาทีมันก็กลับมาพร้อมเฟสสอง และฉันตื่นเต้นมากที่จะได้ทดสอบ

155
00:14:14,767 --> 00:14:20,358
เพราะตอนนี้ทุกอย่างน่าจะทำงานจริงแล้ว ไปดูกัน มันพามาที่นี่

156
00:14:20,358 --> 00:14:26,423
วางแผนทริปใหม่ คราวนี้ไปนิวยอร์ก กรอกใหม่เร็วๆ ตอนนี้ยังไม่โฟกัส

157
00:14:26,423 --> 00:14:31,256
UI เอาวันแบบผ่อนคลายหน่อย แบบผสม สองคน ดำเนินการต่อ

158
00:14:31,256 --> 00:14:35,805
ดูดี โอเค ตอนนี้มันกำลังสร้าง itinerary ให้จริงๆ

159
00:14:35,805 --> 00:14:41,206
แล้ว มันใช้ AI คิดขึ้นมา แล้วจะแสดงผล เอาล่ะ นี่คือวันแรก

160
00:14:41,206 --> 00:14:46,797
ถ้าคลิกดูจะเกิดอะไรขึ้น มันให้คำอธิบายมา ปรับระยะเวลาได้เอง

161
00:14:46,797 --> 00:14:53,715
ล็อกตำแหน่งได้ หาทางเลือกอื่นได้ ลองหาทางเลือก ไม่พบทางเลือกอื่นใกล้เคียง

162
00:14:53,715 --> 00:15:00,728
โอเค เวลารวมห้าชั่วโมง 45 นาที เวลาเดินทางจริง สมมติอยากย้ายอันนี้ไปตรงนี้

163
00:15:00,728 --> 00:15:05,845
ใช่ มันอัปเดตให้ แล้วกด optimize โอเค โดยอิงจากระยะทาง

164
00:15:05,845 --> 00:15:10,394
มันจัดลำดับให้เหมาะสม นี่คือแผนที่สมบูรณ์ เยี่ยม

165
00:15:10,394 --> 00:15:15,700
ดูแผนที่กัน โอเค เห็นแผนที่แล้ว แต่ฉันว่าไม่ interactive

166
00:15:15,700 --> 00:15:20,533
นะ โอเค วันหนึ่ง สอง สาม เข้าใจแล้ว ตอนนี้มันยังไม่

167
00:15:20,533 --> 00:15:27,356
interactive และนี่คือไทม์ไลน์ทั้งหมด เจ๋ง ดูเหมือนทุกอย่างทำงานได้ใช่ไหม

168
00:15:27,356 --> 00:15:31,905
ลองที่อื่นกัน ไปสิงคโปร์ โอเค มันไม่แสดงสิงคโปร์

169
00:15:31,905 --> 00:15:39,391
คิดว่าเราต้องแก้ตรงนี้ และอีกอย่างคือแผนที่ที่ต้องแก้เรื่องฟังก์ชันการทำงานก่อน

170
00:15:39,391 --> 00:15:44,508
แยกเรื่อง UI ออก ตอนนี้มันแสดงเวลาเดินทางเป็นศูนย์นาที

171
00:15:44,508 --> 00:15:50,099
แต่ถ้ากด smart order มันแสดงเวลาเดินทางเป็นเดินหนึ่งชั่วโมง

172
00:15:50,099 --> 00:15:57,775
เดิน 30 นาที โอเค มีอะไรผิดปกติตรงนี้ แต่ส่วนที่ลากจากที่หนึ่งไปอีกที่หนึ่งใช้ได้

173
00:15:57,775 --> 00:16:06,967
ดี นี่คือฟีดแบ็กของเรา ทำได้ดีมากกับเฟสสอง สิ่งแรกที่สังเกตคือมันทำงานได้เฉพาะจุดหมายปลายทางหลักๆ

174
00:16:06,967 --> 00:16:12,369
ถ้าพิมพ์สิงคโปร์หรือดูไบ มันไม่ autocomplete ตอนกรอกฟอร์ม

175
00:16:12,369 --> 00:16:18,339
ช่วยแก้ด้วย และฉันต้องการแผนที่แบบ interactive คุณบอกว่าต้องใช้

176
00:16:18,339 --> 00:16:24,025
map ID ขอขั้นตอนที่แน่ชัดในการสร้างให้หน่อย เดี๋ยวฉันไปทำเอง

177
00:16:24,025 --> 00:16:30,563
มันเฉพาะพื้นที่หรือทำงานยังไง สุดท้ายคือ มันแสดงเวลาเดินทางเฉพาะตอนกด

178
00:16:30,563 --> 00:16:37,386
smart order ซึ่งฉันว่าไม่เหมาะ ควรแสดงตลอด และมันโชว์แบบเดินหนึ่งชั่วโมง

179
00:16:37,386 --> 00:16:44,209
อันนั้นมันไม่ใช่ เดินสิบนาทีคือเดิน แต่เดินหนึ่งชั่วโมงไม่ใช่การเดินแล้ว

180
00:16:44,209 --> 00:16:50,274
เข้าใจใช่ไหม ทำให้มันเป็นแอปวางแผนที่ฉลาดหน่อย มันต้องสมเหตุสมผล

181
00:16:50,274 --> 00:16:55,107
เอาล่ะ เริ่มจากการทำให้ฟังก์ชันทำงานก่อน แล้วค่อยไป

182
00:16:55,107 --> 00:16:59,751
UI นั่นคือฟีดแบ็ก มาดูว่ามันปรับปรุงอะไรบ้าง โอเค

183
00:16:59,751 --> 00:17:05,816
มันแก้ autocomplete แล้ว แก้เวลาเดินทางและเรื่องเดินเท้านั้นแล้ว

184
00:17:05,816 --> 00:17:10,838
ก่อนทดสอบ ขอให้ map ID ก่อนเพื่อให้แผนที่ interactive

185
00:17:10,838 --> 00:17:15,292
ได้ เปิดอันนี้ แล้วต้องอัปเดตใน public key ด้วย

186
00:17:15,292 --> 00:17:20,409
กลับไปที่ credentials ไปที่ public key แล้วเพิ่มตรงนี้

187
00:17:20,409 --> 00:17:24,863
บันทึก จากนั้นไปที่ Map Management ค้นหาดู โอเค

188
00:17:24,863 --> 00:17:29,601
มาถึง Map Management แล้ว สร้าง map ID ตั้งชื่อว่า

189
00:17:29,601 --> 00:17:34,624
VibeCoded.App ประเภทเป็น JavaScript vector สุดท้ายได้

190
00:17:34,624 --> 00:17:39,172
map ID มาแล้ว จะอัปเดตในไฟล์ local ตรงนี้ บันทึก

191
00:17:39,172 --> 00:17:44,100
บอกมันว่าอัปเดตแล้ว โอเค มันอัปเดตแล้ว ทดสอบอีกครั้ง

192
00:17:44,100 --> 00:17:49,407
วางแผนทริป คราวนี้เลือกดูไบ โอเค ใช้ได้ สิงคโปร์ก็ใช้ได้

193
00:17:49,407 --> 00:17:54,714
ขอดูไบก่อน ห้าวัน นี่ไง โอเค มีอะไรผิดปกติ มันทำตัวแปลกๆ

194
00:17:54,714 --> 00:17:59,262
แต่อย่างน้อยเรื่องเดินเท้ากับขนส่งสาธารณะแก้แล้ว

195
00:17:59,262 --> 00:18:03,811
ดี เพราะใครจะเดินหนึ่งชั่วโมงกันเล่า บางคนเดินนะ

196
00:18:03,811 --> 00:18:08,928
แต่ฉันไม่ไหว ดูแผนที่กัน เอาล่ะ ในที่สุดก็ interactive

197
00:18:08,928 --> 00:18:14,045
แล้ว กดดูวันหนึ่ง สอง ได้เลย สวยงาม มีโหมดดาวเทียมด้วย

198
00:18:14,045 --> 00:18:18,689
ดี และนี่คือไทม์ไลน์ ขอแก้หน่อย มันเพี้ยนไปนิด ขอ

199
00:18:18,689 --> 00:18:24,943
screenshot ตรงนี้ด้วย แผนที่ใช้ได้แล้ว ทำได้ดี แต่มีอะไรผิดปกติที่

200
00:18:24,943 --> 00:18:30,155
Kanban คำว่า this may not be optimized หรืออะไรสักอย่าง

201
00:18:30,155 --> 00:18:36,125
มันย้ายไปมาระหว่างคอลัมน์ตลอดเวลา เหมือนติดลูปหรือมีอะไรผิดปกติ

202
00:18:36,125 --> 00:18:40,863
ช่วยแก้ด้วย เวลาจัดการข้อผิดพลาด การให้ screenshot

203
00:18:40,863 --> 00:18:46,833
กับมันเป็นเรื่องดีมาก เพราะมันจะรู้ชัดเจนว่าผิดอะไรและผิดตรงไหน

204
00:18:46,833 --> 00:18:51,287
โอเค คิดว่าแก้แล้ว ใช่ ตอนนี้ไม่เกิดแล้ว เอาล่ะ

205
00:18:51,287 --> 00:18:56,310
เบิร์จคาลิฟาไป Dubai Fountain โชว์เดินแปดนาที ถูกต้อง

206
00:18:56,310 --> 00:19:01,143
แล้วมันก็แนะนำร้านอาหารมังสวิรัติแบบนี้ โอเค แล้วไป

207
00:19:01,143 --> 00:19:08,534
Miracle Garden, Global Village ฉันเองก็เที่ยวครบในวันเดียวตอนอยู่ดูไบเหมือนกัน

208
00:19:08,534 --> 00:19:15,926
เอาล่ะ itinerary ดูใช้ได้ ขอเช็คอีกทีว่ามันสมเหตุสมผลสำหรับคนที่จะทำตามจริงไหม

209
00:19:15,926 --> 00:19:20,948
JBR กับ Marina ไปด้วยกัน โอเค ฉันก็ทำแบบนั้นเหมือนกัน

210
00:19:20,948 --> 00:19:25,497
ระยะทางสมเหตุสมผล ขึ้นเรือ Abra ไป Gold Souk ใช่

211
00:19:25,497 --> 00:19:30,899
คุณรู้ไหม มันตรงกับวิธีเที่ยวของฉันมาก ดีมาก สมมติอยากเอา

212
00:19:30,899 --> 00:19:35,447
Kite Beach ไปรวมกับ JBR โอเค มันคำนวณใหม่ให้แล้ว

213
00:19:35,447 --> 00:19:41,702
เจ๋ง คำถามต่อไป ถ้าใครไม่อยากไปที่ไหนสักที่ จะหาทางเลือกอื่นได้ไหม

214
00:19:41,702 --> 00:19:46,535
มันบอกไม่พบทางเลือก คิดว่าต้องปรับปรุงตรงนี้ เอาล่ะ

215
00:19:46,535 --> 00:19:53,168
มันทำงานได้ ต่อไปคือฟีดแบ็ก อย่างแรก ถ้าใครไม่อยากไปสถานที่ที่มันแนะนำ

216
00:19:53,168 --> 00:19:58,475
จะบอกมันยังไงว่า ฉันไม่อยากไปพิพิธภัณฑ์ อยากไปที่อื่นแทน

217
00:19:58,475 --> 00:20:03,687
เราต้องมีฟังก์ชันนี้ด้วย และฟีเจอร์ nearby alternatives

218
00:20:03,687 --> 00:20:11,173
ก็ดูจะไม่ทำงาน ช่วยดูให้หน่อย เราอยากได้ฟังก์ชันที่ผู้ใช้เปลี่ยนสถานที่ได้ง่ายๆ

219
00:20:11,173 --> 00:20:17,238
ถ้าไม่อยากไป หรือเพิ่มสถานที่ใหม่ เพิ่มหรืออัปเดตฟังก์ชันนั้นเลย

220
00:20:17,238 --> 00:20:21,787
โอเค มันเพิ่มฟังก์ชันมาให้อีกสองสามอย่าง ไปดูกัน

221
00:20:21,787 --> 00:20:26,335
มันเขียนว่า swap this stop ไม่อยากไปที่นี้ใช่ไหม

222
00:20:26,335 --> 00:20:31,358
ค้นหาที่อื่น หรือเลือก nearby alternative ก่อนอื่นลอง

223
00:20:31,358 --> 00:20:36,001
nearby โอเค ยังบอกว่าไม่พบ ลองค้นหา Museum of the

224
00:20:36,001 --> 00:20:40,645
Future ฉันว่าไม่ค่อยเวิร์คนะ ดีที่เพิ่มฟังก์ชันมา

225
00:20:40,645 --> 00:20:46,141
แต่อีกครั้ง ฉันว่าไม่ทำงาน ฉันลองค้นหาสถานที่ใกล้เคียงแล้ว

226
00:20:46,141 --> 00:20:51,637
แต่ฟีเจอร์ swap ไม่ autocomplete และทางเลือกอื่นก็ไม่ทำงาน

227
00:20:51,637 --> 00:20:56,375
ช่วยทำให้มันใช้งานได้ และทดสอบก่อนที่จะให้ฉันทดสอบ

228
00:20:56,375 --> 00:21:03,483
และอีกคำถามหนึ่ง เป็นไปได้ไหมที่จะแสดงรูปภาพของสถานที่นั้นเมื่อคลิกที่การ์ด

229
00:21:03,483 --> 00:21:08,126
ถ้าเป็นไปได้ช่วยทำด้วย ฉันไม่อยากตั้งค่าอะไรเพิ่ม

230
00:21:08,126 --> 00:21:12,769
ถ้าดึงได้จาก Google Maps API เดิมก็ใช้ตัวนั้นแหละ

231
00:21:12,769 --> 00:21:18,171
โอเค คิดว่าแก้แล้ว ไปดู โอเค มันเพิ่มช่องสำหรับรูปภาพแล้ว

232
00:21:18,171 --> 00:21:23,951
ดี แต่ก็ยังไม่มีรูป ซึ่งไม่ค่อยดี ลองเปลี่ยนพิพิธภัณฑ์นี้เป็น

233
00:21:23,951 --> 00:21:29,448
Museum of the Future โอเค และมันก็ให้ทางเลือกใกล้เคียงด้วย

234
00:21:29,448 --> 00:21:34,755
ดี โอ้ มีรูปแล้ว เยี่ยม อันนี้ใช้ได้ แล้วก็เรียงลำดับได้

235
00:21:34,755 --> 00:21:39,493
นี่เป็นสิ่งที่คุณทำตอนท้าย โอเค เพิ่มสถานที่อีกอัน

236
00:21:39,493 --> 00:21:45,463
สมมติอยากไป Starbucks ซึ่งอยู่ใน Al Seef ใช่ แล้วเรียงลำดับใหม่

237
00:21:45,463 --> 00:21:50,770
โอเค มันเช็คให้อยู่ท้ายสุด บางทีฉันอยากไปหลังจากนั่งเรือ

238
00:21:50,770 --> 00:21:56,834
Abra มันแนะนำให้ไปตอนท้าย โอเค แต่การคำนวณเวลาตรงนี้มีอะไรเพี้ยน

239
00:21:56,834 --> 00:22:01,478
ขอ screenshot ไว้ แล้วบอกมันว่าการคำนวณเวลาเพี้ยน

240
00:22:01,478 --> 00:22:06,311
และรูปภาพแสดงที่บางแห่ง แต่ไม่แสดงที่อื่น ช่วยเพิ่ม

241
00:22:06,311 --> 00:22:14,460
error handling แล้วแก้พฤติกรรมนั้นด้วย เอาล่ะ คิดว่าด้านฟีเจอร์และฟังก์ชันกำลังไปได้ดี

242
00:22:14,460 --> 00:22:20,904
มันแสดงเวลาทำการ เปลี่ยนระยะเวลาได้ สลับได้ เช็คทางเลือกใกล้เคียงได้

243
00:22:20,904 --> 00:22:25,548
ในทำนองเดียวกัน ถ้าอยากเพิ่มฟีเจอร์ เช่น เพิ่ม AI

244
00:22:25,548 --> 00:22:31,044
agent ให้คนคุยด้วย หรือเพิ่มปฏิทิน อะไรแบบนี้ แค่พรอมต์มัน

245
00:22:31,044 --> 00:22:35,972
มันก็สร้างให้ ฉันไปต่อได้เรื่อยๆ เลย มีไอเดียเยอะแยะ

246
00:22:35,972 --> 00:22:41,468
แต่ไม่อยากให้วิดีโอนี้ยาวแปดชั่วโมง ตอนนี้ขอเปลี่ยนไปทำงาน

247
00:22:41,468 --> 00:22:46,491
UI ซึ่งก็คือหน้าตา ความรู้สึก และวิธีที่คนใช้งานนำทาง

248
00:22:46,491 --> 00:22:52,650
ระหว่างทาง มันแก้ตรงนั้นแล้ว คิดว่าใช่ แก้แล้ว และดูว่ารูปแสดงไหม

249
00:22:52,650 --> 00:22:57,483
ไม่ รูปยังไม่แสดง มันบอกว่าแก้แล้ว รีเฟรชหน่อย โอเค

250
00:22:57,483 --> 00:23:04,496
ตอนนี้มีรูปแล้ว เจ๋ง สวยงาม ประเด็นคือ ถ้ารู้สึกว่าโมเดลนี้ให้ผลลัพธ์ไม่ดี

251
00:23:04,496 --> 00:23:11,508
ก็สลับโมเดลได้ตลอด ยิ่งไปกว่านั้น เปิดโหมด Max ได้ถ้าทำงานที่ซับซ้อนและยาก

252
00:23:11,508 --> 00:23:17,194
ไม่ใช่ว่า Cursor ไม่เก่ง แต่โมเดล AI ที่คุณใช้อาจไม่เก่งเท่า

253
00:23:17,194 --> 00:23:21,932
หวังว่าเข้าใจประเด็นนะ แต่ตอนนี้ฉันจะใช้ตัวนี้ก่อน

254
00:23:21,932 --> 00:23:26,955
มันก็ไม่ได้แย่อะไร ต่อไปคือส่วนดีไซน์ ตอนนี้มันเรียบๆ

255
00:23:26,955 --> 00:23:34,346
ธรรมดา ถ้าคุณมีหัวคิดสร้างสรรค์ มีไอเดีย ก็บอกมันเป็นภาษาอังกฤษธรรมดาได้เลยว่า

256
00:23:34,346 --> 00:23:39,748
ทำนี่ ทำนี่ ทำอันนี้ให้แดง อันนั้นให้ฟ้า ย้ายอันนี้ตรงนี้

257
00:23:39,748 --> 00:23:47,139
ย้ายอันนั้นไปตรงนั้น ดี แต่ถ้าคุณเป็นคนแบบฉัน ที่สู้เรื่องความสร้างสรรค์ไม่ไหว

258
00:23:47,139 --> 00:23:51,783
ก็หาอินสไปเรชันจากออนไลน์ได้ สมมติเจออะไรดีๆ เช่น

259
00:23:51,783 --> 00:23:57,184
ฉันเจออันนี้สวยดีสำหรับ Kanban สิ่งที่ทำได้คือ screenshot

260
00:23:57,184 --> 00:24:01,922
มัน หรือคัดลอกรูป แล้วขอให้มันเอาไปเป็นแรงบันดาลใจ

261
00:24:01,922 --> 00:24:06,945
ไม่ใช่ลอกมาเป๊ะๆ แต่ให้ take inspiration และอาจพูดว่า

262
00:24:06,945 --> 00:24:11,683
ฉันชอบดีไซน์การ์ดอันนี้ ช่วยทำแบบนั้นได้ไหม ลองกับ

263
00:24:11,683 --> 00:24:16,705
Kanban ดู ฉันจะวางรูปนั้นลงไป อีกอย่างที่อยากแนะนำคือ

264
00:24:16,705 --> 00:24:22,012
ถ้าจะเปลี่ยนจากเฟสหนึ่งไปอีกเฟส เช่น จากฝั่ง development

265
00:24:22,012 --> 00:24:27,129
หรือแบ็กเอนด์ไปฟรอนต์เอนด์ สิ่งที่ทำได้คือเริ่มแชทใหม่

266
00:24:27,129 --> 00:24:32,815
เพื่อล้าง context ประหยัด tokens ฯลฯ งั้นวางรูปแล้วบอกมันว่า

267
00:24:32,815 --> 00:24:38,122
ตอนนี้ฉันอยากปรับปรุง UI ของแอปที่เราสร้างมา ฉันแนบรูปมา

268
00:24:38,122 --> 00:24:46,840
และฉันชอบที่มันออกแบบการ์ดในรูปนี้มาก โดยพื้นฐานฉันอยากให้คุณเอาการ์ดพวกนี้มาเป็นแรงบันดาลใจ

269
00:24:46,840 --> 00:24:52,716
แล้วปรับใช้กับ Kanban ของแอปเรา ฉันไม่ได้บอกให้ใช้แบบเดิมเป๊ะๆ

270
00:24:52,716 --> 00:24:57,264
ไม่ใช่ แค่ take inspiration แล้วให้อะไรที่คล้ายๆ

271
00:24:57,264 --> 00:25:02,476
กัน อะไรก็ตามที่คุณทำ ต้องใช้ได้ทั้งโหมดสว่างและโหมดมืด

272
00:25:02,476 --> 00:25:09,015
และ responsive กับทุกอุปกรณ์ อย่าทำให้อะไรพัง เราอยากให้แอปดูสม่ำเสมอ

273
00:25:09,015 --> 00:25:14,322
เอาล่ะ ส่งเลย นี่คือเหตุผลที่ฉันชอบพูดใส่ไมค์แทนการพิมพ์

274
00:25:14,322 --> 00:25:19,344
เพราะตอนพูดจะมีอะไรผุดขึ้นมาในหัวเยอะ แย่กว่าตอนพิมพ์

275
00:25:19,344 --> 00:25:24,461
เพราะฉันขี้เกียจพิมพ์นี่แหละ ตรงนี้เห็นไหม มันเขียนว่า

276
00:25:24,461 --> 00:25:29,105
waiting for a subagent หมายความว่ามันใช้ subagent

277
00:25:29,105 --> 00:25:33,559
orchestration มันมอบหมายงานแทนที่จะทำงานคนเดียว

278
00:25:33,559 --> 00:25:38,392
จุดนี้ดีมากที่มันใช้กองทัพ subagent ได้ นั่นคือโหมด

279
00:25:38,392 --> 00:25:43,225
multitask มอบหมายงานแล้วเสร็จเร็วขึ้นและดีขึ้น โอเค

280
00:25:43,225 --> 00:25:47,678
มันทำเสร็จแล้ว ไปดูกัน นี่คือสิ่งที่ฉันให้มันไป

281
00:25:47,678 --> 00:25:54,691
และนี่คือสิ่งที่มันสร้าง ยังไม่เลว และคิดว่ายังเข้ากับบรรยากาศโดยรวมของแอป

282
00:25:54,691 --> 00:25:59,240
คิดว่ายังขาดรูปภาพเป็นพื้นหลังแล้วมี overlay ทับ

283
00:25:59,240 --> 00:26:05,873
และฉันอยากให้ฟอนต์ได้แรงบันดาลใจจากรูปนี้ด้วย รวมถึงรูปแบบการแสดงเวลาฯ

284
00:26:05,873 --> 00:26:11,654
ลองฟีดแบ็กดู ฉันแนบรูปอินสไปเรชันอีกครั้ง ขอชี้สิ่งที่คุณพลาด

285
00:26:11,654 --> 00:26:17,055
อย่างแรก เราอยากได้แรงบันดาลใจจากพื้นหลังของการ์ดเหล่านี้

286
00:26:17,055 --> 00:26:23,025
มันใช้รูปอะไรสักอย่าง อาจเป็นรูปสถานที่นั้น หรือตำแหน่งบนแผนที่

287
00:26:23,025 --> 00:26:27,669
แล้วใช้ overlay ทับ และแม้แต่รูปทรงของการ์ดก็ต่าง

288
00:26:27,669 --> 00:26:32,407
มุมต่าง ไอคอนก็จัดต่างกัน วิธีที่มันแสดงเวลาก็ต่าง

289
00:26:32,407 --> 00:26:40,651
และฟอนต์ก็เป็นสิ่งที่ฉันชอบ และฉันก็ไม่ขัดใจถ้าจะมีระบบปฏิทินทางซ้ายแล้วจัดการ์ดตามนั้น

290
00:26:40,651 --> 00:26:46,906
ช่วยดูและลงรายละเอียดสำคัญที่คิดว่าคุณพลาดไป มาดูว่ามันทำอะไรออกมา

291
00:26:46,906 --> 00:26:51,739
โอเค การ์ดดูดี และสิ่งเดียวที่ฉันต้องการคือแกนเดียว

292
00:26:51,739 --> 00:26:56,761
และยังอยากให้ Kanban ทำงานเหมือนเดิม ใช่ คิดว่าใช้ได้

293
00:26:56,761 --> 00:27:02,636
ให้ฟีดแบ็กอีกครั้ง ทำได้ดีกับการ์ด แต่สำหรับแกนซ้ายหรือแกนเวลา

294
00:27:02,636 --> 00:27:08,417
เราอยากได้แกนร่วมอันเดียวทางซ้ายของแอป ที่ใช้ได้กับทุกคอลัมน์

295
00:27:08,417 --> 00:27:13,155
และช่วยปรับชื่อแต่ละคอลัมน์ให้โมเดิร์นขึ้น เช่นจาก

296
00:27:13,155 --> 00:27:18,462
Day เป็นวันที่ ฯลฯ มันไม่เข้ากับบรรยากาศ เพิ่ม overlays,

297
00:27:18,462 --> 00:27:23,958
shadows อัปเดตฟอนต์ อัปเดตวิธีการแสดงข้อมูลให้เข้ากับการ์ด

298
00:27:23,958 --> 00:27:30,781
และใส่ใจเรื่อง spacing ด้วย พูดง่ายๆ คือ อะไรที่ผุดขึ้นมาในหัวก็บอกมันไป

299
00:27:30,781 --> 00:27:35,425
นั่นคือวิธีปรับ UI ให้ลื่นไหล มันต่างกันในแต่ละคน

300
00:27:35,425 --> 00:27:41,016
บางคนตั้งค่าแบ็กเอนด์ง่ายกว่า อย่างฉัน บางคนถนัดฟรอนต์เอนด์

301
00:27:41,016 --> 00:27:45,943
แล้วแต่นิสัย โอ้ มันอัปเดตไทม์ไลน์ด้วย สวยงาม เยี่ยม

302
00:27:45,943 --> 00:27:51,250
ฉันชอบอันนี้ ไม่ต้องแก้อะไร แผนที่ก็ดูโอเค ไม่ต้องแก้อีก

303
00:27:51,250 --> 00:27:56,367
มาดูกัน โอเค ตอนนี้ Kanban ของเราเป็นแบบนี้ ดีขึ้นเยอะ

304
00:27:56,367 --> 00:28:03,380
แล้วฉันก็ย้ายได้ คิดว่าลากวางการ์ดได้ด้วย ใช่ และมันอัปเดตเวลาให้อัตโนมัติ

305
00:28:03,380 --> 00:28:08,497
แล้วจัดลำดับใหม่ตามเวลาเดินทาง สวยงาม แล้วก็เห็นชัดว่า

306
00:28:08,497 --> 00:28:13,141
ตรงนี้ว่าง ขอเพิ่มจุดแวะตอนบ่ายสองโมงเป็นตัวอย่าง

307
00:28:13,141 --> 00:28:18,258
มันช่วยให้เห็นภาพวันของคุณว่าหน้าตาจะเป็นยังไง ทำได้ดี

308
00:28:18,258 --> 00:28:23,091
ไม่ต้องแก้อะไร ไทม์ไลน์ดูเพอร์เฟกต์ ต่อไปคือหน้านี้

309
00:28:23,091 --> 00:28:27,734
ขอให้มันอัปเดต UI หน้านี้ด้วย ทำได้ดีกับการอัปเดต

310
00:28:27,734 --> 00:28:32,472
Kanban ต่อไปเราอยากอัปเดตหน้าแรกที่เก็บทริปทั้งหมด

311
00:28:32,472 --> 00:28:38,348
อยากอัปเดตการ์ดเหล่านี้ให้เข้ากับแอปโดยรวม ใช้การ์ดแบบเดียวกัน

312
00:28:38,348 --> 00:28:43,749
เงา overlay แบบเดียวกัน spacing เดียวกัน ถ้าทำได้จะเยี่ยม

313
00:28:43,749 --> 00:28:50,383
ส่งเลย ระหว่างทาง นี่คือหน้าตาของทริปนิวยอร์กที่เราสร้างไว้ก่อนหน้านี้

314
00:28:50,383 --> 00:28:55,310
สวยใช่ไหม คิดว่ารูปช่วยได้เยอะ โอเค เสร็จแล้ว สวยงาม

315
00:28:55,310 --> 00:29:01,375
มีหอไอเฟล อันนี้น่าจะ Marina หรือ JBR ไม่แน่ใจ ฉันคิดว่ามันจะใส่

316
00:29:01,375 --> 00:29:06,492
Burj Khalifa สำหรับดูไบ แต่ช่างเถอะ แล้วนี่คือนิวยอร์ก

317
00:29:06,492 --> 00:29:11,610
ดูปารีสหน่อย หอไอเฟล เจ๋ง คิดว่าเราผ่านพ้นยุคดีไซน์แบบ

318
00:29:11,610 --> 00:29:17,011
AI slop มาแล้ว และมันใช้การได้จริง อย่างที่บอก ถ้าอยากได้

319
00:29:17,011 --> 00:29:22,697
ก็ทำให้สวยขึ้นได้อีกเรื่อยๆ แต่ไม่อยากให้วิดีโอยาวแปดชั่วโมง

320
00:29:22,697 --> 00:29:27,435
เลยหยุดตรงนี้ เพราะฉันรู้ว่าคุณเข้าใจกระบวนการแล้ว

321
00:29:27,435 --> 00:29:33,216
นั่นคือ ให้อินสไปเรชันในรูปแบบ screenshot หรือไอเดียของคุณเอง

322
00:29:33,216 --> 00:29:37,670
แล้วปรับปรุงซ้ำไปเรื่อยๆ สุดท้ายก็ถึงจุดที่พอใจ

323
00:29:37,670 --> 00:29:44,493
ถ้ายังไม่ได้ ให้เปลี่ยนโมเดล LLM แค่นั้นเอง อย่าคิดเด็ดขาดว่ามันทำไม่ได้

324
00:29:44,493 --> 00:29:51,316
ตอนนี้เรามาถึงจุดที่พอใช้ได้แล้ว และคิดว่าถึงเวลาเพิ่มฟีเจอร์ยืนยันตัวตน

325
00:29:51,316 --> 00:29:57,759
คือ sign in / sign out และเพิ่มฐานข้อมูล เพื่อไม่ต้องบันทึกในเครื่อง

326
00:29:57,759 --> 00:30:02,877
นั่นพาเราไปเฟสสามของโปรเจกต์ ก่อนอื่น ขอพาไปดู plugins

327
00:30:02,877 --> 00:30:08,278
ก่อน ถ้าไปที่ Settings จะเจอ Plugins ถ้าไปที่ Marketplace

328
00:30:08,278 --> 00:30:13,301
แล้วค้นหา Supabase ลองค้นดูก่อน แล้วถ้าค้นหา Supabase

329
00:30:13,301 --> 00:30:21,924
จะเจอมันตรงนี้ Supabase คือฐานข้อมูลที่ดีที่สุดหรือจะพูดว่าง่ายที่สุดที่คุณเพิ่มให้โปรเจกต์

330
00:30:21,924 --> 00:30:27,136
Vibe Coded ได้ มันมีระบบยืนยันตัวตน มีฟังก์ชันฐานข้อมูล

331
00:30:27,136 --> 00:30:32,538
และฉันใช้มันในทุกโปรเจกต์ Vibe Coded ของตัวเอง ทุกคนก็ใช้

332
00:30:32,538 --> 00:30:37,276
เอาล่ะ อย่างแรกต้องเพิ่มมันเข้า Cursor ก่อน กด add

333
00:30:37,276 --> 00:30:42,014
plugin จากนั้นฉันจะเริ่มแชทใหม่ บอกมันว่า ฉันเพิ่ม

334
00:30:42,014 --> 00:30:49,500
Supabase plugin แล้ว และอยากให้ใช้มันทำระบบยืนยันตัวตนและตั้งค่าฐานข้อมูลให้แอป

335
00:30:49,500 --> 00:30:55,376
Vibe Coded ของฉันชื่อ Drift ฉันต้องการฟังก์ชันให้คนสมัครสมาชิก

336
00:30:55,376 --> 00:31:00,777
ล็อกอิน ครบวงจร end-to-end และแทนที่จะบันทึกทริปในเครื่อง

337
00:31:00,777 --> 00:31:06,558
เราอยากบันทึกลงฐานข้อมูลบนคลาวด์ เราอยากให้ทุกอย่างเหมือนเดิม

338
00:31:06,558 --> 00:31:13,570
ไม่เปลี่ยนฟังก์ชันอะไร แค่ตั้งค่านี้ให้ อย่าไปยุ่งกับอะไรที่เราตั้งไว้แล้ว

339
00:31:13,570 --> 00:31:19,067
ให้ความสำคัญกับความปลอดภัยเป็นพิเศษ ตรวจสอบให้แน่ใจว่าเปิด

340
00:31:19,067 --> 00:31:25,511
RLS ใน Supabase เพื่อไม่ให้ข้อมูลผู้ใช้ปนกัน เราไม่อยากให้มีช่องโหว่

341
00:31:25,511 --> 00:31:31,386
รักษาความปลอดภัยเป็นพิเศษตอนตั้งค่า ถ้ามีอะไรต้องใช้จากฝั่งฉัน

342
00:31:31,386 --> 00:31:36,124
หรือต้องเชื่อมต่ออะไร บอกฉันได้เลย ส่งเลย พูดง่ายๆ

343
00:31:36,124 --> 00:31:40,957
ฉันขอให้มันเปิด RLS ซึ่งย่อมาจาก row level security

344
00:31:40,957 --> 00:31:47,117
ระบบที่ป้องกันข้อมูลปนกัน เพื่อให้ฉันเข้าถึงข้อมูลของคนอื่นไม่ได้

345
00:31:47,117 --> 00:31:51,950
เข้าถึงได้แค่ข้อมูลของตัวเอง โอเค มันขอเชื่อมต่อกับ

346
00:31:51,950 --> 00:31:56,972
Supabase ทำเลย ให้สิทธิ์การเข้าถึงไปแล้ว การเชื่อมต่อ

347
00:31:56,972 --> 00:32:01,426
Supabase ตอนนี้ง่ายขึ้นมากผ่าน plugins และ MCPs

348
00:32:01,426 --> 00:32:06,543
เหล่านี้ เดิมทีต้องใส่ API keys เยอะแยะ ตั้งค่าเยอะแยะ

349
00:32:06,543 --> 00:32:11,566
แต่ตอนนี้มันทำแทนคุณได้หมด มันเปิดระบบยืนยันตัวตนแล้ว

350
00:32:11,566 --> 00:32:16,778
ตั้งค่าฐานข้อมูลและความปลอดภัยแล้ว มาดูกันว่าทำงานยังไง

351
00:32:16,778 --> 00:32:21,800
คิดว่ามีอะไรเพี้ยนนิดหน่อย หน้า sign-in เพี้ยนไปหน่อย

352
00:32:21,800 --> 00:32:26,633
ขอ screenshot หน่อย แนบ screenshot สิ่งที่เห็นตอนกด

353
00:32:26,633 --> 00:32:34,025
sign in มาให้ และเพิ่มปุ่มสำหรับ login ด้วย เพื่อให้ลูกค้าเดิมล็อกอินเข้าบัญชี

354
00:32:34,025 --> 00:32:38,478
ดูทริปของตัวเอง ฯลฯ และทุกครั้งที่มีคนกรอกฟอร์ม

355
00:32:38,478 --> 00:32:43,311
ก่อนจะแสดง itinerary เราอยากให้ล็อกอินหรือสมัครก่อน

356
00:32:43,311 --> 00:32:49,282
เพื่อดู itinerary นั่นคือเอา itinerary ไปไว้หลังระบบยืนยันตัวตน

357
00:32:49,282 --> 00:32:53,830
มาดูกัน โอเค ตอนนี้ sign up ใช้ได้แล้ว และ login

358
00:32:53,830 --> 00:33:00,274
ก็ใช้ได้ ลองวางแผนทริป โอเค กด generate แล้วมันขอให้ล็อกอินหรือสมัคร

359
00:33:00,274 --> 00:33:05,865
โอเค สมัครเลย โอเค สร้างบัญชีเรียบร้อย แล้วตอนนี้กำลังสร้าง

360
00:33:05,865 --> 00:33:10,698
itinerary และนี่คือ itinerary ของเรา สวยงาม Gardens

361
00:33:10,698 --> 00:33:16,005
by the Bay แล้วถ้ากลับไป มันบันทึกไว้ในบัญชีของฉันตรงนี้

362
00:33:16,005 --> 00:33:21,122
และ sign out ได้ ล็อกอินกลับได้ เห็นไหมว่าการเชื่อมต่อ

363
00:33:21,122 --> 00:33:27,092
Supabase ง่ายแค่ไหน ประเด็นคือ คุณต้องทดสอบทุกฟังก์ชันอย่างหนัก

364
00:33:27,092 --> 00:33:32,304
ทั้งระบบยืนยันตัวตน การอ่าน itinerary ต้องทดสอบหลายกรณี

365
00:33:32,304 --> 00:33:36,853
ใช้เวลากับการทดสอบและปรับปรุงให้ดีพอ หลังจากนั้น

366
00:33:36,853 --> 00:33:41,591
ใช้ Cursor สร้าง landing page สำหรับผลิตภัณฑ์ SaaS

367
00:33:41,591 --> 00:33:47,182
หรือแอปที่คุณกำลังสร้าง ดูวิดีโอนี้จบ คุณก็พร้อมจะสร้างแล้ว

368
00:33:47,182 --> 00:33:52,584
และเมื่อทุกอย่างพร้อม เมื่อตั้งค่าแบ็กเอนด์ครบ ตรวจสอบว่า

369
00:33:52,584 --> 00:33:58,175
OpenRouter, Google Maps ทุกอย่างเข้าที่ และพร้อมเปิดตัวแล้ว

370
00:33:58,175 --> 00:34:04,808
นั่นคือตอนที่ก้าวไปเฟสสุดท้าย นั่นคือการดีพลอย ตอนนี้ทุกอย่างรันอยู่บน

371
00:34:04,808 --> 00:34:09,546
localhost ซึ่งก็คือเครื่องคอมพิวเตอร์ส่วนตัวของคุณ

372
00:34:09,546 --> 00:34:15,801
ไม่มีใครบนอินเทอร์เน็ตเข้าถึงได้นอกจากคุณ เพื่อนำขึ้นสู่โลกออนไลน์

373
00:34:15,801 --> 00:34:25,846
คุณต้องมีสองอย่าง คือโดเมนและโฮสติ้ง แม้จะมีหลายวิธีในการโฮสต์เว็บแอปหรือเว็บไซต์และดีพลอยขึ้นอินเทอร์เน็ต

374
00:34:25,846 --> 00:34:30,489
แต่ส่วนตัวฉันชอบโฮสต์ผ่าน Hostinger พูดถึง Cursor

375
00:34:30,489 --> 00:34:35,038
โดยเฉพาะ เช่นเดียวกับที่เราเพิ่ม Supabase plugin

376
00:34:35,038 --> 00:34:39,776
เราสามารถเพิ่ม Hostinger plugin ได้ เพื่อให้ agent

377
00:34:39,776 --> 00:34:46,883
ของเรานำไปใช้ดีพลอยแอปได้โดยตรง ซึ่งหมายความว่าเราไม่ต้องปวดหัวกับการดีพลอย

378
00:34:46,883 --> 00:34:51,811
ซึ่งเป็นขั้นที่หลายคนเจอปัญหา โดยเฉพาะมือใหม่ ฉันชอบ

379
00:34:51,811 --> 00:34:57,781
Hostinger เพราะคุ้มค่ากับประสิทธิภาพ ฉันใช้กับเว็บไซต์ของตัวเอง

380
00:34:57,781 --> 00:35:02,993
ยังไม่เคยเจอปัญหาอะไร ข้อดีที่สุดคือ ถ้าเลือก Hostinger

381
00:35:02,993 --> 00:35:08,015
ไม่ต้องซื้อโดเมนแยก โฮสติ้งแยก เพราะถ้าซื้อแค่โฮสติ้ง

382
00:35:08,015 --> 00:35:13,133
คุณจะได้โดเมนฟรีทั้งปี พร้อมอีเมลธุรกิจฟรี และ managed

383
00:35:13,133 --> 00:35:17,776
ads ฟรีอีกต่างหาก เชอร์รีบนเค้กคือ ตอนนี้โปรโมชัน

384
00:35:17,776 --> 00:35:22,230
Monsoon Sale กำลังจัดอยู่ เริ่มตั้งแต่วันที่ 30

385
00:35:22,230 --> 00:35:27,252
มิถุนายน ถึง 17 สิงหาคม ซึ่งหมายถึงราคาที่ดีขึ้นไปอีก

386
00:35:27,252 --> 00:35:33,222
และฉันจะทำให้คุณได้ส่วนลดเพิ่มด้วย อย่างแรก ไปที่คำอธิบายวิดีโอ

387
00:35:33,222 --> 00:35:39,098
จะเจอลิงก์ไปหน้านี้ พอมาถึงแล้ว เลื่อนลงมา จะเห็นแพ็กเกจสองแบบ

388
00:35:39,098 --> 00:35:45,257
สำหรับกรณีของเรา แผน Business เหมาะสม คุณโฮสต์เว็บแอปได้ถึงห้าแอป

389
00:35:45,257 --> 00:35:49,806
50 เว็บไซต์ เรื่องทรัพยากร มันมี CPU สองคอร์ RAM

390
00:35:49,806 --> 00:35:55,587
3 GB พื้นที่ NVMe 50 GB และโดเมนตามที่พูดถึง กดเลือกแผนได้เลย

391
00:35:55,587 --> 00:36:00,609
และแม้แต่ช่วงลดราคา คุณยังได้ส่วนลดเพิ่มด้วยคูปองโค้ด

392
00:36:00,609 --> 00:36:05,063
yashika20 ใช้ได้กับแผน 12 เดือน 24 เดือน และ 48

393
00:36:05,063 --> 00:36:11,033
เดือน ราคาก็ถูกอยู่แล้ว และใช้ลิงก์กับคูปองของฉันได้ส่วนลดเพิ่ม

394
00:36:11,033 --> 00:36:15,582
เมื่อซื้อเสร็จ ไปที่ API แล้วเลือก Cursor ตรงนี้

395
00:36:15,582 --> 00:36:20,225
จะเห็นข้อความ install extension in cursor คลิกมัน

396
00:36:20,225 --> 00:36:25,437
จะพาคุณมาที่หน้านี้ แล้วติดตั้งได้เลย โอเค ติดตั้งเสร็จ

397
00:36:25,437 --> 00:36:33,966
กลับมาที่ agent แล้วถามมันว่า เฮ้ Cursor ช่วยดูหน่อยว่าเข้าถึงโฮสติ้งหรือบัญชีของฉันได้ไหม

398
00:36:33,966 --> 00:36:38,704
และลองหาว่าเจอแผน Business และโดเมนที่เพิ่งซื้อไหม

399
00:36:38,704 --> 00:36:43,158
เผื่อมันหาไม่เจอ บอกด้วยว่าฉันติดตั้ง extension

400
00:36:43,158 --> 00:36:48,370
ชื่อ Hostinger Connector แล้ว ลองเชื่อมต่อผ่านอันนั้นดู

401
00:36:48,370 --> 00:36:52,919
โอเค เชื่อมต่อบัญชีกัน ไปที่ IDE จากตรงนี้ เลือก

402
00:36:52,919 --> 00:36:57,846
Hostinger จากดรอปดาวน์นี้ แล้วเชื่อมต่อ ให้สิทธิ์มัน

403
00:36:57,846 --> 00:37:04,764
เอาล่ะ กลับไปที่ agent แล้วบอกว่าต่อแล้ว โอเค มันเจอเว็บโฮสติ้งของเราแล้ว

404
00:37:04,764 --> 00:37:09,313
ถ้ามันยังไม่เห็นโดเมน สิ่งที่ต้องทำคือต้อง claim

405
00:37:09,313 --> 00:37:14,714
มัน บนหน้าแรกมันจะโชว์ว่า claim your domain ตอนนั้นก็คลิก

406
00:37:14,714 --> 00:37:19,358
claim ได้เลย ฉัน claim ไปแล้วสำหรับเดโมอื่นของฉัน

407
00:37:19,358 --> 00:37:24,759
คุณก็แค่ค้นหาโดเมนที่ต้องการแล้ว claim มัน กระบวนการไวมาก

408
00:37:24,759 --> 00:37:29,308
แล้วมันจะแสดงมาตรงนี้ ทีนี้ขอให้มันดีพลอย เอาล่ะ

409
00:37:29,308 --> 00:37:33,762
เยี่ยม ใช้เว็บโฮสติ้งและโดเมนนี้ ดีพลอยแอป Vibe

410
00:37:33,762 --> 00:37:39,163
Coded ชื่อ Drift ของเรา ตรวจสอบให้ดีว่าดีพลอยอย่างปลอดภัย

411
00:37:39,163 --> 00:37:45,418
เพิ่ม environment variables ให้ถูกต้อง ตั้งค่าทุกอย่างให้เรียบร้อย

412
00:37:45,418 --> 00:37:51,577
และเมื่อดีพลอยเสร็จ บอกฉันด้วย ฉันจะไปเช็คโดเมนว่าเจอแอปของฉันไหม

413
00:37:51,577 --> 00:37:56,031
เอาล่ะ ถ้าต้องการ ก็บอกมันแค่ว่าดีพลอยแอปได้เลย

414
00:37:56,031 --> 00:38:00,485
แต่ส่วนตัวฉันชอบให้คำแนะนำเรื่องความปลอดภัยด้วย

415
00:38:00,485 --> 00:38:04,939
เช่น เพิ่ม environment variables ให้ถูกต้อง ฯลฯ

416
00:38:04,939 --> 00:38:09,393
ปล่อยให้มันดีพลอย โอเค เสร็จแล้ว ใช้เวลาสามนาที

417
00:38:09,393 --> 00:38:14,321
ไปเช็คโดเมน ใช่ เสร็จจริง สวยงาม เห็นไหม นี่คือโดเมน

418
00:38:14,321 --> 00:38:21,144
และนี่คือแอปของเรา และด้วยสิ่งนี้ เราสร้างแอปที่ใช้งานได้จริงทั้งตัวด้วย

419
00:38:21,144 --> 00:38:26,545
Cursor โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว เริ่มจากศูนย์

420
00:38:26,545 --> 00:38:31,188
สร้างแบ็กเอนด์ ฟรอนต์เอนด์ ตั้งค่าระบบยืนยันตัวตน

421
00:38:31,188 --> 00:38:36,021
ฐานข้อมูล ความปลอดภัย และดีพลอยขึ้นอินเทอร์เน็ตแล้ว

422
00:38:36,021 --> 00:38:41,233
คุณจะเจอลิงก์ Hostinger ในคำอธิบายวิดีโอ พร้อมคูปองโค้ด

423
00:38:41,233 --> 00:38:45,877
อย่าพลาด Monsoon Sale นะ อยู่ถึงวันที่ 17 สิงหาคม

424
00:38:45,877 --> 00:38:50,331
2026 ถ้าวิดีโอนี้มีประโยชน์ กดไลก์ กดติดตามช่อง

425
00:38:50,331 --> 00:38:55,732
ช่วยโปรโมตวิดีโอนี้ถ้าเป็นไปได้ และบอกฉันในคอมเมนต์ได้เลย

426
00:38:55,732 --> 00:39:03,029
ถ้าสนใจทำงานกับเอเจนซี Automatez AI ของเรา ดูลิงก์เว็บไซต์เราในคำอธิบายวิดีโอ

427
00:39:03,029 --> 00:39:10,989
เราช่วยตั้งค่าระบบ AI ให้ธุรกิจของคุณ ซึ่งช่วยลดงานที่ทำด้วยมือและงานน่าเบื่อได้เยอะ

428
00:39:10,989 --> 00:39:16,391
ถ้าอยากได้คำแนะนำจากฉันโดยตรง จองคอลปรึกษาแบบตัวต่อตัวได้

429
00:39:16,391 --> 00:39:22,266
ลิงก์ปฏิทินอยู่ในคำอธิบายวิดีโอ ถ้าอยากติดต่อฉันเป็นการส่วนตัว

430
00:39:22,266 --> 00:39:27,478
ส่งคำขอเชื่อมต่อบน LinkedIn ได้เลย และตามฉันบน LinkedIn

431
00:39:27,478 --> 00:39:32,406
และ X เพื่อคอนเทนต์พิเศษเพิ่มเติม เจอกันในวิดีโอหน้า

432
00:39:32,406 --> 00:39:32,690
บาย