Complete Guide to building a website with Claude (Step by Step)

1
00:00:00,000 --> 00:00:01,560
สวัสดีครับทุกคน Ray เองครับ

2
00:00:01,560 --> 00:00:02,716
กลับมาเจอกันอีกครั้ง

3
00:00:02,716 --> 00:00:05,316
วิดีโอนี้ผมจะพาทุกคนไปออกแบบ สร้าง และ deploy

4
00:00:05,316 --> 00:00:07,975
เว็บไซต์ ด้วย tech stack (ชุดเทคโนโลยี) ง่าย ๆ

5
00:00:07,975 --> 00:00:09,072
ชุดนี้ครับ

6
00:00:09,072 --> 00:00:11,383
หลายคนน่าจะเคยดูวิดีโอก่อนหน้าที่ผมลงไว้

7
00:00:11,383 --> 00:00:13,752
แต่มีคนบอกมาว่าคลิปนั้นไม่เหมาะกับมือใหม่

8
00:00:13,752 --> 00:00:14,849
ไปเร็วเกินไป

9
00:00:14,849 --> 00:00:17,276
และข้อมูลเยอะเกินไปสำหรับคลิปยาวแค่ 6 นาที

10
00:00:17,276 --> 00:00:19,126
ผมเลยอยากทำเป็นซีรีส์ใหม่ให้ครับ

11
00:00:19,126 --> 00:00:21,379
ในวิดีโอนี้ผมจะสอนทีละขั้นตอนแบบละเอียด

12
00:00:21,379 --> 00:00:23,575
วิธีสร้างเว็บไซต์ทั้งเว็บสำหรับมือใหม่

13
00:00:23,575 --> 00:00:25,251
ขั้นแรกเราจะใช้ Claude Design

14
00:00:25,251 --> 00:00:27,100
(ฟีเจอร์ออกแบบเว็บจาก Anthropic)

15
00:00:27,100 --> 00:00:29,527
ในการสร้างเลย์เอาต์และดีไซน์ของเว็บ Claude

16
00:00:29,527 --> 00:00:32,185
Design เป็นฟีเจอร์ใหม่ที่เพิ่งออกจาก Anthropic

17
00:00:32,185 --> 00:00:34,381
เมื่อช่วงเดือนเมษายนถึงพฤษภาคมของปีนี้

18
00:00:34,381 --> 00:00:36,924
ตอนนี้จึงยังอยู่ในช่วงพัฒนาต่อเนื่องอยู่ครับ

19
00:00:36,924 --> 00:00:39,524
ถ้าคุณมีแพ็กเกจรายเดือนของ Claude เช่นแบบ Pro

20
00:00:39,524 --> 00:00:41,200
คุณก็ใช้ Claude Design ได้เลย

21
00:00:41,200 --> 00:00:43,569
พอออกแบบเว็บเสร็จ เราจะ export จาก Claude

22
00:00:43,569 --> 00:00:45,476
Design ส่งตรงเข้าไปใน Claude Code

23
00:00:45,476 --> 00:00:47,961
(เครื่องมือเขียนโค้ดด้วย AI) แล้วให้ Claude

24
00:00:47,961 --> 00:00:49,810
Code แปลงไฟล์ทั้งหมดเป็น Next.js

25
00:00:49,810 --> 00:00:52,353
(เฟรมเวิร์กสำหรับสร้างเว็บแอปพลิเคชัน) เพราะ

26
00:00:52,353 --> 00:00:54,607
Claude Design สร้างได้แค่เว็บแบบ static

27
00:00:54,607 --> 00:00:56,687
(หน้าเว็บคงที่) แต่เราต้องการเว็บแบบ

28
00:00:56,687 --> 00:00:59,056
full-stack ที่มีฝั่งหลังบ้านด้วย เราจะใช้

29
00:00:59,056 --> 00:01:00,443
Supabase (บริการ backend

30
00:01:00,443 --> 00:01:02,235
ให้ฐานข้อมูลและระบบยืนยันตัวตน)

31
00:01:02,235 --> 00:01:04,604
สำหรับฐานข้อมูลและระบบ login ของเว็บ ส่วน

32
00:01:04,604 --> 00:01:07,031
GitHub ใช้เก็บไฟล์และโค้ดทั้งหมดของเรา และ

33
00:01:07,031 --> 00:01:09,516
Vercel (แพลตฟอร์ม host เว็บไซต์) ใช้ deploy

34
00:01:09,516 --> 00:01:12,174
เว็บขึ้นออนไลน์ ตอนนี้เราจะไล่แค่ stack ง่าย ๆ

35
00:01:12,174 --> 00:01:14,254
ชุดนี้ก่อน เพราะสำหรับคนส่วนใหญ่แล้ว

36
00:01:14,254 --> 00:01:15,352
แค่นี้ก็เพียงพอแล้ว

37
00:01:15,352 --> 00:01:18,068
สำหรับการสร้างเว็บไซต์ที่ติดต่อกับผู้ใช้ได้จริง

38
00:01:18,068 --> 00:01:20,322
เริ่มกันเลยครับ เข้าไปที่ Claude Design

39
00:01:20,322 --> 00:01:21,998
ผมเปิดแท็บเว็บที่ใช้ทำไว้แล้ว

40
00:01:21,998 --> 00:01:24,598
และจะแปะลิงก์ทั้งหมดไว้ในคำอธิบาย เปิด Claude

41
00:01:24,598 --> 00:01:27,141
Design ขึ้นมา นี่คือหน้าแรกของ Claude Design

42
00:01:27,141 --> 00:01:29,568
ด้านซ้ายจะเห็นตัวเลือกสร้าง prototype ใหม่

43
00:01:29,568 --> 00:01:31,706
หรือ slide deck หรือเริ่มจาก template

44
00:01:31,706 --> 00:01:33,902
คุณจะกดเข้าไปใช้ตัวเลือก new prototype

45
00:01:33,902 --> 00:01:36,502
เลยก็ได้ หรือพิมพ์ชื่อธุรกิจอะไรก็ได้สักอย่าง

46
00:01:36,502 --> 00:01:38,872
ใส่คำอธิบายสั้น ๆ แล้วดูว่ามันจะ generate

47
00:01:38,872 --> 00:01:41,472
เว็บอะไรออกมา แต่ในวิดีโอนี้เราจะสร้าง design

48
00:01:41,472 --> 00:01:43,263
system (คลังอัตลักษณ์ของแบรนด์)

49
00:01:43,263 --> 00:01:44,939
ถ้ายังไม่เคยใช้ Claude Design

50
00:01:44,939 --> 00:01:47,540
ผมแนะนำให้เวลาสักหน่อย เที่ยวสำรวจฟีเจอร์ต่าง

51
00:01:47,540 --> 00:01:49,793
ๆ ดูก่อน ตอนนี้ผมจะสรุปวิธีใช้แบบเร็ว ๆ

52
00:01:49,793 --> 00:01:52,278
ให้ฟังนะครับ จุดที่เจ๋งมากของ Claude Design

53
00:01:52,278 --> 00:01:54,590
คือ มันช่วยให้เราสร้าง design system ได้

54
00:01:54,590 --> 00:01:56,843
ซึ่งคุณจะนึกภาพง่าย ๆ ว่าเป็นคลังความจำ

55
00:01:56,843 --> 00:01:59,039
ที่เก็บอัตลักษณ์แบรนด์ของคุณไว้ทั้งหมด

56
00:01:59,039 --> 00:02:00,831
ไม่ว่าจะเป็นชุดสี ฟอนต์ ข้อความ

57
00:02:00,831 --> 00:02:03,489
และโทนของแบรนด์ ล้วนถูกเก็บไว้ใน design system

58
00:02:03,489 --> 00:02:05,974
ของบริษัท เราจะคลิกที่ design system ด้านบน

59
00:02:05,974 --> 00:02:07,938
แล้วกด create พอหน้าต่างเด้งขึ้นมา

60
00:02:07,938 --> 00:02:10,192
จะมีให้กรอกชื่อบริษัท และคำอธิบายสั้น ๆ

61
00:02:10,192 --> 00:02:13,370
ของบริษัท สำหรับ design system นี้ ด้านล่างมีช่องอื่น ๆ

62
00:02:13,370 --> 00:02:15,566
ให้อัปโหลดโค้ด หรือไฟล์แบรนด์ของบริษัท

63
00:02:15,566 --> 00:02:17,184
เช่นโลโก้ที่มีอยู่และอยากใช้

64
00:02:17,184 --> 00:02:18,629
เนื่องจากนี่เป็นวิดีโอสอน

65
00:02:18,629 --> 00:02:20,825
ผมเลยสร้างร้านกาแฟสมมติขึ้นมาหนึ่งร้าน

66
00:02:20,825 --> 00:02:22,501
แล้วจะสร้างเว็บไซต์ให้ร้านนี้

67
00:02:22,501 --> 00:02:25,043
ผมจะก็อปชื่อร้านกาแฟ คำอธิบาย และสโลแกนของผม

68
00:02:25,043 --> 00:02:27,644
มาวางในช่องตรงนี้ ช่องอื่น ๆ ผมจะข้ามไป เพราะ

69
00:02:27,644 --> 00:02:29,262
Claude จะสร้างส่วนนั้นให้เอง

70
00:02:29,262 --> 00:02:31,573
จากนั้นผมจะก็อปชุดสีและฟอนต์ที่เตรียมไว้

71
00:02:31,573 --> 00:02:33,885
มาวางตรงนี้ การพิมพ์สีและฟอนต์ที่อยากให้

72
00:02:33,885 --> 00:02:35,849
Claude ใช้ลงไปตรงนี้ ก็ใช้ได้ดีเลย

73
00:02:35,849 --> 00:02:38,161
ถ้าไม่มีไฟล์จะอัปโหลด โอเค พอกรอกเสร็จกด

74
00:02:38,161 --> 00:02:40,126
generate ได้เลย มันจะใช้เวลาสักพัก

75
00:02:40,126 --> 00:02:42,033
ระหว่างรอก็พักสายตา ยืดเส้นยืดสาย

76
00:02:42,033 --> 00:02:43,420
เดินเล่นแล้วค่อยกลับมาดู

77
00:02:43,420 --> 00:02:46,020
จะเห็นว่ามันเริ่มกำหนดงานให้ตัวเองทำทีละอย่าง

78
00:02:46,020 --> 00:02:47,754
แล้วค่อย ๆ ไล่ทำให้ครบทุก item

79
00:02:47,754 --> 00:02:49,140
เราก็รอดูก่อนนะครับ โอเค

80
00:02:49,140 --> 00:02:51,510
ดูเหมือนถึงขั้นตอนรีวิวระบบแล้ว จะเห็นว่า

81
00:02:51,510 --> 00:02:53,012
Claude ยังทำไม่ครบทุกอย่าง

82
00:02:53,012 --> 00:02:54,515
แต่ระหว่างที่มันทำอยู่นั้น

83
00:02:54,515 --> 00:02:56,364
เราสามารถเข้าไปเช็คฟีเจอร์ต่าง ๆ

84
00:02:56,364 --> 00:02:59,080
ได้เลย ดูได้ทั้งสี ฟอนต์ รวมถึงโลโก้ ปุ่มต่าง ๆ

85
00:02:59,080 --> 00:03:01,680
และไอคอนบนเว็บ แต่ละอย่างเรากดบอกได้ว่า looks

86
00:03:01,680 --> 00:03:04,338
good (ดูดีแล้ว) หรือถ้าดูแล้วยังไม่ดี กด needs

87
00:03:04,338 --> 00:03:06,188
work จะมีกล่องคอมเมนต์เด้งขึ้นมา

88
00:03:06,188 --> 00:03:08,095
ให้พิมพ์สิ่งที่อยากแก้ไขลงไป เช่น

89
00:03:08,095 --> 00:03:10,522
สั่งให้ปรับสีประจำแบรนด์ ผมจะกด looks good

90
00:03:10,522 --> 00:03:12,197
ทุกอย่างเลย เพราะนี่เป็น demo

91
00:03:12,197 --> 00:03:13,989
แต่คุณสามารถกดหยุดวิดีโอ ค่อย ๆ

92
00:03:13,989 --> 00:03:16,069
เล่นกับกล่องคอมเมนต์ ไล่กดดูทุกอย่าง

93
00:03:16,069 --> 00:03:18,092
แก้ไขตามที่ต้องการได้เลยนะครับ โอเค

94
00:03:18,092 --> 00:03:20,288
ดูเหมือนเว็บไซต์เสร็จแล้ว อย่างที่เห็น

95
00:03:20,288 --> 00:03:22,946
มันสร้างทุกอย่างให้ครบ ทั้งฟอนต์และสีของแบรนด์

96
00:03:22,946 --> 00:03:25,084
และเข้ากับคำอธิบายร้านกาแฟที่ผมให้ไว้

97
00:03:25,084 --> 00:03:27,453
เราคลิกดูไอคอนบางตัวได้ มันมีปุ่มสั่งซื้อ

98
00:03:27,453 --> 00:03:29,649
(order) ด้วย ที่เลาะเมนูมาใส่ตะกร้าได้

99
00:03:29,649 --> 00:03:31,787
เลือกนมที่ต้องการ หรือจะไม่ใส่นมก็ได้

100
00:03:31,787 --> 00:03:32,885
แล้วกดหยิบใส่ตะกร้า

101
00:03:32,885 --> 00:03:35,370
ระบบให้รีวิวคำสั่งซื้อก่อนยืนยัน แล้วค่อยกด

102
00:03:35,370 --> 00:03:37,913
submit ได้เลย โอเค ไม่รู้ส่วนนี้โผล่มาจากไหน

103
00:03:37,913 --> 00:03:40,051
แต่แก้ง่าย ๆ พิมพ์ในแชตด้านซ้ายได้เลย

104
00:03:40,051 --> 00:03:42,131
บอกว่าอยากได้ช่องให้ลูกค้ากรอกข้อมูล

105
00:03:42,131 --> 00:03:43,922
หรือจะเพิ่มปุ่มชำระเงินเลยก็ได้

106
00:03:43,922 --> 00:03:45,598
ให้ลูกค้าจ่ายตอนสั่งซื้อเสร็จ

107
00:03:45,598 --> 00:03:47,736
แต่ผมจะข้ามส่วนนั้น บอกแค่ว่าโอเคแล้ว

108
00:03:47,736 --> 00:03:49,008
เพื่อได้ไปต่อกันเร็ว ๆ

109
00:03:49,008 --> 00:03:52,533
อีกจุดที่เจ๋งของ Claude Design คือ คุณคลิกแก้องค์ประกอบต่าง ๆ

110
00:03:52,533 --> 00:03:57,040
บนเว็บได้โดยตรง ถ้ากด edit ที่ด้านบน คุณจะเลือกองค์ประกอบบนหน้าเว็บได้ คล้าย ๆ

111
00:03:57,040 --> 00:03:59,698
กับ Squarespace (เครื่องมือสร้างเว็บแบบลากวาง)

112
00:03:59,698 --> 00:04:02,356
แก้ข้อความได้ทันทีด้วยการพิมพ์ลงในกล่องข้อความ

113
00:04:02,356 --> 00:04:04,784
หรือเลือกข้อความแล้วเปลี่ยนสี เปลี่ยนฟอนต์

114
00:04:04,784 --> 00:04:07,384
ขนาด อะไรแบบนี้ได้บนหน้าจอเลย โดยไม่ต้องเขียน

115
00:04:07,384 --> 00:04:09,753
prompt สั่งให้ Claude แก้คำหรือประโยคนั้น

116
00:04:09,753 --> 00:04:12,180
คุณทำเองได้เลยด้วยการคลิกที่องค์ประกอบนั้น

117
00:04:12,180 --> 00:04:14,318
นอกจากนี้ยังมีวิธีแก้ดีไซน์อีกหลายแบบ

118
00:04:14,318 --> 00:04:16,630
หนึ่งคือการฝากคอมเมนต์ กด comment ด้านบน

119
00:04:16,630 --> 00:04:18,884
แล้วคลิกที่องค์ประกอบ ที่อยากจะคอมเมนต์

120
00:04:18,884 --> 00:04:20,675
พอทำแล้วจะมีกล่องเด้งขึ้นมาบนจอ

121
00:04:20,675 --> 00:04:21,831
ให้เขียนคอมเมนต์ลงไป

122
00:04:21,831 --> 00:04:23,449
จะกดเก็บคอมเมนต์ไว้ก่อนก็ได้

123
00:04:23,449 --> 00:04:25,529
เพื่อทำหลายคอมเมนต์ก่อนส่งให้ Claude

124
00:04:25,529 --> 00:04:28,014
ครั้งเดียว หรือจะกด send ส่งตรงไปที่ Claude

125
00:04:28,014 --> 00:04:30,499
เลยก็ได้ ยังมีฟังก์ชัน draw อีกด้วย กด draw

126
00:04:30,499 --> 00:04:33,041
ด้านบน แล้วลากเมาส์วนรอบพื้นที่ที่ต้องการแก้

127
00:04:33,041 --> 00:04:35,064
เช่น ผมวนตรงนี้ แล้วพิมพ์โน้ตสั้น ๆ

128
00:04:35,064 --> 00:04:37,491
บอกสิ่งที่จะแก้ ด้านล่างจะมีปุ่มให้เข้าคิว

129
00:04:37,491 --> 00:04:38,588
(queue) ไว้ก่อน

130
00:04:38,588 --> 00:04:40,784
ทำการแก้ไขหลายอย่างพร้อมกันแล้วค่อยส่ง

131
00:04:40,784 --> 00:04:43,384
หรือจะกด send ทันทีก็ได้ และคุณยังสั่ง Claude

132
00:04:43,384 --> 00:04:45,869
ตรง ๆ ผ่านแชต ที่มุมล่างซ้ายได้อีกด้วย โอเค

133
00:04:45,869 --> 00:04:48,469
ตอนนี้ Claude Design สร้างเว็บให้เราเรียบร้อย

134
00:04:48,469 --> 00:04:51,070
เราสามารถกด share มุมขวาบน แล้วเลือก hand off

135
00:04:51,070 --> 00:04:53,613
to Claude code จะมีหน้าต่างเล็ก ๆ เด้งขึ้นมา

136
00:04:53,613 --> 00:04:56,213
พร้อม command prompt ที่ก็อปไปให้ Claude Code

137
00:04:56,213 --> 00:04:58,640
ได้ ตามที่เห็นครับ แต่ก่อนเปิด Claude Code

138
00:04:58,640 --> 00:05:01,009
ผมจะเข้า file explorer ก่อน ไปที่โฟลเดอร์

139
00:05:01,009 --> 00:05:02,801
projects ถ้ายังไม่มีโฟลเดอร์นี้

140
00:05:02,801 --> 00:05:05,343
สร้างขึ้นมาได้เลย นี่คือที่ที่ผมเก็บโปรเจกต์

141
00:05:05,343 --> 00:05:06,441
Claude Code ทั้งหมด

142
00:05:06,441 --> 00:05:09,099
ผมจะสร้างโฟลเดอร์ใหม่สำหรับเว็บนี้ ตั้งชื่อว่า

143
00:05:09,099 --> 00:05:10,486
Canopy Cafe website โอเค

144
00:05:10,486 --> 00:05:12,856
มีโฟลเดอร์โปรเจกต์แล้ว ก็เปิด Claude Code

145
00:05:12,856 --> 00:05:15,283
ขึ้นมา ไปที่แท็บไฟล์มุมซ้ายบน กด file แล้ว

146
00:05:15,283 --> 00:05:17,883
open folder เลือกโฟลเดอร์ Canopy Cafe website

147
00:05:17,883 --> 00:05:20,252
ที่เพิ่งสร้าง แล้วกด select folder นี่คือ

148
00:05:20,252 --> 00:05:21,639
workspace (พื้นที่ทำงาน)

149
00:05:21,639 --> 00:05:23,835
ที่เราจะใช้ในโฟลเดอร์นี้ ไฟล์และ asset

150
00:05:23,835 --> 00:05:26,378
ของเว็บทั้งหมดที่เราจะสร้าง จะอยู่ในโฟลเดอร์

151
00:05:26,378 --> 00:05:28,863
Canopy Cafe website นี้ และด้านขวาคือแชตกับ

152
00:05:28,863 --> 00:05:30,770
Claude พอเปิดโฟลเดอร์โปรเจกต์แล้ว

153
00:05:30,770 --> 00:05:32,503
ผมจะใช้แชตด้านขวาสร้างไฟล์ .md

154
00:05:32,503 --> 00:05:33,890
ขั้นตอนนี้สำคัญมากนะครับ

155
00:05:33,890 --> 00:05:36,375
"ผมกำลังสร้างเว็บไซต์ให้ร้านกาแฟชื่อ Canopy

156
00:05:36,375 --> 00:05:38,340
Cafe ช่วยบันทึกข้อมูลนี้ลงไฟล์ .md

157
00:05:38,340 --> 00:05:40,709
ของโปรเจกต์หน่อย" ไฟล์ .md สำคัญมาก เพราะ

158
00:05:40,709 --> 00:05:42,038
Claude ใช้มันเป็นความจำ

159
00:05:42,038 --> 00:05:44,234
มันบันทึกข้อมูลจากแชตและโปรเจกต์ของคุณ

160
00:05:44,234 --> 00:05:45,621
ถ้าวันหนึ่งปิดโปรเจกต์ไป

161
00:05:45,621 --> 00:05:47,643
คุณก็ยังกลับมาทำต่อจากที่ค้างไว้ได้

162
00:05:47,643 --> 00:05:50,128
ข้อมูลทั้งหมดจะยังอยู่ครบ เสร็จแล้ว ผมจะวาง

163
00:05:50,128 --> 00:05:52,729
command prompt จาก Claude Design เพื่อ import

164
00:05:52,729 --> 00:05:55,387
เว็บเข้ามาตรงนี้ ตอนที่มีคำถามเด้งขึ้นมา ให้กด

165
00:05:55,387 --> 00:05:57,409
yes ให้หมดไปเลย เพราะนั่นคือ Claude

166
00:05:57,409 --> 00:06:00,010
ขออนุญาตทำงานของมัน กระบวนการนี้ใช้เวลาประมาณ

167
00:06:00,010 --> 00:06:02,668
10 นาที แต่พอเสร็จ คุณจะเห็น item ใหม่จำนวนมาก

168
00:06:02,668 --> 00:06:04,748
โผล่ขึ้นมาในโฟลเดอร์โปรเจกต์ด้านซ้าย

169
00:06:04,748 --> 00:06:06,020
คุณคลิกไฟล์ index.html

170
00:06:06,020 --> 00:06:07,869
เพื่อดูโค้ดที่มันเขียนให้เว็บได้

171
00:06:07,869 --> 00:06:09,140
ถ้าอยากดูตัวเว็บจริง ๆ

172
00:06:09,140 --> 00:06:11,509
ให้เข้าไปโฟลเดอร์โปรเจกต์ใน file explorer

173
00:06:11,509 --> 00:06:13,647
คลิกที่ ui kits แล้วเข้า website ไฟล์

174
00:06:13,647 --> 00:06:15,034
index.html จะอยู่ตรงนั้น

175
00:06:15,034 --> 00:06:16,941
กดเปิดแล้วเว็บควรจะเปิดใน browser

176
00:06:16,941 --> 00:06:18,502
แต่บางทีจะเจอหน้าจอดำแบบนี้

177
00:06:18,502 --> 00:06:20,986
เราเลยต้องกลับไปถาม Claude ในแชตว่าแก้ยังไง

178
00:06:20,986 --> 00:06:23,471
มาดูกันว่า Claude ตอบว่าอะไรนะครับ ถ้าใน VS

179
00:06:23,471 --> 00:06:25,205
Code (โปรแกรมเขียนโค้ด) ของคุณ

180
00:06:25,205 --> 00:06:27,343
ยังไม่ได้ติดตั้งส่วนขยาย live browser

181
00:06:27,343 --> 00:06:29,712
ให้คลิกไอคอนสี่ช่องเหลี่ยม แล้วค้นหา live

182
00:06:29,712 --> 00:06:30,926
browser by Riddik Day

183
00:06:30,926 --> 00:06:32,659
ตัวแรกที่โผล่ขึ้นมาน่าจะใช่เลย

184
00:06:32,659 --> 00:06:34,797
ผมติดตั้งไว้แล้ว แต่คุณควรติดตั้งด้วย

185
00:06:34,797 --> 00:06:37,340
เพราะมันมีประโยชน์มากกับทุกโปรเจกต์เว็บ โอเค

186
00:06:37,340 --> 00:06:39,594
เราจะใช้ช่องค้นหาด้านบน พิมพ์ว่า simple

187
00:06:39,594 --> 00:06:41,963
browser แล้วเลือกตัวเลือกแรก จะมี browser

188
00:06:41,963 --> 00:06:44,563
เปล่า ๆ โผล่ขึ้นมาด้านซ้าย ตอนนี้ผมจะก็อป URL

189
00:06:44,563 --> 00:06:46,644
ที่อยู่ในแชตของผม ถ้าในแชตไม่มีลิงก์

190
00:06:46,644 --> 00:06:49,302
ก็ถามแชตให้สร้างให้ก็ได้ มาวางตรงนี้ แล้วก็เลย

191
00:06:49,302 --> 00:06:51,902
เห็นเว็บเราแล้วครับ ดูเหมือนทุกอย่างจะอยู่ครบ

192
00:06:51,902 --> 00:06:53,463
หน้าสั่งซื้อก็ยังใช้ได้ปกติ

193
00:06:53,463 --> 00:06:55,774
แต่สีของฟอนต์หน้าแรกเปลี่ยนไป ผมเลยจะให้

194
00:06:55,774 --> 00:06:58,259
Claude แก้ บอกว่า "แก้ให้หน่อย" ได้แล้วครับ

195
00:06:58,259 --> 00:06:59,993
ผมไม่ชอบพื้นที่ว่างด้านซ้ายเลย

196
00:06:59,993 --> 00:07:01,900
เลยสั่งให้เพิ่มใบไม้ตกแต่งตรงนั้น

197
00:07:01,900 --> 00:07:02,997
ตอนนี้ดูดีแล้ว โอเค

198
00:07:02,997 --> 00:07:05,598
ขั้นต่อไปคือแปลงไฟล์ทั้งหมดของโปรเจกต์ ให้ใช้

199
00:07:05,598 --> 00:07:08,083
Next.js เป็นเฟรมเวิร์ก นี่คือแอปพลิเคชันแบบ

200
00:07:08,083 --> 00:07:10,683
full-stack เราจะใช้ Supabase เป็น backend และ

201
00:07:10,683 --> 00:07:13,168
Vercel ในการ host ส่วน front end ผมกำลังถาม

202
00:07:13,168 --> 00:07:14,439
Claude ในแชตว่าทำยังไง

203
00:07:14,439 --> 00:07:16,115
เพื่อให้ได้คำแนะนำทีละขั้นตอน

204
00:07:16,115 --> 00:07:18,022
ถ้าติดตรงไหนตอนทำตาม ก็ถาม Claude

205
00:07:18,022 --> 00:07:20,391
ได้เสมอเลยนะครับ ได้คำแนะนำมาแล้ว ก่อนที่

206
00:07:20,391 --> 00:07:22,645
Claude จะใช้ Next.js ได้ คุณต้องติดตั้ง

207
00:07:22,645 --> 00:07:25,014
Node.js (ตัวรันจาวาสคริปต์) ในเครื่องก่อน

208
00:07:25,014 --> 00:07:27,326
เข้าไปที่ nodejs.org แล้วดาวน์โหลดได้เลย

209
00:07:27,326 --> 00:07:29,637
ผมแปะลิงก์ไว้ด้านล่างแล้ว กด get Node.js

210
00:07:29,637 --> 00:07:32,238
แล้วเลือกเวอร์ชัน LTS (เวอร์ชันเสถียรระยะยาว)

211
00:07:32,238 --> 00:07:34,896
ในดรอปดาวน์จะเห็นเวอร์ชันใหม่กว่า แต่ผมว่า LTS

212
00:07:34,896 --> 00:07:37,150
ใช้แล้วเสถียรกว่าเสมอ ถ้าใช้ Windows กด

213
00:07:37,150 --> 00:07:39,519
install ได้เลย เปลี่ยนเป็น Mac หรือ Linux

214
00:07:39,519 --> 00:07:42,119
ก็ได้ แล้วเปิดไฟล์ติดตั้งตามขั้นตอน กลับมาที่

215
00:07:42,119 --> 00:07:44,431
Claude Code ตอนนี้มี Node.js แล้ว เราบอก

216
00:07:44,431 --> 00:07:46,800
Claude ให้แปลงทุกอย่างเป็น Next.js ได้เลย

217
00:07:46,800 --> 00:07:48,360
กระบวนการนี้ก็ใช้เวลาสักพัก

218
00:07:48,360 --> 00:07:50,556
มีคำถามเด้งขึ้นมาตอนไหนก็กด yes ให้หมด

219
00:07:50,556 --> 00:07:53,099
ระหว่างที่ Claude ทำงานอยู่ ผมจะไปที่ GitHub

220
00:07:53,099 --> 00:07:55,006
สร้าง repo ใหม่ ใส่คำอธิบายสั้น ๆ

221
00:07:55,006 --> 00:07:57,317
แล้วเว้นค่าอื่น ๆ ไว้ตามเดิม ช่อง readme

222
00:07:57,317 --> 00:07:59,686
ไม่ต้องติ๊ก เพราะ Claude สร้างไฟล์ readme

223
00:07:59,686 --> 00:08:01,882
ให้แล้ว กด create แล้วก็เสร็จเรียบร้อย

224
00:08:01,882 --> 00:08:03,443
กลับมาที่ Claude กัน Claude

225
00:08:03,443 --> 00:08:05,407
สร้างไฟล์ใหม่เสร็จแล้ว และดูตรงนี้

226
00:08:05,407 --> 00:08:08,066
มันใส่ไฟล์ไว้ในโฟลเดอร์แยกใหม่ชื่อ Canopy Cafe

227
00:08:08,066 --> 00:08:10,493
จะเปิดโฟลเดอร์นี้ ก็กลับขึ้นไปด้านบน เลือก

228
00:08:10,493 --> 00:08:12,977
file แล้ว open folder แล้วเลือก Canopy Cafe

229
00:08:12,977 --> 00:08:14,480
ตอนนี้เรามี workspace ใหม่

230
00:08:14,480 --> 00:08:16,445
และทำงานภายใต้โฟลเดอร์โปรเจกต์ใหม่

231
00:08:16,445 --> 00:08:18,929
แทนโฟลเดอร์เดิมที่เริ่มไว้ตอนแรก อย่าลืมให้

232
00:08:18,929 --> 00:08:21,357
Claude สร้างไฟล์ .md สำหรับโปรเจกต์นี้ด้วย

233
00:08:21,357 --> 00:08:23,668
แล้วผมถาม Claude ว่าขั้นต่อไปทำอะไร โอเค

234
00:08:23,668 --> 00:08:26,153
Claude มีคำแนะนำเพิ่มเติมให้ทำตามไปเรื่อย ๆ

235
00:08:26,153 --> 00:08:28,811
เพื่อเชื่อม Supabase และ Vercel เข้ากับเว็บเรา

236
00:08:28,811 --> 00:08:31,123
ผมจะเปิด Supabase ผม login อยู่แล้ว หน้า

237
00:08:31,123 --> 00:08:33,318
projects เป็นแบบนี้ ผมจะกด new project

238
00:08:33,318 --> 00:08:35,630
เกริ่นสั้น ๆ นะครับ ถ้าเพิ่งใช้ Supabase

239
00:08:35,630 --> 00:08:37,884
ครั้งแรก คุณต้องสร้าง organization ก่อน

240
00:08:37,884 --> 00:08:40,080
หน้าตาเป็นแบบนี้ กรอกชื่อ organization

241
00:08:40,080 --> 00:08:42,564
ที่ต้องการ ผมแนะนำแพ็กเกจฟรี เพราะใจดีพอควร

242
00:08:42,564 --> 00:08:44,818
และอัปเกรดทีหลังได้เสมอ ตอนนี้เรากด new

243
00:08:44,818 --> 00:08:47,361
project แล้วกรอกข้อมูลได้เลย ผมชอบต่อ GitHub

244
00:08:47,361 --> 00:08:48,458
เข้าด้วย

245
00:08:48,458 --> 00:08:51,116
เพื่อเชื่อมโปรเจกต์กับไฟล์เว็บที่เก็บบน GitHub

246
00:08:51,116 --> 00:08:52,734
ได้เลย ตั้งรหัสผ่านฐานข้อมูล

247
00:08:52,734 --> 00:08:55,045
แล้วอย่าลืมก็อปเก็บไว้ให้ดี เลือก server

248
00:08:55,045 --> 00:08:57,530
ใกล้ตัวคุณที่สุด เปิด RLS แล้วกด create RLS

249
00:08:57,530 --> 00:08:58,802
คือ row level security

250
00:08:58,802 --> 00:09:00,362
(ความปลอดภัยระดับแถวข้อมูล)

251
00:09:00,362 --> 00:09:02,384
เว็บของเราจะมีตารางแบบนี้สำหรับเมนู

252
00:09:02,384 --> 00:09:04,985
เราต้องเพิ่มตารางเอง จะทำมือผ่าน table editor

253
00:09:04,985 --> 00:09:06,372
ก็ได้ หรือใช้ SQL editor

254
00:09:06,372 --> 00:09:08,972
ซึ่งง่ายและเร็วกว่าเยอะ แต่จะให้ได้โค้ดสำหรับ

255
00:09:08,972 --> 00:09:10,937
SQL editor เราต้องกลับไปที่ Claude

256
00:09:10,937 --> 00:09:13,075
ที่ไฟล์ด้านซ้าย ผมจะหาไฟล์ schema.sql

257
00:09:13,075 --> 00:09:15,618
แล้วเปิดมัน แล้วก็อปข้อมูลทั้งหมดนี้ ไปวางใน

258
00:09:15,618 --> 00:09:18,276
SQL editor ของ Supabase แล้วกด run ดูสิ สำเร็จ

259
00:09:18,276 --> 00:09:20,818
และตารางถูกสร้างแล้ว ต่อไปคือเชื่อม Supabase

260
00:09:20,818 --> 00:09:23,188
เข้ากับเว็บเรา เปิดไฟล์ .env.local ขึ้นมา

261
00:09:23,188 --> 00:09:25,384
ถ้าไม่มี ก็สร้างไฟล์ใหม่และตั้งชื่อว่า

262
00:09:25,384 --> 00:09:26,713
.env.local จะถาม Claude

263
00:09:26,713 --> 00:09:28,562
ก็ได้ว่าต้องใส่อะไรในไฟล์นี้บ้าง

264
00:09:28,562 --> 00:09:29,891
เพื่อเชื่อมกับฐานข้อมูล

265
00:09:29,891 --> 00:09:31,798
แล้วก็อปคำตอบที่มันให้มาใช้ได้เลย

266
00:09:31,798 --> 00:09:34,398
ผมจะลบข้อความ placeholder ออกจากทั้งสองบรรทัด

267
00:09:34,398 --> 00:09:36,652
บรรทัดแรก ต้องเข้าไปที่ Supabase ในหน้า

268
00:09:36,652 --> 00:09:38,963
project overview ก็อป project URL ตรงนี้

269
00:09:38,963 --> 00:09:40,986
แล้วกลับมาวางตรงช่องที่เขียนว่า URL

270
00:09:40,986 --> 00:09:43,413
จากนั้นไปที่ Supabase กดไอคอนรูปเฟือง เข้า

271
00:09:43,413 --> 00:09:45,840
project settings แล้วเลือก API keys จะเห็น

272
00:09:45,840 --> 00:09:48,209
publishable key และ secret key ให้ก็อปตัว

273
00:09:48,209 --> 00:09:50,347
publishable key มาใช้ ส่วน secret key

274
00:09:50,347 --> 00:09:52,428
ไม่ต้องใช้ในงานนี้ แต่เก็บให้ปลอดภัย

275
00:09:52,428 --> 00:09:54,739
อย่าให้ใครเข้าถึงได้ วาง publishable key

276
00:09:54,739 --> 00:09:56,762
ตรงนี้ แล้วกด control S เพื่อบันทึก

277
00:09:56,762 --> 00:09:58,784
ตอนนี้เชื่อม Supabase เรียบร้อยแล้ว

278
00:09:58,784 --> 00:10:01,443
เช็คเว็บได้โดยลาก terminal ขึ้นมาจากด้านล่างจอ

279
00:10:01,443 --> 00:10:03,754
แล้วพิมพ์ npm run dev npm คือตัวรัน node

280
00:10:03,754 --> 00:10:06,354
มันกำลังรันระบบพัฒนา (development) ของคุณ จาก

281
00:10:06,354 --> 00:10:08,781
output ที่ได้ กด control คลิกที่ local URL

282
00:10:08,781 --> 00:10:11,324
เพื่อเปิดเว็บไซต์ขึ้นมา ว้าว หน้าตาดีมากครับ

283
00:10:11,324 --> 00:10:13,751
ต่อไปเราจะ push ไฟล์ขึ้น GitHub ถาม Claude

284
00:10:13,751 --> 00:10:15,947
ขอขั้นตอนทีละบรรทัดได้เลย ผมจะเปิดแท็บ

285
00:10:15,947 --> 00:10:18,490
PowerShell ใหม่ใน terminal แล้วก็อปคำสั่งที่

286
00:10:18,490 --> 00:10:20,454
Claude ให้มาวางทีละบรรทัด กด enter

287
00:10:20,454 --> 00:10:22,419
หลังทุกบรรทัด อ๊ะ ดูเหมือนจะ error

288
00:10:22,419 --> 00:10:25,020
เพราะไฟล์ของผมยังไม่อยู่ใน repo สาเหตุคือ URL

289
00:10:25,020 --> 00:10:27,678
ของ GitHub repo ที่ Claude ใช้ในโค้ด ไม่ตรงกับ

290
00:10:27,678 --> 00:10:30,220
URL จริงของ repo ผม ผมถาม Claude ว่าแก้ยังไง

291
00:10:30,220 --> 00:10:32,301
ก็จะใช้คำสั่งชุดใหม่ที่ Claude ให้มา

292
00:10:32,301 --> 00:10:34,843
และคราวนี้ใช้ URL ที่ถูกต้อง แล้วก็เรียบร้อย

293
00:10:34,843 --> 00:10:37,444
ไฟล์ทั้งหมดขึ้น GitHub ใน repo ที่ถูกต้องแล้ว

294
00:10:37,444 --> 00:10:39,986
ต่อไปเข้าไปที่ Vercel แล้วสร้าง project ใหม่

295
00:10:39,986 --> 00:10:42,645
จะเจอหน้าให้ import Git repo บัญชีผมต่อ GitHub

296
00:10:42,645 --> 00:10:44,032
ไว้แล้ว แต่ถ้าเพิ่งเริ่ม

297
00:10:44,032 --> 00:10:46,343
กดดรอปดาวน์เพื่อเพิ่มบัญชี GitHub ได้เลย

298
00:10:46,343 --> 00:10:48,943
แล้วเลือก repo ที่ต้องการ deploy ผมจะเลือกตัว

299
00:10:48,943 --> 00:10:50,446
Canopy Cafe พอมาถึงหน้านี้

300
00:10:50,446 --> 00:10:52,988
จะเห็นว่าข้อมูลส่วนใหญ่กรอกมาให้แล้ว กด edit

301
00:10:52,988 --> 00:10:55,589
แล้วเว้นตัวเลือกไว้ตามเดิม กด continue ได้เลย

302
00:10:55,589 --> 00:10:58,247
ส่วน build และ output settings ไม่ต้องกรอกอะไร

303
00:10:58,247 --> 00:11:00,905
สิ่งเดียวที่ต้องใส่คือ project URL และ API key

304
00:11:00,905 --> 00:11:03,217
จาก Supabase ผมจะกลับไปที่โค้ดของ Claude

305
00:11:03,217 --> 00:11:05,413
ก็อปชื่อตัวแปร (label) มาวางในช่อง key

306
00:11:05,413 --> 00:11:07,609
แล้วก็อป project URL มาวางในช่อง value

307
00:11:07,609 --> 00:11:09,689
ทำแบบเดียวกันกับ publishable API key

308
00:11:09,689 --> 00:11:11,827
เสร็จแล้วกด deploy แล้วรอสัก 2-3 นาที

309
00:11:11,827 --> 00:11:13,734
และตอนนี้เว็บของผมออนไลน์แล้วครับ

310
00:11:13,734 --> 00:11:16,161
จะเห็นว่ามันถูก host อยู่บนโดเมนของ Vercel

311
00:11:16,161 --> 00:11:18,299
แต่คุณซื้อโดเมนของตัวเองทีหลังได้เสมอ

312
00:11:18,299 --> 00:11:20,668
แล้วเอาโดเมนนั้นมาใช้กับเว็บที่คุณ launch

313
00:11:20,668 --> 00:11:23,269
ผมแนะนำ GoDaddy หรือ Porkbun สำหรับการจดโดเมน

314
00:11:23,269 --> 00:11:24,771
โดเมนดี ๆ ถูกจองไปเยอะแล้ว

315
00:11:24,771 --> 00:11:27,430
เลยต้องเช็คก่อนว่าชื่อที่อยากใช้ยังว่างอยู่ไหม

316
00:11:27,430 --> 00:11:28,990
Canopy Cafe พร้อมใช้งานแล้ว

317
00:11:28,990 --> 00:11:31,012
และดูเหมือนลิงก์ทุกตัวจะทำงานปกติดี

318
00:11:31,012 --> 00:11:33,266
อีกครั้งนะครับ นี่เป็นแค่บทเรียนพื้นฐาน

319
00:11:33,266 --> 00:11:35,577
สอนไล่ทีละขั้นตอนการสร้างเว็บ full-stack

320
00:11:35,577 --> 00:11:37,658
ทั้งเว็บ หวังว่าจะเป็นประโยชน์นะครับ

321
00:11:37,658 --> 00:11:40,316
ถ้าอยากเรียนรู้เพิ่มเติม เข้าร่วมคอร์สของผมได้

322
00:11:40,316 --> 00:11:41,413
ลิงก์อยู่ด้านล่าง

323
00:11:41,413 --> 00:11:43,378
มีบทสอนเจาะลึกและซัพพอร์ตให้ถึงมือ

324
00:11:43,378 --> 00:11:45,285
ถ้าอยากได้คู่มือที่ละเอียดกว่านี้

325
00:11:45,285 --> 00:11:46,382
คอมเมนต์บอกได้เลย

326
00:11:46,382 --> 00:11:48,578
ยังมีอย่างอื่นที่เพิ่มเข้าไปได้อีกเยอะ

327
00:11:48,578 --> 00:11:50,831
ทั้งระบบส่งอีเมล, Porkbun เพิ่ม PostHog

328
00:11:50,831 --> 00:11:53,374
(เครื่องมือวิเคราะห์สถิติผู้ใช้) หรือ Vercel

329
00:11:53,374 --> 00:11:55,454
analytics และทำ Google SEO ด้วยก็ได้

330
00:11:55,454 --> 00:11:57,881
แต่ผมไม่อยากยัดทุกอย่างรวดเดียวในคลิปเดียว

331
00:11:57,881 --> 00:11:59,788
ด้วยข้อมูลจากวิดีโอนี้ คุณ deploy

332
00:11:59,788 --> 00:12:01,522
เว็บของคุณเองได้เต็มรูปแบบแล้ว

333
00:12:01,522 --> 00:12:03,487
มีคำถามอะไรคอมเมนต์ถามได้เลยนะครับ

334
00:12:03,487 --> 00:12:06,087
ผมพยายามอ่านทุกคอมเมนต์เสมอ ขอบคุณที่รับชมมาก

335
00:12:06,087 --> 00:12:08,283
ๆ ครับ เจอกันครั้งหน้า ถ้ามีบทเรียน AI

336
00:12:08,283 --> 00:12:10,190
ที่อยากเรียนรู้ คอมเมนต์บอกได้เลย

337
00:12:10,190 --> 00:12:11,924
แล้วอย่าลืมกดไลก์ กด subscribe

338
00:12:11,924 --> 00:12:13,888
สนับสนุนผมเพื่อวิดีโอที่ดีกว่าเดิม

339
00:12:13,888 --> 00:12:15,506
เพราะผมตั้งใจให้ข้อมูลจริง ๆ

340
00:12:15,506 --> 00:12:17,760
เยอะที่สุดบน YouTube ขอบคุณมากครับทุกคน