Ultimate Vibe Coding Guide for Beginners

1
00:00:00,000 --> 00:00:04,000
วิดีโอนี้คือบทช่วยสอน vibe coding ฉบับสมบูรณ์สำหรับมือใหม่สุดๆ

2
00:00:04,000 --> 00:00:08,193
ในวิดีโอนี้ผมจะพาคุณดูวิธีตั้งค่าสภาพแวดล้อม เลือกโมเดลที่ถูกต้อง

3
00:00:08,193 --> 00:00:11,742
เชื่อมต่อเครื่องมือต่างๆ สร้างอะไรบางอย่างที่มีประโยชน์

4
00:00:11,742 --> 00:00:15,290
แล้วก็ดีพลอย์มันอย่างปลอดภัยเพื่อให้คนอื่นใช้งานได้จริง

5
00:00:15,290 --> 00:00:19,161
ผมจะอธิบายทุกอย่างโดยสมมติว่าคุณไม่มีความรู้พื้นฐานมาก่อนเลย

6
00:00:19,161 --> 00:00:22,838
พอจบวิดีโอนี้ คุณจะได้แอปพลิเคชันที่ดีพลอย์เสร็จเรียบร้อย

7
00:00:22,838 --> 00:00:26,193
สามารถแชร์ให้คนอื่นได้ เอาล่ะ เราไปดูกันเลย ก่อนอื่น

8
00:00:26,193 --> 00:00:30,902
ขอสรุปคร่าวๆ ว่า vibe coding คืออะไร แล้วค่อยไปดูขั้นตอนสำคัญที่ต้องทำตาม

9
00:00:30,902 --> 00:00:35,870
ง่ายๆ เลย vibe coding ก็คือการสร้างอะไรสักอย่างโดยไม่ต้องไปทบทวนโค้ดทุกบรรทัด

10
00:00:35,870 --> 00:00:39,224
แปลว่าคุณแค่ "ไวบ์" ไปเรื่อยๆ — พิมพ์พรอมป์ (คำสั่ง)

11
00:00:39,224 --> 00:00:43,547
ใส่โมเดล แล้วก็ได้ผลลัพธ์กลับมา คุณไม่จำเป็นต้องเป็นวิศวกรซอฟต์แวร์

12
00:00:43,547 --> 00:00:47,611
ไม่ต้องเป็นคนสายเทคนิค และในหลายกรณีคุณไม่ต้องแคร์คุณภาพของโค้ด

13
00:00:47,611 --> 00:00:52,385
แค่แคร์ผลลัพธ์สุดท้ายเท่านั้น แน่นอนว่าวิธีนี้อาจให้ผลลัพธ์ที่ไม่คาดคิดได้

14
00:00:52,385 --> 00:00:56,321
แต่มีวิธีที่จะทำให้คุณ vibe code ได้อย่างมีประสิทธิภาพมากขึ้น

15
00:00:56,321 --> 00:00:59,611
ซึ่งคือสิ่งที่ผมจะโชว์ให้ดูในวิดีโอนี้ เวลาคุณ vibe

16
00:00:59,611 --> 00:01:03,095
coding มีกระบวนการที่ควรทำตาม ซึ่งก็คือขั้นตอนเหล่านี้

17
00:01:03,095 --> 00:01:07,094
ขั้นแรก ตั้งค่าสภาพแวดล้อมของคุณ เชื่อมต่อเครื่องมือที่ถูกต้อง

18
00:01:07,094 --> 00:01:12,062
แล้วก็เข้าสู่ขั้นตอนการวางแผน ตอนวางแผน เราต้องเข้าใจว่าเราอยากสร้างอะไรจริงๆ

19
00:01:12,062 --> 00:01:15,223
อะไรคือคำว่า "เสร็จ" และเราอยากให้มันทำอะไรสำเร็จ

20
00:01:15,223 --> 00:01:19,094
จากนั้นก็เริ่มสร้างมันออกมา ทบทวนทุกอย่าง ให้แน่ใจว่าปลอดภัย

21
00:01:19,094 --> 00:01:22,449
แล้วก็ดีพลอย์ โอเค ขอสรุปอีกรอบ ตั้งค่า วางแผน สร้าง

22
00:01:22,449 --> 00:01:26,190
ทบทวน แล้วก็ดีพลอย์ ผมจะพาคุณผ่านทั้งห้าขั้นตอนในวิดีโอนี้

23
00:01:26,190 --> 00:01:29,674
และถ้าคุณทำตามกระบวนการนี้ คุณจะได้ผลลัพธ์ที่ดีกว่ามาก

24
00:01:29,674 --> 00:01:34,190
เป็นอะไรที่ใช้งานได้จริง เริ่มกันเลย เราเริ่มกันที่เฟสแรกคือการตั้งค่า

25
00:01:34,190 --> 00:01:37,674
(setup) ในความคิดของผม นี่คือเฟสที่สำคัญที่สุดเฟสหนึ่ง

26
00:01:37,674 --> 00:01:42,061
เพราะถ้าคุณตั้งค่าสภาพแวดล้อมถูกต้อง คุณจะได้ผลลัพธ์ที่ดีขึ้นในทันที

27
00:01:42,061 --> 00:01:46,899
ไม่ว่าคุณจะพรอมป์โมเดลแบบไหนก็ตาม ในการตั้งค่า มีสองสามอย่างที่ต้องตัดสินใจ

28
00:01:46,899 --> 00:01:49,996
อย่างแรกคือตัวเอเจนต์ หรือแอปพลิเคชันที่เราจะใช้

29
00:01:49,996 --> 00:01:53,415
vibe code แอปของเรา ซึ่งหมายความว่าเราเลือกได้ระหว่าง

30
00:01:53,415 --> 00:01:57,931
Claude Code, Codex, Cursor, Replit, Bolt — มีเครื่องมือให้เลือกเยอะมาก

31
00:01:57,931 --> 00:02:01,028
ขั้นแรกคือการเข้าใจว่าเราอยากใช้เครื่องมือตัวไหน

32
00:02:01,028 --> 00:02:04,060
โดยทั่วไปแล้ว การใช้เครื่องมืออย่าง Claude Code

33
00:02:04,060 --> 00:02:07,157
เหมาะกับมือใหม่มาก ดังนั้นวิดีโอนี้ผมจะใช้ตัวนี้

34
00:02:07,157 --> 00:02:11,802
แต่คุณเลือกเครื่องมือไหนก็ได้ที่อยากใช้ ขอแค่รู้เหตุผลว่าทำไมถึงเลือกมัน

35
00:02:11,802 --> 00:02:16,640
และเข้าใจก่อนว่าอยากสร้างอะไร ตัวอย่างเช่น ถ้าคุณแค่อยากสร้างแลนดิงเพจง่ายๆ

36
00:02:16,640 --> 00:02:19,995
ไม่ได้แคร์โค้ดหรือการตั้งค่ามากนัก Hostinger Horizon

37
00:02:19,995 --> 00:02:23,221
ก็ค่อนข้างดี แต่ถ้าอยากสร้างอะไรที่ซับซ้อนกว่านั้น

38
00:02:23,221 --> 00:02:27,672
ที่ต้องมีแบ็กเอนด์ เชื่อมต่อกับฐานข้อมูล คุณอาจอยากใช้เครื่องมืออย่าง

39
00:02:27,672 --> 00:02:31,285
Cursor ดังนั้นลองไปหาข้อมูลดูว่าเครื่องมืออะไรมีอยู่บ้าง

40
00:02:31,285 --> 00:02:34,317
แล้วค่อยเลือกสักตัว สำหรับพวกคุณส่วนใหญ่ การใช้

41
00:02:34,317 --> 00:02:38,252
Claude Code เป็นตัวเลือกที่ปลอดภัยมาก สิ่งที่ผมทำคือดาวน์โหลด

42
00:02:38,252 --> 00:02:42,381
Claude Code — ดาวน์โหลดแอปพลิเคชันเดสก์ท็อปซึ่งฟรีจากเว็บไซต์ของ

43
00:02:42,381 --> 00:02:46,897
Anthropic แล้วก็ล็อกอินเข้าบัญชีของผม เครื่องมือพวกนี้หลายตัวใช้ฟรีได้

44
00:02:46,897 --> 00:02:53,800
แต่โดยปกติคุณต้องสมัครสมาชิกประมาณ 20 เหรียญต่อเดือนเพื่อให้ได้เครดิตการใช้งานพอที่จะสร้างอะไรที่มีความหมาย

45
00:02:53,800 --> 00:02:57,155
ในกรณีของผม ผมมีสมาชิก Claude อยู่แล้ว ล็อกอินเข้าไป

46
00:02:57,155 --> 00:03:00,187
และนี่คือเครื่องมือที่ผมจะใช้ พอเลือกเครื่องมือ

47
00:03:00,187 --> 00:03:06,187
vibe coding ได้แล้ว ขั้นต่อไปคือการตั้งค่ามัน ซึ่งแน่นอนว่าแตกต่างกันไปตามเครื่องมือที่คุณใช้

48
00:03:06,187 --> 00:03:10,122
แต่ถ้าดูวิดีโอนี้ ผมแนะนำให้ใช้ Claude Code แล้วทำตามผมไปด้วย

49
00:03:10,122 --> 00:03:13,219
หลังจากดาวน์โหลด Claude Code ลงคอมพิวเตอร์แล้ว —

50
00:03:13,219 --> 00:03:16,380
ซ้ำอีกครั้ง มันง่ายมาก คุณแค่ดาวน์โหลดจากเว็บไซต์

51
00:03:16,380 --> 00:03:19,735
— ผมล็อกอินเข้าบัญชี แล้วก็สลับไปที่แท็บ Code ตรงนี้

52
00:03:19,735 --> 00:03:23,928
โอเค คุณควรเห็นคำว่า Code อยู่มุมซ้ายบน นี่คือที่ที่เรามักจะทำงาน

53
00:03:23,928 --> 00:03:27,154
โดยเฉพาะถ้าเราจะสร้างแอปพลิเคชันเต็มรูปแบบ จากแท็บ

54
00:03:27,154 --> 00:03:31,412
Code ผมกด New Session แล้วคุณจะเห็นว่ามันพาเรามาที่หน้าตาประมาณนี้

55
00:03:31,412 --> 00:03:34,831
จากตรงนี้ สิ่งแรกที่เราจะทำคือเลือกโฟลเดอร์ที่จะทำงาน

56
00:03:34,831 --> 00:03:38,637
คุณจะเห็นว่ามันเลือกโฟลเดอร์ให้อัตโนมัติเพราะผมเคยใช้มาก่อน

57
00:03:38,637 --> 00:03:44,315
แต่ผมจะไปที่ Open Folder เพื่อเลือกโฟลเดอร์เอง ผมจะไปที่เดสก์ท็อปหรือที่ไหนก็ได้ที่สะดวก

58
00:03:44,315 --> 00:03:47,347
แล้วสร้างโฟลเดอร์ใหม่ ตั้งชื่อว่า "vibe" ไปก่อน

59
00:03:47,347 --> 00:03:50,379
เพราะนี่จะใช้เก็บโปรเจกต์ของผม นี่คือขั้นตอนแรก

60
00:03:50,379 --> 00:03:54,250
เวลาใช้ Claude Code คุณต้องเลือกไดเรกทอรีที่คุณจะทำงานข้างใน

61
00:03:54,250 --> 00:03:59,088
พอเลือกเสร็จ ขั้นต่อไปคือเลือกโมเดล คุณจะเห็นว่ามีตัวเลือกโมเดลอยู่ด้านล่าง

62
00:03:59,088 --> 00:04:02,830
ผมจะใช้ Opus 4.5 ซึ่งเป็นโมเดลที่ดีที่สุดที่มีอยู่ในตอนนี้

63
00:04:02,830 --> 00:04:06,249
แต่ถ้าคุณไม่อยากใช้เครดิตเยอะ คุณใช้ Opus หรือ Sonnet

64
00:04:06,249 --> 00:04:09,540
ก็ได้ โมเดลไม่สำคัญมากนัก โดยเฉพาะสำหรับมือใหม่สุดๆ

65
00:04:09,540 --> 00:04:12,894
ส่วนใหญ่ปล่อยไว้ที่ตัวเลือกที่ดีที่สุดที่มีให้ได้เลย

66
00:04:12,894 --> 00:04:16,442
และถ้าเครดิตจะหมดก็ค่อยลดลงมาใช้ตัวที่กินเครดิตน้อยกว่า

67
00:04:16,442 --> 00:04:20,636
โอเค จากตรงนี้เรายังมีโหมดคิด (thinking mode) หรือระดับความพยายาม

68
00:04:20,636 --> 00:04:25,732
(effort) ผมมักจะปล่อยไว้ที่ระดับ High ตรงนี้ ถ้าอยากได้สูงกว่านั้นก็ปรับขึ้นได้

69
00:04:25,732 --> 00:04:29,023
แต่ว่าในหลายกรณีมันไม่ได้ให้ประโยชน์เพิ่มขึ้นมากนัก

70
00:04:29,023 --> 00:04:33,216
แถมกินทรัพยากรเยอะกว่ามาก ทำงานช้าลงด้วย ผมเลยแนะนำให้ปล่อยไว้ที่

71
00:04:33,216 --> 00:04:37,926
High และถ้าคุณติดปัญหาอะไร หรือโมเดลคิดไม่ออก ค่อยปรับขึ้นไปถึงระดับอย่าง

72
00:04:37,926 --> 00:04:41,990
Ultra หรือ Max หรืออะไรก็ตามที่เป็นโหมดคิดในเครื่องมือที่คุณใช้

73
00:04:41,990 --> 00:04:45,732
แต่ตอนนี้ปล่อยไว้ที่ High ก่อน เกือบเสร็จแล้วกับการตั้งค่า

74
00:04:45,732 --> 00:04:50,441
แต่สิ่งที่เราจะทำต่อคือเพิ่มอินทิเกรชันหรือการเชื่อมต่อเข้าไปในเครื่องมือ

75
00:04:50,441 --> 00:04:53,538
ซึ่งเป็นเรื่องธรรมดามาก และคุณทำได้กับเครื่องมือ

76
00:04:53,538 --> 00:04:58,118
vibe coding แทบทุกตัว — เพิ่มทรัพยากรหรือเครื่องมือจากบุคคลที่สามเข้าไป

77
00:04:58,118 --> 00:05:02,634
ตัวอย่างเช่น ผมอยากเพิ่ม Git กับ GitHub เดี๋ยวเราจะพูดกันว่ามันคืออะไร

78
00:05:02,634 --> 00:05:07,086
และผมก็อยากเพิ่มอะไรบางอย่างที่ช่วยให้ดีพลอย์แอปพลิเคชันขึ้นไปบนโดเมน

79
00:05:07,086 --> 00:05:10,118
เราจะได้เปิดดูเว็บไซต์จริงๆ และแชร์ให้คนอื่นได้

80
00:05:10,118 --> 00:05:16,311
เข้าใจใช่ไหม มีหลายอย่างให้เชื่อมต่อและตั้งค่า แต่สองอย่างที่ผมจะโชว์คือตัวที่ผมใช้ประจำเวลาวibe

81
00:05:16,311 --> 00:05:20,634
coding โดยเฉพาะถ้าทำเว็บแอปพลิเคชัน แล้วค่อยเชื่อมต่อเพิ่มทีหลังได้

82
00:05:20,634 --> 00:05:23,666
เครื่องมือหรืออินทิเกรชันแรกที่อยากเชื่อมต่อคือ

83
00:05:23,666 --> 00:05:26,763
GitHub GitHub คือที่สำหรับเก็บโค้ดของเราบนคลาวด์

84
00:05:26,763 --> 00:05:31,279
มันจะทำให้ดีพลอย์ทีหลังง่ายขึ้น และยังเซฟการเปลี่ยนแปลงทั้งหมดที่เราทำ

85
00:05:31,279 --> 00:05:35,343
เพื่อที่ว่าถ้าพลาดอะไรหรือต้องย้อนกลับไปเวอร์ชันก่อนหน้าของโค้ด

86
00:05:35,343 --> 00:05:40,633
เราจะทำได้ ถ้ายังไม่เข้าใจ GitHub ไม่ต้องกังวล แต่สิ่งที่ต้องทำคือสมัครบัญชีฟรีที่

87
00:05:40,633 --> 00:05:45,343
github.com คุณจะเห็นว่าผมล็อกอินอยู่ตรงนี้ ขอแค่ให้แน่ใจว่าตั้งค่าไว้แล้ว

88
00:05:45,343 --> 00:05:48,826
เพราะเดี๋ยวเราจะใช้มัน จาก Claude Code — และเครื่องมือ

89
00:05:48,826 --> 00:05:52,439
vibe coding เกือบทั้งหมดก็เหมือนกัน — เราไปที่ Customize

90
00:05:52,439 --> 00:05:57,020
แล้วไปที่ Connectors คุณจะเห็นว่ามีหลายอย่างให้เชื่อมต่อกับแอปของเราได้

91
00:05:57,020 --> 00:06:00,955
ผมเชื่อมต่อหลายอย่างไว้แล้ว คุณไม่ต้องไปสนใจสิ่งที่เห็นตรงนี้

92
00:06:00,955 --> 00:06:04,245
สิ่งที่เราจะทำคือกด Add แล้วไปที่ Browse Connectors

93
00:06:04,245 --> 00:06:07,471
จากนั้นในหน้า Browse เราสลับระหว่าง Connectors กับ

94
00:06:07,471 --> 00:06:10,697
Plugins แล้วค้นหา GitHub connector ถ้าค้นหา GitHub

95
00:06:10,697 --> 00:06:15,019
เราควรเห็นมันโผล่ขึ้นมา ที่คุณไม่เห็นมันตรงนี้เพราะผมติดตั้งไว้แล้ว

96
00:06:15,019 --> 00:06:18,180
แต่ถ้าไม่เห็นตรงนี้ ลองไปดูใน Plugins ก็ได้ ค้นหา

97
00:06:18,180 --> 00:06:21,406
GitHub แล้วถ้าไปดูใต้หัวข้อ Partners คุณควรเห็นมัน

98
00:06:21,406 --> 00:06:24,825
แล้วก็ติดตั้งได้ ที่คุณไม่เห็นเพราะผมเชื่อมต่อไว้แล้ว

99
00:06:24,825 --> 00:06:28,502
แต่คุณน่าจะหาเจอได้ใน Connectors หรือ Plugins แล้วก็แค่กด

100
00:06:28,502 --> 00:06:31,663
Add พอเพิ่มเสร็จ คุณควรเข้าไปใน Connectors แล้วดู

101
00:06:31,663 --> 00:06:35,405
GitHub integration ได้ คุณจะเห็นว่าผมมี GitHub integration

102
00:06:35,405 --> 00:06:38,696
อยู่ตรงนี้ สิ่งที่เราจะทำคือกด Connect พอกด Connect

103
00:06:38,696 --> 00:06:43,341
มันจะให้เราเชื่อมต่อ มันจะพาเราไปที่ GitHub และเราจะต้องทำการยืนยันตัวตน

104
00:06:43,341 --> 00:06:46,631
(authenticate) เราก็ทำตามนั้น แล้วมันจะเชื่อมต่อกับ

105
00:06:46,631 --> 00:06:49,727
Claude โอเค เราจะเห็นว่ามันเชื่อมต่อสำเร็จ จริงๆ

106
00:06:49,727 --> 00:06:52,889
มันพาผมกลับมาที่หน้าหลัก แต่ผมจะกลับเข้าไปที่แท็บ

107
00:06:52,889 --> 00:06:55,985
Code แล้วตรวจสอบว่ามันเชื่อมต่อแล้ว ใน Customize

108
00:06:55,985 --> 00:06:59,340
> Connectors เราจะเห็นว่าตอนนี้ GitHub เชื่อมต่อแล้ว

109
00:06:59,340 --> 00:07:03,340
และเราสามารถเข้าถึงเครื่องมือต่างๆ ได้ แล้วก็เริ่มใช้งานได้เลย

110
00:07:03,340 --> 00:07:07,340
เจ๋ง GitHub อยู่ตรงนั้นแล้ว คุณจะสังเกตว่าผมมีคอนเนกเตอร์อื่นๆ

111
00:07:07,340 --> 00:07:10,888
อีกสองสามตัว ตัวอย่างเช่น ถ้าอยากสร้างภาพหรือวิดีโอด้วย

112
00:07:10,888 --> 00:07:14,501
AI ก็ใช้ Higgsfield ได้ และสิ่งที่อยากให้คุณคิดตอนนี้คือ

113
00:07:14,501 --> 00:07:18,242
"โอเค เครื่องมืออะไรบ้างที่ฉันอาจต้องใช้? อยากเชื่อมต่อกับ

114
00:07:18,242 --> 00:07:23,210
Slack ไหม? อาจจะ ต้องใช้ Notion ไหม? ต้องมีบริการแบ็กเอนด์จากบุคคลที่สามอย่าง

115
00:07:23,210 --> 00:07:27,920
Supabase มาช่วยจัดการอะไรให้ฉันไหม?" แล้วก็เริ่มตั้งค่าคอนเนกเตอร์ตามนั้น

116
00:07:27,920 --> 00:07:33,468
คอนเนกเตอร์ตัวต่อไปที่ผมจะเพิ่มคือ Hostinger เพราะผมจะใช้มันสำหรับโฮสต์เว็บไซต์ทั้งหมด

117
00:07:33,468 --> 00:07:37,984
ถ้าเราดูตรงนี้ Hostinger มี native connector ที่เชื่อมต่อกับเครื่องมือ

118
00:07:37,984 --> 00:07:41,016
vibe coding ได้เกือบทุกตัว ไม่ว่าจะเป็น Cursor,

119
00:07:41,016 --> 00:07:44,500
Devin, Claude, AntiGravity อะไรก็ว่าไป หลักการทำงานคือ

120
00:07:44,500 --> 00:07:47,532
แทนที่คุณจะต้องรู้วิธีดีพลอย์ คุณแค่พรอมป์โมเดล

121
00:07:47,532 --> 00:07:50,693
AI แล้วมันก็ดีพลอย์ให้อัตโนมัติ มันจะดีพลอย์ไปที่

122
00:07:50,693 --> 00:07:54,564
virtual private server (VPS) และคุณจะต้องเลือกแพ็กเกจและซื้อ

123
00:07:54,564 --> 00:07:59,725
ถ้าคุณอยากให้มันดีพลอย์จริงๆ และออนไลน์จริงๆ แต่แพ็กเกจนี้มาพร้อมโดเมนให้คุณด้วย

124
00:07:59,725 --> 00:08:02,951
มีแอปพลิเคชันได้หลายตัว ดีพลอย์เว็บไซต์ได้เป็นสิบๆ

125
00:08:02,951 --> 00:08:06,692
ไซต์ มีอีเมลกล่องจดหมาย อะไรพวกนั้น ขอเปิดเผยเต็มที่เลยว่า

126
00:08:06,692 --> 00:08:11,853
Hostinger เป็นพาร์ทเนอร์ระยะยาวของช่องนี้ ซึ่งหมายความว่าถ้าคุณตัดสินใจใช้บริการ

127
00:08:11,853 --> 00:08:15,724
พอเลือกแผนธุรกิจ (Business Plan) ซึ่งประมาณ 4 เหรียญต่อเดือน

128
00:08:15,724 --> 00:08:19,660
แล้วใช้โค้ดส่วนลด Tech With Tim ตรงนี้ คุณจะได้ส่วนลดเพิ่มอีก

129
00:08:19,660 --> 00:08:23,530
10% สิ่งที่ผมจะทำคือเชื่อมต่อมันตอนนี้เลย เลือกระยะเวลาสมัคร

130
00:08:23,530 --> 00:08:26,821
เลือกโดเมนที่อยากใช้ อย่างเช่น tim.ruscica.net หรือ

131
00:08:26,821 --> 00:08:30,562
timothy.com อะไรก็ว่าไป แล้วกด Continue แล้วก็เชื่อมต่อกับ

132
00:08:30,562 --> 00:08:33,595
Claude พอกดผ่านไป มันจะถามเราด้วยไดอะล็อกแบบนี้

133
00:08:33,595 --> 00:08:36,691
เราไปที่ Create New Site แล้วก็เลือก Node.js Web

134
00:08:36,691 --> 00:08:40,433
Application กด Next สำหรับโดเมน ให้เลือกโดเมนที่คุณซื้อไว้

135
00:08:40,433 --> 00:08:43,788
คุณจะเห็นว่าผมมีหลายโดเมน ผมจะเลือก tim.ruscica.site

136
00:08:43,788 --> 00:08:47,852
ต่อ สำหรับตำแหน่งที่ตั้ง (location) ก็เลือกที่อยู่ใกล้คุณที่สุด

137
00:08:47,852 --> 00:08:50,949
ตอนนี้ผมเลือก Indonesia ไปก่อน จากตรงนี้เราเลือก

138
00:08:50,949 --> 00:08:54,368
Build with Hostinger Connector เพราะเราจะสร้างมันตรงๆ

139
00:08:54,368 --> 00:08:57,529
ด้วย AI จากนั้นเลือกตัวเลือกของเรา ผมเลือก Claude

140
00:08:57,529 --> 00:09:00,819
Code แล้วก็ทำการกำหนดค่า (configure) เราเลือก Leave

141
00:09:00,819 --> 00:09:04,303
ไปก่อน ไม่เป็นไร แล้วมันจะแชร์วิธีเพิ่มสิ่งนี้เข้าไปใน

142
00:09:04,303 --> 00:09:07,916
Claude Code คุณจะเห็นว่ามันให้ตัวเลือกการกำหนดค่าด้วยมือ

143
00:09:07,916 --> 00:09:11,464
(manual configuration) ตรงนี้ สิ่งที่เราทำได้คือก็อปปี้

144
00:09:11,464 --> 00:09:14,625
JSON ที่มันโชว์ให้เรา ไปที่ Claude วางมันลงตรงนี้

145
00:09:14,625 --> 00:09:19,141
แล้วบอกว่า "ช่วยอัปเดต MCP configuration ของฉันเพื่อเพิ่มสิ่งนี้หน่อย"

146
00:09:19,141 --> 00:09:24,044
ที่เราทำก็แค่ก็อปปี้คอนฟิกจาก Hostinger ตรงๆ แล้วมันก็จะเพิ่มให้เราอัตโนมัติ

147
00:09:24,044 --> 00:09:28,302
แต่มันบอกว่าเราต้องเพิ่มโทเคนพิเศษตรงนี้ด้วย ดังนั้นเราสามารถสร้าง

148
00:09:28,302 --> 00:09:32,044
API token ใหม่ตรงนี้ด้านล่าง แค่ตั้งชื่อให้มัน ผมจะตั้งว่า

149
00:09:32,044 --> 00:09:35,915
Claude แล้วก็สร้างโทเคนนี้แล้วก็อปปี้ จากนั้นก็ทำแบบเดียวกัน

150
00:09:35,915 --> 00:09:40,431
มาตรงนี้แล้วบอกว่า "โทเคนคืออันนี้" แน่นอนว่าเราไม่อยากให้โทเคนรั่วไหล

151
00:09:40,431 --> 00:09:44,044
ผมจะลบมันทีหลัง แต่ว่าแนวคิดคือเราจะเพิ่มสิ่งที่เรียกว่า

152
00:09:44,044 --> 00:09:47,076
MCP server หรือในกรณีนี้คือ MCP servers หลายตัว

153
00:09:47,076 --> 00:09:52,173
พวกมันจะเชื่อมต่อกับ Hostinger โดยตรง หรือจัดการดีพลอย์ของธุรกิจเราให้อัตโนมัติ

154
00:09:52,173 --> 00:09:57,656
— ดีพลอย์อะไรบางอย่างขึ้นโดเมนให้อัตโนมัติ เพื่อให้เราทำทุกอย่างได้ภายในเครื่องมือนี้

155
00:09:57,656 --> 00:10:02,430
และไม่ต้องออกไปไหนเลยพอตั้งค่าเริ่มต้นเสร็จ และนั่นคือพื้นฐานของขั้นตอนนี้

156
00:10:02,430 --> 00:10:06,946
— เราอยากเชื่อมต่อคอนเนกเตอร์ทั้งหมด เพิ่มเครื่องมือบุคคลที่สามทั้งหมด

157
00:10:06,946 --> 00:10:10,236
และมีอย่างอื่นที่เราต้องการอีก เราอยากทำมันในเฟสนี้

158
00:10:10,236 --> 00:10:14,752
เพื่อที่เราจะได้โฟกัสกับการสร้างอย่างเดียว โดยไม่ต้องมากังวลเรื่องคีย์

159
00:10:14,752 --> 00:10:18,107
ครีเดนเชียล และดีพลอย์อะไรพวกนั้น สิ่งที่ผมจะทำคือกด

160
00:10:18,107 --> 00:10:24,752
Enter ตรงนี้ ผมใส่คอนฟิกแล้ว ใส่โทเคนแล้ว และถ้าด้วยเหตุผลบางอย่างคุณอยากเพิ่มสิ่งนี้ลงในเครื่องมืออื่น

161
00:10:24,752 --> 00:10:28,171
คุณก็แค่สลับระหว่างเครื่องมือ แล้วบอกว่าอยากเพิ่มอะไร

162
00:10:28,171 --> 00:10:31,849
คุณคงพอเข้าใจแนวคิด โอเค เราพร้อมแล้ว ปิดหน้านี้ไปก่อนได้

163
00:10:31,849 --> 00:10:35,977
อีกครั้ง อย่าปล่อยให้โทเคนรั่วแบบที่ผมทำ ผมทำเพื่อวิดีโอเท่านั้น

164
00:10:35,977 --> 00:10:41,784
แล้วมันก็จะเพิ่มสิ่งนี้ให้เรา เอาล่ะ มันจะถามขออนุญาตเพื่อเปลี่ยนคอนฟิกเหล่านี้อยู่เรื่อยๆ

165
00:10:41,784 --> 00:10:45,913
ถ้าไม่อยากกดยืนยันด้วยมือทุกครั้ง สิ่งที่ทำได้คือเปลี่ยนเป็นโหมด

166
00:10:45,913 --> 00:10:49,396
bypass permission mode (ข้ามการขออนุญาต) พอเปลี่ยนแล้ว

167
00:10:49,396 --> 00:10:53,009
มันจะไม่ถามหรือขอให้เรายืนยันอะไรอีก มันจะทำอัตโนมัติเลย

168
00:10:53,009 --> 00:10:56,106
โอเค เราจะเห็นว่ามันบอกว่าเพิ่ม MCP servers แล้ว

169
00:10:56,106 --> 00:11:00,041
อย่างไรก็ตาม เพื่อให้เราใช้งานมันได้จริงและตรวจสอบว่ามันทำงาน

170
00:11:00,041 --> 00:11:04,299
เราต้องรีสตาร์ท Claude Code ปิดแล้วเปิดใหม่ อาจต้องสร้างเซสชันใหม่

171
00:11:04,299 --> 00:11:07,331
แล้วมันก็น่าจะพร้อมใช้ โอเค ผมรีสตาร์ทเสร็จแล้ว

172
00:11:07,331 --> 00:11:10,363
และเพื่อตรวจสอบว่ามันทำงาน เราก็แค่พรอมป์มันว่า

173
00:11:10,363 --> 00:11:13,460
"ช่วยตรวจหน่อยว่าเราเชื่อมต่อกับ Git, GitHub และ

174
00:11:13,460 --> 00:11:18,428
Hostinger connector แล้วหรือยัง" โอเค เราอยากตรวจสอบว่าเครื่องมือเชื่อมต่อครบ

175
00:11:18,428 --> 00:11:23,202
แล้วค่อยไปขั้นตอนวางแผนและสร้าง ถ้าเห็นว่าทุกอย่างเรียบร้อยและเชื่อมต่อครบ

176
00:11:23,202 --> 00:11:26,750
ถ้าอะไรยังไม่เชื่อมต่อ เราก็แค่ทำตามขั้นตอนการเชื่อมต่อ

177
00:11:26,750 --> 00:11:31,330
และถ้าคุณไม่เคยใช้ Git บนคอมพิวเตอร์มาก่อน มันอาจยังไม่ได้ตั้งค่าให้คุณ

178
00:11:31,330 --> 00:11:34,750
สิ่งที่ทำได้คือบอกมันว่า "ช่วยติดตั้ง Git ให้ฉันหน่อย

179
00:11:34,750 --> 00:11:37,846
และช่วยตั้งค่าให้ฉันได้ไหม หรือให้คำแนะนำวิธีทำ"

180
00:11:37,846 --> 00:11:42,298
แล้วมันจะพาคุณผ่านกระบวนการนั้น Git เป็นสิ่งที่รันบนคอมพิวเตอร์ของคุณ

181
00:11:42,298 --> 00:11:45,459
ส่วน GitHub คือสิ่งที่เราเชื่อมต่อผ่านคอนเนกเตอร์

182
00:11:45,459 --> 00:11:50,749
ทั้งสองเป็นคนละสิ่งกันแม้จะทำงานร่วมกัน ดังนั้นบางครั้งมันจะไม่ได้ถูกตั้งค่าคู่กัน

183
00:11:50,749 --> 00:11:54,555
และคุณต้องทำสองกระบวนการแยกกัน เอาล่ะ ถึงตรงนี้เราพร้อมแล้ว

184
00:11:54,555 --> 00:11:57,974
และสิ่งที่เราจะทำต่อคือเริ่มวางแผน ผมรู้ว่าเฟสนั้นยาว

185
00:11:57,974 --> 00:12:03,329
แต่เฟสนั้นเป็นกระบวนการที่ยาวที่สุดแล้ว ตอนนี้เราไปต่อที่การวางแผนสิ่งที่เราอยากได้

186
00:12:03,329 --> 00:12:07,071
เมื่อเราวibe coding มันสำคัญมากๆ ที่เราจะคิดให้รอบคอบจริงๆ

187
00:12:07,071 --> 00:12:11,974
ว่าเราอยากสร้างอะไรกันแน่ เหตุผลที่ต้องทำแบบนี้ก็เพราะโมเดลมักจะตัดสินใจโง่ๆ

188
00:12:11,974 --> 00:12:16,683
เยอะมาก มันจะทำสิ่งที่ไม่ต้องการ และถ้าคุณให้พรอมป์คลุมเครือหรือไม่ชัดเจน

189
00:12:16,683 --> 00:12:21,264
มันจะตีความเอง และมันยากมากที่จะกลับไปที่ไอเดียหลักเมื่อมันเพี้ยนไปแล้ว

190
00:12:21,264 --> 00:12:25,070
สิ่งที่ผมแนะนำเสมอคือ ก่อนที่เราจะเริ่มบอกโมเดลให้สร้างอะไร

191
00:12:25,070 --> 00:12:28,490
เราควรสร้างแผนโดยละเอียดก่อน โดยปกติแผนก็คือการที่เรา

192
00:12:28,490 --> 00:12:32,425
"พร่ำพูด" ใส่เครื่องมืออย่าง Claude Code เราใช้เสียงของเราได้

193
00:12:32,425 --> 00:12:35,586
เช่น speech-to-text หรือพิมพ์พรอมป์บอกมันว่า "เฮ้

194
00:12:35,586 --> 00:12:38,683
นี่คือสิ่งที่ฉันอยากได้ นี่คือสิ่งที่ฉันคิดอยู่"

195
00:12:38,683 --> 00:12:42,360
จากนั้นก็บอกโมเดลให้ถามคำถามเราเกี่ยวกับสิ่งที่เราอยากได้

196
00:12:42,360 --> 00:12:46,166
เพื่อที่เราจะได้เคลียร์ทุกอย่างจริงๆ ก่อนที่จะเดินหน้าสร้าง

197
00:12:46,166 --> 00:12:49,715
ยังมีอีกสองสามอย่างที่ต้องตัดสินใจ ซึ่งเดี๋ยวผมจะพูดถึง

198
00:12:49,715 --> 00:12:53,650
แต่สิ่งที่ผมแนะนำเสมอคือติดตั้งเครื่องมือแปลงเสียงเป็นข้อความ

199
00:12:53,650 --> 00:12:57,392
(voice to text) สักตัว ตัวอย่างเช่น ผมใช้เครื่องมือที่ชื่อ

200
00:12:57,392 --> 00:13:02,875
Whisper Flow ตรงนี้ มันทำให้การพูดกับคอมพิวเตอร์เร็วขึ้นมากและให้พรอมป์ที่ละเอียดขึ้น

201
00:13:02,875 --> 00:13:08,359
คุณเห็นไหมว่าผมพูดได้ 217 คำต่อนาที ถ้าสนใจผมจะฝากลิงก์ไว้ในคำอธิบายวิดีโอให้ลองใช้ดู

202
00:13:08,359 --> 00:13:11,778
แต่แนวคิดหลักคือเราจะ "ถ่ายเท" สิ่งที่เราอยากได้ออกมา

203
00:13:11,778 --> 00:13:14,939
แล้วให้โมเดลช่วยเราเคลียร์และวางแผนก่อนเริ่มสร้าง

204
00:13:14,939 --> 00:13:20,036
นี่คือวิธีเริ่มพรอมป์ของคุณ: "สวัสดี ฉันอยากสร้างแผนโดยละเอียดสำหรับเว็บไซต์แบบ

205
00:13:20,036 --> 00:13:23,326
vibe coding ที่ฉันกำลังจะสร้าง ก่อนที่เราจะสร้างมัน

206
00:13:23,326 --> 00:13:27,068
ฉันอยากให้คุณสร้างแผนก่อน อนุญาตให้ฉันทบทวนมัน และถามคำถาม

207
00:13:27,068 --> 00:13:31,713
clarifying ที่คุณจำเป็นต้องถาม เพื่อที่เราจะได้สร้างมันอย่างชัดเจนที่สุด

208
00:13:31,713 --> 00:13:35,068
ไม่มีความคลุมเครือ" คุณไม่จำเป็นต้องพูดคำต่อคำแบบนี้

209
00:13:35,068 --> 00:13:38,616
แต่พอเข้าใจแนวคิด เราอยากบอกมันว่า "เฮ้ ถามคำถามเราเถอะ

210
00:13:38,616 --> 00:13:43,197
มาวางแผนด้วยกัน เริ่มจากเฟสนี้ก่อนที่เราจะบ้าและเริ่มสร้างอะไรซักอย่าง"

211
00:13:43,197 --> 00:13:46,745
หลังจากนั้น เราก็แค่พร่ำพูดให้โมเดลฟังว่าเราอยากได้อะไร

212
00:13:46,745 --> 00:13:49,906
เวลาอธิบายสิ่งที่เราอยากได้ เรามักจะต้องอธิบายว่า

213
00:13:49,906 --> 00:13:55,132
อยากให้มันหน้าตาแบบไหน? ใครจะใช้มันจริงๆ? เรากำลังแก้ปัญหาอะไรด้วยการสร้างสิ่งนี้

214
00:13:55,132 --> 00:13:59,390
และทำไมเราถึงสร้างมัน? ถ้าอธิบายแบบนี้ โมเดลจะถามคำถามที่ดีกว่าได้

215
00:13:59,390 --> 00:14:02,744
อย่าแค่บอกว่า "เฮ้ ฉันอยากทำแอปหาคู่" อะไรประมาณนั้น

216
00:14:02,744 --> 00:14:05,841
ให้บอกว่า "ฉันอยากทำแอปหาคู่สำหรับผู้ใช้กลุ่มนี้

217
00:14:05,841 --> 00:14:09,712
ฉันสร้างมันเพราะฉันสังเกตเห็นปัญหานี้ คนพวกนี้จะเป็นคนใช้มัน

218
00:14:09,712 --> 00:14:15,066
ฉันอยากแชร์มัน ฉันอยากดีพลอย์มัน" อะไรก็ว่าไป ให้รายละเอียดให้มากที่สุดเท่าที่ทำได้

219
00:14:15,066 --> 00:14:20,163
แล้วคุณจะได้ผลลัพธ์ที่ดีที่สุด ซึ่งเป็นเหตุผลว่าทำไมการพูดจึงดีกว่าการพิมพ์เสมอ

220
00:14:20,163 --> 00:14:23,389
เอาล่ะ ผมจะพร่ำพูดอะไรสักอย่าง แล้วเราจะไปต่อ โอเค

221
00:14:23,389 --> 00:14:27,969
ผมให้พรอมป์ง่ายๆ ไปแล้ว ผมบอกมันว่าผมอยากสร้างเวอร์ชันดิจิทัลของเรซูเม่

222
00:14:27,969 --> 00:14:32,937
หรือโปรไฟล์ LinkedIn ของผม ที่แชร์ให้คนอื่นได้ และบอกข้อมูลทั้งหมดเกี่ยวกับผม

223
00:14:32,937 --> 00:14:36,872
แน่นอนว่าคุณสร้างอะไรที่ซับซ้อนกว่านั้นได้ แต่ผมจะไปกับอันนี้

224
00:14:36,872 --> 00:14:40,549
และอีกสักครู่เราควรเห็นมันเริ่มสร้างแผน เราสามารถทบทวนมัน

225
00:14:40,549 --> 00:14:44,485
ให้แน่ใจว่าเราตัดสินใจทั้งหมดล่วงหน้าแล้ว แล้วค่อยเดินหน้าต่อ

226
00:14:44,485 --> 00:14:48,872
โมเดลควรเริ่มถามคำถามคุณ ถ้ามันไม่ถาม คุณก็พรอมป์ให้มันถามคำถามเพิ่ม

227
00:14:48,872 --> 00:14:53,130
แล้วค่อยไปต่อจากนั้น ผมขอสังเกตว่า หลังจากที่เราตอบคำถามพวกนี้แล้ว

228
00:14:53,130 --> 00:14:56,871
สิ่งต่อไปที่ต้องทำคือตัดสินใจเรื่อง tech stack ที่เราจะใช้

229
00:14:56,871 --> 00:15:01,516
tech stack คือภาษา เครื่องมือ เทคโนโลยีต่างๆ ที่จะเป็นส่วนหนึ่งของแอปเรา

230
00:15:01,516 --> 00:15:05,258
โมเดลช่วยเราทำได้ แต่นี่คือการตัดสินใจที่เราอยากทำล่วงหน้า

231
00:15:05,258 --> 00:15:09,968
เดี๋ยวคุณจะเห็นว่าผมหมายถึงอะไร โอเค เราจะเห็นว่ามันเริ่มถามคำถามเราจริงๆ

232
00:15:09,968 --> 00:15:13,322
แล้ว คำถามแรก "เว็บไซต์ควรอยู่ที่ไหนเมื่อสร้างเสร็จ"

233
00:15:13,322 --> 00:15:18,419
สิ่งที่ผมอยากทำคือดีพลอย์ผ่าน Hostinger — นั่นคือเหตุผลที่เราเพิ่มเครื่องมือนี้

234
00:15:18,419 --> 00:15:22,354
ขอโทษที ผมจะเลือก timothy.com ผ่าน Hostinger "ทิศทางการออกแบบ

235
00:15:22,354 --> 00:15:25,386
(design direction) ที่คุณอยากได้คืออะไร?" เลือก

236
00:15:25,386 --> 00:15:29,193
Light Editorial "ควรใช้รูปอะไร?" ใช้รูป avatar สาธารณะของผม

237
00:15:29,193 --> 00:15:33,193
แล้วก็ "ให้เป็นเรซูเม่สำหรับนายจ้าง หรือพอร์ตโฟลิโอแบบไฮบริด?"

238
00:15:33,193 --> 00:15:36,612
เลือกเรซูเม่สำหรับนายจ้าง โอเค เราตอบคำถามพวกนั้นแล้ว

239
00:15:36,612 --> 00:15:39,644
คุณจะสังเกตว่ามันสร้างแผนบางอย่างให้เราแล้วด้วย

240
00:15:39,644 --> 00:15:42,676
มี content structure (โครงสร้างเนื้อหา), design

241
00:15:42,676 --> 00:15:45,708
direction (ทิศทางการออกแบบ), tech stack, assets

242
00:15:45,708 --> 00:15:49,128
(ทรัพยากร) แล้วก็ verification (การตรวจสอบ) และสำหรับ

243
00:15:49,128 --> 00:15:55,063
tech stack นี่คือสิ่งที่ผมพูดถึง เราอยากตัดสินใจก่อนเริ่มสร้างว่าอยากใช้ภาษาและเทคโนโลยีอะไร

244
00:15:55,063 --> 00:16:00,224
ซึ่งมันตรงไปตรงมาถ้าคุณจะสร้างเว็บแอปพลิเคชัน และผมจะเล่ากฎทั่วไปที่คุณใช้ตามได้

245
00:16:00,224 --> 00:16:04,353
ถ้าคุณแค่อยากสร้างเว็บแอปพลิเคชัน — ซึ่งคือสิ่งที่เรากำลังทำอยู่

246
00:16:04,353 --> 00:16:07,643
— ให้ใช้ Next.js คุณไม่ต้องกังวลว่ามันคืออะไรกันแน่

247
00:16:07,643 --> 00:16:12,094
แต่ถ้ามันถามหา tech stack คุณเลือก Next.js หรือบอกให้มันใช้ตัวนั้นได้

248
00:16:12,094 --> 00:16:15,449
Next.js จะจัดการทั้ง front end (ส่วนหน้าของเว็บไซต์)

249
00:16:15,449 --> 00:16:19,191
และ back end (ส่วนหลัง) ให้คุณ ถ้าไม่คุ้นเคยว่าหมายถึงอะไร

250
00:16:19,191 --> 00:16:22,288
front end ก็คือส่วนติดต่อผู้ใช้ (user interface)

251
00:16:22,288 --> 00:16:26,029
ที่คุณเห็นและโต้ตอบด้วย ส่วน back end คือสิ่งที่คุณไม่เห็น

252
00:16:26,029 --> 00:16:29,384
ไม่ใช่ภาพ แต่มันจัดการข้อมูล บัญชีผู้ใช้ ความปลอดภัย

253
00:16:29,384 --> 00:16:32,997
ครีเดนเชียลทั้งหมด และมันคือสิ่งที่ต้องเขียนอย่างปลอดภัย

254
00:16:32,997 --> 00:16:36,932
ถ้าคุณสร้างอะไรที่เป็นภาพล้วนๆ คุณไม่ต้องกังวลเรื่องแบ็กเอนด์

255
00:16:36,932 --> 00:16:40,997
แต่ถ้าอยากมีบัญชีผู้ใช้ อยากให้ผู้ใช้ล็อกอิน อยากเก็บข้อมูลถาวร

256
00:16:40,997 --> 00:16:46,545
คุณต้องมีแบ็กเอนด์ และนั่นเกี่ยวข้องกับการตัดสินใจอีกสองสามอย่างที่คุณควรคุยกับเอเจนต์

257
00:16:46,545 --> 00:16:50,545
AI ตัวอย่างเช่น "เฮ้ ฉันอยากมีข้อมูลในแอป ฉันอยากมีบัญชีผู้ใช้

258
00:16:50,545 --> 00:16:53,964
ช่วยแนะนำแบ็กเอนด์ให้ฉันหน่อย" ถ้าอยากได้คำแนะนำง่ายๆ

259
00:16:53,964 --> 00:16:57,190
ทั่วไป คุณใช้สิ่งที่เรียกว่า Supabase ได้ Supabase

260
00:16:57,190 --> 00:17:00,867
จะจัดการข้อมูลทั้งหมดและการตัดสินใจซับซ้อนหลายอย่างให้คุณ

261
00:17:00,867 --> 00:17:04,157
แต่ถ้าคุณสร้างอะไรที่ล้ำกว่านั้น อาจจะกำลังสร้างเกม

262
00:17:04,157 --> 00:17:08,544
หรือแอปพลิเคชันในภาษา Rust หรืออะไรก็ตามที่เกินกว่าที่ผมอธิบายตรงนี้

263
00:17:08,544 --> 00:17:12,157
คุณต้องหาข้อมูลล่วงหน้าด้วยการถามโมเดล AI และตัดสินใจว่า

264
00:17:12,157 --> 00:17:16,350
stack ที่อยากใช้คืออะไร และอีกครั้ง stack โดยทั่วไปก็คือฐานข้อมูล

265
00:17:16,350 --> 00:17:19,382
front end back end หน้าตาที่อยากได้ โฮสต์ที่ไหน

266
00:17:19,382 --> 00:17:24,221
หวังว่านี่ให้ไอเดียกับคุณบ้าง มันยากที่ผมจะพูดครอบคลุมทุกอย่างในวิดีโอเดียว

267
00:17:24,221 --> 00:17:28,414
แต่นั่นคือคำแนะนำคร่าวๆ คุณจะเห็นว่าถึงตอนนี้เราสร้างแผนเสร็จแล้ว

268
00:17:28,414 --> 00:17:31,576
สิ่งที่เราทำได้คือบอกมันว่า tech stack ที่อยากใช้

269
00:17:31,576 --> 00:17:34,801
แล้วบอกให้เริ่มสร้าง สิ่งที่ผมจะพูดคือ "ฉันอยากใช้

270
00:17:34,801 --> 00:17:38,285
Next.js เป็น tech stack ช่วยสร้างเว็บไซต์ทั้งหมดได้ไหม

271
00:17:38,285 --> 00:17:42,027
เราต้องการแค่ front end ไม่ต้องมี back end หรือข้อมูลถาวร"

272
00:17:42,027 --> 00:17:45,962
และจริงๆ ผมจะไม่ไปไกลกว่านั้น ผมแค่บอกมันแบบนี้แล้วเริ่มสร้าง

273
00:17:45,962 --> 00:17:49,446
คุณจะเห็นว่าตอนแรกมันไม่อยากใช้ tech stack แบบ Next.js

274
00:17:49,446 --> 00:17:52,801
และบอกว่าเราไม่ต้องใช้ framework อะไรเลย แต่สำหรับผม

275
00:17:52,801 --> 00:18:00,671
ผมบอกว่า "เถอะ ใช้ Next.js กันเถอะ" เพราะผมอยากโชว์อะไรบางอย่างที่ทำงานได้เสถียรกว่าสำหรับเว็บไซต์แทบทุกแบบที่คุณอยากสร้าง

276
00:18:00,671 --> 00:18:03,961
และอีกครั้ง คุณคุยกับมันได้ถ้าอยากใช้ stack แบบอื่น

277
00:18:03,961 --> 00:18:07,381
โอเค เราจะรอให้มันสร้างเสร็จ พอเสร็จแล้วเราจะทบทวนมัน

278
00:18:07,381 --> 00:18:12,800
ผมจะโชว์วิธีตรวจสอบความปลอดภัยของเว็บไซต์ด้วย แม้ว่าสำหรับเว็บนี้มันไม่สำคัญเท่าไหร่

279
00:18:12,800 --> 00:18:16,671
แล้วก็ดีพลอย์มันออกมา โอเค ดูเหมือนว่ามันเกือบสร้างเสร็จแล้ว

280
00:18:16,671 --> 00:18:19,703
มันสร้างเว็บไซต์และเปิดในเบราว์เซอร์ให้ผมดูแล้ว

281
00:18:19,703 --> 00:18:22,993
ถ้าด้วยเหตุผลบางอย่างมันไม่ทำแบบนั้น คุณสั่ง Claude

282
00:18:22,993 --> 00:18:27,057
ได้ว่า "เฮ้ เปิดอันนี้ใน integrated browser (เบราว์เซอร์ในตัว)"

283
00:18:27,057 --> 00:18:31,509
แล้วมันก็จะทำตามขั้นตอนนั้นได้เอง คุณจะเห็นว่าตอนนี้ผมเลื่อนดูได้แล้ว

284
00:18:31,509 --> 00:18:35,509
เห็นผลงานทั้งหมดที่มันทำไว้ตรงนี้ แล้วถ้าผมไม่พอใจอะไรบางอย่าง

285
00:18:35,509 --> 00:18:38,734
แม้ว่ามันยังสร้างอยู่ ผมก็แคปหน้าจอ วางลงใน Claude

286
00:18:38,734 --> 00:18:42,476
หรือไม่ก็ annotate (เขียนโน้ต) ลงไปตรงๆ คุณจะเห็นว่ามีปุ่ม

287
00:18:42,476 --> 00:18:45,895
annotate และ select element อยู่ใน integrated browser

288
00:18:45,895 --> 00:18:49,766
ตัวอย่างเช่น ถ้าผมกด annotate ผมก็วงกลมอะไรบางอย่างได้ใช่ไหม

289
00:18:49,766 --> 00:18:53,250
แล้วเพิ่มมันเข้าไปในแชท เปลี่ยนสีได้ ลากลูกศรตรงนี้ได้

290
00:18:53,250 --> 00:18:56,992
ผมเลยบอกมันได้เหมือนกับบอกมนุษย์จริงๆ ว่า "ฉันไม่ชอบอันนี้

291
00:18:56,992 --> 00:19:00,282
ช่วยเปลี่ยนอันนี้หน่อย" คุณพอเข้าใจแนวคิด นอกจากนี้

292
00:19:00,282 --> 00:19:03,959
ผมใช้ปุ่ม select element แล้วเลือกบางส่วนได้ ตัวอย่างเช่น

293
00:19:03,959 --> 00:19:08,604
ชื่อของผม ผมอาจอยากใช้ชื่อเต็ม ผมก็เลือกมัน แล้วมันก็ถูกเพิ่มเข้าไปในแชท

294
00:19:08,604 --> 00:19:12,024
แล้วผมก็บอกว่า "ช่วยใช้ชื่อเต็มของฉันแทนชื่อย่อหน่อย"

295
00:19:12,024 --> 00:19:15,378
แล้วมันก็จะเปลี่ยนเป็น Timothy ซึ่งเป็นชื่อเต็มของผม

296
00:19:15,378 --> 00:19:19,185
นี่คือเฟสการทบทวน (review) ที่เราทำผ่านกันไป เราทำสกรีนช็อต

297
00:19:19,185 --> 00:19:22,475
เลือก element โดยตรง บอกมันว่าเราอยากให้เปลี่ยนอะไร

298
00:19:22,475 --> 00:19:26,733
ให้พรอมป์ละเอียดขึ้น คุณคงเข้าใจแนวคิด ตอนนี้ผมจะปล่อยมันไว้แบบนี้

299
00:19:26,733 --> 00:19:29,765
รอให้มันทำงานเสร็จสมบูรณ์ แล้วไปต่อขั้นตอนถัดไป

300
00:19:29,765 --> 00:19:34,668
ซึ่งผมจะโชว์สกิล (skill) ที่คุณเพิ่มเข้าไปได้เพื่อปรับแต่งหน้าเว็บให้สวยขึ้น

301
00:19:34,668 --> 00:19:39,055
และถ้าคุณกำลังสร้างอะไรที่ซับซ้อนกว่านั้น ก็เอาไว้ตรวจสอบความปลอดภัย

302
00:19:39,055 --> 00:19:42,152
เอาล่ะ เสร็จแล้ว นี่คือเวอร์ชันแรกของเว็บไซต์เรา

303
00:19:42,152 --> 00:19:45,764
และอีกครั้ง ถึงจุดนี้เราจะได้ทบทวนมันและให้ฟีดแบ็กไปแล้ว

304
00:19:45,764 --> 00:19:50,151
แล้วเราก็สร้างต่อได้ แต่ว่า บางทีผมอาจอยากได้อะไรที่ดูสะอาดตากว่านี้

305
00:19:50,151 --> 00:19:53,183
คุณจะสังเกตว่าหลายครั้งเวลาวibe coding เว็บไซต์

306
00:19:53,183 --> 00:19:56,474
คุณจะได้ดีไซน์ที่คล้ายๆ กันมาก เพราะมันก็ประมาณนั้น

307
00:19:56,474 --> 00:19:59,893
นั่นคือที่มาของสิ่งที่เรียกว่า skills — พวกมันคือไฟล์

308
00:19:59,893 --> 00:20:03,054
markdown ที่นำกลับมาใช้ซ้ำได้ ซึ่งคุณติดตั้งไว้ใน

309
00:20:03,054 --> 00:20:08,280
Claude หรือเครื่องมือ vibe coding ตัวไหนก็ได้ แล้วสั่งให้มันทำอะไรต่างออกไปดีขึ้น

310
00:20:08,280 --> 00:20:11,505
หรือทำตามกระบวนการบางอย่าง ตัวอย่างเช่น มีสกิลชื่อ

311
00:20:11,505 --> 00:20:14,860
Frontend Design ซึ่งดังมาก คุณอาจเคยได้ยินชื่อมาแล้ว

312
00:20:14,860 --> 00:20:18,021
สิ่งที่เราทำได้ — ผมจะฝากลิงก์ไว้ในคำอธิบายวิดีโอ

313
00:20:18,021 --> 00:20:21,182
— แค่ก็อปปี้มันมาให้ Claude ผมก็อปปี้ GitHub repo

314
00:20:21,182 --> 00:20:26,214
ได้เลย แล้วบอกว่า "เฮ้ ติดตั้งสกิลนี้ และใช้มันเพื่อรีวิวดีไซน์ของเว็บไซต์ฉัน"

315
00:20:26,214 --> 00:20:29,698
แล้วมันจะทำให้เว็บดูดีขึ้น แทนที่ผมจะต้องคิดพรอมป์สวยๆ

316
00:20:29,698 --> 00:20:33,246
เอง ผมก็แค่ติดตั้งสกิลนี้ สิ่งที่ผมทำคือ ผมหาสกิลนี้เจอ

317
00:20:33,246 --> 00:20:38,666
— คุณหาสกิลแบบนี้ได้เยอะแยะบนอินเทอร์เน็ต ลองมองหาตัวที่เหมาะกับสิ่งที่คุณกำลังสร้าง

318
00:20:38,666 --> 00:20:42,859
แล้วผมก็วางมันตรงนี้แล้วบอกว่า "ช่วยติดตั้งสกิลนี้แล้วเรียกใช้มัน

319
00:20:42,859 --> 00:20:45,956
เพื่อรีวิวเว็บไซต์และทำให้มันดูดีขึ้นหน่อย" โอเค

320
00:20:45,956 --> 00:20:49,052
แค่นั้นแหละ กด Enter แล้วมันก็จะเพิ่มสกิลนั้นให้

321
00:20:49,052 --> 00:20:54,084
ตอนนี้มันกำลังสร้างอยู่ แต่ระหว่างที่มันทำ ผมอยากโชว์อีกสกิลหนึ่งที่มีประโยชน์

322
00:20:54,084 --> 00:20:57,181
นั่นคือสกิลด้านความปลอดภัย ชื่อว่า Vibe Security

323
00:20:57,181 --> 00:21:02,794
Skill อีกครั้ง ผมจะฝากลิงก์ไว้ในคำอธิบายวิดีโอ ผมจะไม่ใช้ตัวนี้เพราะแอปผมไม่มีแบ็กเอนด์

324
00:21:02,794 --> 00:21:07,374
แต่ถ้าคุณกำลัง vibe coding อะไรที่ใหญ่กว่านั้น ถ้าแคร์เรื่องความปลอดภัย

325
00:21:07,374 --> 00:21:12,148
ถ้าอยากให้แน่ใจว่าจะไม่ถูกแฮก เช่นมีข้อมูลผู้ใช้จริงหรือคีย์จริงที่ใช้อยู่

326
00:21:12,148 --> 00:21:17,438
ผมแนะนำอย่างยิ่งให้ติดตั้งตัวนี้ คุณติดตั้งด้วยกระบวนการเดียวกับที่เห็นก่อนหน้านี้

327
00:21:17,438 --> 00:21:20,664
แค่ก็อปปี้ URL บอกว่า "ติดตั้งแล้วรันมันและใช้มัน"

328
00:21:20,664 --> 00:21:26,535
ถ้าอ่านเนื้อหาด้านใน คุณจะเห็นว่ามันเป็นคู่มือการเขียนโค้ดอย่างปลอดภัยสำหรับเว็บแอปพลิเคชัน

329
00:21:26,535 --> 00:21:30,019
วิธีป้องกันปัญหาต่างๆ ปัญหาการควบคุมการเข้าถึง (access

330
00:21:30,019 --> 00:21:33,244
control) การเขียนเช็คสิทธิ์ (authorization checks)

331
00:21:33,244 --> 00:21:37,309
สิ่งที่มันจะทำคือบังคับให้ Claude Code ไล่ดูแอปของคุณและตรวจสอบ

332
00:21:37,309 --> 00:21:41,051
(audit) อย่างอิสระโดยใช้เครื่องมือทั้งหมดที่โชว์อยู่ตรงนี้

333
00:21:41,051 --> 00:21:44,986
เพื่อให้แน่ใจว่าคุณจะไม่ถูกแฮก แน่นอนว่านี่ไม่ใช่การรับประกัน

334
00:21:44,986 --> 00:21:50,276
มันไม่ได้ทำให้แอปของคุณปลอดภัยที่สุดในโลก แต่ควรจับปัญหาที่เห็นได้ชัดและแฮกง่ายได้

335
00:21:50,276 --> 00:21:53,631
ดังนั้นผมแนะนำให้ทำแบบเดิมอีกครั้ง ก็อปปี้ วางตรงนี้

336
00:21:53,631 --> 00:21:58,211
แล้วบอกว่า "ช่วยรันสกิลนี้หน่อย" แล้วมันก็จะรันและทำให้แน่ใจว่าคุณพร้อม

337
00:21:58,211 --> 00:22:02,082
อีกครั้ง มันยังสร้างอยู่ เราจะรอให้เสร็จ แล้วไปต่อเฟสสุดท้าย

338
00:22:02,082 --> 00:22:05,630
ซึ่งก็คือการดีพลอย์ โอเค ดูเหมือนว่ามันเสร็จสมบูรณ์แล้ว

339
00:22:05,630 --> 00:22:08,985
สิ่งที่เราจะทำคือไปต่อที่การดีพลอย์ สำหรับการดีพลอย์

340
00:22:08,985 --> 00:22:14,017
เนื่องจากเราเชื่อมต่อกับ Hostinger อยู่แล้ว สิ่งที่ต้องทำก็แค่บอกมันให้ดีพลอย์

341
00:22:14,017 --> 00:22:18,598
แล้วมันจะดีพลอย์ให้เรา ซึ่งเป็นประโยชน์ทั้งหมดของการมีคอนเนกเตอร์ตัวนี้

342
00:22:18,598 --> 00:22:21,630
เราจะพูดว่า "ช่วยดีพลอย์เว็บไซต์นี้ตอนนี้โดยใช้

343
00:22:21,630 --> 00:22:25,630
Hostinger หน่อย" ตามรายการแรกตรงนี้ แล้วหวังว่ามันจะดีพลอย์ให้

344
00:22:25,630 --> 00:22:30,146
จำไว้ด้วยว่าคุณดีพลอย์ได้หลายเว็บไซต์ที่นี่ ทั้งแอปพลิเคชันประเภทต่างๆ

345
00:22:30,146 --> 00:22:33,178
เพราะมันเชื่อมต่ออยู่ คุณใช้มันกับโปรเจกต์ต่างๆ

346
00:22:33,178 --> 00:22:37,178
ได้ และดีพลอย์ไปที่เซิร์ฟเวอร์เดิมเรื่อยๆ ไม่ต้องซื้อใหม่บ่อยๆ

347
00:22:37,178 --> 00:22:40,984
เว้นแต่จะเกินขีดจำกัด และถ้าคุณยังไม่ได้ตั้งค่าคอนเนกชันนี้

348
00:22:40,984 --> 00:22:45,435
ผมจะฝากลิงก์ไว้ด้านล่าง เผื่ออยากตั้งค่าตอนนี้และทำให้แอปออนไลน์จริงๆ

349
00:22:45,435 --> 00:22:48,790
เอาล่ะ ขอเวลาสักครู่ มันจะทำตามคำสั่ง แล้วเราก็พร้อม

350
00:22:48,790 --> 00:22:52,080
เอาล่ะ เว็บไซต์ดีพลอย์แล้ว เพิ่งเสร็จ ถ้าผมไปตรงนี้

351
00:22:52,080 --> 00:22:57,177
คุณจะเห็น tim.ruscica.com มันออนไลน์แล้ว เรามีแอปพลิเคชันที่ดีพลอย์เสร็จสมบูรณ์

352
00:22:57,177 --> 00:23:00,532
ผมไม่ต้องทำอะไรเลย แค่บอกมันว่า "เฮ้ ดีพลอย์แอปไปที่

353
00:23:00,532 --> 00:23:05,499
Hostinger" แล้วมันก็จัดการให้หมด และนั่นคือเหตุผลที่ผมชอบใช้คอนเนกเตอร์ตัวนี้

354
00:23:05,499 --> 00:23:09,370
เพราะมันประหยัดเวลาผมได้จริงๆ มันมี HTTPS โดเมนเชื่อมต่อแล้ว

355
00:23:09,370 --> 00:23:12,531
และผมไม่ต้องทำอะไรซับซ้อนเลย โอเค แค่นี้แหละทุกคน

356
00:23:12,531 --> 00:23:16,015
วิดีโอนี้จะจบลงตรงนี้ นี่คือไกด์ vibe coding แบบรวบรัด

357
00:23:16,015 --> 00:23:20,660
หวังว่ามันช่วยให้คุณตั้งค่าสภาพแวดล้อมได้ สอนแนวทางปฏิบัติที่ดีสองสามข้อ

358
00:23:20,660 --> 00:23:25,240
โชว์เครื่องมือที่น่าสนใจ และตอนนี้คุณก็ออกไปสร้างอะไรที่มีประโยชน์จริงๆ

359
00:23:25,240 --> 00:23:28,853
ได้แล้ว สุดท้าย ถ้าชอบวิดีโอนี้ อย่าลืมกดไลก์และกดติดตาม

360
00:23:28,853 --> 00:23:30,466
แล้วเจอกันวิดีโอหน้า ครับ