Cursor 3.0 Tutorial For Beginners (Full Course)

1
00:00:00,000 --> 00:00:03,799
ยินดีต้อนรับสู่คู่มือฉบับสมบูรณ์สำหรับการใช้งาน

2
00:00:03,799 --> 00:00:07,598
Cursor เพื่อธุรกิจ วิดีโอนี้จะเป็นคู่มือ Cursor

3
00:00:07,598 --> 00:00:15,277
ที่ครอบคลุมที่สุดบนอินเทอร์เน็ต และคุณไม่จำเป็นต้องมีประสบการณ์ด้านการเขียนโปรแกรมเพื่อทำตามเลย

4
00:00:15,277 --> 00:00:20,693
สิ่งที่คุณต้องมีก็แค่คอมพิวเตอร์และการเชื่อมต่ออินเทอร์เน็ตเท่านั้น

5
00:00:20,693 --> 00:00:24,815
คอร์ส Cursor นี้จะแบ่งออกเป็นสามส่วน ในส่วนที่หนึ่ง

6
00:00:24,815 --> 00:00:30,473
เราจะพูดถึงพื้นฐานของ Cursor และทุกสิ่งที่คุณต้องรู้เพื่อเริ่มต้นสร้าง

7
00:00:30,473 --> 00:00:34,273
ไม่ว่าจะเป็นการสั่งงานโมเดล (prompting) และอื่น

8
00:00:34,273 --> 00:00:38,476
ๆ อีกมากมาย ในส่วนที่สอง เราจะเริ่มลงมือสร้างกันจริง

9
00:00:38,476 --> 00:00:43,487
ๆ เราจะสร้างแอปหนึ่งตัว หน้า Landing Page (หน้าแรกของเว็บไซต์)

10
00:00:43,487 --> 00:00:47,448
สำหรับแอปนั้น และตัวนักวิจัยอัตโนมัติ (autonomous

11
00:00:47,448 --> 00:00:52,136
researcher) ที่ช่วยค้นคว้าสิ่งที่มีประโยชน์สำหรับแอปของเรา

12
00:00:52,136 --> 00:00:56,178
ในส่วนที่สาม เราจะพูดถึงฟีเจอร์ขั้นสูงอย่าง Cursor

13
00:00:56,178 --> 00:01:00,381
เวอร์ชันมือถือ, GitHub และสิ่งอื่น ๆ ที่ฟังดูน่ากลัว

14
00:01:00,381 --> 00:01:04,423
แต่จริง ๆ แล้วง่ายกว่าที่คุณคิด ผมชื่อ Riley Brown

15
00:01:04,423 --> 00:01:09,111
ผมใช้ Cursor มาสองปีแล้ว และพวกเขาอัปเดตทั้งโมเดลและมุมมอง

16
00:01:09,111 --> 00:01:14,931
Agents ใหม่สุดเหลือเชื่อ ผมเลยรู้สึกว่าถึงเวลาแล้วที่จะทำคู่มือการใช้งาน

17
00:01:14,931 --> 00:01:19,942
Cursor ที่ละเอียดที่สุดบนอินเทอร์เน็ต และถ้าคุณชอบวิดีโอแบบนี้

18
00:01:19,942 --> 00:01:24,711
อย่าลืมกด subscribe และกดไลก์ด้วยนะครับ มันช่วยผมได้เยอะมาก

19
00:01:24,711 --> 00:01:30,450
และทำให้ผมได้ทำสิ่งที่รักต่อไป นั่นคือการสร้างคอนเทนต์เพื่อการศึกษาสนุก

20
00:01:30,450 --> 00:01:34,249
ๆ แบบนี้เกี่ยวกับเครื่องมือ AI ที่ดีที่สุดในโลก

21
00:01:34,249 --> 00:01:39,584
เอาล่ะ เราไปดำดิ่งกันเลย โอเคทุกคน วันนี้เรามีอะไรให้พูดถึงเยอะมาก

22
00:01:39,584 --> 00:01:44,434
แต่ขอย้ำอีกครั้งว่าเนื้อหาจะแบ่งเป็นสามส่วน เรามีพื้นฐานก่อน

23
00:01:44,434 --> 00:01:49,850
จากนั้นเราจะลงมือสร้าง และผมยังมีพาร์ต 2.5 ที่จะพูดถึงหัวข้อขั้นสูง

24
00:01:49,850 --> 00:01:54,215
โดยเฉพาะการนำแอปขึ้นอินเทอร์เน็ต และการเตรียมฐานข้อมูล

25
00:01:54,215 --> 00:02:01,813
(database) ที่ดีให้กับแอปที่คุณสร้าง จากนั้นเราจะพูดถึงฟีเจอร์ขั้นสูงทั้งหมดที่จะช่วยให้คุณใช้

26
00:02:01,813 --> 00:02:06,582
Cursor ได้อย่างมีประสิทธิภาพ ก่อนที่ผมจะพูดถึงวิธีดาวน์โหลด

27
00:02:06,582 --> 00:02:10,381
Cursor ผมอยากพูดก่อนว่า Cursor คืออะไร? ทำไมใคร

28
00:02:10,381 --> 00:02:14,342
ๆ ถึงอยากใช้ Cursor? ถ้าจะพูดให้ง่ายที่สุด Cursor

29
00:02:14,342 --> 00:02:18,626
คือเครื่องมือที่ให้คุณสื่อสารกับเอเจนต์ AI (AI agent)

30
00:02:18,626 --> 00:02:22,425
เพื่อให้มันสร้างแอปให้คุณได้ ผมเพิ่งพิมพ์พรอมต์

31
00:02:22,425 --> 00:02:26,709
(prompt — คำสั่ง) หนึ่งอันแล้วส่งให้โมเดลตัวนี้ตรงนี้

32
00:02:26,709 --> 00:02:30,993
ชื่อ GPT 5.6 Soul และผมบอกมันว่า "ฉันอยากสร้างแอปเล็ก

33
00:02:30,993 --> 00:02:36,247
ๆ ที่ให้ฉันติดตามแคลอรีของตัวเอง" แอปง่าย ๆ รันบนเครื่องของตัวเอง

34
00:02:36,247 --> 00:02:40,450
มินิมอลมาก ทำมันให้ง่ายเข้าไว้ เพราะผมอยากให้มันเร็ว

35
00:02:40,450 --> 00:02:47,321
ผมอยากให้มันง่ายมาก ๆ เพื่อจะได้แสดงให้เห็นว่าคุณสามารถพิมพ์ไอเดียของคุณส่งให้เอเจนต์

36
00:02:47,321 --> 00:02:51,201
AI ได้จริง ๆ และตรงนี้เอเจนต์ก็ถามคำถามกลับมาว่า

37
00:02:51,201 --> 00:02:56,455
"แอปนี้จะให้ชื่อว่าอะไร?" ผมตอบว่า Call Track และนี่ก็เป็นแอปง่าย

38
00:02:56,455 --> 00:03:00,416
ๆ ที่ใช้สื่อสารประเด็นของผมเท่านั้น หลังจากผ่านไป

39
00:03:00,416 --> 00:03:04,296
1 นาที 12 วินาที Cursor ก็สร้างแอปเสร็จเรียบร้อย

40
00:03:04,296 --> 00:03:08,176
และมันบอกว่า Calotra ถูกสร้างและรันอยู่บนเครื่อง

41
00:03:08,176 --> 00:03:12,783
(running locally) หมายความว่ามันรันอยู่บนคอมพิวเตอร์ของผม

42
00:03:12,783 --> 00:03:20,462
เราจะพูดถึงเรื่องนี้เพิ่มเติมทีหลัง แต่ตอนนี้ผมจะคลิกตรงนี้เพื่อเปิดมันในเบราว์เซอร์ภายนอกอย่าง

43
00:03:20,462 --> 00:03:25,069
Google Chrome ก็ได้ หรือจะคลิกขวาแล้วเปิดในเบราว์เซอร์ของ

44
00:03:25,069 --> 00:03:28,868
Cursor ก็ได้ และแล้วเราก็ได้แอปติดตามแคลอรีง่าย

45
00:03:28,868 --> 00:03:32,667
ๆ ขึ้นมา ผมพิมพ์พิซซ่า 1,000 แล้วกด add (เพิ่ม)

46
00:03:32,667 --> 00:03:38,326
ได้เลย นี่คือแอปง่าย ๆ จริง ๆ โดยสรุป Cursor ก็คือเอเจนต์เขียนโค้ดด้วย

47
00:03:38,326 --> 00:03:45,762
AI (AI coding agent) ที่คุณคุยด้วยได้ และมันช่วยคุณสร้างแอปอะไรก็ได้ที่อยู่ในจินตนาการของคุณ

48
00:03:45,762 --> 00:03:50,046
ในการดาวน์โหลด Cursor คุณต้องไปที่เว็บไซต์ cursor.com

49
00:03:50,046 --> 00:03:53,845
ตามที่คุณเดาไว้ได้เลย เมื่อเข้าไปที่ cursor.com

50
00:03:53,845 --> 00:03:58,614
หน้าตาก็จะประมาณนี้ ตรงนี้เราอยู่ในเว็บ Cursor และถ้าคุณใช้

51
00:03:58,614 --> 00:04:04,596
Mac หน้าก็จะแสดงปุ่ม "Download for macOS" คุณก็แค่คลิกปุ่มนี้แล้วดาวน์โหลด

52
00:04:04,596 --> 00:04:09,527
Cursor ลงคอมพิวเตอร์ของคุณ ส่วนตัวผมดาวน์โหลดไว้แล้วบนเครื่อง

53
00:04:09,527 --> 00:04:13,487
คุณก็แค่คลิกเปิดมันขึ้นมา แล้วลงชื่อเข้าด้วยบัญชี

54
00:04:13,487 --> 00:04:18,176
Cursor ของคุณ ถ้ายังไม่มีบัญชี มันก็จะให้คุณสร้างบัญชีใหม่

55
00:04:18,176 --> 00:04:23,430
เมื่อคุณลงชื่อเข้า Cursor ได้แล้ว หน้าจอของคุณจะมีหน้าตาประมาณนี้

56
00:04:23,430 --> 00:04:27,390
หรือแบบนี้ก็ได้ ตรงนี้คือหน้าต่าง IDE (Integrated

57
00:04:27,390 --> 00:04:31,270
Development Environment — โปรแกรมแก้ไขโค้ด) หรือ

58
00:04:31,270 --> 00:04:35,878
editor และตรงนี้คือหน้าต่าง Agents ถ้าอยากสลับจากหน้าต่าง

59
00:04:35,878 --> 00:04:40,889
Agents ไปที่หน้าต่าง editor คุณสามารถคลิกปุ่มด้านบนที่เขียนว่า

60
00:04:40,889 --> 00:04:44,931
IDE ได้ และในหน้าต่าง IDE คุณจะเห็นปุ่มที่เขียนว่า

61
00:04:44,931 --> 00:04:48,730
Agents window ด้วย วิดีโอนี้เราจะพูดถึงหน้าต่าง

62
00:04:48,730 --> 00:04:52,771
Agents เป็นหลัก โอเค ถ้าคุณไม่เคยใช้ Cursor มาก่อน

63
00:04:52,771 --> 00:04:58,187
นี่คือสิ่งที่คุณจะเห็นตอนเปิดแอปครั้งแรก คุณจะไม่เห็นอะไรถูกปักหมุด

64
00:04:58,187 --> 00:05:02,229
เพราะคุณยังไม่ได้ปักหมุดอะไรเลย คุณจะไม่เห็นอะไรใน

65
00:05:02,229 --> 00:05:06,109
Workspaces (พื้นที่ทำงาน) เพราะคุณยังไม่ได้สร้าง

66
00:05:06,109 --> 00:05:10,312
Workspaces ภายใน Cursor คุณจะเห็น New agent, Search,

67
00:05:10,312 --> 00:05:16,940
Automations, Customize เดี๋ยวเราจะพูดถึงทีหลัง แต่ที่สำคัญที่สุดคือคุณจะเห็นมุมมอง

68
00:05:16,940 --> 00:05:22,517
Agents นี้ และเมื่อคุณสร้างเอเจนต์ใหม่ คุณจะคุยกับเอเจนต์ของคุณตรงนี้

69
00:05:22,517 --> 00:05:29,065
วิธีการจัดระเบียบของเครื่องมือนี้คือ คุณจะมีแชตหรือเซสชันของเอเจนต์อยู่ทางซ้ายมือ

70
00:05:29,065 --> 00:05:33,268
แต่เรามาสร้างแชตเซสชันกันก่อน เพื่อวิดีโอนี้โดยเฉพาะ

71
00:05:33,268 --> 00:05:37,633
เพราะ Grock เป็นโมเดลเฉพาะของแพลตฟอร์มนี้ เราสามารถใช้

72
00:05:37,633 --> 00:05:41,432
Grock 4.5 highfast ได้ สิ่งที่ผมจะทำคือพิมพ์ว่า

73
00:05:41,432 --> 00:05:47,090
"สวัสดี คุณเป็นโมเดลอะไร?" และเมื่อเราทำแบบนี้ มันก็สร้างแชตเซสชันชื่อ

74
00:05:47,090 --> 00:05:51,617
model inquiry ขึ้นมา ถ้าเราเลื่อนลงมาตรงนี้จนถึงด้านล่าง

75
00:05:51,617 --> 00:05:57,598
เราจะเห็นแชตเซสชันใหม่ชื่อ model inquiry และตรงนี้ผมกำลังคุยกับเอเจนต์อยู่

76
00:05:57,598 --> 00:06:04,307
ถ้าผมอยากเปลี่ยนชื่อแชตเซสชัน เพราะในหนึ่งสัปดาห์คุณอาจมีแชตเซสชันที่กำลังทำอยู่ถึง

77
00:06:04,307 --> 00:06:09,965
20 อัน และคุณอาจอยากตั้งชื่อหรือปักหมุดมันไว้ คุณสามารถเปลี่ยนชื่อเป็น

78
00:06:09,965 --> 00:06:13,845
testing gro ได้ และเรามาปักหมุดมันกันเลย ใช่ไหม?

79
00:06:13,845 --> 00:06:17,725
เพราะเราไม่อยากทำมันหาย และตรงนี้เราก็มี testing

80
00:06:17,725 --> 00:06:24,515
gro ถูกปักหมุดไว้ นี่คือแชตเซสชันของเรา และนี่แหละคือสิ่งที่เรียกว่าเซสชันของเอเจนต์

81
00:06:24,515 --> 00:06:29,365
และแน่นอนคุณสามารถปักหมุดเซสชันเหล่านี้ได้ ต่อไปผมอยากพูดถึง

82
00:06:29,365 --> 00:06:34,215
Workspaces สักหน่อย ถ้าเรากด command + N มันก็เหมือนกับการกด

83
00:06:34,215 --> 00:06:42,702
New agent นี่คือปุ่มลัด command + N ตอนนี้เรากำลังสร้างเอเจนต์อีกตัวหนึ่งซึ่งเป็นแชตเซสชันที่แยกออกจากกัน

84
00:06:42,702 --> 00:06:48,684
และคุณจะเห็นว่าตรงนี้มันขึ้นว่า no repo ซึ่งหมายความว่าเรายังไม่ได้ทำงานใน

85
00:06:48,684 --> 00:06:56,039
Workspace ใดเลย ถ้าคุณกำลังทำงานในโปรเจกต์ใหญ่ สมมติว่าเราอยากสร้างเว็บไซต์หรือแอปในภายหลัง

86
00:06:56,039 --> 00:07:00,081
ผมอยากสร้างมันใน Workspace และสิ่งที่ผมจะทำคือคลิก

87
00:07:00,081 --> 00:07:07,275
create workspace แล้วเราจะสร้างโฟลเดอร์ใหม่ ตอนนี้เรากำลังเลือกตำแหน่งบนคอมพิวเตอร์ของเรา

88
00:07:07,275 --> 00:07:11,801
เช่น โฟลเดอร์ดาวน์โหลด หรือที่ที่เราอยากสร้างโปรเจกต์นี้

89
00:07:11,801 --> 00:07:19,157
ผมจะสร้างมันในโฟลเดอร์ Desktop ของผม และคุณจะสร้างที่ไหนก็ได้ตามที่สะดวกและปลอดภัยสำหรับคุณ

90
00:07:19,157 --> 00:07:25,704
ผมจะตั้งชื่อโปรเจกต์นี้ว่า agent native แล้วเดี๋ยวคุณจะรู้ว่าทำไมผมถึงตั้งชื่อนี้

91
00:07:25,704 --> 00:07:30,393
นี่เป็นเพียงชื่อเว็บไซต์และแอปที่ผมอยากสร้าง จากนั้นผมจะกด

92
00:07:30,393 --> 00:07:34,273
create และตอนนี้เราก็สร้างโปรเจกต์ใหม่ชื่อ agent

93
00:07:34,273 --> 00:07:38,395
native ขึ้นมาแล้ว คุณจะสังเกตเห็นว่า Workspace ชื่อ

94
00:07:38,395 --> 00:07:45,347
agent native ยังไม่โผล่ขึ้นมาทางซ้ายมือ และมันจะโผล่ก็ต่อเมื่อเราสร้างเซสชันขึ้นมาจริง

95
00:07:45,347 --> 00:07:49,469
ๆ ซึ่งเซสชันนั้นจะไปแสดงอยู่ในโฟลเดอร์ agent native

96
00:07:49,469 --> 00:07:54,157
และคุณจะเห็นว่าโดยค่าเริ่มต้นมันเปิดโหมด Plan (โหมดวางแผน)

97
00:07:54,157 --> 00:07:58,441
อยู่ พร้อมข้อความว่า "Help me plan my app and website

98
00:07:58,441 --> 00:08:02,483
called agent native" (ช่วยวางแผนแอปและเว็บไซต์ชื่อ

99
00:08:02,483 --> 00:08:06,524
agent native ให้ฉันหน่อย) ผมพิมพ์พรอมต์ของผมเข้าไป

100
00:08:06,524 --> 00:08:10,566
แล้วคุณจะเห็นว่า agent native โผล่ขึ้นมาตรงนี้แล้ว

101
00:08:10,566 --> 00:08:14,688
และมันเปิดโหมด Plan ให้อัตโนมัติ ตอนนี้มันกำลังโหลด

102
00:08:14,688 --> 00:08:19,215
และแล้วเราก็ได้มันพิมพ์คำถามบางอย่างที่อยากให้ผมตอบออกมา

103
00:08:19,215 --> 00:08:25,358
โหมด Plan ก็คือโหมดที่คุณสามารถให้เอเจนต์เข้าไปเพื่อช่วยคุณวางแผนบางอย่างได้

104
00:08:25,358 --> 00:08:29,319
และมันมีประโยชน์มากเมื่อสิ่งที่คุณอยากทำมันยาวมาก

105
00:08:29,319 --> 00:08:35,139
หรือคุณไม่รู้ว่าจะเริ่มต้นยังไง หรือยังไม่มีภาพชัดเจนว่าอยากสร้างอะไรแน่

106
00:08:35,139 --> 00:08:42,171
ๆ บางทีคุณอาจอยากเข้าโหมด Plan เอเจนต์จะช่วยให้คุณคิดถึงสิ่งที่คุณอาจไม่เคยคิดถึงมาก่อน

107
00:08:42,171 --> 00:08:47,668
ส่วนตัวผมไม่ค่อยใช้โหมดนี้บ่อยนัก จริง ๆ แล้วถ้าผมอยากให้มันสร้างแผน

108
00:08:47,668 --> 00:08:51,467
ผมก็แค่พูดว่า "เฮ้ ช่วยสร้างแผนให้หน่อยได้ไหม?"

109
00:08:51,467 --> 00:08:56,963
ไม่จำเป็นต้องเข้าโหมด Plan เลย เพราะสุดท้ายแล้วคุณก็แค่คุยกับเอเจนต์

110
00:08:56,963 --> 00:09:00,843
ถ้าคุณขอแผน มันก็จะสร้างแผนให้ ถ้าคุณขอเนื้อเพลง

111
00:09:00,843 --> 00:09:04,642
มันก็จะแต่งเนื้อเพลงให้ นี่คือเอเจนต์ โหมด Plan

112
00:09:04,642 --> 00:09:09,896
ถูกสร้างขึ้นในยุคที่การใช้งานยังไม่เหมือนการคุยกับเอเจนต์เท่าไหร่

113
00:09:09,896 --> 00:09:16,848
แต่เหมือนการคุยกับ AI ที่สร้างแอปได้อย่างเดียว ตอนนี้มันกลายเป็นเอเจนต์เอนกประสงค์แล้ว

114
00:09:16,848 --> 00:09:21,051
แต่ถ้าคุณชอบใช้โหมด Plan จริง ๆ คุณสามารถพิมพ์ /plan

115
00:09:21,051 --> 00:09:26,547
แล้วมันจะเข้าโหมด Plan ให้อัตโนมัติ หรือกดปุ่มเครื่องหมายบวกแล้วคลิก

116
00:09:26,547 --> 00:09:30,347
Plan ก็เข้าโหมดนี้ได้เหมือนกัน แต่ขอย้ำอีกครั้ง

117
00:09:30,347 --> 00:09:34,388
ผมแค่ขอแผนถ้าผมอยากได้แผน ผมไม่ค่อยคิดถึงโหมด Plan

118
00:09:34,388 --> 00:09:38,672
เท่าไหร่ ผมแค่พูดกับเอเจนต์เหมือนมันเป็นมนุษย์คนหนึ่ง

119
00:09:38,672 --> 00:09:43,522
และผมก็สามารถตอบกลับไปได้ตรง ๆ แต่ถ้าผมอยากสร้างเว็บไซต์จริง

120
00:09:43,522 --> 00:09:47,564
ๆ สักอัน ผมอาจอยากสลับโมเดล สมมติว่าผมอยากใช้โมเดล

121
00:09:47,564 --> 00:09:53,868
Fable 5 ซึ่งแพงกว่า หรืออยากใช้ GPD 5.6 6 soul ซึ่งเป็นโมเดลที่ผมใช้บ่อยที่สุด

122
00:09:53,868 --> 00:09:58,961
ผมก็แค่เลือกโมเดลนี้แล้วสลับได้ทันที ใช่ไหม? นี่คือตัวสลับโมเดล

123
00:09:58,961 --> 00:10:03,568
ถ้าคุณเคยใช้เครื่องมือ AI อะไรมา คุณก็แค่เลือกโมเดลตรงนี้

124
00:10:03,568 --> 00:10:07,691
แต่ถ้าคุณไม่เห็นโมเดลที่อยากใช้ คุณก็ไปที่ settings

125
00:10:07,691 --> 00:10:13,511
แล้วเข้าไปที่ models เลื่อนลงมา แล้วเพิ่มโมเดลที่คุณไม่เห็นตรงนี้ได้ด้วย

126
00:10:13,511 --> 00:10:17,633
มี toggle (สวิตช์) ที่เขียนว่า view all models ด้วย

127
00:10:17,633 --> 00:10:22,240
แต่โมเดลพวกนั้นโดยทั่วไปเป็นรุ่นเก่า ๆ ที่คุณคงไม่อยากใช้

128
00:10:22,240 --> 00:10:26,120
เช่น GPT 5.6 Luna ซึ่งเพิ่มได้ หรือ GPT 5.4 Nano

129
00:10:26,120 --> 00:10:32,506
ซึ่งโมเดลพวกนี้ที่อยู่ใต้ toggle นี้ส่วนใหญ่เป็นโมเดลที่คุณไม่จำเป็นต้องใช้จริง

130
00:10:32,506 --> 00:10:36,709
ๆ ใช่ไหม? พวกมันไม่ใช่โมเดลที่ดีที่สุด หรือถูกที่สุด

131
00:10:36,709 --> 00:10:40,912
หรือล้ำหน้าที่สุดในหมวดไหนเลย และเมื่อตอบกลับเอเจนต์

132
00:10:40,912 --> 00:10:45,116
ผมบอกมันว่า "agent native คือแบรนด์ พอดแคสต์ และเร็ว

133
00:10:45,116 --> 00:10:52,229
ๆ นี้แอปมือถือของผม ที่ช่วยให้คนติดตามเครื่องมือและกลยุทธ์ล่าสุดในการทำความเข้าใจเอเจนต์

134
00:10:52,229 --> 00:10:56,513
AI ฉันอยากเริ่มจากหน้า Landing Page ช่วยสร้าง Landing

135
00:10:56,513 --> 00:11:02,494
Page ที่หน้าตาแบบนี้ให้หน่อยได้ไหม?" สมมติว่าผมอยากสร้างเพจที่หน้าตาแบบนี้

136
00:11:02,494 --> 00:11:09,042
ผมก็แค่แคปหน้าจอของเพจนี้แล้วคัดลอกมา และวิธีเดียวกับที่พิมพ์ข้อความลงในพรอมต์ได้

137
00:11:09,042 --> 00:11:12,922
ผมก็สามารถวางรูปภาพลงไปได้ด้วย ตรงนี้เรามีพรอมต์

138
00:11:12,922 --> 00:11:17,125
ตรงนี้เรามีรูปภาพ และตอนนี้เราจะรันมัน ผมจะบอกมันว่า

139
00:11:17,125 --> 00:11:21,005
"ช่วยสร้างเว็บไซต์แบบนี้หน่อย รันบนเครื่องของฉัน

140
00:11:21,005 --> 00:11:28,684
อยากให้ข้อความตรงนั้นเขียนว่า agent native และอยากให้มันเคลื่อนที่ในแนวนอนจากซ้ายไปขวาบนหน้าจอ"

141
00:11:28,684 --> 00:11:33,534
ตอนนี้เอเจนต์ AI กำลังทำงานอยู่ และเราสามารถเห็นพรอมต์ของเรา

142
00:11:33,534 --> 00:11:37,818
ขยายพรอมต์ได้ ถ้าคลิกออกไปมันก็จะหายไป ผมชอบจุดนี้ของ

143
00:11:37,818 --> 00:11:44,850
Cursor มันซ่อนพรอมต์ไว้แบบนี้ระหว่างที่รัน และเรายังเห็นได้ด้วยว่ามันกำลังแก้ไขอะไรอยู่

144
00:11:44,850 --> 00:11:48,730
เห็นว่ามันกำลังแก้ไข 4 ไฟล์ สำรวจ 2 ไฟล์ ค้นหา 1

145
00:11:48,730 --> 00:11:54,469
ครั้ง และรันคำสั่ง 3 คำสั่ง นี่คือบรรทัดโค้ดทั้งหมดที่มันเขียนหรือลบออก

146
00:11:54,469 --> 00:11:58,511
จำได้ไหมว่าโฟลเดอร์ agent native นี้อยู่ในโฟลเดอร์

147
00:11:58,511 --> 00:12:02,633
Desktop ของเรา ถ้าเราไปที่ Finder แล้วไปที่ Desktop

148
00:12:02,633 --> 00:12:06,675
เราจะเห็นโฟลเดอร์ agent native และในโฟลเดอร์ agent

149
00:12:06,675 --> 00:12:11,686
native ซึ่งก็คือ Workspace ของเรานี้ จะมีไฟล์ทั้งหมดอยู่ตรงนี้

150
00:12:11,686 --> 00:12:17,021
แอปที่มันเพิ่งสร้างขึ้น มันเขียนไฟล์ทั้งหมดไว้ที่นี่สำหรับโปรเจกต์

151
00:12:17,021 --> 00:12:22,194
agent native นี้ และตอนนี้แอปถูกรันแล้ว เราสามารถรันมันได้ตรงนี้

152
00:12:22,194 --> 00:12:26,721
ตอนนี้มันกำลังรันอยู่บนคอมพิวเตอร์ของเราแล้ว เมื่อคุณใช้

153
00:12:26,721 --> 00:12:31,247
Cursor โดยค่าเริ่มต้น มันจะรันบนเครื่องคอมพิวเตอร์ของคุณ

154
00:12:31,247 --> 00:12:35,046
และถ้าคุณคลิกตรงนี้เพื่อเปิดในเบราว์เซอร์ภายนอก

155
00:12:35,046 --> 00:12:41,109
มันก็จะเปิดแอปของคุณขึ้นมา โอเค ได้แล้ว ตอนนี้มันรันอยู่บนเครื่องของเราแล้ว

156
00:12:41,109 --> 00:12:45,878
และนี่คือเว็บไซต์หรือแอปที่เอเจนต์ของเราเพิ่งสร้างขึ้นภายใน

157
00:12:45,878 --> 00:12:51,051
Cursor ผมว่า มองดูสิ อันนี้โคตรเจ๋งเลย ผมชอบกราฟิกที่มันสร้างให้

158
00:12:51,051 --> 00:12:56,790
ว่ามันสวยมาก แต่เวลาผมใช้ Cursor จริง ๆ ผมไม่เคยใช้เบราว์เซอร์ภายนอกเลย

159
00:12:56,790 --> 00:13:02,691
ผมใช้เบราว์เซอร์ในตัวแอป (in-app browser) แทน ผมจะคลิกขวาตรงนี้แล้วเปิดใน

160
00:13:02,691 --> 00:13:06,571
Cursor browser และสิ่งที่ผมจะทำคือขยายเต็มหน้าจอ

161
00:13:06,571 --> 00:13:10,936
แล้วก็ปิดแผงด้านข้าง และแล้วเราก็อยู่ใน Cursor browser

162
00:13:10,936 --> 00:13:15,058
แล้ว เราสามารถดูแอปพลิเคชันหรือเว็บไซต์ของเราได้เลย

163
00:13:15,058 --> 00:13:19,908
และเมื่อเรามีการเปลี่ยนแปลงที่อยากทำ ผมก็แค่ลงมาที่นี่แล้วกด

164
00:13:19,908 --> 00:13:24,515
message cursor หรือกด command + I มันก็จะเปิดอันนี้ขึ้นมา

165
00:13:24,515 --> 00:13:28,880
นี่เป็นอินเทอร์เฟซที่สนุกมาก สิ่งที่ผมทำได้คือพิมพ์ว่า

166
00:13:28,880 --> 00:13:33,730
"รูปมุมขวาบนที่มีคำว่า AI ฉันไม่ชอบมัน ฉันชอบสไตล์ของรูปอื่น

167
00:13:33,730 --> 00:13:38,095
ๆ มากกว่า มันสีสันกว่า ช่วยเปลี่ยนรูปนั้นหน่อยได้ไหม?"

168
00:13:38,095 --> 00:13:41,894
มันอาจใช้เวลานานหน่อย ผมอยากใช้โมเดลที่เร็วกว่า

169
00:13:41,894 --> 00:13:45,693
เรากลับไปใช้ Grock ได้ แล้วก็ส่งพรอมต์นั้นไปเลย

170
00:13:45,693 --> 00:13:51,432
ตอนนี้พรอมต์นั้นกำลังรันอยู่ และอินเทอร์เฟซนี้หน้าตาแตกต่างไปคนละแบบเลย

171
00:13:51,432 --> 00:13:56,201
แต่มันกำลังทำสิ่งเดียวกันเป๊ะ ๆ กับที่เราทำในมุมมองก่อนหน้า

172
00:13:56,201 --> 00:14:01,213
ใช่ไหม? แค่มาอยู่บนเบราว์เซอร์ตรงนี้แทน เมื่อคุณปิดเบราว์เซอร์

173
00:14:01,213 --> 00:14:05,982
อันนี้จะย้ายมาตรงนี้ และคุณสามารถคุยกับมันได้ ให้พรอมต์ต่าง

174
00:14:05,982 --> 00:14:10,427
ๆ กับมันได้อีกเพียบ โอ้ ได้แล้ว มันทำการเปลี่ยนแปลงแล้ว

175
00:14:10,427 --> 00:14:16,651
มันเพิ่มรูปเล็ก ๆ รูปใหม่เข้าไป ผมไม่รู้ด้วยซ้ำว่ามันสร้างรูปพวกนี้มาได้ยังไง

176
00:14:16,651 --> 00:14:21,259
และเพื่อประโยชน์ของตัวอย่างนี้ เราสามารถเลื่อนลงมาที่ปุ่ม

177
00:14:21,259 --> 00:14:26,351
publish ผมชอบอันนี้ นี่เป็นส่วนที่ดีตรงนี้ เราสามารถทำแบบนี้ได้

178
00:14:26,351 --> 00:14:33,141
และผมก็แค่วางข้อความนี้ลงไป ใช่ ดูรูปสิ อันนี้เป็นหน้าตาที่ผมอยากให้มันเป็นประมาณนี้

179
00:14:33,141 --> 00:14:36,940
โดยให้มีเส้นใต้คำว่า native ลากขวางอยู่ด้านล่าง

180
00:14:36,940 --> 00:14:40,982
แล้วก็มีส่วนกรอกอีเมล แล้วเพิ่มบล็อกโพสต์อีก 8 อัน

181
00:14:40,982 --> 00:14:45,751
คุณสามารถใช้รูปเดิมซ้ำ ๆ เป็นรูป placeholders (รูปตัวอย่าง)

182
00:14:45,751 --> 00:14:51,166
ได้เลย อย่าเสียเวลาสร้างรูปใหม่มากนัก แล้วเราก็ส่งพรอมต์นี้ไปได้เลย

183
00:14:51,166 --> 00:14:57,633
และเราจะเห็นมันทำงานอยู่ มันเจ๋งจริง ๆ และคุณสามารถส่งคำสั่งได้หลายอย่างพร้อมกัน

184
00:14:57,633 --> 00:15:03,049
เช่น "ช่วยเปลี่ยนปุ่ม subscribe ด้านบนเป็นสีฟ้าแทนสีแดงหน่อยได้ไหม?

185
00:15:03,049 --> 00:15:08,384
สีแดงมันดูแย่เกินไป" และตอนนี้เราก็มีพรอมต์สองอันทำงานพร้อมกันแล้ว

186
00:15:08,384 --> 00:15:12,263
สิ่งที่ผมอยากพูดถึงต่อไปคือสิ่งที่ถูกมองข้ามจริง

187
00:15:12,263 --> 00:15:18,568
ๆ เวลาเรียนใช้แอปสุดยอด (super apps) พวกนี้ นั่นคือความแตกต่างระหว่างการต่อคิว

188
00:15:18,568 --> 00:15:27,298
(queuing) กับการบังคับทิศทาง (steering) แอป AI สุดยอดทั้งหมดนี้มีฟีเจอร์ที่คุณสามารถพิมพ์พรอมต์แล้วต่อคิวไว้

189
00:15:27,298 --> 00:15:33,280
เพื่อที่ว่าพออันที่กำลังทำงานเสร็จ พรอมต์ที่ผมพิมพ์ไว้นี้จะถูกส่งเข้าไปต่อ

190
00:15:33,280 --> 00:15:39,665
ใช่ไหม? มันก็คือการรอคิวอยู่ หรือคุณจะกดปุ่มนี้เพื่อบังคับทิศทางหรือส่งมันทันที

191
00:15:39,665 --> 00:15:43,545
นั่นคือคุณส่งพรอมต์เข้าไปในขณะที่มันยังทำงานอยู่

192
00:15:43,545 --> 00:15:47,506
จริง ๆ แล้วมันทำการเปลี่ยนแปลงทั้งหมดนั้นได้ไวมาก

193
00:15:47,506 --> 00:15:52,194
ปุ่ม subscribe ตอนนี้เป็นสีฟ้าแล้ว และเรามีส่วนล่างนี้แล้ว

194
00:15:52,194 --> 00:15:56,397
สิ่งที่ผมจะทำต่อคือผมอยากส่งพรอมต์อีกอันหนึ่ง ผมจะกด

195
00:15:56,397 --> 00:16:03,672
command + I แล้วพิมพ์ว่า "เฮ้ อยากบอกว่า ฉันอยากให้มีช่องว่างมากขึ้นใต้ส่วนที่ฉันกรอกอีเมล

196
00:16:03,672 --> 00:16:09,896
แล้วพอสี่เหลี่ยมทั้ง 8 อันเข้ามา ฉันอยากให้มีช่องว่างระหว่างพวกมันมากขึ้นด้วย

197
00:16:09,896 --> 00:16:14,100
และอยากให้ตัว a นั่นหายไปด้วย มันเป็นตัว A สีดำยักษ์

198
00:16:14,100 --> 00:16:17,979
เราไม่ต้องการมัน" ผมก็ส่งอันนั้นไป และแล้ว Grock

199
00:16:17,979 --> 00:16:22,587
ก็จัดการวางมันลงในตำแหน่งที่ควรอยู่ มีช่องว่างมากขึ้นแล้ว

200
00:16:22,587 --> 00:16:26,709
อันนี้ค่อนข้างดี และมันใช้เวลาแค่ 10 วินาทีเท่านั้น

201
00:16:26,709 --> 00:16:34,307
โอเค ตอนนี้ผมอยากพูดถึงฟีเจอร์อีกอย่างหนึ่ง และนี่คือหนึ่งในฟีเจอร์ที่เจ๋งที่สุดเท่าที่เคยมีมา

202
00:16:34,307 --> 00:16:38,187
นั่นคือโหมด Design (โหมดออกแบบ) ถ้าผมคลิก design

203
00:16:38,187 --> 00:16:42,471
mode สิ่งที่จะเกิดขึ้นก็คือ toggle ที่เขียนว่า design

204
00:16:42,471 --> 00:16:46,432
จะเปิดขึ้นมา ตอนนี้สิ่งที่ผมทำได้คือเลือกส่วนต่าง

205
00:16:46,432 --> 00:16:52,171
ๆ แล้วส่งพรอมต์เกี่ยวกับมันได้ ตัวอย่างเช่น ผมคิดว่าฟอนต์นี้ใหญ่ไปหน่อย

206
00:16:52,171 --> 00:16:56,698
ผมก็แค่เลือกมันแล้วบอกว่า "ช่วยทำฟอนต์นี้ให้เล็กลงหน่อย"

207
00:16:56,698 --> 00:17:00,497
แล้วส่งไปได้เลย และมันก็ให้เราทำแบบนี้ได้เรื่อย

208
00:17:00,497 --> 00:17:04,296
ๆ ผมสามารถบอกว่า "ตัว G ตรงนี้ถูกตัดที่ด้านล่าง

209
00:17:04,296 --> 00:17:08,257
ช่วยแก้ให้หน่อย" แล้วเราก็ส่งพรอมต์พวกนี้ไปเรื่อย

210
00:17:08,257 --> 00:17:12,298
ๆ คุณจะเห็นว่าอันนี้ถูกต่อคิวไว้ ผมจะทำต่อไปเรื่อย

211
00:17:12,298 --> 00:17:18,441
ๆ โอ้ ผมคิดว่าอีกอันหนึ่งเสร็จแล้ว และจำไว้ว่าคุณสามารถขยายเต็มหน้าจอได้ตลอด

212
00:17:18,441 --> 00:17:23,615
แล้วเปิดเบราว์เซอร์ขึ้นมาอีกครั้ง แล้วกลับไปที่มุมมองเบราว์เซอร์

213
00:17:23,615 --> 00:17:28,303
"อันนี้มันแปลก ๆ หน่อย ช่วยใส่ไอคอนอื่นแทนลูกศรตรงนี้หน่อย

214
00:17:28,303 --> 00:17:32,506
อะไรก็ได้ที่มันสมเหตุสมผล" และเราก็ส่งคำสั่งไปเรื่อย

215
00:17:32,506 --> 00:17:37,194
ๆ อีก และโหมด Design นี้ทำให้เราได้ความแม่นยำมากขึ้นอีกนิด

216
00:17:37,194 --> 00:17:41,155
และแล้วมันก็ทำการเปลี่ยนแปลงเสร็จ นั่นแหละคือโหมด

217
00:17:41,155 --> 00:17:47,379
Design โอเค เราผ่านพื้นฐานมาเกือบหมดแล้ว และผมแค่อยากให้คุณได้ลิ้มรสการใช้งาน

218
00:17:47,379 --> 00:17:51,501
Cursor สักหน่อย เราสร้างแอปง่าย ๆ ซึ่งก็คือ Landing

219
00:17:51,501 --> 00:17:55,543
Page และเราใช้โมเดลไปสองสามตัว เราสร้างเซสชันภายใน

220
00:17:55,543 --> 00:17:59,342
Workspace ซึ่งก็คือ Workspace ชื่อ agent native

221
00:17:59,342 --> 00:18:03,788
และเมื่อเซสชันของเอเจนต์อยู่ใน Workspace และมันสร้างแอป

222
00:18:03,788 --> 00:18:08,638
แอปนั้นก็จะอยู่ภายใน Workspace นั้น ซึ่งก็คือโฟลเดอร์นั่นเอง

223
00:18:08,638 --> 00:18:12,841
ใช่ไหม? ถ้าเรากลับไปที่ Finder ตรงนี้ โฟลเดอร์ agent

224
00:18:12,841 --> 00:18:17,287
native นี้ถูกสร้างขึ้นมา นี่คือ Workspace ที่เราสร้างใน

225
00:18:17,287 --> 00:18:21,490
Cursor และแอปก็อยู่ในโฟลเดอร์นั้น เราพูดถึงโมเดลต่าง

226
00:18:21,490 --> 00:18:25,693
ๆ การต่อคิวและการบังคับทิศทาง เราพูดถึงวิธีดาวน์โหลด

227
00:18:25,693 --> 00:18:32,240
Cursor เราพูดถึงโหมด Design และผมแค่อยากให้คุณได้พื้นฐานการใช้อินเทอร์เฟซสักหน่อย

228
00:18:32,240 --> 00:18:36,201
ก่อนที่เราจะไปพาร์ตสอง ผมอยากอธิบายอีกเรื่องหนึ่ง

229
00:18:36,201 --> 00:18:42,264
นั่นคือการโอนถ่ายทักษะ (skills) ของคุณจากแอปสุดยอดหรือเครื่องมือเอเจนต์อื่น

230
00:18:42,264 --> 00:18:46,143
ๆ อย่าง Codex และ Claude Code และถ้าคุณใช้ Codex

231
00:18:46,143 --> 00:18:50,104
หรือ Claude Code คุณสามารถใช้พรอมต์เดียวกันได้ว่า

232
00:18:50,104 --> 00:18:54,469
"เฮ้ ฉันต้องการให้คุณบอกฉันว่าจะหาทักษะของคุณได้ที่ไหน

233
00:18:54,469 --> 00:18:58,672
ฉันอยากเพิ่มทักษะพวกนั้นจากแพลตฟอร์มเอเจนต์อื่นอย่าง

234
00:18:58,672 --> 00:19:02,714
Cursor ช่วยให้พรอมต์ที่ฉันสามารถคัดลอกไปให้ Cursor

235
00:19:02,714 --> 00:19:07,240
ได้หน่อย เพื่อให้มันเข้าถึงทักษะของคุณและเพิ่มเข้ามาได้"

236
00:19:07,240 --> 00:19:12,737
สำหรับคนที่ยังไม่รู้ ทักษะ (skills) เป็นฟีเจอร์ที่มีประโยชน์มากภายใน

237
00:19:12,737 --> 00:19:17,506
Cursor และเครื่องมือเอเจนต์อื่น ๆ โดยคุณสามารถกดเครื่องหมาย

238
00:19:17,506 --> 00:19:21,709
/ แล้วมีทักษะ YouTube researcher ได้ มีทักษะ YouTube

239
00:19:21,709 --> 00:19:26,802
thumbnail ได้ ทั้งหมดนี้คือทักษะที่ฉันสามารถเรียกใช้ได้โดยพิมพ์

240
00:19:26,802 --> 00:19:32,460
/ แล้วตามด้วยชื่อทักษะ ทักษะก็คือไฟล์คำแนะนำที่เอเจนต์จะใช้เมื่อจำเป็น

241
00:19:32,460 --> 00:19:40,785
ตัวอย่างเช่น คุณอาจมีทักษะชื่อ colorful images และทักษะนั้นสามารถทำให้เอเจนต์สร้างรูปภาพในสไตล์นั้นเป๊ะ

242
00:19:40,785 --> 00:19:44,585
ๆ และถ้าคุณขอให้เอเจนต์สร้างเว็บไซต์ที่มีกราฟิก

243
00:19:44,585 --> 00:19:49,030
มันก็จะใช้สไตล์นั้นให้อัตโนมัติ ถ้าเอเจนต์เห็นว่าจำเป็น

244
00:19:49,030 --> 00:19:54,850
และเพราะไฟล์ทักษะเป็นเพียงไฟล์ markdown เล็ก ๆ ที่อยู่บนคอมพิวเตอร์ของผม

245
00:19:54,850 --> 00:20:01,478
ผมจึงสามารถบอกให้ Cursor ไปค้นหามันได้ง่ายมาก ผมสามารถคัดลอกพรอมต์นี้แล้วกลับไปที่

246
00:20:01,478 --> 00:20:05,924
Cursor แล้วบอกว่า "เฮ้ ฉันอยากดาวน์โหลดทักษะบางอย่างจาก

247
00:20:05,924 --> 00:20:12,067
Codex ช่วยแสดงรายการทักษะทั้งหมดที่คุณสามารถนำเข้าไปในทักษะของคุณตรงนี้หน่อย

248
00:20:12,067 --> 00:20:17,321
แล้วฉันจะบอกคุณว่าควรนำเข้าอันไหน" จากนั้นผมก็แค่วางพรอมต์นี้ลงไป

249
00:20:17,321 --> 00:20:21,363
สิ่งที่ผมจะทำต่อคือเปลี่ยนโมเดล ไปใช้ GPT 5.6 soul

250
00:20:21,363 --> 00:20:26,940
แล้วรันพรอมต์นี้ และมันก็เสร็จแล้ว มันบอกว่า "ให้ถือว่าลิงก์สัญลักษณ์

251
00:20:26,940 --> 00:20:32,922
(symlink) ที่มีอยู่ซึ่งชี้ไปยังโฟลเดอร์ Codex ที่ตรงกันนั้นพร้อมใช้งานแล้ว

252
00:20:32,922 --> 00:20:39,792
โฟลเดอร์ชื่อซ้ำหรือลิงก์ที่ชี้ไปที่อื่นจะถูกรายงานว่าเป็นความขัดแย้งหรือไม่ถูกแตะต้อง

253
00:20:39,792 --> 00:20:45,531
การติดตั้งเสร็จสมบูรณ์ มันเพิ่มทักษะ Codex 77 รายการผ่านลิงก์สัญลักษณ์"

254
00:20:45,531 --> 00:20:49,654
และหนึ่งในทักษะที่ผมเพิ่งเพิ่มไปเมื่อไม่นานมานี้คือ

255
00:20:49,654 --> 00:20:53,857
Riley media และแล้วเราก็มี Riley media เป็นทักษะจริง

256
00:20:53,857 --> 00:20:59,758
ๆ แล้ว ไม่ต้องลงรายละเอียดตรงนั้น แต่ประเด็นก็คือทักษะทั้งหมดที่ผมเคยมีบน

257
00:20:59,758 --> 00:21:03,719
Codex หรือ Claude Code ตอนนี้ถูกนำเข้ามาใน Cursor

258
00:21:03,719 --> 00:21:08,568
เรียบร้อยแล้ว โอเค นี่คือบทสรุปของพาร์ตหนึ่งซึ่งก็คือพื้นฐาน

259
00:21:08,568 --> 00:21:12,691
และเราครอบคลุมทุกอย่างแล้ว รวมถึงการโอนถ่ายทักษะจาก

260
00:21:12,691 --> 00:21:16,813
Codex และ Claude Code หรือเครื่องมือเอเจนต์ AI อื่น

261
00:21:16,813 --> 00:21:21,340
ๆ ที่คุณใช้ ตอนนี้เราจะเข้าสู่ช่วงการสร้างที่เข้มข้นขึ้น

262
00:21:21,340 --> 00:21:25,139
และเราจะเริ่มผลักดัน Cursor ไปจนถึงขีดจำกัดจริง

263
00:21:25,139 --> 00:21:29,261
ๆ เราจะสร้างหลายสิ่งพร้อมกัน เราจะพัฒนาหน้า Landing

264
00:21:29,261 --> 00:21:34,030
Page ต่อ เรามีความคืบหน้าบางอย่างแล้วตรงนี้ และเราจะทำงานบน

265
00:21:34,030 --> 00:21:39,689
Landing Page นี้ต่อไป เราจะสร้างแอปด้วย นั่นคือการสร้างแอปมือถือสำหรับ

266
00:21:39,689 --> 00:21:45,993
agent native และเราจะสร้าง Cursor Canvas ด้วย ซึ่งเดี๋ยวผมจะอธิบายในอีกสักครู่

267
00:21:45,993 --> 00:21:51,652
มันเหมือนเว็บมินิไซต์ที่มีโดเมนของ Cursor ที่เราสามารถตั้งค่าออโตเมชัน

268
00:21:51,652 --> 00:21:55,774
(automation — ระบบอัตโนมัติ) ให้มันทำงานวิจัยทุกวัน

269
00:21:55,774 --> 00:22:01,675
และมันจะอัปเดตเว็บไซต์จริง ๆ ซึ่งจะทำให้เรามีงานวิจัยสำหรับเว็บไซต์ของเรา

270
00:22:01,675 --> 00:22:06,686
และงานวิจัยสำหรับแอปมือถือของเรา ผมจะโชว์ให้ดูว่ามันทำงานยังไง

271
00:22:06,686 --> 00:22:10,566
เอาล่ะ เราสร้าง Landing Page สำหรับ agent native

272
00:22:10,566 --> 00:22:14,446
เสร็จแล้ว ตอนนี้ผมอยากสร้างแอปมือถือสำหรับ agent

273
00:22:14,446 --> 00:22:20,185
native บ้าง ในการทำแบบนี้ผมจะกด command + N ซึ่งเป็นการสร้างเอเจนต์ใหม่

274
00:22:20,185 --> 00:22:25,197
ผมจะปิดแถบด้านข้าง ซึ่งคุณสามารถเปิดได้ตรงนี้ เราไม่ต้องการมัน

275
00:22:25,197 --> 00:22:30,370
และสิ่งที่ผมอยากทำคือสร้างโปรเจกต์ใหม่ ผมจะสร้างโฟลเดอร์ใหม่หรือ

276
00:22:30,370 --> 00:22:35,462
Workspace ใหม่ และ Workspace ใหม่นี้ผมจะวางไว้ในตำแหน่งเดียวกับ

277
00:22:35,462 --> 00:22:39,342
agent native บน Desktop และผมจะเรียกมันว่า agent

278
00:22:39,342 --> 00:22:43,869
native mobile แล้วกด enter ตอนนี้เรากำลังสร้าง Workspace

279
00:22:43,869 --> 00:22:49,689
ใหม่ และเราเห็น agent native ซึ่งก็คือเว็บไซต์ของเราและทุกอย่างเกี่ยวกับ

280
00:22:49,689 --> 00:22:53,649
agent native ตอนนี้เรามี agent native mobile แล้ว

281
00:22:53,649 --> 00:22:57,772
ผมจะพิมพ์ว่า "เฮ้ ฉันอยากสร้างแอป iOS ฉันอยากให้แอป

282
00:22:57,772 --> 00:23:02,137
iOS นี้เขียนด้วย Swift ช่วยสร้าง Swift app ให้ฉันหน่อย

283
00:23:02,137 --> 00:23:06,097
และสำหรับ Swift app นี้ ฉันอยากให้มันเป็นแอปคู่หู

284
00:23:06,097 --> 00:23:09,896
(companion app) ของเว็บไซต์ agent native ของฉัน

285
00:23:09,896 --> 00:23:14,585
ถ้าเธอเข้าไปในโฟลเดอร์ Desktop ของฉัน เธอจะเจอโฟลเดอร์ชื่อ

286
00:23:14,585 --> 00:23:20,728
agent native และนี่คือเว็บไซต์ของฉัน ฉันอยากให้เธอสร้างแอปที่มีสไตล์เดียวกัน

287
00:23:20,728 --> 00:23:25,335
และใช้แอสเซตเดียวกัน เช่น รูปภาพเดียวกันกับบนเว็บไซต์นั้น

288
00:23:25,335 --> 00:23:29,862
รูปเหล่านั้นควรเป็นรูปเดียวกันกับในแท็บแรก ซึ่งก็คือแท็บ

289
00:23:29,862 --> 00:23:33,742
learn สำหรับเว็บไซต์นี้มันจะมีสามแท็บ แท็บ learn

290
00:23:33,742 --> 00:23:37,541
แท็บ tools และแท็บ agent ฉันอยากให้เธอทำแค่แท็บ

291
00:23:37,541 --> 00:23:41,421
learn เท่านั้น และแท็บ learn ควรคล้ายกับเว็บไซต์

292
00:23:41,421 --> 00:23:48,372
agent native มาก ซึ่งโดยพื้นฐานแล้วฉันควรจะเรียนรู้ได้โดยการคลิกที่บล็อกโพสต์เหล่านั้น

293
00:23:48,372 --> 00:23:52,899
ซึ่งฉันยังไม่ได้สร้างมันเลย แต่ฉันอยากให้เธอทำแบบนี้แหละ

294
00:23:52,899 --> 00:23:59,446
ฉันอยากให้เธอแค่สร้าง Swift app นี้" จากนั้นสิ่งที่เราจะทำคือเปิดมันในซิมูเลเตอร์

295
00:23:59,446 --> 00:24:03,973
(simulator — โปรแกรมจำลองเครื่อง) ของผม โอเค? เพราะผมใช้

296
00:24:03,973 --> 00:24:09,631
Mac เมื่อคุณใช้ Mac คุณสามารถจำลอง iPhone ได้โดยตรงบนคอมพิวเตอร์ของคุณ

297
00:24:09,631 --> 00:24:13,511
ในการดาวน์โหลดสิ่งนี้ เราสามารถสร้างแชตใหม่ภายใน

298
00:24:13,511 --> 00:24:18,603
Cursor ได้ง่าย ๆ ผมจะพิมพ์ว่า "เฮ้ ฉันจะดาวน์โหลดยังไงถ้าฉันใช้

299
00:24:18,603 --> 00:24:23,534
MacBook Pro? ฉันจะติดตั้งซิมูเลเตอร์บนคอมพิวเตอร์และดาวน์โหลด

300
00:24:23,534 --> 00:24:29,273
Xcode ได้ยังไง? ช่วยให้ลิสต์สั้น ๆ พร้อมลิงก์ไปยังที่ที่ฉันต้องไปหน่อย"

301
00:24:29,273 --> 00:24:33,072
อะไรก็ตามที่คุณอยากเรียนรู้ คุณสามารถถาม Cursor

302
00:24:33,072 --> 00:24:38,811
ได้เลย นี่คือขั้นตอน คุณจะต้องดาวน์โหลด Xcode และคุณสามารถถามสิ่งนี้กับ

303
00:24:38,811 --> 00:24:44,631
Cursor หรือเอเจนต์ AI ตัวไหนก็ได้จริง ๆ แล้วคุณก็เปิดอันนี้ในแท็บใหม่ได้

304
00:24:44,631 --> 00:24:48,915
และตรงนี้คุณสามารถดาวน์โหลด Xcode ได้ ส่วนผมดาวน์โหลด

305
00:24:48,915 --> 00:24:54,735
Xcode ไว้แล้ว อย่างที่คุณเห็น ผมพิมพ์พรอมต์นี้ไว้เมื่อสองสามนาทีก่อนแล้ว

306
00:24:54,735 --> 00:24:59,989
และเรากำลังใช้ Grock 4.5 high fast อยู่ สำหรับงานวางแผนที่ใหญ่มาก

307
00:24:59,989 --> 00:25:03,869
ๆ ผมอาจอยากใช้ Fable 5 จริง ๆ และโมเดลนี้แพงกว่า

308
00:25:03,869 --> 00:25:08,314
ดังนั้นระวังด้วย แต่ผมสามารถเลื่อนกลับขึ้นไปแล้วหยุดมัน

309
00:25:08,314 --> 00:25:12,598
แล้วป้อนพรอมต์ใหม่ด้วย Fable 5 medium ผมจะแก้ไขอันนี้

310
00:25:12,598 --> 00:25:16,883
ผมจะเปลี่ยนเป็น high จริง ๆ แล้วอันนี้อาจแพงเอาเรื่อง

311
00:25:16,883 --> 00:25:20,924
แต่ผมว่ามันคุ้ม เพราะผมกำลังจะเปลี่ยนมันให้เป็นแอป

312
00:25:20,924 --> 00:25:24,885
iOS และผมอาจจะปล่อยมันจริง ๆ ด้วย ผมจะส่งมันออกไป

313
00:25:24,885 --> 00:25:29,088
แล้วกด revert และแล้ว เราจะเริ่มใหม่ แต่ตอนนี้เราใช้

314
00:25:29,088 --> 00:25:35,878
Fable แล้ว และเป้าหมายของผมคือการสร้างแอป iOS ที่เหลือเชื่อที่สุดเท่าที่ใครเคยเห็นมา

315
00:25:35,878 --> 00:25:39,677
โอเค ตอนนี้สิ่งที่อยากทำคือเพิ่มส่วน tools ลงไป

316
00:25:39,677 --> 00:25:43,476
"ช่วยเพิ่มลิสต์เครื่องมือที่เจ๋ง ๆ ให้คนดูหน่อย

317
00:25:43,476 --> 00:25:48,326
และพวกนี้คือเครื่องมือสำหรับเอเจนต์ ฉันอยากให้มีหมวดหมู่ต่าง

318
00:25:48,326 --> 00:25:52,368
ๆ หมวดแรกคือ super app ส่วนถัดไปคือเครื่องมือเสริม

319
00:25:52,368 --> 00:25:56,894
(ancillary tools) และฉันอยากให้เธอดูทักษะที่ฉันนำเข้าจาก

320
00:25:56,894 --> 00:26:02,067
Codex แล้วก็ดูสภาพแวดล้อมของเธอ ฉันอยากให้เธอคิดเครื่องมือประมาณ

321
00:26:02,067 --> 00:26:06,432
15 ตัวที่เธอสามารถใส่ในส่วนนั้นได้ บางตัวสำหรับโฮสติ้ง

322
00:26:06,432 --> 00:26:11,201
ฐานข้อมูล ฯลฯ เดี๋ยวฉันจะให้รายชื่อที่ฉันใช้เองในอีกสักครู่

323
00:26:11,201 --> 00:26:16,213
ฉันแค่อยากสร้างส่วน tools โดยรวมนี้ก่อน แล้วฉันก็อยากสร้างแท็บ

324
00:26:16,213 --> 00:26:22,518
agents ด้วยเหมือนกัน อันนี้ควรเป็นแชต AI และภายหลังเราจะตั้งค่าระบบคลังความรู้

325
00:26:22,518 --> 00:26:29,227
(body of knowledge) ที่ AI ตัวนี้สามารถอ่านได้เวลาตอบคำถามคนเกี่ยวกับวิธีใช้เอเจนต์

326
00:26:29,227 --> 00:26:33,511
AI แต่เลือกโมเดลยอดนิยมสามตัวที่เราสามารถเลือกใช้ได้"

327
00:26:33,511 --> 00:26:39,654
โอเค อย่างที่เราจะพูดถึงในภายหลัง เรากำลังจะนำเว็บไซต์ของเราขึ้นอินเทอร์เน็ต

328
00:26:39,654 --> 00:26:44,585
และในการโฮสต์แอปของเรา เราจะใช้ Vercel (แพลตฟอร์มโฮสติ้งเว็บ)

329
00:26:44,585 --> 00:26:48,545
อีกฟีเจอร์หนึ่งที่ Vercel มีคือสิ่งที่เรียกว่า AI

330
00:26:48,545 --> 00:26:52,749
gateway ซึ่งเหมือนกับ open router มาก มันคล้ายกันมาก

331
00:26:52,749 --> 00:26:57,114
เพียงแต่ว่าผมใช้ Vercel สำหรับโฮสติ้งอยู่แล้ว น่าจะใช้

332
00:26:57,114 --> 00:27:03,823
Vercel สำหรับ AI gateway ด้วยเลย และสิ่งนี้ทำให้เราสามารถเข้าถึงโมเดลทั้งหมดได้ด้วย

333
00:27:03,823 --> 00:27:07,945
API key เพียงอันเดียว API key ซึ่งเราจะพูดถึงทีหลัง

334
00:27:07,945 --> 00:27:11,825
ช่วยให้เรา เช่น ไปที่เว็บไซต์ OpenAI เอา API key

335
00:27:11,825 --> 00:27:16,109
ของ OpenAI มาให้เอเจนต์ของเรา แล้วบอกว่า "สร้างแอปแบบ

336
00:27:16,109 --> 00:27:20,716
ChatGPT แล้วใช้ API key ของ OpenAI" มันก็จะสร้างแอปที่ใช้

337
00:27:20,716 --> 00:27:24,839
API key ของ OpenAI ให้เรา เป็นแอปแชตที่ให้เราคุยกับ

338
00:27:24,839 --> 00:27:28,719
ChatGPT ได้ ซึ่งเจ๋งมาก แต่ถ้าคุณอยากใช้โมเดลของ

339
00:27:28,719 --> 00:27:33,084
Anthropic หรือโมเดลของ Grok ล่ะ? นั่นคือเหตุผลที่ผมใช้

340
00:27:33,084 --> 00:27:37,206
API key ของ Vercel ตรงนี้ มันทำให้ผมคุยกับโมเดลต่าง

341
00:27:37,206 --> 00:27:41,005
ๆ ได้ทั้งหมด สิ่งที่ผมจะทำคือมาที่ส่วน API keys

342
00:27:41,005 --> 00:27:45,370
แล้วสร้าง API key ขึ้นมา โอเค ผมบันทึก API key นี้แล้ว

343
00:27:45,370 --> 00:27:49,250
ผมไม่อยากให้มันแสดงบนหน้าจอ เพราะคนอื่นสามารถเอา

344
00:27:49,250 --> 00:27:54,989
API key ไปใช้แล้วเรียกเก็บเงินจากบัญชีของผมได้ คุณควรเก็บมันเป็นความลับ

345
00:27:54,989 --> 00:27:59,758
ตอนนี้ผมจะบอกว่า "นี่คือ API key" แล้วผมก็วางมันไว้ด้านล่าง

346
00:27:59,758 --> 00:28:03,961
และตอนนี้ผมจะรันพรอมต์ และเราก็ส่งพรอมต์ของเราไปแล้ว

347
00:28:03,961 --> 00:28:08,973
สิ่งที่เราพยายามทำตรงนี้คือการสร้างหน้า tools ซึ่งยังไม่มีอยู่

348
00:28:08,973 --> 00:28:13,095
และหน้า agents และเราจะให้ผู้ใช้ของเราคุยกับผู้ช่วย

349
00:28:13,095 --> 00:28:20,370
AI ได้ และเราจะสร้างทั้งหมดนั้นในพรอมต์เดียว โดยพื้นฐานแล้วเราสร้างทั้งหมดนี้ในพรอมต์เดียว

350
00:28:20,370 --> 00:28:27,887
ซึ่งมันโคตรเหลือเชื่อที่คุณสามารถสร้างแอป iOS และทำให้มันรันบนคอมพิวเตอร์ของคุณได้เร็วขนาดนี้

351
00:28:27,887 --> 00:28:31,848
โอเค ระหว่างที่มันกำลังโหลดอยู่ จริง ๆ แล้วผมจะกด

352
00:28:31,848 --> 00:28:37,264
command + N และเราจะทำงานใน repo เดียวกัน และสิ่งที่เราจะทำคือสร้าง

353
00:28:37,264 --> 00:28:42,599
canvas (ผืนผ้าใบ) คุณสามารถคิดว่า canvas ก็เหมือนเว็บมินิไซต์ภายใน

354
00:28:42,599 --> 00:28:46,398
Cursor และ Cursor อนุญาตให้คุณสร้าง canvas เล็ก

355
00:28:46,398 --> 00:28:52,137
ๆ พวกนี้ได้ คุณพิมพ์ /canvas แล้วมันจะให้คุณสร้างเว็บไซต์สแตนด์อโลนเล็ก

356
00:28:52,137 --> 00:28:57,229
ๆ นี้ได้ "ฉันอยากได้ canvas หนึ่งอัน และตอนนี้ฉันกำลังสร้างแท็บ

357
00:28:57,229 --> 00:29:03,049
tools ของแอปมือถือของฉันอยู่ ฉันอยากให้เธอสร้างเว็บมินิไซต์ที่ทำงานวิจัย

358
00:29:03,049 --> 00:29:07,010
และฉันอยากให้เธอคิดหมวดหมู่ต่าง ๆ เช่น super apps

359
00:29:07,010 --> 00:29:13,557
ซึ่งก็คือ Cursor, Codex, Claude Code แล้วฉันก็อยากให้เธอคิดหมวดหมู่เครื่องมืออื่น

360
00:29:13,557 --> 00:29:17,760
ๆ ที่ฉันจะรวมไว้ในนี้ด้วย ค้นหาวิดีโอ YouTube ของฉัน

361
00:29:17,760 --> 00:29:21,721
และเนื่องจากฉันตั้งค่าทักษะไว้ก่อนหน้านี้บน Codex

362
00:29:21,721 --> 00:29:25,601
แล้วนำเข้าทักษะทั้งหมดของฉันมา ฉันสามารถใช้ทักษะ

363
00:29:25,601 --> 00:29:29,723
YouTube researcher ของฉันได้ ใช้ทักษะนี้เวลาทำวิจัย

364
00:29:29,723 --> 00:29:33,603
และฉันอยากให้เธอหาเครื่องมือทั้งหมดที่ฉันจะสร้าง

365
00:29:33,603 --> 00:29:37,968
แล้วสร้าง canvas เล็ก ๆ สำหรับแต่ละอัน มันควรอธิบายมัน

366
00:29:37,968 --> 00:29:41,929
และจุดประสงค์ของคุณคือการเป็นเว็บไซต์นักวิจัยเล็ก

367
00:29:41,929 --> 00:29:45,970
ๆ ของฉัน" ผมก็ส่งมันออกไปได้เลย และในขณะที่แอป iOS

368
00:29:45,970 --> 00:29:50,739
ของเรากำลังถูกสร้าง เว็บไซต์วิจัยของเราก็ถูกสร้างไปพร้อมกัน

369
00:29:50,739 --> 00:29:54,862
และตอนนี้เราจะรอสองสามนาทีให้ทั้งสองอย่างเสร็จ โอเค

370
00:29:54,862 --> 00:29:58,742
หลังจาก 12 นาที Fable โมเดลที่เราใช้ภายใน Cursor

371
00:29:58,742 --> 00:30:02,622
เสร็จสิ้นการแก้ไขแอปของเราแล้ว เรากำลังแก้ไขแท็บ

372
00:30:02,622 --> 00:30:08,684
tools และแท็บ agents ไปดูแท็บ tools กัน นี่ไง ผมไม่ค่อยชอบธีมมืดนี้เท่าไหร่

373
00:30:08,684 --> 00:30:13,130
จริง ๆ แล้วผมชอบธีมมืดนะ ผมแค่อยากให้มันเป็นธีมมืดต่อไป

374
00:30:13,130 --> 00:30:19,677
ผมไม่รู้จะรู้สึกยังไงกับคอนทราสต์ตรงนี้ เมื่อคุณมีซิมูเลเตอร์รันอยู่บนคอมพิวเตอร์

375
00:30:19,677 --> 00:30:24,123
และคุณได้ซิมูเลเตอร์มาจากการดาวน์โหลด Xcode คุณสามารถกด

376
00:30:24,123 --> 00:30:29,781
command + S แล้วมันจะแคปหน้าจอให้อัตโนมัติ ผมจะคัดลอกมันไปที่คลิปบอร์ด

377
00:30:29,781 --> 00:30:33,580
แล้วคุณก็สามารถวางมันกลับเข้าไปใน Cursor ได้เลย

378
00:30:33,580 --> 00:30:40,127
และตอนนี้ผมต้องตัดสินใจ จริง ๆ แล้วผมไม่แน่ใจว่าผมอยากเปลี่ยนแปลงดีไซน์อะไรตรงนี้

379
00:30:40,127 --> 00:30:45,220
"ช่วยเปลี่ยนหน้านี้ให้ดูดีขึ้นหน่อยได้ไหม? ใช้เวลากับดีไซน์เยอะ

380
00:30:45,220 --> 00:30:49,342
ๆ แล้วทำให้มันดูดีขึ้นอีกนิดเถอะ" ผมก็จะส่งมันออกไป

381
00:30:49,342 --> 00:30:53,465
ระหว่างที่มันกำลังโหลด เราเปิดอันนี้กลับขึ้นมาดูกัน

382
00:30:53,465 --> 00:30:57,506
และผมสามารถขยายเต็มหน้าจอได้เหมือนกันถ้าอยากดูใกล้

383
00:30:57,506 --> 00:31:01,709
ๆ ผมค่อนข้างชอบมุมมองแบบนี้ตรงนี้ เราสามารถเลือกแท็บ

384
00:31:01,709 --> 00:31:06,640
agents ได้ ตอนนี้เรามีเอเจนต์นี้แล้ว และผมสามารถคลิกที่มันได้

385
00:31:06,640 --> 00:31:13,915
เวลาที่คุณแก้ไขแอป iOS สิ่งหนึ่งที่คุณอาจอยากทำคือดูว่ามันจะเป็นยังไงถ้าคีย์บอร์ดโผล่ออกมา

386
00:31:13,915 --> 00:31:18,037
ผมสามารถกด command + K แล้วมันจะเปิดคีย์บอร์ดขึ้นมา

387
00:31:18,037 --> 00:31:23,696
และนี่เป็นปัญหาที่พบบ่อยมาก อย่างที่คุณเห็น คีย์บอร์ดถูกข้อความบังอยู่

388
00:31:23,696 --> 00:31:28,869
นั่นเป็นสิ่งที่คุณจะไม่มีทางสังเกตเห็น เพราะถ้าคุณใช้ซิมูเลเตอร์

389
00:31:28,869 --> 00:31:33,153
คุณสามารถพิมพ์ด้วยคอมพิวเตอร์ของคุณลงบนซิมูเลเตอร์ได้

390
00:31:33,153 --> 00:31:36,952
ผมสามารถพิมพ์ว่า "สวัสดี ทดสอบโมเดลตรงนี้หน่อย"

391
00:31:36,952 --> 00:31:40,913
และเราจะเห็นว่าเราสามารถเลือก Grock 4.1 fast, GPT

392
00:31:40,913 --> 00:31:46,813
5 mini หรือ Claude Haiku ได้ ใช่ไหม? ผมบอกไว้แล้วว่าให้ใช้โมเดลที่ถูกกว่า

393
00:31:46,813 --> 00:31:52,472
ผมก็ส่งพรอมต์นี้ไป และแล้ว มันเร็วมากจริง ๆ และผมว่ามันดูค่อนข้างดีเลย

394
00:31:52,472 --> 00:31:58,534
อันนี้ดูดีทีเดียว นี่คือเคล็ดลับอีกอย่างหนึ่ง เวลาแก้ไขแอปมือถือหรือเว็บแอป

395
00:31:58,534 --> 00:32:03,303
ผมใช้แอปชื่อ CleanShot X สิ่งที่มันทำให้ผมทำได้คือแคปหน้าจอ

396
00:32:03,303 --> 00:32:08,557
แล้วก็วาดลงไปอย่างละเอียด เพิ่มลูกศรแบบนี้ได้ ผมสามารถชี้ไปตรงนี้

397
00:32:08,557 --> 00:32:14,296
"ฉันไม่ชอบคำบรรยายใต้ภาพนี้ ฉันไม่ชอบไอคอนนี้ และฉันไม่ชอบแถบนี้ตรงนี้"

398
00:32:14,296 --> 00:32:18,823
ผมก็คัดลอกอันนี้ แล้ววางลงใน Cursor "ฉันไม่ชอบสามสิ่งนี้

399
00:32:18,823 --> 00:32:22,945
คำบรรยายใต้ภาพ เส้น และไอคอนนั้น ช่วยเอาออกให้หน่อย

400
00:32:22,945 --> 00:32:26,906
แล้วย้ายตัวเลือกโมเดล (model picker) ลงไปด้านล่าง

401
00:32:26,906 --> 00:32:31,594
ซึ่งหมายความว่าเธอต้องทำให้พื้นที่ป้อนข้อความสูงสองบรรทัด"

402
00:32:31,594 --> 00:32:36,201
นี่เป็นสิ่งที่พบบ่อยมาก เป็นแพตเทิร์นดีไซน์แบบเดียวกับแอป

403
00:32:36,201 --> 00:32:40,243
iOS ของ ChatGPT ดูสิว่าเขาทำยังไง แล้วทำให้แบบนั้น

404
00:32:40,243 --> 00:32:45,739
ตัวเลือกโมเดลไม่ควรอยู่มุมขวาบน มันดูไม่สวย แล้วเราก็ส่งพรอมต์นั้นไป

405
00:32:45,739 --> 00:32:49,862
โอเค มันเสร็จจากอันก่อนหน้าแล้ว ซึ่งก็คือส่วน tools

406
00:32:49,862 --> 00:32:54,631
นี่ ไปดูกันเลย โอเค อันนี้น่าสนใจ สิ่งหนึ่งที่ผมจะส่งไปเร็ว

407
00:32:54,631 --> 00:32:59,966
ๆ คือผมจะเปิดอันนี้ขึ้นมา "ฉันไม่ชอบเส้นนี้ ฉันไม่ชอบทั้งสองอันนี้

408
00:32:59,966 --> 00:33:03,846
และบนหน้านี้ด้วย ฉันไม่ชอบเส้นหรือคำบรรยายใต้ภาพ

409
00:33:03,846 --> 00:33:09,908
แค่ให้คำว่า tools อยู่ตรงกลางด้านบนก็พอ จริง ๆ แล้วให้มันชิดซ้ายด้านบนก็ได้

410
00:33:09,908 --> 00:33:13,788
แต่เส้นแนวนอนบนหน้า tools พวกนี้ ไม่จำเป็น" โอเค

411
00:33:13,788 --> 00:33:17,749
และอันนี้ใช้เวลาแค่ 45 วินาทีเท่านั้น เร็วมากจริง

412
00:33:17,749 --> 00:33:22,356
ๆ ผมเปิดซิมูเลเตอร์ได้ นี่ไง ตรงนี้เรายังไม่มีไอคอนทางการ

413
00:33:22,356 --> 00:33:26,559
แต่เราสามารถเพิ่มได้ทีหลัง แต่หน้าตามันดูดีใช้ได้เลย

414
00:33:26,559 --> 00:33:30,358
เรามี tools ซึ่งก็คือ super apps — Claude Code,

415
00:33:30,358 --> 00:33:34,642
Codex, Cursor ผมชอบการ์ดพวกนี้มาก เหมือนเป็นการ์ดเด่น

416
00:33:34,642 --> 00:33:39,250
(featured cards) และผมว่าถ้าเราใส่ไอคอนลงไป มันจะโคตรเจ๋ง

417
00:33:39,250 --> 00:33:43,938
สิ่งที่เราทำได้คือไปที่เอเจนต์ นี่ไง เรามีตัวเลือกโมเดลนี้

418
00:33:43,938 --> 00:33:48,950
อันนี้ดูดีมาก และผมสามารถพิมพ์ว่า "สวัสดี" แล้วส่งพรอมต์นั้นไป

419
00:33:48,950 --> 00:33:52,749
และเอเจนต์นี้ดูดีขึ้นมาก อันนี้ทำได้ดีมากจริง ๆ

420
00:33:52,749 --> 00:33:58,488
แอปนี้ดูดีมากสำหรับแอป agent native ของผม และผมสามารถสมัครรับจดหมายข่าว

421
00:33:58,488 --> 00:34:02,529
(newsletter) ได้ ซึ่งเจ๋งมาก ใช่ อันนี้สุดยอด โอเค

422
00:34:02,529 --> 00:34:10,612
อันนี้เสร็จแล้ว จำได้ไหมว่าเมื่อกี้เราส่งพรอมต์ที่ผมอยากให้สร้างเนื้อหาวิจัยบนไดเรกทอรีเครื่องมือของ

423
00:34:10,612 --> 00:34:16,271
agent native ซึ่งจะช่วยให้เราเพิ่มเครื่องมือลงในไดเรกทอรีนี้ตรงนี้จริง

424
00:34:16,271 --> 00:34:20,878
ๆ เรากำลังทำงานวิจัยเกี่ยวกับอันนี้ และผมให้มันทำงานวิจัย

425
00:34:20,878 --> 00:34:25,324
แล้วมันก็สร้างสิ่งที่เรียกว่า canvas ขึ้นมา คุณสามารถหา

426
00:34:25,324 --> 00:34:30,820
canvases ของคุณได้โดยคลิกเครื่องหมายบวก คุณสามารถเปิดเบราว์เซอร์ปกติ

427
00:34:30,820 --> 00:34:35,266
หรือมันจะมีแบบพิเศษสำหรับ canvas โดยเฉพาะ อันนี้ชื่อว่า

428
00:34:35,266 --> 00:34:41,813
tool tabs researcher ถ้าผมคลิกที่มัน นี่ไง เรามีเครื่องมือทั้งหมดของเราอยู่ตรงนี้

429
00:34:41,813 --> 00:34:46,017
และคุณจะเห็นว่ามันทำงานวิจัยไปเยอะมาก อันนี้เจ๋งจริง

430
00:34:46,017 --> 00:34:50,462
ๆ ตอนนี้สิ่งที่ผมอยากทำคือพูดถึงออโตเมชัน (automations)

431
00:34:50,462 --> 00:34:54,261
สักหน่อย อันนี้สนุกดี ผมสามารถมาที่ automations

432
00:34:54,261 --> 00:34:59,030
แล้วสร้างออโตเมชันใหม่ตรงนี้ ทำด้วยตัวเองก็ได้ หรือจะถามให้

433
00:34:59,030 --> 00:35:04,689
Cursor สร้างออโตเมชันให้ก็ได้ "เฮ้ ฉันอยากให้เธอสร้างออโตเมชันหนึ่งอัน

434
00:35:04,689 --> 00:35:08,649
ออโตเมชันนี้ควรสแกนคอนเทนต์ของฉัน รวมถึง YouTuber

435
00:35:08,649 --> 00:35:13,903
อีกเก้าคนที่เธอคิดว่าอยู่ในกลุ่มเดียวกับฉัน เพื่อหาเครื่องมือใหม่

436
00:35:13,903 --> 00:35:18,188
และควรเป็นเฉพาะวิดีโอในสัปดาห์ที่ผ่านมาทุกครั้งที่รัน

437
00:35:18,188 --> 00:35:24,169
เพราะออโตเมชันนี้ควรเป็นรายสัปดาห์ และฉันอยากให้เธอสร้างส่วนหนึ่งไว้ด้านบน

438
00:35:24,169 --> 00:35:29,908
ส่วนบนสุดควรเป็น 'new tools mentioned' (เครื่องมือใหม่ที่มีการกล่าวถึง)

439
00:35:29,908 --> 00:35:36,860
และพวกนี้คือเครื่องมือใหม่ที่ผู้คนพูดถึง ฉันอยากให้เธอเอาเครื่องมือเหล่านั้นไว้ตรงนั้น

440
00:35:36,860 --> 00:35:41,871
เพื่อให้ฉันเห็นมันทุกสัปดาห์ และฉันอยากให้ออโตเมชันนี้เกิดขึ้น

441
00:35:41,871 --> 00:35:46,398
ช่วยวางมันไว้ด้านบนตรงนี้ด้วย" ผมก็ส่งพรอมต์นั้นเข้าไปใน

442
00:35:46,398 --> 00:35:52,945
Cursor แล้วมันจะสร้างออโตเมชันให้อัตโนมัติ สังเกตว่าตรงนี้เรามีออโตเมชันเป็นศูนย์

443
00:35:52,945 --> 00:35:58,037
แต่พอเสร็จแล้วเราควรมีหนึ่งอัน และแล้ว นี่ไง เราสามารถกลับไปที่

444
00:35:58,037 --> 00:36:03,291
canvas ของ agent native ได้ และเราจะเห็นว่าไดเรกทอรีเครื่องมือของ

445
00:36:03,291 --> 00:36:07,091
agent native ตอนนี้มีส่วน "new tools mentioned"

446
00:36:07,091 --> 00:36:11,294
ใหม่นี้ ซึ่งมี Codex Browser, Devon, Claude Browser,

447
00:36:11,294 --> 00:36:18,164
Fable 5, GPT 5.6, Vercel, Eve นี่คือเครื่องมือมากมายที่ผู้คนกำลังกล่าวถึงอยู่ในตอนนี้

448
00:36:18,164 --> 00:36:21,964
และอย่างที่คุณเห็น เรียบร้อย ออโตเมชันทำงานแล้ว

449
00:36:21,964 --> 00:36:26,167
และผมรันมันไปแล้ว สำหรับการสแกนสัปดาห์นี้ผมทำด้วยมือ

450
00:36:26,167 --> 00:36:30,532
ส่วนนี้จึงมีข้อมูลอยู่ตอนนี้ และมันจะรันทุกสัปดาห์จริง

451
00:36:30,532 --> 00:36:35,220
ๆ เราสร้างออโตเมชันแล้ว และหน้า canvas นี้จะอัปเดตอยู่เสมอ

452
00:36:35,220 --> 00:36:39,989
ถ้าผมมาที่นี่และเห็นส่วน new tools mentioned มันจะอัปเดตให้

453
00:36:39,989 --> 00:36:43,869
นี่คือวิธีที่คุณสร้างงานวิจัยอัตโนมัติแบบนี้ด้วย

454
00:36:43,869 --> 00:36:49,689
canvas โอเค ผมจะหยุดสักครู่ แล้วเราจะมาพูดถึงสิ่งที่เราทำไปแล้วในส่วนนี้

455
00:36:49,689 --> 00:36:55,509
อย่างที่ผมบอก เราจะเดินเร็วพอสมควร เพราะเรากำลังสร้างสามโปรเจกต์พร้อมกัน

456
00:36:55,509 --> 00:37:01,248
และส่วนหนึ่งของการเก่งในการใช้เอเจนต์ AI ก็คือการทำงานหลายอย่างพร้อมกัน

457
00:37:01,248 --> 00:37:06,097
(multitasking) เหตุผลก็คือ AI ใช้เวลาพอสมควรกว่าจะทำงานเสร็จ

458
00:37:06,097 --> 00:37:10,301
ถ้าคุณทำงานกับเอเจนต์ AI ทีละตัว คุณจะเสียเวลานั่งรอ

459
00:37:10,301 --> 00:37:16,767
AI อยู่เฉย ๆ เยอะมาก นั่นคือเหตุผลที่ผมอยากให้คุณเริ่มติดนิสัยทำสามอย่างพร้อมกัน

460
00:37:16,767 --> 00:37:21,132
แล้วค่อยกลับมาดู ตอนนี้เรามาลองคิดดูว่าเราทำอะไรไปบ้าง

461
00:37:21,132 --> 00:37:25,335
สามโปรเจกต์ที่เราทำมาจนถึงตอนนี้ เราได้สร้าง Landing

462
00:37:25,335 --> 00:37:29,134
Page สำหรับ agent native ซึ่งก็คือ Landing Page

463
00:37:29,134 --> 00:37:33,095
ที่เราสร้างไว้นี่ และเราก็สร้างแอป iOS แบบ native

464
00:37:33,095 --> 00:37:38,107
เต็มรูปแบบที่รันอยู่ในซิมูเลเตอร์ ซึ่งเราสร้างด้วยพรอมต์สามอัน

465
00:37:38,107 --> 00:37:42,714
นั่นคือแอปนี้ตรงนี้ที่มีแท็บ learn, แท็บ tools และฟีเจอร์

466
00:37:42,714 --> 00:37:46,998
AI ที่ใช้งานได้จริง และมันทำงานได้อย่างสมบูรณ์แบบจริง

467
00:37:46,998 --> 00:37:51,525
ๆ มีอนิเมชันที่ยอดเยี่ยม ดูสิ และหน้าตามัน... ไม่ไหวแล้ว

468
00:37:51,525 --> 00:37:55,890
มันเจ๋งมาก และอย่างที่คุณเพิ่งเห็นก่อนหน้านี้ เราสร้าง

469
00:37:55,890 --> 00:37:59,850
canvas ซึ่งก็คือแอปมินิเล็ก ๆ ที่อยู่ภายใน Cursor

470
00:37:59,850 --> 00:38:05,509
โดยตรง และอันนั้นหน้าตาแบบนี้ โอเค สิ่งต่อไปที่ผมอยากพูดถึงคือปลั๊กอิน

471
00:38:05,509 --> 00:38:09,550
(plugins) หรือที่ Cursor เรียกมันว่าแท็บ customize

472
00:38:09,550 --> 00:38:15,613
ถ้าคุณไปที่แท็บ customize ภายใน Cursor เราจะเห็นว่าเราติดตั้งไว้หนึ่งตัวคือ

473
00:38:15,613 --> 00:38:21,513
Convex เดี๋ยวเราจะพูดถึงมันทีหลัง สิ่งที่ผมอยากโฟกัสตรงนี้คือเราจะคลิกที่

474
00:38:21,513 --> 00:38:25,555
browse marketplace ตรงนี้คุณสามารถเชื่อมต่อ Cursor

475
00:38:25,555 --> 00:38:31,455
กับเครื่องมืออื่น ๆ แอปอื่น ๆ ได้ และมีตัวเลือกมากมายที่คุณสามารถเพิ่มได้

476
00:38:31,455 --> 00:38:35,497
นักพัฒนาหลายคนเชื่อมต่อมันเข้ากับ Slack และ Linear

477
00:38:35,497 --> 00:38:39,700
โดยตรง เพื่อให้พวกเขาสามารถเข้าไปดูตั๋วงาน (tickets)

478
00:38:39,700 --> 00:38:43,580
ของตัวเอง หรือข้อความจากคนอื่น แล้วก็บอกว่า "เฮ้

479
00:38:43,580 --> 00:38:49,966
ผู้คนพูดว่าอยากได้อะไร บuild เลย" และมันเชื่อมต่อกับเครื่องมือที่คุณใช้อยู่แล้ว

480
00:38:49,966 --> 00:38:56,917
ซึ่งคล้ายกับ Codex และคล้ายกับ Claude Code ตรงที่คุณมีปลั๊กอินพวกนี้ที่เพิ่มได้ง่ายมาก

481
00:38:56,917 --> 00:39:01,121
ตอนนี้มีปลั๊กอินหลักสองตัวที่ผมอยากพูดถึงในวิดีโอนี้

482
00:39:01,121 --> 00:39:06,213
ซึ่งมีฟังก์ชันเฉพาะและสำคัญมาก เรากำลังจะเพิ่มปลั๊กอินอีกสองตัว

483
00:39:06,213 --> 00:39:10,093
และปลั๊กอินพวกนี้จะใช้สำหรับฐานข้อมูล (database)

484
00:39:10,093 --> 00:39:14,539
วิธีที่ผมมองฐานข้อมูลคือ มันเปลี่ยนสิ่งที่คุณกำลังสร้าง

485
00:39:14,539 --> 00:39:18,580
จากเว็บไซต์ให้กลายเป็นแอป ถ้าคุณไปที่ Landing Page

486
00:39:18,580 --> 00:39:26,744
ที่คุณสร้าง แล้วพิมพ์บางอย่างลงไป ข้อมูลที่ผู้ใช้พิมพ์ลงในเว็บไซต์นั้นจะไม่ได้ถูกเก็บไว้ที่ไหนเลยจริง

487
00:39:26,744 --> 00:39:31,190
ๆ และนั่นคือสิ่งที่ผมคิดว่าเป็น "เว็บไซต์" ส่วนแอปอย่าง

488
00:39:31,190 --> 00:39:36,686
Twitter หรือ YouTube ถ้าคุณคอมเมนต์ คุณจะเห็นได้ว่าใครเป็นคนคอมเมนต์

489
00:39:36,686 --> 00:39:43,638
เพราะข้อมูลนั้นถูกเก็บไว้ในฐานข้อมูลจริง ๆ สิ่งที่ผมอยากทำคือเพิ่มปลั๊กอินตัวแรกของเรา

490
00:39:43,638 --> 00:39:50,994
และปลั๊กอินนั้นคือ Convex Convex คือผู้ให้บริการฐานข้อมูลที่ผมเชื่อว่าเข้ากันได้ดีที่สุดกับ

491
00:39:50,994 --> 00:39:57,460
Cursor เพราะ Cursor เก่งมากในการควบคุม Convex และสร้างฐานข้อมูลให้กับแอปพลิเคชัน

492
00:39:57,460 --> 00:40:01,259
สิ่งที่ผมทำได้คือไปที่แอป iOS ของเรา แล้วบอกว่า

493
00:40:01,259 --> 00:40:05,058
"ช่วยใช้ @convex หน่อย ฉันอยากทำระบบยืนยันตัวตน

494
00:40:05,058 --> 00:40:09,908
(authentication) และฐานข้อมูล" ถ้าเรากลับไปที่กระดานวาดเขียน

495
00:40:09,908 --> 00:40:14,192
ในกรณีที่ต้องการบันทึกข้อมูลให้ตรงกับผู้ใช้ที่ถูกต้อง

496
00:40:14,192 --> 00:40:20,012
เราจำเป็นต้องมีการยืนยันตัวตน การยืนยันตัวตนก็คือการลงชื่อเข้าใช้นั่นเอง

497
00:40:20,012 --> 00:40:24,539
ใช่ไหม? คุณต้องลงชื่อเข้าใช้แอป นั่นคือตอนที่คุณเห็นปุ่ม

498
00:40:24,539 --> 00:40:30,843
sign in with Google ใช่ไหม? นั่นคือวิธีที่รู้ว่าผู้ใช้คนไหนกำลังลงชื่อเข้าอยู่

499
00:40:30,843 --> 00:40:37,876
และฐานข้อมูลก็คือที่ที่เก็บข้อมูล ฐานข้อมูลโดยพื้นฐานก็คือที่ที่ข้อมูลถูกเก็บไว้นั่นเอง

500
00:40:37,876 --> 00:40:43,211
และเมื่อผู้ใช้ลงชื่อเข้าใช้ คุณก็จะลงชื่อเข้าใช้ในนามผู้ใช้หมายเลข

501
00:40:43,211 --> 00:40:47,495
00001 และเมื่อผู้ใช้ 00001 โพสต์ ข้อมูลก็จะถูกเก็บไว้

502
00:40:47,495 --> 00:40:51,456
ไม่ว่าคุณจะโพสต์รูปภาพ หรือคุณกำลังใช้ AI ใช่ไหม?

503
00:40:51,456 --> 00:40:59,054
ถ้าเราอยากให้ข้อมูลนี้ถูกบันทึกไว้ เราจำเป็นต้องรู้ว่าผู้ใช้คนไหนกำลังพิมพ์ข้อความเหล่านี้อยู่

504
00:40:59,054 --> 00:41:05,763
และเราจำเป็นต้องรู้ว่า AI กำลังตอบผู้ใช้คนไหน และทั้งหมดนั้นจะถูกเก็บไว้ในฐานข้อมูล

505
00:41:05,763 --> 00:41:11,340
คุณอาจคิดว่านั่นฟังดูงง ๆ ไม่ต้องห่วง AI จะจัดการทั้งหมดนั้นให้คุณเอง

506
00:41:11,340 --> 00:41:17,322
ผู้ใช้ควรจะลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่าน แล้วข้อมูลทั้งหมดที่พวกเขาใช้

507
00:41:17,322 --> 00:41:22,414
เช่น "ฉันอยากให้ผู้ใช้สามารถบันทึกเครื่องมือโปรดของพวกเขาบนหน้า

508
00:41:22,414 --> 00:41:28,476
tools ได้ ช่วยเพิ่มไอคอนบุ๊กมาร์กเล็ก ๆ ข้างเครื่องมือเพื่อให้พวกเขาคลิกได้

509
00:41:28,476 --> 00:41:32,599
และมันควรเปลี่ยนจากสีเทาอ่อนเป็นสีดำเมื่อพวกเขาคลิก

510
00:41:32,599 --> 00:41:40,924
และนั่นควรบันทึกไปที่บัญชีของพวกเขา แล้วฉันก็อยากให้ข้อมูลแชตทั้งหมดถูกเก็บไว้ในฐานข้อมูลด้วยเหมือนกัน"

511
00:41:40,924 --> 00:41:45,047
ผมก็ส่งพรอมต์นั้นไป และตอนนี้มันจะเพิ่มฐานข้อมูลให้

512
00:41:45,047 --> 00:41:50,543
ซึ่งน่าจะใช้เวลาประมาณ 5 ถึง 10 นาที แต่มันจะสร้างฐานข้อมูลใหม่ภายใน

513
00:41:50,543 --> 00:41:54,504
Convex ให้อัตโนมัติ และถ้าคุณยังไม่มีบัญชี Convex

514
00:41:54,504 --> 00:42:00,324
คุณก็แค่ไปที่ Google แล้วสมัครสมาชิก และการเชื่อมต่อบัญชีของคุณก็ง่ายมาก

515
00:42:00,324 --> 00:42:04,204
สิ่งที่คุณต้องทำคือไปที่แท็บ customize หา Convex

516
00:42:04,204 --> 00:42:08,245
แล้วติดตั้งมัน แล้วมันจะให้คุณลงชื่อเข้าใช้ Convex

517
00:42:08,245 --> 00:42:13,661
โดยตรงอัตโนมัติ และคุณก็พร้อมใช้มันแล้ว โอเค ผมว่ามันทดสอบให้ผมแล้ว

518
00:42:13,661 --> 00:42:19,319
ผมน่าจะลงชื่อเข้าใช้อยู่แล้ว ขอออกจากระบบก่อน เรามาออกจากระบบตรงนี้กัน

519
00:42:19,319 --> 00:42:24,654
แล้วผมจะรีสตาร์ทแอป ถ้าผมไปที่ tools โอเค ผมสามารถลงชื่อเข้าใช้ได้

520
00:42:24,654 --> 00:42:30,151
ผมสร้างบัญชีได้ ผมจะใส่อีเมลและรหัสผ่าน โอเค ตอนนี้ผมจะลงชื่อเข้าใช้

521
00:42:30,151 --> 00:42:34,031
แล้วเราก็ลงชื่อเข้าใช้แล้ว มาดูกัน ไปเลย "สวัสดี

522
00:42:34,031 --> 00:42:38,880
มาดูกันว่าอันนี้ทำงานได้ไหม สวัสดี" ตอนนี้ถ้าเราลองลงชื่อออก

523
00:42:38,880 --> 00:42:44,054
แล้วลงชื่อกลับเข้าไปใหม่ ผมจะใส่อีเมลอีกครั้ง ผมลงชื่อเข้าใช้ได้

524
00:42:44,054 --> 00:42:48,419
มาดูตรงนี้ ถ้าเราไปที่แท็บ agent นี่ไง ข้อมูลยังคงอยู่

525
00:42:48,419 --> 00:42:53,430
แล้วเราไปตรวจสอบข้อมูลใน Convex กัน และเนื่องจากเราใช้ปลั๊กอิน

526
00:42:53,430 --> 00:42:57,472
Convex ผมสามารถบอกได้ว่า "เฮ้ ฉันอยากดูฐานข้อมูลบน

527
00:42:57,472 --> 00:43:01,917
Convex โดยตรงจริง ๆ ช่วยให้ลิงก์เพื่อดูมันหน่อยได้ไหม?"

528
00:43:01,917 --> 00:43:06,121
และตอนนี้มันกำลังดึง URL ของแดชบอร์ด Convex มา นี่ไง

529
00:43:06,121 --> 00:43:10,001
ผมสามารถคลิกลิงก์นี้เพื่อเปิดในเบราว์เซอร์ภายนอก

530
00:43:10,001 --> 00:43:14,770
Convex กำลังโหลดขึ้นมา ผมต้องลงชื่อเข้าใช้ และตรงนี้เราเห็น

531
00:43:14,770 --> 00:43:18,811
health แต่สิ่งที่เราอยากเห็นคือ data ถ้าเราคลิกที่

532
00:43:18,811 --> 00:43:23,257
data นี่ไง เรามีตารางฐานข้อมูลทั้งหมดแล้ว ถ้าเราคลิกที่

533
00:43:23,257 --> 00:43:27,379
user เราจะเห็นอีเมลตรงนี้ และตรงนี้มี password hash

534
00:43:27,379 --> 00:43:31,178
ซึ่งมันทำให้รหัสผ่านปลอดภัยขึ้น นี่คือ sessions

535
00:43:31,178 --> 00:43:37,564
และเราสามารถเห็นเซสชันต่าง ๆ ที่ถูกสร้างขึ้น นี่คือเซสชันทุกครั้งที่คุณสร้างแชต

536
00:43:37,564 --> 00:43:41,767
ผมว่า และตรงนี้คือ chat messages มันถูกเก็บไว้ตรงนี้

537
00:43:41,767 --> 00:43:49,204
และแต่ละข้อความถูกเก็บพร้อมกับ ID ของผู้ใช้ ดังนั้นทุกครั้งที่ผู้ใช้คนนี้ส่งข้อความหาเอเจนต์

538
00:43:49,204 --> 00:43:55,266
มันก็จะบันทึกไว้ตรงนั้น และนั่นคือเหตุผลที่มันจะแสดงเฉพาะแชตของผู้ใช้คนนั้น

539
00:43:55,266 --> 00:44:01,975
และเราสามารถปรับแต่งมันเพิ่มเติมได้อีกนิด สังเกตว่าตรงนี้มันเป็นเหมือนเซสชันแชตใหญ่

540
00:44:01,975 --> 00:44:08,199
ๆ เซสชันเดียว บางทีมันอาจจะดีที่สุดแล้ว แต่เพื่อจุดประสงค์ในการสาธิตฐานข้อมูล

541
00:44:08,199 --> 00:44:12,564
ผมอยากโชว์ให้คุณเห็นว่าคุณสามารถเพิ่มในหน้าแชตได้ยังไง

542
00:44:12,564 --> 00:44:17,333
"ฉันอยากได้ไอคอนประวัติเล็ก ๆ ที่มุมขวาบน ช่วยเพิ่มให้หน่อย

543
00:44:17,333 --> 00:44:23,880
แล้วสิ่งที่ฉันอยากให้เธอทำคือทำให้ฉันเห็นบทสนทนาก่อนหน้านี้ที่ฉันคุยกับเอเจนต์ได้

544
00:44:23,880 --> 00:44:28,811
เพื่อให้ผู้ใช้แต่ละคนมีเซสชันแชตกับเอเจนต์ได้หลายเซสชันเหมือน

545
00:44:28,811 --> 00:44:33,338
ChatGPT ช่วยเพิ่มฟีเจอร์นั้นตอนนี้เลย แล้วฉันจะทดสอบมัน"

546
00:44:33,338 --> 00:44:38,592
ผมก็ส่งมันออกไป และตอนนี้มันควรจะทำการเปลี่ยนแปลงนั้นกับแอปของเรา

547
00:44:38,592 --> 00:44:45,139
และอันนี้จะเปลี่ยนวิธีที่ข้อมูลแสดงในแอปของเรา เพราะเราจะมีหลายเซสชันให้สลับดูได้

548
00:44:45,139 --> 00:44:49,262
ไปตรวจสอบกัน ถ้าเราคลิกที่ไอคอนเล็ก ๆ ใหม่เอี่ยมนี้

549
00:44:49,262 --> 00:44:55,324
ผมสามารถกด new chat ได้ จริง ๆ แล้วผมไม่รู้ว่าเราลงชื่อเข้าใช้อยู่หรือเปล่า

550
00:44:55,324 --> 00:44:59,689
มาดูกัน โอเค เราลงชื่อเข้าใช้อยู่ ผมจะพิมพ์ว่า "สวัสดี

551
00:44:59,689 --> 00:45:03,973
นี่คือแชตหนึ่งที่ฉันกำลังทดสอบ" และมันก็ตอบกลับมาแล้ว

552
00:45:03,973 --> 00:45:09,954
ตอนนี้ถ้าผมกด new chat "สวัสดี นี่คือแชต 2" เราสามารถใช้โมเดลที่ต่างกันได้

553
00:45:09,954 --> 00:45:15,855
ตอนนี้ผมจะไปที่ประวัติ (history) โอเค ตอนนี้เราเห็นประวัติแชตของเราตรงนี้

554
00:45:15,855 --> 00:45:19,978
คุณเห็นไหมว่าทั้งหมดนี้ถูกบันทึกไว้ในฐานข้อมูลภายใน

555
00:45:19,978 --> 00:45:24,827
Convex และขอย้ำอีกครั้งเพื่อแสดงให้เห็นประเด็น ไปดูฐานข้อมูล

556
00:45:24,827 --> 00:45:29,435
Convex กัน และอย่างที่คุณเห็น เรามีเซสชันแชตมากขึ้นแน่นอน

557
00:45:29,435 --> 00:45:34,527
และมันเป็น ID ผู้ใช้เดียวกัน แต่ตรงนี้เราเห็นอันใหม่ที่เรียกว่า

558
00:45:34,527 --> 00:45:38,892
conversations และจำไว้ว่าเราสร้างบทสนทนาเพิ่มอีกสองอัน

559
00:45:38,892 --> 00:45:44,065
แต่ละอันมี ID ของตัวเอง และแล้ว นี่ถูกเพิ่มเข้าไปในฐานข้อมูลแล้ว

560
00:45:44,065 --> 00:45:48,753
ทุกอย่างถูกจัดเก็บ และตอนนี้คนอื่น ๆ ก็สามารถลงชื่อเข้าใช้

561
00:45:48,753 --> 00:45:53,280
สร้างเซสชันแชตได้หลายเซสชัน ข้อมูลทั้งหมดนั้นจะถูกเก็บใน

562
00:45:53,280 --> 00:45:58,211
Convex และเราตั้งค่ามันด้วยปลั๊กอินตัวเดียวและพรอมต์ไม่กี่อัน

563
00:45:58,211 --> 00:46:02,495
นั่นแหละคือความง่ายของมัน ผมรู้ว่าอันนี้อาจทำให้คุณงง

564
00:46:02,495 --> 00:46:07,587
แต่นี่อาจเป็นวิดีโอเต็มอีกเรื่องหนึ่งได้เลยถ้าจะพูดถึงฐานข้อมูล

565
00:46:07,587 --> 00:46:11,386
แต่คุณแค่ต้องพึ่งพา AI และถ้าอยากเจาะลึกกว่านี้

566
00:46:11,386 --> 00:46:17,368
ก็ถาม Cursor ได้เลย พูดว่า "เฮ้ ช่วยอธิบายหน่อยได้ไหมว่าตารางพวกนี้คืออะไร

567
00:46:17,368 --> 00:46:22,137
หมายความว่ายังไง?" และงานของคุณในฐานะคนที่กำลังสร้างแอปด้วย

568
00:46:22,137 --> 00:46:26,340
AI และพยายามเพิ่มฐานข้อมูล งานของคุณคือทดสอบสิ่งต่าง

569
00:46:26,340 --> 00:46:30,786
ๆ ทั้งหมด เช่น ลงชื่อเข้าใช้บัญชี ทำแชตเยอะ ๆ ลงชื่อออก

570
00:46:30,786 --> 00:46:38,222
ลงชื่อเข้าใช้บัญชีใหม่ และคุณกำลังพยายามทดสอบมันเพื่อให้แน่ใจว่าทุกอย่างทำงานได้อย่างถูกต้อง

571
00:46:38,222 --> 00:46:42,183
และถ้ามีอะไรทำงานไม่ถูกต้อง ก็บอกเอเจนต์ AI อย่าง

572
00:46:42,183 --> 00:46:46,467
Cursor ไป โดยพื้นฐานแล้ว นั่นคือวิธีที่คุณควรทดสอบมัน

573
00:46:46,467 --> 00:46:52,691
โอเค นั่นครอบคลุมเรื่องฐานข้อมูลแล้ว และคุณสามารถทำแบบนี้ได้กับเว็บแอปหรือแอป

574
00:46:52,691 --> 00:46:58,511
iOS แอปประเภทไหนก็ได้ แอปเดสก์ท็อป หรือที่ไหนก็ตามที่คุณอยากได้ฐานข้อมูล

575
00:46:58,511 --> 00:47:04,331
คุณสามารถใช้ Convex ได้ และมันง่ายมาก สิ่งต่อไปที่ผมอยากพูดถึงคือโฮสติ้ง

576
00:47:04,331 --> 00:47:10,151
(hosting) นี่คือตอนที่คุณนำแอปหรือเว็บไซต์ที่กำลังรันบนคอมพิวเตอร์ของคุณ

577
00:47:10,151 --> 00:47:13,950
ไปรันบนอินเทอร์เน็ต ขอโชว์ให้ดูว่าผมหมายถึงอะไร

578
00:47:13,950 --> 00:47:18,072
ใน Cursor อันนี้กำลังรันอยู่ที่ตำแหน่งเล็ก ๆ ตรงนี้

579
00:47:18,072 --> 00:47:22,356
ใช่ไหม? เรามีตำแหน่งนี้ตรงนี้ซึ่งเป็นที่ที่มันรันอยู่

580
00:47:22,356 --> 00:47:27,610
และคุณไม่จำเป็นต้องรู้ด้วยซ้ำว่ามันหมายถึงอะไร เพราะเวลาคุณคุยกับ

581
00:47:27,610 --> 00:47:31,814
Cursor คุณพูดว่า "ช่วยรันอันนี้บนเครื่องหน่อยได้ไหม"

582
00:47:31,814 --> 00:47:38,199
แล้วแอปก็จะรันบนคอมพิวเตอร์ของคุณ อย่างไรก็ตาม ถ้าคุณอยากให้เพื่อนของคุณเห็นแอป

583
00:47:38,199 --> 00:47:43,615
และอยากให้มันขึ้นอินเทอร์เน็ตจริง ๆ คุณต้องโฮสต์มันไว้ที่ไหนสักแห่ง

584
00:47:43,615 --> 00:47:48,222
และในการโฮสต์ เราจะใช้ปลั๊กอินอีกตัวหนึ่ง ถ้าเราไปที่แท็บ

585
00:47:48,222 --> 00:47:52,345
customize สิ่งที่เราจะทำคือไปที่ browse marketplace

586
00:47:52,345 --> 00:47:56,225
แล้วพิมพ์ Vercel แล้วกด add และมันก็ถูกเพิ่มแล้ว

587
00:47:56,225 --> 00:48:00,509
คุณจะเห็นว่าพอเพิ่มเสร็จมันจะขึ้นว่า 29 tools enabled

588
00:48:00,509 --> 00:48:04,308
นั่นเป็นเพราะผมเชื่อมต่อบัญชีของผมไว้แล้วในอดีต

589
00:48:04,308 --> 00:48:08,349
คุณน่าจะต้องเชื่อมต่อมันกับบัญชี Vercel จริงของคุณ

590
00:48:08,349 --> 00:48:13,523
และจะมีอีกหนึ่งหน้าจอก่อนหน้านี้ แต่ตอนนี้ถ้าเรากลับไปที่เว็บแอป

591
00:48:13,523 --> 00:48:17,968
agent native แล้วพิมพ์ @vercel เราจะเห็นว่ามีเครื่องมือ

592
00:48:17,968 --> 00:48:24,839
29 ตัวที่แตกต่างกัน สิ่งที่ผมอยากทำตอนนี้คือ "ช่วยสร้างโปรเจกต์ใหม่เอี่ยมสำหรับอันนี้

593
00:48:24,839 --> 00:48:28,961
แล้วนำมันขึ้นอินเทอร์เน็ตจริง ๆ ช่วยส่งลิงก์ Vercel

594
00:48:28,961 --> 00:48:33,973
ของมันที่โฮสต์อยู่บนอินเทอร์เน็ตจริง ๆ ให้ฉันตอนที่ทำเสร็จด้วย

595
00:48:33,973 --> 00:48:38,014
และฉันอยากให้เธอเปิดมันในเบราว์เซอร์ด้วยเหมือนกัน"

596
00:48:38,014 --> 00:48:42,056
ตอนนี้อันนี้จะใช้เวลาสักพัก แต่มันจะดีพลอยแอปไปที่

597
00:48:42,056 --> 00:48:46,017
Vercel จริง ๆ ซึ่งหมายถึงการนำมันขึ้นอินเทอร์เน็ต

598
00:48:46,017 --> 00:48:50,382
และแล้ว เราจะเห็นลิงก์นี้ตรงนี้ เราสามารถเปิดมันได้เลย

599
00:48:50,382 --> 00:48:55,474
และแล้ว เราเห็น agentnative.bice.vercel.app นี่เป็นโดเมนที่สุ่ม

600
00:48:55,474 --> 00:49:03,153
ๆ หน่อย แต่เอาล่ะ นี่อยู่บนอินเทอร์เน็ตจริง ๆ คุณสามารถเข้าไปที่เว็บไซต์นี้บนอินเทอร์เน็ตตรงนี้

601
00:49:03,153 --> 00:49:07,195
แล้วคุณจะเห็นเว็บไซต์นี้ มันอยู่บนอินเทอร์เน็ตจริง

602
00:49:07,195 --> 00:49:12,772
ๆ ตอนนี้ผมอยากทำอะไรสนุก ๆ ผมจะพูดว่า "เฮ้ ฉันอยากให้เธอดูโปรเจกต์แอป

603
00:49:12,772 --> 00:49:16,814
iOS โปรเจกต์ agent native mobile เราเพิ่มฐานข้อมูล

604
00:49:16,814 --> 00:49:21,906
Convex ไว้ที่นั่น ฉันอยากให้เธอซิงก์ฐานข้อมูลพวกนั้นเข้าด้วยกัน

605
00:49:21,906 --> 00:49:27,241
ให้มันเป็นฐานข้อมูลเดียว และฉันอยากลงชื่อเข้าใช้บัญชีเดียวกันบนแอป

606
00:49:27,241 --> 00:49:33,546
iOS และเว็บแอปได้ ช่วยสร้างสิ่งนั้นตอนนี้เลย" ให้ดูเจาะลึกเข้าไปในโปรเจกต์นั้น

607
00:49:33,546 --> 00:49:39,366
แล้วสร้างมันออกมาให้ไร้ที่ติ เพื่อให้ฐานข้อมูลและทุกอย่างทำงานร่วมกันได้

608
00:49:39,366 --> 00:49:43,892
"ฉันอยากให้เธอเพิ่มแท็บแชตแบบเดียวกันกับที่เราเพิ่มบนแอป

609
00:49:43,892 --> 00:49:48,015
iOS ด้วย เพื่อให้ฉันคุยกับเอเจนต์ AI ตัวเดียวกันได้

610
00:49:48,015 --> 00:49:54,643
และฉันอยากให้มันเป็นกระบวนการเดียวกัน และข้อมูลทั้งหมดนั้นควรเหมือนกันในฐานข้อมูล"

611
00:49:54,643 --> 00:50:00,382
อันนี้ยากขึ้นหน่อย จริง ๆ แล้วผมไม่รู้ว่ามันจะสำเร็จในครั้งแรกหรือเปล่า

612
00:50:00,382 --> 00:50:04,747
แต่เราจะเห็นกัน Landing Page นี้กำลังจะกลายเป็นแอปแล้ว

613
00:50:04,747 --> 00:50:08,788
และนี่หมายความว่าเราจำเป็นต้องมีการยืนยันตัวตนด้วย

614
00:50:08,788 --> 00:50:13,072
การยืนยันตัวตนแบบเดียวกับอีกอันหนึ่ง ตอนนี้มันจะทำงาน

615
00:50:13,072 --> 00:50:18,165
เราจะดูว่ามันทำยังไง และตรงนี้มันบอกว่า "ระบบตัวตนร่วมหนึ่งระบบ

616
00:50:18,165 --> 00:50:22,691
(one shared identity system) การดีพลอย Convex หนึ่งครั้ง

617
00:50:22,691 --> 00:50:27,622
ประวัติแชตข้ามทั้งเว็บและ iOS ฉันจะตรวจสอบทั้งสองโปรเจกต์ก่อน

618
00:50:27,622 --> 00:50:32,310
แล้วค่อยเชื่อมเว็บแอปเข้ากับแบ็กเอนด์ที่มีอยู่ของแอปมือถือ

619
00:50:32,310 --> 00:50:37,564
แทนที่จะสร้างระบบที่สอง" เจ๋งมาก โอเค อันนี้ใช้เวลานานกว่ามากจริง

620
00:50:37,564 --> 00:50:41,687
ๆ และผมเชื่อว่ามันเสร็จแล้ว ไปตรวจสอบเว็บไซต์นี้กัน

621
00:50:41,687 --> 00:50:45,647
ผมจะเปิดอันนี้ขึ้นมา จริง ๆ แล้วผมจะเปิดใน Cursor

622
00:50:45,647 --> 00:50:53,488
browser เราอยู่บนเว็บไซต์ agent native แล้ว ผมจะลองลงชื่อเข้าใช้ด้วยบัญชีเดียวกับที่ผมใช้เมื่อกี้

623
00:50:53,488 --> 00:50:57,449
นี่คืออีเมลเดียวกันกับที่ผมลงชื่อเข้าใช้บนแอป iOS

624
00:50:57,449 --> 00:51:03,511
และผมจะใช้การลงชื่อเข้าใช้แบบเดียวกันตรงนี้ และตอนนี้เราก็ลงชื่อเข้าใช้แล้ว

625
00:51:03,511 --> 00:51:09,008
ถ้าผมไปที่ประวัติ เราจะเห็นแชตอื่น ๆ ดูสิ และผมสามารถสร้างแชตใหม่ได้

626
00:51:09,008 --> 00:51:12,968
สลับโมเดลได้ "สวัสดี ฉันอยากเรียนรู้เกี่ยวกับ AI"

627
00:51:12,968 --> 00:51:17,091
และแล้ว เราก็ลงชื่อเข้าใช้บัญชีเดียวกันแล้ว ใช่ไหม?

628
00:51:17,091 --> 00:51:21,051
เพราะถ้าผมเปิดซิมูเลเตอร์ตรงนี้ เราจะเห็นได้ โอเค

629
00:51:21,051 --> 00:51:25,255
อันนี้ไม่สตรีมเหมือนแอป iOS แต่ถ้าผมกลับไปที่หน้าแรก

630
00:51:25,255 --> 00:51:29,862
แล้วเปิดซิมูเลเตอร์ ผมจะกลับไปที่แท็บ learn กลับไปที่แท็บ

631
00:51:29,862 --> 00:51:34,065
agent ถ้าผมพิมพ์ว่า "สวัสดี ฉันอยากเรียนรู้เกี่ยวกับ

632
00:51:34,065 --> 00:51:38,592
AI" เรามีเว็บแอปนี้ที่อยู่บนอินเทอร์เน็ตแล้ว โฮสต์อยู่บน

633
00:51:38,592 --> 00:51:43,927
Vercel และแบ็กเอนด์หรือฐานข้อมูลถูกซิงก์เข้าด้วยกันอย่างสมบูรณ์แบบ

634
00:51:43,927 --> 00:51:47,968
มันถูกซิงก์อย่างสมบูรณ์แบบ เมื่อผมทำแชตเพิ่มตรงนี้

635
00:51:47,968 --> 00:51:53,627
มันก็ถูกบันทึกตรงนี้ และส่วน tools นี้ ผมสามารถบันทึกเป็นรายการโปรดได้

636
00:51:53,627 --> 00:51:58,234
และอันนี้ก็จะถูกเก็บในฐานข้อมูลด้วย ตอนนี้ ผมยังไม่มีส่วน

637
00:51:58,234 --> 00:52:02,033
tools บน agent native ผมจะเพิ่มมัน "เธอเห็นส่วน

638
00:52:02,033 --> 00:52:06,398
tools ใช่ไหม ฉันอยากให้เธอเพิ่มมัน และแทนที่จะเป็นแท็บ

639
00:52:06,398 --> 00:52:10,359
agent ด้านบน พอฉันคลิกมัน มันควรพาไปที่หน้า tools

640
00:52:10,359 --> 00:52:14,966
บนเว็บไซต์ มันควรคล้ายกับแอป iOS มาก — เครื่องมือเดียวกัน

641
00:52:14,966 --> 00:52:20,463
หมวดหมู่เดียวกัน" เราก็ส่งอันนั้นไป โอเค ผมจะเปิดอันนี้ในเบราว์เซอร์

642
00:52:20,463 --> 00:52:24,827
และเราก็มี tools แล้ว ตอนนี้ผมไม่ค่อยชอบอันนี้เท่าไหร่

643
00:52:24,827 --> 00:52:29,192
โอเค อันนี้ก็ไม่เลว และแน่นอนว่าเรายังไม่ได้เพิ่มไอคอน

644
00:52:29,192 --> 00:52:33,072
ซึ่งเดี๋ยวผมจะทำ ผมแค่ไม่อยากไปไล่หาลอโก้พวกนั้น

645
00:52:33,072 --> 00:52:36,952
แต่เราได้ agent native แล้ว เรามีส่วน tools แล้ว

646
00:52:36,952 --> 00:52:41,075
"เดี๋ยว ฉันจะไปที่แชตยังไง? ฉันจะเข้าไปที่แชตยังไง?

647
00:52:41,075 --> 00:52:45,197
อ๋อ นั่นคือแท็บ agent ขอโทษที ใช่ ช่วยเอาปุ่ม agent

648
00:52:45,197 --> 00:52:49,643
ไว้ที่แถบบนหน่อย ฉันไม่รู้มาก่อนว่านั่นคือแชตของเอเจนต์

649
00:52:49,643 --> 00:52:53,765
ช่วยเอามันกลับไปไว้ที่แถบบนข้าง ๆ tools หน่อย" โอเค

650
00:52:53,765 --> 00:52:57,807
ตอนนี้ผมสามารถเปิดอันนี้ใน Cursor browser แล้วคลิก

651
00:52:57,807 --> 00:53:01,606
agent และเราก็มีมันแล้ว และแล้ว เราสร้างแอป iOS

652
00:53:01,606 --> 00:53:05,647
เสร็จแล้ว เพิ่มฐานข้อมูลแล้ว แล้วเราก็สร้างเว็บแอป

653
00:53:05,647 --> 00:53:09,851
นำมันขึ้นอินเทอร์เน็ตด้วย Vercel ฐานข้อมูลคือ Convex

654
00:53:09,851 --> 00:53:14,943
แล้วเราก็รวมฐานข้อมูลเข้าด้วยกัน และเราทำทั้งหมดนี้แค่โดยการถาม

655
00:53:14,943 --> 00:53:19,146
AI เราพูดว่า "เฮ้ ช่วยตั้งค่ามันผ่านฐานข้อมูล Convex

656
00:53:19,146 --> 00:53:24,966
เดียวกันหน่อยได้ไหม? ฉันอยากให้เธอทำให้มันเป็นเว็บแอปเวอร์ชันหนึ่งและแอป

657
00:53:24,966 --> 00:53:28,846
iOS เวอร์ชันหนึ่ง" และมันทำงานได้อย่างสมบูรณ์แบบ

658
00:53:28,846 --> 00:53:35,151
สิ่งที่คุณต้องทำก็แค่พรอมต์ AI ตอนนี้ ส่วนสุดท้ายของเซกชันนี้ซึ่งก็คือการสร้าง

659
00:53:35,151 --> 00:53:41,132
ก่อนที่เราจะไปยังฟีเจอร์ขั้นสูงอีกมากมาย เราจะทำการไล่ดูฟีเจอร์ที่เหลือของ

660
00:53:41,132 --> 00:53:45,012
Cursor แบบรวดเร็ว (lightning round) ผมอยากพูดถึง

661
00:53:45,012 --> 00:53:49,700
GitHub สิ่งที่ผมอยากพูดถึงตอนนี้คือการบันทึกงานของเราภายใน

662
00:53:49,700 --> 00:53:53,823
Cursor และสำหรับเรื่องนี้เราจะใช้ GitHub และ GitHub

663
00:53:53,823 --> 00:53:57,945
ก็คือแอปหนึ่ง คุณสามารถคิดว่ามันเหมือน Google Drive

664
00:53:57,945 --> 00:54:02,876
สำหรับนักพัฒนา และเมื่อคุณสมัครสมาชิก สิ่งที่คุณทำได้คือสร้าง

665
00:54:02,876 --> 00:54:07,968
GitHub repository (ที่เก็บโค้ด) เมื่อคุณกด new คุณก็สามารถสร้าง

666
00:54:07,968 --> 00:54:11,767
repository ใหม่ได้ ผมสามารถตั้งชื่อมันว่า Riley

667
00:54:11,767 --> 00:54:15,567
iOS agent native ได้ ใช่ไหม? ผมสร้างโปรเจกต์ได้

668
00:54:15,567 --> 00:54:19,527
และเราสามารถใส่คำอธิบายได้ "agent native iOS app"

669
00:54:19,527 --> 00:54:23,326
และโดยพื้นฐานแล้วเรากำลังสร้างโฟลเดอร์บน Google

670
00:54:23,326 --> 00:54:28,742
Drive แต่สำหรับโค้ด และผมต้องเลือกโปรไฟล์ของผม แล้วเราก็สามารถสร้าง

671
00:54:28,742 --> 00:54:32,622
repository นี้ได้ และอันนี้จะสร้างโฟลเดอร์ว่าง ๆ

672
00:54:32,622 --> 00:54:36,664
ที่ผมสามารถคัดลอกได้ ตอนนี้สิ่งที่ผมต้องทำคือไปที่

673
00:54:36,664 --> 00:54:40,624
Cursor แล้วกลับไปที่แอป iOS ของเราตรงนี้ และในแอป

674
00:54:40,624 --> 00:54:44,666
iOS ผมจะบอกว่า "เฮ้ ผมสร้าง repo ใหม่สำหรับแอป iOS

675
00:54:44,666 --> 00:54:49,920
แล้ว ช่วย push โค้ดตรงนี้หน่อยได้ไหม" และผมก็แค่วางลิงก์นี้ตรงนี้

676
00:54:49,920 --> 00:54:53,961
แล้วเราก็รันมันได้ และถ้าคุณยังไม่ได้ลงชื่อเข้าใช้

677
00:54:53,961 --> 00:54:58,084
GitHub สิ่งที่จะเกิดขึ้นคือมันจะให้คุณลงชื่อเข้าใช้

678
00:54:58,084 --> 00:55:02,530
GitHub เมื่อคุณทำแบบนี้ และถ้ามันไม่ขึ้น คุณก็แค่บอกว่า

679
00:55:02,530 --> 00:55:08,349
"เฮ้ ช่วยเชื่อมต่อ Cursor กับ GitHub ให้หน่อย" เหมือนที่บอกว่าคุณต้องใช้

680
00:55:08,349 --> 00:55:12,149
GitHub นั่นแหละครับ แต่ก่อนที่เราจะไปที่แอป iOS

681
00:55:12,149 --> 00:55:16,433
ขอทบทวนสิ่งที่เราคุยกันมาก่อนหน้านี้หน่อย ใช่ไหมครับ?

682
00:55:16,433 --> 00:55:21,687
ในโปรเจกต์นี้เราสร้างแอปทั้งหมดสามตัว เราสร้างแอปมือถือและเว็บแอป

683
00:55:21,687 --> 00:55:26,375
และเว็บแอปถูกโฮสต์บน Vercel ส่วนแอปมือถือ เราไม่ได้ส่งขึ้น

684
00:55:26,375 --> 00:55:31,952
App Store เพราะมันอยู่นอกขอบเขตของวิดีโอนี้ อันนั้นใช้เวลานานกว่านั้น

685
00:55:31,952 --> 00:55:36,075
และเดี๋ยวผมจะทำวิดีโอ Cursor iOS app แยกออกมาทีหลัง

686
00:55:36,075 --> 00:55:40,035
แต่คุณอาจจะลองให้ Cursor ช่วยคิดวิธีได้ ถ้าถามว่า

687
00:55:40,035 --> 00:55:46,906
"ฉันจะเอามันขึ้น App Store ได้ยังไง?" แต่สิ่งที่เราทำคือเราเพิ่มฐานข้อมูลให้แอปมือถือ

688
00:55:46,906 --> 00:55:52,564
แล้วก็เชื่อมฐานข้อมูลเข้าด้วยกัน โดยพื้นฐานคือเราเพิ่มฐานข้อมูลให้หน้า

689
00:55:52,564 --> 00:55:58,950
Landing Page แล้วเชื่อมมันเข้าด้วยกัน และสำหรับเรื่องนี้เราใช้ปลั๊กอินสองตัวคือ

690
00:55:58,950 --> 00:56:05,093
Convex plugin กับ Vercel plugin และในพาร์ตหนึ่งตอนที่เราสร้างเว็บแอปครั้งแรก

691
00:56:05,093 --> 00:56:09,539
เราก็พูดถึง design mode เรื่องการแก้ไขแอปแบบละเอียดย่อย

692
00:56:09,539 --> 00:56:14,389
ๆ ซึ่งเป็นวิธีแก้เว็บแอปใน Cursor ที่สนุกมาก และเรายังพูดถึง

693
00:56:14,389 --> 00:56:19,158
canvas ซึ่งเป็นฟีเจอร์ที่มีประโยชน์และสนุกสำหรับแอปอายุสั้น

694
00:56:19,158 --> 00:56:24,978
ๆ (ephemeral) ที่อยากส่งให้ทีมดูอะไรแบบนั้น ตอนนี้ผมอยากไปต่อที่พาร์ตสาม

695
00:56:24,978 --> 00:56:29,504
ซึ่งก็คือฟีเจอร์ขั้นสูงของ Cursor โอเค ตอนนี้เราจะใช้แอป

696
00:56:29,504 --> 00:56:35,405
iOS ของ Cursor กัน คุณดาวน์โหลดมันแล้วลงชื่อเข้าใช้ด้วยบัญชีเดิมของคุณได้

697
00:56:35,405 --> 00:56:41,467
และคุณหาเจอได้โดยการค้นหาคำว่า Cursor iOS app แล้วดาวน์โหลดลงโทรศัพท์ของคุณ

698
00:56:41,467 --> 00:56:45,994
และสังเกตว่าตรงด้านบนมันเขียนว่า all repos ถ้าเราคลิกที่

699
00:56:45,994 --> 00:56:51,814
all repos เราก็จะสร้างเอเจนต์ได้ และตรงนี้เราสามารถเลือกได้ว่าเราอยากแก้

700
00:56:51,814 --> 00:56:55,936
repository ไหน และจำได้ไหมว่าเราตั้งชื่อ repository

701
00:56:55,936 --> 00:57:00,058
ของเว็บแอปไว้ว่าอะไร เราตั้งชื่อมันว่า agent native

702
00:57:00,058 --> 00:57:06,363
web app ตรงนี้ เราก็เลยคลิกมันได้ และสิ่งที่ผมอยากทำตรงนี้คือผมจะพูดใส่ไมค์เลย

703
00:57:06,363 --> 00:57:10,647
"เฮ้ ฉันอยากให้เธอลองสำรวจดีไซน์แบบอื่นให้แอปนี้หน่อย

704
00:57:10,647 --> 00:57:16,306
ยังไม่ต้อง push อะไรขึ้น main นะ ฉันอยากให้เธอสำรวจสไตล์เว็บแอปแบบใหม่

705
00:57:16,306 --> 00:57:20,671
แล้วส่งสกรีนช็อตมาให้ฉันดู และถ้าฉันชอบ เราค่อยอนุมัติ

706
00:57:20,671 --> 00:57:26,086
ฉันแค่อยากเห็นการสำรวจตรงนี้ และลองคิดคอนเซ็ปต์ภาพแบบใหม่ให้อันนี้"

707
00:57:26,086 --> 00:57:30,047
แล้วผมก็หยุดอัดเสียงได้เลย เอาล่ะ เรามีพรอมต์แล้ว

708
00:57:30,047 --> 00:57:34,008
ผมจะเปลี่ยนโมเดล และสำหรับอันนี้เราจะใช้ 5.6 Soul

709
00:57:34,008 --> 00:57:37,968
แล้วผมก็ส่งมันไปได้เลย ตอนนี้เราเซ็ตอัปโปรเจกต์บน

710
00:57:37,968 --> 00:57:44,597
GitHub ไว้แล้ว และโดยพื้นฐานมันก็คือโค้ดจำนวนหนึ่งในไฟล์หลายไฟล์ที่เก็บไว้บนคลาวด์

711
00:57:44,597 --> 00:57:51,548
ตอนนี้มันกำลังตั้งค่าคอมพิวเตอร์บนคลาวด์ และมันจะเขียนโค้ดใหม่ให้แอปนี้ตามพรอมต์ของเรา

712
00:57:51,548 --> 00:57:55,347
จากนั้นมันจะรันแอปบนคลาวด์จริง ๆ แล้วก็ทดสอบแอป

713
00:57:55,347 --> 00:57:59,227
แล้วส่งสกรีนช็อตกลับมาให้เรา และนั่นคือทิศทางที่

714
00:57:59,227 --> 00:58:05,532
Cursor กำลังไป พวกเขากำลังตั้งค่าคอมพิวเตอร์คลาวด์เหล่านี้ที่คุณส่งพรอมต์ไปได้

715
00:58:05,532 --> 00:58:10,220
แล้ว AI จะแก้แอปให้จริง ๆ แล้วรันแอปและทดสอบทุกอย่างให้คุณ

716
00:58:10,220 --> 00:58:15,151
มันยังส่งคลิปบันทึกหน้าจอแบบวิดีโอที่มันใช้งานแอปให้ดูได้ด้วย

717
00:58:15,151 --> 00:58:20,243
แล้วคุณก็ให้ฟีดแบ็กได้ แล้วบอกว่า "โอเค ฉันชอบการเปลี่ยนแปลงนี้

718
00:58:20,243 --> 00:58:25,982
ช่วยสร้าง PR หน่อย" อันนี้ใช้เวลาสักพัก คุณจะดูมันเขียนโค้ดเหมือนตอนใช้

719
00:58:25,982 --> 00:58:30,347
Cursor ก็ได้ หรือจะวางโทรศัพท์ลงแล้วรอให้มันเสร็จก็ได้

720
00:58:30,347 --> 00:58:34,146
แล้วพอมันเขียนโค้ดเสร็จ คุณจะได้รับการแจ้งเตือน

721
00:58:34,146 --> 00:58:38,107
แล้วเปิดดูได้ จะเห็นการเปลี่ยนแปลงทั้งหมดที่มันทำ

722
00:58:38,107 --> 00:58:42,472
งั้นเรามารอสักสองสามนาทีให้มันเสร็จกัน และคุณจะเห็นตรง

723
00:58:42,472 --> 00:58:46,756
Dynamic Island ด้านบนว่ามีเครื่องหมายถูกเล็ก ๆ ตรงนี้

724
00:58:46,756 --> 00:58:50,636
ผมจะคลิกอันนี้ ดูสิครับ มันสำรวจสไตล์ใหม่ทั้งหมด

725
00:58:50,636 --> 00:58:55,082
"intelligence in motion" และมันส่งสกรีนช็อตมาให้เราจริง

726
00:58:55,082 --> 00:58:59,204
ๆ นี่มันรันอยู่บนคลาวด์ ถ่ายสกรีนช็อตแล้วส่งมาให้ผม

727
00:58:59,204 --> 00:59:04,862
และนี่คือวิธีที่ผมเขียนโค้ดจากโทรศัพท์ได้ และเมื่อผมคิดว่ามันพร้อมแล้ว

728
00:59:04,862 --> 00:59:08,823
ผมก็แค่คลิก marked as ready และตอนนี้เราได้ส่ง AI

729
00:59:08,823 --> 00:59:13,834
ใน Cursor ไปสร้าง branch ใหม่ โดยพื้นฐานนั่นคือสิ่งที่เกิดขึ้น

730
00:59:13,834 --> 00:59:17,634
และสิ่งที่คุณเห็นตรงนี้คือเรามีสอง branch และมี

731
00:59:17,634 --> 00:59:22,160
pull request หนึ่งอัน ถ้าผมคลิกที่สอง branch ผมจะเห็นว่า

732
00:59:22,160 --> 00:59:26,121
Cursor อัปเดตมันเมื่อสามนาทีที่แล้ว นี่คือ branch

733
00:59:26,121 --> 00:59:30,001
ใหม่ที่มันสร้าง และมี pull request ใหม่ และ pull

734
00:59:30,001 --> 00:59:34,285
request นี้มันยังเพิ่มสรุปของ pull request เข้ามาด้วย

735
00:59:34,285 --> 00:59:39,781
และถ้าผม merge pull request นี้ มันก็จะ commit การเปลี่ยนแปลงเข้าสู่

736
00:59:39,781 --> 00:59:44,631
main และเว็บแอปก็จะไม่หน้าตาแบบนี้อีกต่อไป มันจะหน้าตาแบบนี้

737
00:59:44,631 --> 00:59:49,158
นี่คือสิ่งที่มันจะเป็น แต่ผมคิดว่ามันดูไม่สวย ผมเลยจะไม่

738
00:59:49,158 --> 00:59:54,493
commit การเปลี่ยนแปลงเหล่านี้ แต่อันนี้ทำให้คุณเห็นไอเดียว่าใช้แอป

739
00:59:54,493 --> 00:59:58,534
iOS เพื่อส่งไอเดียต่าง ๆ ของคุณได้ยังไง มันจะสร้าง

740
00:59:58,534 --> 01:00:02,333
branch ใหม่ คุณไม่ต้องกังวลว่ามันจะไปอัปเดตอะไร

741
01:00:02,333 --> 01:00:07,022
และคุณแค่บอกให้มันส่งคลิปบันทึกหน้าจอหรือสกรีนช็อตมาให้คุณ

742
01:00:07,022 --> 01:00:11,306
และนั่นคือวิธีที่คุณสร้างแอปจากโทรศัพท์ด้วยแอป Cursor

743
01:00:11,306 --> 01:00:15,428
iOS โอเค นั่นคือแอป iOS แล้วทีนี้มาพูดถึง side chat

744
01:00:15,428 --> 01:00:20,520
กัน ถ้าเรากลับไปที่ Cursor สิ่งที่คุณทำได้คือ ถ้าเรากำลังคุยกับ

745
01:00:20,520 --> 01:00:25,613
Cursor ตรงนี้ ถ้าเอเจนต์กำลังทำงานอยู่ นี่เป็นแค่พรอมต์ตัวอย่าง

746
01:00:25,613 --> 01:00:30,544
ถ้าผมพิมพ์ /side แล้วกด enter มันจะให้ผมคุยกับเอเจนต์ด้านข้าง

747
01:00:30,544 --> 01:00:35,070
(side agent) ได้ เอเจนต์นี้แก้แอปไม่ได้เหมือนเอเจนต์หลัก

748
01:00:35,070 --> 01:00:40,728
แต่ให้ผมถามคำถามได้ เช่น "เฮ้ มีอะไรหนึ่งอย่างที่ฉันควรเพิ่มในแอปนี้?"

749
01:00:40,728 --> 01:00:45,901
แล้วเราก็มีการสนทนาด้านข้างนี้ไปพร้อมกับที่เอเจนต์หลักกำลังทำงาน

750
01:00:45,901 --> 01:00:49,943
และนี่เป็นฟีเจอร์ที่คล้ายกับ Claude Code และ Codex

751
01:00:49,943 --> 01:00:54,389
มาก พูดถึง Claude Code กับ Codex ผมรู้ว่านักพัฒนาหลายคน

752
01:00:54,389 --> 01:00:58,350
โดยเฉพาะคนที่ทำงานกับผมที่สตาร์ทอัป เราจริง ๆ ใช้

753
01:00:58,350 --> 01:01:02,472
Claude Code ใน Cursor ตลอดเวลา และถ้าคุณอยากเข้าถึง

754
01:01:02,472 --> 01:01:06,514
Claude Code ใน Cursor คุณก็แค่เปิด terminal ขึ้นมา

755
01:01:06,514 --> 01:01:11,121
แล้วเปิดเป็นแท็บใหม่เหมือนเปิดเว็บไซต์หรือเบราว์เซอร์หรือ

756
01:01:11,121 --> 01:01:15,162
canvas แล้วเราก็พิมพ์ claude และตอนนี้เราก็เข้าถึง

757
01:01:15,162 --> 01:01:19,447
Claude Code ที่รันด้วย Fable 5 ในเบราว์เซอร์ได้โดยตรง

758
01:01:19,447 --> 01:01:23,407
และนั่นเป็นเรื่องสนุกที่ทำได้ คุณเข้าถึง terminal

759
01:01:23,407 --> 01:01:27,287
ได้ นี่เป็นฟีเจอร์ขั้นสูงจริง ๆ การเข้าใจวิธีใช้

760
01:01:27,287 --> 01:01:31,329
terminal นอกเหนือจาก Claude Code เป็นเรื่องยากจริง

761
01:01:31,329 --> 01:01:35,936
ๆ แต่สิ่งที่เจ๋งเกี่ยวกับ terminal คือ AI เก่งมากในการใช้

762
01:01:35,936 --> 01:01:40,463
terminal และอะไรก็ตามที่คุณอยากทำใน terminal คุณก็แค่ให้

763
01:01:40,463 --> 01:01:44,828
AI ทำมันให้ แล้วสุดท้าย สิ่งที่ผมอยากพูดถึง เพราะผมใช้

764
01:01:44,828 --> 01:01:50,082
Fable 5 และ GPT 5.6 Soul เยอะมาก ผมอยากพูดถึงการประหยัดค่าใช้จ่าย

765
01:01:50,082 --> 01:01:54,204
(cost saving) สิ่งแรกที่คุณควรทำ ถ้าอยากประหยัดเงิน

766
01:01:54,204 --> 01:01:58,650
คือใช้ auto mode หรือใช้ Grock 4.5 มันจะรับพรอมต์ของคุณ

767
01:01:58,650 --> 01:02:04,389
แล้วตัดสินใจว่าโมเดลไหนดีที่สุด และมันจะบาลานซ์ระหว่างคุณภาพกับความเร็ว

768
01:02:04,389 --> 01:02:08,350
และอันนี้แนะนำสำหรับงานส่วนใหญ่ สำหรับงานส่วนใหญ่

769
01:02:08,350 --> 01:02:13,199
คุณไม่จำเป็นต้องใช้โมเดลที่ฉลาดที่สุด มันแค่ทำงานให้เสร็จได้

770
01:02:13,199 --> 01:02:17,726
ถ้าคุณใช้แต่ Fable คุณจะเสียเงินเยอะมาก และผมแนะนำให้ใช้

771
01:02:17,726 --> 01:02:22,657
Grock เพราะ Grock เป็นโมเดลที่ถูกมากเมื่อเทียบกับความดีของมัน

772
01:02:22,657 --> 01:02:26,860
และผมคาดว่า Cursor จะอุดหนุน (subsidize) โมเดล Grock

773
01:02:26,860 --> 01:02:33,084
เยอะ และผมคิดว่า Grock จะฉลาดขึ้นอีก 10 เท่า และผมคาดว่าราคาจะแข่งขันกับโมเดล

774
01:02:33,084 --> 01:02:37,045
Frontier ตัวอื่น ๆ ได้ ดังนั้นผมจะเลี่ยงใช้ Fable

775
01:02:37,045 --> 01:02:42,541
5 และโมเดล GPT และจะใช้โมเดล Grock ใน auto ถ้าอยากควบคุมค่าใช้จ่ายใน

776
01:02:42,541 --> 01:02:46,583
Cursor และมันยังเร็วมากอีกด้วย auto mode และการใช้

777
01:02:46,583 --> 01:02:52,160
Grock 4.5 นั้นเร็วกว่าอย่างเห็นได้ชัด และนั่นก็คือคำแนะนำสุดท้ายของผม

778
01:02:52,160 --> 01:02:56,687
เอาล่ะทุกคน นั่นก็ครบถ้วนสำหรับคู่มือ Cursor ฉบับสมบูรณ์

779
01:02:56,687 --> 01:03:01,698
ผมหวังว่ามันจะทำให้คุณคิดอะไร ๆ ต่อเกี่ยวกับสิ่งที่คุณสร้างได้

780
01:03:01,698 --> 01:03:06,629
โมเดลต่าง ๆ ที่คุณใช้ได้ เราได้พูดถึง Cursor วิธีดาวน์โหลดที่

781
01:03:06,629 --> 01:03:11,156
cursor.com เครื่องมืออื่น ๆ ที่เราคุยกันว่าคุณใช้ร่วมกับ

782
01:03:11,156 --> 01:03:15,197
Cursor ได้ และที่เกือบรับประกันได้ว่าคุณต้องใช้คือ

783
01:03:15,197 --> 01:03:19,724
GitHub เราได้พูดถึงผู้ให้บริการฐานข้อมูลและการโฮสต์อย่าง

784
01:03:19,724 --> 01:03:23,927
Convex และ Vercel เราสร้างแอปสามตัว เราสร้าง Landing

785
01:03:23,927 --> 01:03:27,807
Page เราเชื่อมฐานข้อมูลเข้าด้วยกัน ผมโชว์แอป iOS

786
01:03:27,807 --> 01:03:31,848
ให้ดู คุณสามารถสปินเอเจนต์คลาวด์จากโทรศัพท์ได้จริง

787
01:03:31,848 --> 01:03:38,072
ๆ มันจะสร้างแอปบนคลาวด์ และยังถ่ายคลิปบันทึกหน้าจอและสกรีนช็อตส่งกลับมาให้คุณ

788
01:03:38,072 --> 01:03:43,488
แล้วมันจะสร้าง PR ซึ่งคุณสามารถรีวิวบน GitHub และตัดสินใจได้ว่าอยาก

789
01:03:43,488 --> 01:03:52,056
merge เข้าสู่โปรเจกต์หลักของคุณหรือไม่ และนี่คือภาพรวมสำหรับคนที่ไม่ใช่สายเทคนิคที่อยากเรียนรู้การสร้างแอป

790
01:03:52,056 --> 01:03:56,017
ในความเห็นของผม ไม่มีเครื่องมือไหนดีไปกว่า Cursor

791
01:03:56,017 --> 01:03:59,816
อีกแล้ว ผมหวังว่าคุณจะได้อะไรจากวิดีโอนี้เยอะ ๆ

792
01:03:59,816 --> 01:04:04,423
ถ้าคุณยังดูอยู่ตอนนี้ กรุณากดไลก์และ subscribe ด้วยนะครับ

793
01:04:04,423 --> 01:04:10,486
มันช่วยผมได้มาก เขียนคอมเมนต์ไว้ด้านล่างได้เลย ผมอยากรู้ว่าผมพลาดอะไรไปบ้าง

794
01:04:10,486 --> 01:04:15,821
อะไรที่ผมควรพูดถึงในวิดีโอ Cursor ตัวถัดไป? ขอบคุณทุกคนมากที่รับชม

795
01:04:15,821 --> 01:04:17,599
แล้วเจอกันในวิดีโอหน้า