Full Cursor 3.0 Tutorial for Beginners : Zero to Hero in 20 minutes

1
00:00:00,000 --> 00:00:04,388
ถ้าคุณอยากเรียนรู้ Cursor ในอีก 20 ถึง 30 นาทีข้างหน้า

2
00:00:04,388 --> 00:00:09,263
ให้ดูวิดีโอนี้จนจบเลยครับ ผมจะพาไปดูว่ามีอะไรเปลี่ยนไปบ้างใน

3
00:00:09,263 --> 00:00:13,976
Cursor สิ่งที่ควรจำไว้เวลานำไปใช้ ฟีเจอร์และความสามารถต่าง

4
00:00:13,976 --> 00:00:18,364
ๆ ของ Cursor และเราจะได้ลงมือสร้างของที่มีประโยชน์จริง

5
00:00:18,364 --> 00:00:23,159
ๆ บน Cursor ด้วย รวมถึงวิธีใช้ Cursor ให้ประหยัดเวลามากขึ้น

6
00:00:23,159 --> 00:00:29,984
วิดีโอนี้จะพูดถึง Cursor แบบตัวต่อตัวเลย ถ้าใครเพิ่งเคยเข้ามาดูวิดีโอช่องนี้ครั้งแรก

7
00:00:29,984 --> 00:00:34,941
อย่าลืมกดไลก์และกดติดตามช่องไว้ด้วยนะครับ เพราะจะมีคอนเทนต์ดี

8
00:00:34,941 --> 00:00:38,923
ๆ แบบนี้ตามมาอีกเรื่อย ๆ ถ้าคุณเสิร์ชคำว่า Cursor

9
00:00:38,923 --> 00:00:43,392
บน Google คุณจะเจอลิงก์แรกคือ Cursor แพลตฟอร์มเขียนโค้ด

10
00:00:43,392 --> 00:00:47,374
(coding platform) ที่นั่นจะมีตัวเลือกให้ดาวน์โหลด

11
00:00:47,374 --> 00:00:51,274
Cursor สำหรับ Windows, สำหรับ Mac หรือระบบอื่น ๆ

12
00:00:51,274 --> 00:00:55,174
ที่คุณใช้อยู่ คุณดาวน์โหลดได้เลยครับ ตอนนี้เรามี

13
00:00:55,174 --> 00:00:59,969
Cursor เวอร์ชัน 3.0 แล้ว เราจะมาดูกันว่ามีอะไรเปลี่ยนไปบ้าง

14
00:00:59,969 --> 00:01:04,113
โดยรวมแล้วมันคล้ายกับ IDE ตัวอื่น ๆ ที่คุณเคยใช้มาก

15
00:01:04,113 --> 00:01:11,020
ไม่ว่าจะเป็น Codex หรือ Claude Code แต่ Cursor เป็นตัวที่ถูกใช้มากที่สุดในระดับองค์กร

16
00:01:11,020 --> 00:01:14,839
(enterprise) และตอนนี้ xAI ก็ได้เข้าซื้อ Cursor

17
00:01:14,839 --> 00:01:18,739
มาแล้ว มาดูกันว่ามีอะไรเปลี่ยนแปลงใน Cursor บ้าง

18
00:01:18,739 --> 00:01:23,452
ตอนนี้คุณสามารถรวม agent ทั้งหมดของคุณไว้ในที่เดียวได้แล้ว

19
00:01:23,452 --> 00:01:28,815
เดี๋ยวผมจะโชว์ให้ดูว่ามันเป็นยังไง agent ทั้งหมดอยู่รวมกันที่เดียว

20
00:01:28,815 --> 00:01:32,959
และคุณสามารถรัน agent หลายตัวพร้อมกันได้ (parallel)

21
00:01:32,959 --> 00:01:37,022
โดยแต่ละตัวทำงานของตัวเองไป แล้วคุณก็ส่งงานได้ง่าย

22
00:01:37,022 --> 00:01:41,085
ๆ อีกทั้งยังมี UX ใหม่สำหรับการส่งต่องาน (handoff)

23
00:01:41,085 --> 00:01:46,286
ระหว่างเครื่อง local กับ cloud ตอนนี้ถ้าคุณอยากให้โปรเจกต์อยู่บน

24
00:01:46,286 --> 00:01:50,186
PC ของคุณเอง หรืออยากให้โปรเจกต์นั้นอยู่บน cloud

25
00:01:50,186 --> 00:01:54,249
คุณก็ทำได้ง่าย ๆ ไปได้ไวตั้งแต่ commit จนถึง merge

26
00:01:54,249 --> 00:01:58,149
PR แถมเชื่อมต่อ GitHub ได้ด้วย นี่คือฟีเจอร์เด็ด

27
00:01:58,149 --> 00:02:02,131
ๆ ของ Cursor ครับ — Files สำหรับทำความเข้าใจโค้ด,

28
00:02:02,131 --> 00:02:06,194
เบราว์เซอร์ในตัว (integrated browser), plugins จาก

29
00:02:06,194 --> 00:02:10,907
Cursor Marketplace และวิธีที่ดีที่สุดในการเขียนโค้ดร่วมกับ

30
00:02:10,907 --> 00:02:15,945
AI พอคุณดาวน์โหลด Cursor เสร็จ นี่คือหน้าจอที่คุณจะเห็นตรงหน้า

31
00:02:15,945 --> 00:02:19,764
ซึ่งสิ่งสำคัญที่พวกเขาเปลี่ยนและอัปเดตใน Cursor

32
00:02:19,764 --> 00:02:25,290
3 ก็คือตอนนี้มันเป็นแบบ agentic มากขึ้น พวกเขาพลิกโฉมไปทางนั้นหมดเลย

33
00:02:25,290 --> 00:02:30,328
— ทุกอย่างเป็น agentic ทุกอย่างจะถูกจัดการให้เสร็จโดยอัตโนมัติ

34
00:02:30,328 --> 00:02:36,178
และยังมีอะไรแบบ computer use ที่สามารถเข้าถึงเบราว์เซอร์ของคุณทั้งหมดได้

35
00:02:36,178 --> 00:02:41,785
มันทำอะไรได้อีกหลายอย่าง แต่มาดูกันก่อนว่าหน้าตาอินเทอร์เฟซเป็นแบบไหน

36
00:02:41,785 --> 00:02:46,092
และมีอะไรที่คุณควรรู้บ้าง นี่คืออินเทอร์เฟซพื้นฐานของ

37
00:02:46,092 --> 00:02:50,073
Cursor ครับ จากตรงนี้คุณจะสร้าง agent ใหม่ หรือดู

38
00:02:50,073 --> 00:02:53,893
automations ที่คุณเคยตั้งไว้แล้วก็เห็นได้ที่นี่

39
00:02:53,893 --> 00:02:58,524
ตรง customization ไว้ปรับแต่งอะไรต่าง ๆ และมี Marketplace

40
00:02:58,524 --> 00:03:05,512
อยู่ด้วย ถ้าคุณอยากเชื่อมต่อ Cursor กับเครื่องมือที่คุณใช้อยู่เป็นประจำในชีวิตประจำวัน

41
00:03:05,512 --> 00:03:09,819
ก็ทำได้จากตรงนี้ ไม่ว่าจะเป็น DataDog, Figma, Linear,

42
00:03:09,819 --> 00:03:14,126
Appwrite และอีกเยอะแยะ เชื่อมต่อกับพวกมันได้โดยตรงเลย

43
00:03:14,126 --> 00:03:18,432
MCP ทั้งหลายถูกตั้งค่าไว้แล้ว คุณแค่กด add ก็เพิ่มได้

44
00:03:18,432 --> 00:03:22,252
ตรงนี้คุณจะเห็นโปรเจกต์ทั้งหมดที่คุณจะทำงานด้วย

45
00:03:22,252 --> 00:03:26,640
เราจะสร้างโปรเจกต์ใหม่แล้วเริ่มทำงานกับมัน แต่ก่อนอื่น

46
00:03:26,640 --> 00:03:31,596
นี่คืออินเทอร์เฟซที่คุณเห็นอยู่นี่ครับ ตรงนี้คุณมีโปรเจกต์แบบ

47
00:03:31,596 --> 00:03:35,415
local บนเครื่อง Mac เครื่องนี้ หรือจะไว้บน work

48
00:03:35,415 --> 00:03:39,641
tree หรือเมื่อคุณเชื่อมต่อ GitHub ก็รันจากตรงนั้นได้

49
00:03:39,641 --> 00:03:44,273
ตอนนี้ผมยังไม่ได้เชื่อมต่อ GitHub ของผม ผมจะทำโปรเจกต์แบบ

50
00:03:44,273 --> 00:03:49,717
local แต่คุณทำบน cloud ก็ได้เหมือนกัน นี่คือโมเดลทั้งหมดที่มีให้ใช้

51
00:03:49,717 --> 00:03:53,942
ตัวแรกคือ Composer 2.5 ซึ่งเป็นโมเดลที่เร็วที่สุดที่

52
00:03:53,942 --> 00:03:58,980
Cursor มี และวันนี้เราจะใช้ Composer กันครับ เรายังมีโมเดลอื่น

53
00:03:58,980 --> 00:04:02,881
ๆ อีก เช่น Opus 4.8, GPT-5.1, Fable 5, Codex 5.3

54
00:04:02,881 --> 00:04:07,269
และ Fable 5 คุณยังเพิ่มโมเดลอื่นได้อีก และยังมีฟีเจอร์

55
00:04:07,269 --> 00:04:11,250
plan, debug, multitask and ask, ส่งรูปภาพออกไปได้

56
00:04:11,250 --> 00:04:15,476
และใช้ skills ต่าง ๆ ได้ด้วย มี skill เยอะมาก รวมถึง

57
00:04:15,476 --> 00:04:19,701
fine skills, ความสามารถในการ fine-tuning, customize,

58
00:04:19,701 --> 00:04:23,845
preset, multi-deploy, Tiny Fish — ผมเคยลองทำอะไรกับ

59
00:04:23,845 --> 00:04:27,664
Tiny Fish อยู่เหมือนกัน ส่วน MCP servers ผมโหลด

60
00:04:27,664 --> 00:04:32,946
reload MCP server ไว้ แต่คุณเพิ่ม MCP server ได้เท่าที่ต้องการเลย

61
00:04:32,946 --> 00:04:37,009
นี่คือหน้าตาของ plan ถ้าเราจะต้องแก้ไขอะไรบางอย่าง

62
00:04:37,009 --> 00:04:41,397
เดี๋ยวค่อยทำกัน แต่เรามาเริ่มจากโปรเจกต์ใหม่ก่อนดีกว่า

63
00:04:41,397 --> 00:04:46,841
งั้นลองใช้ Cursor และทำความเข้าใจฟีเจอร์ต่าง ๆ ที่มันมีให้ดูกันครับ

64
00:04:46,841 --> 00:04:50,904
ขอผมลองพิมพ์ prompt ง่าย ๆ ดูสักอัน ผมพิมพ์ prompt

65
00:04:50,904 --> 00:04:55,373
ยังไงน่ะเหรอ? ผมกดปุ่ม function แล้วพูดออกไป มาดูกันว่า

66
00:04:55,373 --> 00:05:02,118
prompt จะขึ้นบนหน้าจอผมไหม — "เฮ้ Cursor ช่วยสร้างแอปพลิเคชันที่ให้ฉันอัปโหลดรูปภาพ

67
00:05:02,118 --> 00:05:06,262
แล้วแอปนั้นช่วยครอบตัด (crop) หรือปรับขนาด (resize)

68
00:05:06,262 --> 00:05:10,406
รูปให้ฉันได้ และฉันดาวน์โหลดรูปนั้นจากตรงนั้นได้เลย

69
00:05:10,406 --> 00:05:14,957
ใช้ Next.js หรือ tech stack อื่นที่คุณคิดว่าเหมาะสมก็ได้

70
00:05:14,957 --> 00:05:19,507
และขอให้แอปไม่หนักเกินไป เป็นแอปง่าย ๆ ก็พอ" เห็นไหมครับ

71
00:05:19,507 --> 00:05:24,301
ผมแค่กดปุ่ม function แล้วพูดออกไป มันก็ขึ้นมาบนหน้าจอแบบนี้

72
00:05:24,301 --> 00:05:30,233
ง่ายมาก และผมใช้ WhisperFlow สำหรับสิ่งนี้ ซึ่งช่วยประหยัดเวลาให้ผมได้มาก

73
00:05:30,233 --> 00:05:35,027
ไม่ใช่แค่ตอนนี้ แต่ผมใช้มันมา 6–8 เดือนแล้ว ประสบการณ์ดีมาก

74
00:05:35,027 --> 00:05:40,472
ๆ ผมประหยัดเวลาไปได้เยอะ ผมใช้มันบนโทรศัพท์ ใช้มันเพื่อสั่งงานโมเดล

75
00:05:40,472 --> 00:05:45,429
AI เหล่านี้ ใช้มันเขียนอีเมล ซึ่งช่วยได้มาก และเดี๋ยวผมจะโชว์

76
00:05:45,429 --> 00:05:49,410
use case ของ WhisperFlow เพิ่มเติมให้ดู แต่ตอนนี้

77
00:05:49,410 --> 00:05:53,961
prompt นี้คือ — "ช่วยสร้างแอปพลิเคชันที่ฉันอัปโหลดรูปภาพ

78
00:05:53,961 --> 00:06:00,543
แล้วแอปช่วยครอบตัดหรือปรับขนาดรูปให้ฉันได้ และฉันดาวน์โหลดรูปนั้นจากตรงนั้นได้เลย

79
00:06:00,543 --> 00:06:04,687
ใช้ Next.js หรือ tech stack อื่นที่คุณคิดว่าเหมาะสม

80
00:06:04,687 --> 00:06:09,481
และขอให้แอปไม่หนักเกินไป เป็นแอปง่าย ๆ ก็พอ" จะเห็นว่าผมให้

81
00:06:09,481 --> 00:06:16,063
prompt แบบมั่ว ๆ ไม่ได้เป็น prompt ที่นิยามไว้ชัดเจนหรือมีโครงสร้างดีอะไรขนาดนั้น

82
00:06:16,063 --> 00:06:19,882
ตอนนี้ผมใช้ Composer 2.5 เพราะเราอยากได้ prompt

83
00:06:19,882 --> 00:06:24,676
ที่เร็ว แต่มาดูกันว่ามันจะทำอะไร มันกำลังวางแผนขั้นตอนถัดไป

84
00:06:24,676 --> 00:06:28,739
(planning next moves) มันกำลังสร้างแอป Next.js แบบ

85
00:06:28,739 --> 00:06:33,208
lightweight สำหรับ crop/resize รูป โดยตรวจสอบ workspace

86
00:06:33,208 --> 00:06:37,352
ก่อน แล้วค่อย scaffold โปรเจกต์ มาดูกันว่ามันทำอะไร

87
00:06:37,352 --> 00:06:41,903
และตรงนี้คุณจะเห็นของทั้งหมดของโปรเจกต์ปัจจุบันของคุณได้

88
00:06:41,903 --> 00:06:45,803
ตัวอย่างเช่น ถ้าอยากไป terminal, อยากดู browser,

89
00:06:45,803 --> 00:06:49,785
อยากดู changes หรืออยากดู files พอผมคลิกที่ files

90
00:06:49,785 --> 00:06:56,936
คุณจะเห็นไฟล์ทั้งหมดที่มันจะสร้างขึ้นมา นี่คือไฟล์ที่มันจะสร้างสำหรับโปรเจกต์ปัจจุบันนี้

91
00:06:56,936 --> 00:07:02,543
และคุณเห็นว่ามันกำลังทำงานอยู่ตรงนี้ ลองดูว่ามันกำลังเรียนรู้อะไรอยู่

92
00:07:02,543 --> 00:07:06,768
มันกำลังคิดแบบนี้ — กำลังติดตั้ง dependencies ใช้ค่า

93
00:07:06,768 --> 00:07:10,587
default สำหรับตัวเลือกที่เราไม่ได้ระบุ สร้างแอป

94
00:07:10,587 --> 00:07:14,650
Next.js ใหม่ เริ่มต้นโปรเจกต์ด้วย template ติดตั้ง

95
00:07:14,650 --> 00:07:19,769
dependencies และติดตั้ง dependencies ต่อ และรอให้มันทำงานกลับมา

96
00:07:19,769 --> 00:07:24,320
นี่คือ README มันจะยังอัปเดตมันอีก แต่เรายังต้องรอไปก่อน

97
00:07:24,320 --> 00:07:30,902
จากตรงนี้คุณเช็คได้หลายอย่าง เช่น นี่คือเบราว์เซอร์ที่ใช้ดูแอปที่คุณกำลังสร้างได้

98
00:07:30,902 --> 00:07:36,833
นี่คือ terminal ที่คุณจะใช้ นี่คือที่ที่คุณเห็นไฟล์ทั้งหมดที่ถูกสร้างขึ้น

99
00:07:36,833 --> 00:07:41,384
และเห็น changes ทั้งหมดใน repository ของคุณ ไม่ว่าจะเป็น

100
00:07:41,384 --> 00:07:45,853
staged, unstaged หรือ current changes และจากตรงนี้คุณก็

101
00:07:45,853 --> 00:07:50,322
deploy ไปที่ GitHub ของคุณหรือที่อื่นก็ได้ตามที่ต้องการ

102
00:07:50,322 --> 00:07:54,385
เป็นไปได้ทั้งหมดเลย ครับ มันบอกว่า waiting for the

103
00:07:54,385 --> 00:07:59,586
shell, planning next moves — รออีกสักครู่ ระหว่างที่มันทำงานอยู่

104
00:07:59,586 --> 00:08:04,380
ผมจะโชว์ use case ของ WhisperFlow เพิ่มอีกสักสองสามอันให้ดู

105
00:08:04,380 --> 00:08:08,443
เพื่อให้เห็นว่า output ที่ได้มามันมีโครงสร้างยังไง

106
00:08:08,443 --> 00:08:13,725
ผมจะพูดอะไรสักอย่างแล้วมาดูกันว่ามันจะเขียนออกมาเป็นระเบียบแค่ไหน

107
00:08:13,725 --> 00:08:17,788
— "ช่วยสร้างแอปพลิเคชันที่ไม่หนักมาก แต่ควรมี tech

108
00:08:17,788 --> 00:08:22,013
stack ต่อไปนี้ หนึ่ง Next.js ใช้ฐานข้อมูล PostgreSQL

109
00:08:22,013 --> 00:08:26,076
SQL ควรใช้ library อื่นสำหรับ UI ควรเข้าถึงได้ง่าย

110
00:08:26,076 --> 00:08:30,464
และฉันควรมีแผนการกระจาย (distribution plan) สำหรับมัน"

111
00:08:30,464 --> 00:08:37,371
ผมให้ prompt นี้ไปแล้ว มันก็เขียน prompt ของผมออกมาเป็นหัวข้อห้าข้อตามที่ผมต้องการเลย

112
00:08:37,371 --> 00:08:42,653
ทั้งเครื่องหมายวรรคตอน การสะกดคำ และความหมายที่ตรงกับสิ่งที่ผมพูด

113
00:08:42,653 --> 00:08:48,828
มันเจ๋งมาก และผมยังใช้มันเขียนอีเมลให้ใครก็ได้ มันไม่รู้สึกเหมือนถูกเขียนโดย

114
00:08:48,828 --> 00:08:54,435
AI เลย อ่อ เรายังไม่ได้ใช้มันจริง ๆ นะ ผมแค่โชว์ให้ดูว่ามันทำงานยังไง

115
00:08:54,435 --> 00:08:59,717
อีกอย่าง ตอนนี้ผมใช้แผน Pro ของ Cursor อยู่ คุณเริ่มจากแผนฟรีก่อน

116
00:08:59,717 --> 00:09:04,511
แล้วค่อยอัปเกรดเป็น Pro ตามการใช้งานและความต้องการของคุณได้

117
00:09:04,511 --> 00:09:08,655
และนี่คือหน้าตั้งค่า คุณทำอะไรได้หลายอย่างใน Cursor

118
00:09:08,655 --> 00:09:12,637
ไม่ว่าจะเป็น plan, มี agent ต่าง ๆ, มี Cursor Tab

119
00:09:12,637 --> 00:09:18,244
ถ้าอยากปรับแต่งตามที่คุณต้องการ, มีโมเดลหลายตัวให้เข้าถึงได้จากตรงนี้

120
00:09:18,244 --> 00:09:23,200
คุณเพิ่มโมเดลแบบ custom ของตัวเองก็ได้ ผมเคยลองใช้โมเดลบางตัว

121
00:09:23,200 --> 00:09:27,832
เช่น โมเดลจีนอย่าง DeepSeek และ Qwen ก็มีอีกหลายอย่างเช่น

122
00:09:27,832 --> 00:09:32,220
rules, skills, sub agent tools, MCPs, hooks, indexing,

123
00:09:32,220 --> 00:09:36,608
network และ docs ส่วนนี้เป็นข้อมูลทั่วไปเกี่ยวกับบัญชี

124
00:09:36,608 --> 00:09:41,240
เกี่ยวกับ appearance เท่านั้นเอง เอาล่ะ ผมว่ามันเสร็จแล้ว

125
00:09:41,240 --> 00:09:45,303
— แอป crop และ resize รูปของคุณพร้อมแล้วในโฟลเดอร์

126
00:09:45,303 --> 00:09:49,609
image editor โดย dev server รันอยู่ที่ localhost:3000

127
00:09:49,609 --> 00:09:54,485
นี่คือแอปพลิเคชันที่มันสร้างขึ้นมา ผมขอให้มันทำแบบมินิมอลมาก

128
00:09:54,485 --> 00:09:58,629
ๆ มาลองดูกันว่าผมทำได้ไหม ผมจะคลิกเข้าไป อัปโหลดรูป

129
00:09:58,629 --> 00:10:02,773
แล้วผมอยาก crop มัน ถ้าผมอยาก crop ผมจะ crop ยังไง?

130
00:10:02,773 --> 00:10:06,674
ถ้าผมอยากได้แค่ส่วนนี้ของรูป ผมก็คลิก apply crop

131
00:10:06,674 --> 00:10:11,712
เท่านี้ก็ได้รูปที่ต้องการมาแล้ว จากนั้นผมดาวน์โหลดรูปนี้ได้เลย

132
00:10:11,712 --> 00:10:17,968
ว้าว เสร็จแล้วใช่ไหมครับ นี่คือวิธีที่ผมสร้างแอปพลิเคชันที่ใช้งานได้จริงภายใน

133
00:10:17,968 --> 00:10:22,031
Cursor ได้อย่างง่ายดายขนาดนี้ แทนที่จะ crop ผมอยาก

134
00:10:22,031 --> 00:10:26,257
resize แทน สมมติว่านี่คือขนาดที่ผมอยากได้ ลอง resize

135
00:10:26,257 --> 00:10:30,401
เป็น 2000 x 1000 พิกเซล หรือถ้าไม่อยากล็อกอัตราส่วน

136
00:10:30,401 --> 00:10:34,383
(aspect ratio) มันก็จะให้ผลลัพธ์แปลก ๆ ออกมา ผมกด

137
00:10:34,383 --> 00:10:38,446
apply resize แล้ว ผม resize ได้ และดาวน์โหลดรูปได้

138
00:10:38,446 --> 00:10:42,996
เจ๋งมากใช่ไหมครับ ผมดาวน์โหลดรูปได้แล้ว และแอปนี้รันจริง

139
00:10:42,996 --> 00:10:46,896
ๆ ด้วย อีกอย่างหนึ่งนะ ผมจะรีเฟรชหน้าก่อน นี่คือ

140
00:10:46,896 --> 00:10:51,609
design agent ซึ่งผมแค่คลิกแล้วไปยังส่วนใดก็ได้ของดีไซน์นี้

141
00:10:51,609 --> 00:10:56,160
แล้วขอให้มันแก้ไขได้ เช่น นี่คือรูปใช่ไหมครับ ผมจะบอกว่า

142
00:10:56,160 --> 00:11:01,685
— "จะพิมพ์ทำไม ในเมื่อใช้ WhisperFlow ได้ — เปลี่ยนสีอันนี้เป็นสีดำ"

143
00:11:01,685 --> 00:11:06,236
มาดูกันว่ามันทำได้ไหม เห็นไหมว่ามันจะเริ่มประมวลผลตรงนี้

144
00:11:06,236 --> 00:11:12,086
นี่เป็นแค่ฟีเจอร์หนึ่งของ WhisperFlow เท่านั้น ยังมีฟีเจอร์อื่นอีกมากมาย

145
00:11:12,086 --> 00:11:16,393
เช่น file tagging เดี๋ยวผมจะโชว์ให้ดูว่า file tagging

146
00:11:16,393 --> 00:11:20,212
ทำงานยังไง มีคนใช้กันหลายคน ไม่ว่าคุณจะมาจากสาย

147
00:11:20,212 --> 00:11:24,925
tech หรือไม่ใช่ tech ก็ใช้ได้ง่ายมาก ตอนนี้มันกำลังแก้ไฟล์

148
00:11:24,925 --> 00:11:29,557
image editor.tsx อยู่ มาดูกัน — เห็นไหมครับ สีเปลี่ยนแล้ว

149
00:11:29,557 --> 00:11:33,864
ตอนนี้มันใช้พื้นหลังสีเทาอ่อนกับไอคอนสีดำแทนสี indigo

150
00:11:33,864 --> 00:11:39,145
จะเห็นว่าสีเปลี่ยนไปจริง ๆ ทีนี้ ตัวอย่างเช่น ถ้าอยากแก้อย่างอื่น

151
00:11:39,145 --> 00:11:46,459
ผมเลือกกล่องนี้แล้วบอกว่า — หรือผมอาจจะขอให้มันเปลี่ยนฟอนต์เป็นอะไรที่ดูมีเอกลักษณ์มากขึ้น

152
00:11:46,459 --> 00:11:51,172
อ่านง่ายขึ้นหน่อย มาดูกันว่ามันทำอะไร เห็นไหมครับว่าเราใช้

153
00:11:51,172 --> 00:11:55,072
design agent ได้ง่ายแค่ไหน มันเข้าไปที่ไฟล์ HTML

154
00:11:55,072 --> 00:11:59,460
นั้น เปลี่ยนฟอนต์ และทุกอย่าง จนได้ผลลัพธ์สุดท้ายออกมา

155
00:11:59,460 --> 00:12:03,523
นี่คือความง่ายในการทำงานให้เสร็จภายใน Cursor ของผม

156
00:12:03,523 --> 00:12:07,423
และตรงนี้ ถ้าอยากดู console — ขอดู console หน่อย

157
00:12:07,423 --> 00:12:11,567
ผมอยากแก้บางอย่างตรงนี้ — คุณเห็น console, sources,

158
00:12:11,567 --> 00:12:16,605
network, performance และอื่น ๆ ได้หมด ตรงนี้ถ้าผมอยากแคปหน้าจอ

159
00:12:16,605 --> 00:12:23,187
(screenshot), hard reload, คัดลอก URL ปัจจุบัน ก็ทำได้เหมือนที่เราทำในเบราว์เซอร์

160
00:12:23,187 --> 00:12:27,819
Chromium ทั่วไป มาดูกันว่าฟอนต์จะเปลี่ยนไหม ผมกำลังรออยู่

161
00:12:27,819 --> 00:12:31,638
ครับ ผมว่าฟอนต์เปลี่ยนแล้ว ตอนแรกเป็นฟอนต์หนึ่ง

162
00:12:31,638 --> 00:12:35,945
ตอนนี้เป็นอีกฟอนต์หนึ่ง ตอนนี้ title ใช้ฟอนต์ Frances

163
00:12:35,945 --> 00:12:40,008
ซึ่งเป็นฟอนต์อีกแบบที่ผมใช้อยู่ แต่กลับไปที่ files

164
00:12:40,008 --> 00:12:45,127
กันดีกว่า เอาล่ะ นี่คือไฟล์บางส่วน สมมติว่าผมอยากตรวจคุณภาพโค้ด

165
00:12:45,127 --> 00:12:49,515
(code quality) และอยากให้ Cursor ตรวจไฟล์ package.json

166
00:12:49,515 --> 00:12:53,578
ว่ามีปัญหาคุณภาพโค้ดอะไรไหม หรือจะให้เขียน comment

167
00:12:53,578 --> 00:12:58,616
ประกอบฟีเจอร์และฟังก์ชันต่าง ๆ ก็ได้ ผมเพิ่งสั่งด้วยการพูดผ่าน

168
00:12:58,616 --> 00:13:02,435
WhisperFlow และมันก็แท็กชื่อไฟล์ไว้ให้แล้ว file

169
00:13:02,435 --> 00:13:08,204
tagging ใช้ได้กับ WhisperFlow นี้ด้วย ผมแค่คลิกเข้าไปแล้วดูว่ามันทำอะไร

170
00:13:08,204 --> 00:13:13,567
— เห็นไหมครับ ไฟล์ package.json เปิดอยู่ และมันกำลังตรวจคุณภาพโค้ด

171
00:13:13,567 --> 00:13:17,387
ถ้ามี comment ที่ควรเขียน มันก็จะเขียนให้ ทีนี้

172
00:13:17,387 --> 00:13:21,774
สมมติว่าระหว่างที่มันทำงานอยู่นี้ ผมอยากทำอย่างอื่นต่อ

173
00:13:21,774 --> 00:13:26,406
แทนที่จะรอ ผมอยากให้มี agent อีกตัวทำงานคู่กัน (parallel)

174
00:13:26,406 --> 00:13:31,769
ผมจะให้ prompt อีกครั้ง — "ช่วยสร้างแอปพลิเคชันที่ฉันอัปโหลดรูปภาพ

175
00:13:31,769 --> 00:13:35,588
แล้วเปลี่ยนรูปแบบ (configuration) ของรูปนั้นจาก

176
00:13:35,588 --> 00:13:41,033
JPG เป็น PNG เป็น SVG และอื่น ๆ ได้ด้วย ขอเป็นแอปที่ง่ายมากอีกครั้ง

177
00:13:41,033 --> 00:13:45,096
และช่วยทำให้แอปนั้นเสร็จด้วย" เห็นไหมครับ ตอนนี้มี

178
00:13:45,096 --> 00:13:48,915
agent อีกตัวทำงานคู่ขนานไปกับ agent ตัวนี้ ครับ

179
00:13:48,915 --> 00:13:54,684
อันนี้เปลี่ยนไปแล้ว — "ผมอยากปรับปรุง UI สำหรับแอปอัปโหลดและแก้ไขรูปนี้

180
00:13:54,684 --> 00:13:58,991
ขอให้มันดูไดนามิก และพื้นหลังทั้งหมดเป็นสีดำ" มาดูกัน

181
00:13:58,991 --> 00:14:03,216
ตอนนี้ agent สองตัวทำงานคู่กันภายใน Cursor ของผมแล้ว

182
00:14:03,216 --> 00:14:07,442
ทีนี้ สมมติว่าผมอยากได้ agent ตัวที่สาม — "สร้างหน้า

183
00:14:07,442 --> 00:14:11,504
sample ที่ผมเข้าถึงแอปทั้งสองที่เราสร้างไว้แล้วได้

184
00:14:11,504 --> 00:14:17,193
คือแอปอัปโหลดและแก้ไขรูป ที่ผมสลับไปมาระหว่างรูปหนึ่งกับอีกรูปหนึ่งได้

185
00:14:17,193 --> 00:14:21,337
และอันที่สองคือแอปแปลงรูปภาพ (image converter) ทั้ง

186
00:14:21,337 --> 00:14:25,237
resize และ crop ฟีเจอร์ทั้งหมดนี้ควรเป็น toolbar

187
00:14:25,237 --> 00:14:30,681
หรือแท็บสามอันบนสุดของหน้าเว็บนั้น เพื่อให้ผมเข้าถึงทั้งสามอย่างได้

188
00:14:30,681 --> 00:14:34,663
แล้วผมจะเอาเว็บไซต์นี้ไปโฮสต์ที่ไหนสักแห่ง" ผมให้

189
00:14:34,663 --> 00:14:39,132
prompt นี้ไปแล้ว และมันก็ให้ผลลัพธ์ข้อหนึ่ง ข้อสองออกมา

190
00:14:39,132 --> 00:14:44,902
ตอนนี้ agent ทั้งสามตัวรันคู่กันหมดแล้ว — ตัวหนึ่งกำลังสร้างแอปพลิเคชัน

191
00:14:44,902 --> 00:14:50,265
ตัวหนึ่งกำลังปรับปรุง UI ของแอป ตัวหนึ่งกำลังทำแอปแปลงรูปแบบรูปภาพ

192
00:14:50,265 --> 00:14:54,571
มาดูกันว่าผลออกมาเป็นแบบไหน นี่คือ UI ใหม่ที่มันให้มา

193
00:14:54,571 --> 00:14:58,472
ดูเท่ดีอีกแล้ว — Browser base editor, image crop

194
00:14:58,472 --> 00:15:03,022
and resize — อัปโหลดรูป, crop, resize ในเบราว์เซอร์ของผม

195
00:15:03,022 --> 00:15:06,841
ขอลองอีกครั้ง ผมใส่รูปของผมเข้าไป ผมอยาก resize

196
00:15:06,841 --> 00:15:11,067
ผมอยาก crop ทำได้ทั้ง crop และ resize เท่านี้ก็เสร็จ

197
00:15:11,067 --> 00:15:17,892
ใช่ไหมครับ แบบนี้คุณก็ซูมเข้า ซูมออกได้ ฉันทำให้มันเปลี่ยนสีเพื่อให้เห็นชัดขึ้นก็ได้

198
00:15:17,892 --> 00:15:21,712
แต่มาดูกันว่าแอปตัวที่สองของผมสร้างเสร็จหรือยัง

199
00:15:21,712 --> 00:15:25,693
และมีหน้าที่สามซึ่งเป็นหน้า hub สำหรับ navigation

200
00:15:25,693 --> 00:15:30,731
ด้านบนไปยังแอปทั้งสองที่เราสร้างไว้ ทั้งสามอย่างกำลังรันคู่กัน

201
00:15:30,731 --> 00:15:34,713
และเราสามารถเชื่อมโยงมันเข้าด้วยกันได้ด้วย Cursor

202
00:15:34,713 --> 00:15:38,938
นี่เป็นบทเรียนง่าย ๆ เกี่ยวกับวิธีใช้ Cursor แต่จริง

203
00:15:38,938 --> 00:15:42,920
ๆ แล้วยังมีอะไรอีกมากมายให้คุณลอง ผมจะแปะลิงก์ของ

204
00:15:42,920 --> 00:15:47,877
WhisperFlow ไว้ในคำอธิบายด้านล่างด้วย อย่าลืมไปลองดูกันนะครับ

205
00:15:47,877 --> 00:15:52,102
คุณอาจได้สิทธิ์ใช้งาน WhisperFlow ฟรีในช่วงเวลาหนึ่ง

206
00:15:52,102 --> 00:15:59,253
ลองใช้ดูถ้ารู้สึกว่ามันมีประโยชน์ มันติดใจมาก แต่ในขณะเดียวกันก็ช่วยประหยัดเวลาผมได้เยอะ

207
00:15:59,253 --> 00:16:04,453
ถ้าอยากประหยัดเวลา ต้องลองดู เอาล่ะ นี่คือแอปพลิเคชันที่ผมมีอยู่

208
00:16:04,453 --> 00:16:08,435
— นี่คือแอปแปลงรูปแบบรูปภาพบน localhost ผมใส่ไฟล์

209
00:16:08,435 --> 00:16:13,148
PNG เข้าไป ผมอยากแปลง PNG นี้เป็น JPG แล้วดาวน์โหลดไฟล์นี้

210
00:16:13,148 --> 00:16:17,048
ตอนนี้ดาวน์โหลดเสร็จแล้ว และผมมีตัวแปลง PNG เป็น

211
00:16:17,048 --> 00:16:22,005
JPG เรียบร้อย ทั้งสองอย่างเสร็จแล้ว — ทั้งตัวแปลงรูปแบบรูปภาพ

212
00:16:22,005 --> 00:16:27,531
และฟังก์ชัน resize และ crop รูป ตอนนี้หน้าการเข้าถึงเครื่องมือรูปภาพ

213
00:16:27,531 --> 00:16:33,219
(image tools access page) กำลังถูกสร้างอยู่ มาดูกันว่าใช้เวลานานแค่ไหน

214
00:16:33,219 --> 00:16:37,688
และสำหรับทั้งหมดนี้เราใช้ Composer 2.5 ซึ่งเป็นโมเดลที่

215
00:16:37,688 --> 00:16:41,751
Cursor ทำเองใน-house แต่คุณใช้โมเดลไหนก็ได้ที่ถนัด

216
00:16:41,751 --> 00:16:46,058
ไม่ว่าจะเป็น Opus 4.5 คุณมีตัวเลือกครบจากผู้ให้บริการ

217
00:16:46,058 --> 00:16:49,958
LLM หลายราย ไม่ว่าจะเป็น Sonnet, GPT, Anthropic,

218
00:16:49,958 --> 00:16:54,833
OpenAI, Claude และถ้าอยากเพิ่มโมเดลของตัวเองก็ทำได้เหมือนกัน

219
00:16:54,833 --> 00:16:58,815
มันกำลังสร้างหน้านี้อยู่ ขอรอให้มันสร้างเสร็จก่อน

220
00:16:58,815 --> 00:17:03,853
ระหว่างนี้ผมมีตัวแปลงรูปภาพ (image converter), โปรแกรมแก้ไขรูป

221
00:17:03,853 --> 00:17:08,078
(image editor) และเรามีแอปชุดเครื่องมือรูปภาพ (image

222
00:17:08,078 --> 00:17:12,141
suite app) ด้วย นี่คือที่ที่มันถูกโฮสต์อยู่ เอาล่ะ

223
00:17:12,141 --> 00:17:16,367
นี่คือแอปพลิเคชัน ถ้าผมอยากโฮสต์มัน ถ้าผมอยาก deploy

224
00:17:16,367 --> 00:17:20,917
ผมก็ทำได้ นี่คือแอปสองตัว — crop/resize และตัวแปลงรูปแบบ

225
00:17:20,917 --> 00:17:25,224
ถ้าคุณคลิกที่ตัวแปลงรูปแบบ ผมจะถูกพาไปยังหน้าเดียวกัน

226
00:17:25,224 --> 00:17:30,587
ที่ผมแค่ให้แอป ให้รูปของผม แล้วแปลงมันเป็น SVG แล้วดาวน์โหลดได้เลย

227
00:17:30,587 --> 00:17:34,487
ใช่ไหมครับ และนี่คือ use case ที่สำคัญและเจ๋งมาก

228
00:17:34,487 --> 00:17:38,388
เราทุกคนเคยทำแบบนี้เวลาค้นหารูปออนไลน์ และอันนี้

229
00:17:38,388 --> 00:17:42,207
crop/resize — ถ้าอยาก crop และ resize ผมก็ทำได้

230
00:17:42,207 --> 00:17:46,270
เท่านี้ก็เสร็จเรียบร้อย จบแล้วสำหรับบทเรียน Cursor

231
00:17:46,270 --> 00:17:51,795
นี้ครับ ถ้ามีข้อสงสัยอะไร ตรงไหนติดขัด บอกผมในคอมเมนต์ด้านล่างได้เลย

232
00:17:51,795 --> 00:17:59,596
แต่ยังมีฟีเจอร์อื่นอีกมากมายให้คุณได้สำรวจ ถ้าอยากให้ผมทำวิดีโอเกี่ยวกับเครื่องมือพวกนี้เพิ่มอีก

233
00:17:59,596 --> 00:18:03,984
บอกผมในคอมเมนต์ได้เลยครับ นี่คือทั้งหมดสำหรับวิดีโอนี้

234
00:18:03,984 --> 00:18:09,672
ขอบคุณมาก ๆ และอย่าลืมไปลองใช้ WhisperFlow กับกดติดตามเพื่อรับคอนเทนต์

235
00:18:09,672 --> 00:18:12,760
AI เจ๋ง ๆ แบบนี้เพิ่มเติมบนช่องนี้ครับ