Complete guide to building out a website with Claude for Beginners

1
00:00:00,000 --> 00:00:03,767
AI ทำให้การเขียนโค้ดสนุกขึ้นมากมายสองปีที่แล้วผมได้ลองสร้างแอพเล็กๆ

2
00:00:03,767 --> 00:00:04,839
น้อยๆ

3
00:00:04,839 --> 00:00:09,842
ข้างเคียงเมื่อผมเพิ่งเริ่มทำงานที่ Meta เพื่อสร้างรายได้เสริม แต่มันก็มักจะใช้เวลานานมากๆ

4
00:00:09,842 --> 00:00:11,697
เสมอเมื่อใดก็ตามที่ผมลองสร้าง MVP

5
00:00:11,697 --> 00:00:17,319
ออกมาก็มักจะใช้เวลาประมาณหนึ่งเดือนครึ่งและทุกครั้งที่ผมเจอกับอุปสรรคผมก็จะใช้เวลานานมากในการค้นหาบน

6
00:00:17,319 --> 00:00:19,737
Stack Overflow ผมสงสัยเกิดอะไรขึ้นกับ Stack

7
00:00:19,737 --> 00:00:20,809
Overflow

8
00:00:20,809 --> 00:00:23,339
ตอนนี้ทุกครั้งที่ผมเจอปัญหาผมก็จะขอให้ Claude

9
00:00:23,339 --> 00:00:24,411
ช่วยและ Opus 4.5

10
00:00:24,411 --> 00:00:29,414
โมเดลใหม่ไม่เคยผิดหวังผมเลยในช่วงเวลาไม่กี่เดือนที่ผ่านมาผมได้ทดสอบโมเดลการเขียนโค้ดต่างๆ

11
00:00:29,414 --> 00:00:31,776
เพื่อสร้างโปรเจกต์ลองทุกอย่างใน Cursor ลอง

12
00:00:31,776 --> 00:00:33,462
Gemini ลอง Codeex ลอง ChatGBT5

13
00:00:33,462 --> 00:00:37,510
สำหรับปัญหาการเขียนโค้ดที่ต่างกันพวกเขามักจะสูญเสียบริบทเขียนภาพปลายแหลม

14
00:00:37,510 --> 00:00:40,602
หรือจะเป็นการเขียนโค้ดซ้ำกันในวิดีโอนี้มีการสนับสนุนจาก

15
00:00:40,602 --> 00:00:41,674
Claude

16
00:00:41,674 --> 00:00:44,035
และผมสามารถพูดได้เต็มใจว่าหลังจากใช้มากมาย

17
00:00:44,035 --> 00:00:46,340
คลอด Opus 4.5 นั้นแน่นอนคือตัวที่ดีที่สุด

18
00:00:46,340 --> 00:00:49,320
ดังนั้นเรามาเริ่มกับการสร้างเว็บแอพตัวนี้กันเลยนี่คือ

19
00:00:49,320 --> 00:00:51,737
stack เทคโนโลยีที่ผมใช้ในการสร้างเว็บแอพใดๆ

20
00:00:51,737 --> 00:00:53,873
ของผมผมใช้ v0ero สำหรับเทมเพลตเริ่มต้น

21
00:00:53,873 --> 00:00:56,459
แต่คุณสามารถใช้อะไรก็ได้เหมือนกับ Lovable หรือ

22
00:00:56,459 --> 00:00:59,045
Replet พวกนี้ก็ดีในตอนแรกแล้วผมใช้ Claude Code

23
00:00:59,045 --> 00:01:00,619
(เครื่องมือเขียนโค้ดด้วย AI)

24
00:01:00,619 --> 00:01:03,880
เป็นหลักในการสร้างส่วนใหญ่ของเว็บไซต์สำหรับเฟรมเวิร์คผมใช้

25
00:01:03,880 --> 00:01:06,072
next.js และ typescript สำหรับ CSS ผมใช้

26
00:01:06,072 --> 00:01:07,145
tailwind CSS

27
00:01:07,145 --> 00:01:10,349
ซึ่งเป็นเฟรมเวิร์คหลักที่ใช้ในโปรเจกต์ของเราส่วนใหญ่ในการ

28
00:01:10,349 --> 00:01:12,823
deploy แอพผมใช้ Vercel สำหรับ authentication

29
00:01:12,823 --> 00:01:15,409
และ database ผมใช้ Supabase คุณสามารถใช้ Clerk

30
00:01:15,409 --> 00:01:17,995
หรืออะไรที่คล้ายกับ NextAuth แต่ผมชอบ Supabase

31
00:01:17,995 --> 00:01:20,244
เพราะมันครอบคลุมทุกอย่างในที่เดียวสำหรับ

32
00:01:20,244 --> 00:01:21,368
payment ผมใช้ Stripe

33
00:01:21,368 --> 00:01:23,785
สำหรับส่งอีเมลผมแนะนำอย่างยิ่งให้ใช้ Resend

34
00:01:23,785 --> 00:01:26,259
มันฟรีและใช้งานง่ายมากสำหรับ analytics ผมใช้

35
00:01:26,259 --> 00:01:28,732
PostHog สำหรับการจดทะเบียนบริษัทผมใช้ Stripe

36
00:01:28,732 --> 00:01:31,150
Atlas สำหรับการจดโดเมนและจัดการคุณสามารถใช้

37
00:01:31,150 --> 00:01:32,499
GoDaddy แต่ผมใชะ Porkbun

38
00:01:32,499 --> 00:01:35,872
เพราะมันถูกกว่าและในการสร้างอีเมลของมืออาชีพและส่งอีเมลผมใช้

39
00:01:35,872 --> 00:01:36,944
Google Workspace

40
00:01:36,944 --> 00:01:42,679
วันนี้สำหรับโปรเจกต์ที่ผมจะสร้างผมจะสร้างเว็บแอพที่ให้เพลงสุ่มทุกครั้งที่คุณกดปุ่มเล่นเพราะมีเพลงใหม่ๆ

41
00:01:42,679 --> 00:01:45,208
ที่ผมอยากค้นหาและฟังอยู่เสมอคุณสามารถตามมาได้

42
00:01:45,208 --> 00:01:50,437
หรือสร้างโปรเจกต์ของคุณเองเพื่อเริ่มก่อนอย่างแรกเราต้องหาว่าเราจะสร้างในภาษาอะไรคนส่วนใหญ่ใช้

43
00:01:50,437 --> 00:01:51,509
TypeScript

44
00:01:51,509 --> 00:01:55,051
ดังนั้นผมจะใช้มันเช่นกันมันง่ายกวี่ที่จะรวมเข้ากับโปรเจกต์อื่นๆ

45
00:01:55,051 --> 00:01:56,906
เราต้องสร้างโปรเจกต์ใหม่ใน Vercel

46
00:01:56,906 --> 00:02:00,279
ถ้าคุณยังไม่มีบัญชีระบุให้แน่ใจว่าจะสร้างก่อนจากนั้นคุณสร้าง

47
00:02:00,279 --> 00:02:01,351
repo บน GitHub

48
00:02:01,351 --> 00:02:06,804
สำหรับโปรเจกต์แล้วเชื่อมต่อกับบัญชีและคุณสามารถคลอนมาที่โฟลเดอร์ในเครื่องถ้าคุณไม่คุ้นเคยในการใช้

49
00:02:06,804 --> 00:02:08,041
terminal และคำสั่ง git

50
00:02:08,041 --> 00:02:10,458
ผมขอแนะนำอย่างยิ่งให้ใช้ Warp มันคือ AI IDE

51
00:02:10,458 --> 00:02:15,012
มันมีสติปัญญาและคุณสามารถถามอะไรก็ได้และมันจะสร้างคำสั่งให้คุณถัดไปถ้าคุณยังไม่มี

52
00:02:15,012 --> 00:02:16,084
Claude

53
00:02:16,084 --> 00:02:19,626
ติดตั้งคุณสามารถทำตามคำแนะนำที่นี่และผมมีรายการในคำอธิบายสำหรับ

54
00:02:19,626 --> 00:02:21,987
IDE ผมมักจะใช้ VS Code IDE หรือ Cursor IDE

55
00:02:21,987 --> 00:02:24,629
เพราะมันคือตัวที่ผมคุ้นเคยที่สุดเมื่อคุณติดตั้ง

56
00:02:24,629 --> 00:02:26,091
Claude แล้วคุณสามารถ login

57
00:02:26,091 --> 00:02:29,183
และเลือกโมเดลทจะใช้ถ้าคุณมีเวอร์ชันฟรีคุณจะไม่สามารถใช้

58
00:02:29,183 --> 00:02:30,255
Opus 4.5

59
00:02:30,255 --> 00:02:33,460
มันคือโมเดลที่ผมใช้มากที่สุดแต่ผมขอแนะนำให้เสียเงินสำหรับ

60
00:02:33,460 --> 00:02:34,532
1

61
00:02:34,532 --> 00:02:39,198
เดือนเพื่อลองมันมันดีกว่าทุกโมเดลที่ผมเคยลอยครั้งผมชอบมันเพราะมันแบ่งงานใหญ่ออกเป็น

62
00:02:39,198 --> 00:02:41,391
subtask ดังนั้นจึงสามารถทำแต่ละ subtask

63
00:02:41,391 --> 00:02:43,134
ได้ด้วยตัวเองโดยไม่สูญเสียบริบท

64
00:02:43,134 --> 00:02:49,936
สิ่งที่ผมไม่ชอบในโมเดลอื่นก็คือพวกเขามักจะสูญเสียบริบทแล้วสร้างภาพหลอกเขียนโค้ดที่ไม่ใช่สิ่งที่คุณขอหลายคนยังชอบเพิ่มไฟล์

65
00:02:49,936 --> 00:02:52,185
claude.md และสิ่งที่มันทำก็คือบอก Claude

66
00:02:52,185 --> 00:02:57,525
ว่าคุณต้องการใช้เครื่องมือและคำสั่งอะไรสำหรับโปรเจกต์ทั้งหมดดังนั้นตัวอย่างเช่นถ้าคุณต้องการใช้

67
00:02:57,525 --> 00:02:59,437
bun แทน npm ถ้าคุณมี specification

68
00:02:59,437 --> 00:03:03,934
สำหรับภาษาโปรแกรมที่คุณอยากใช้ในไฟล์เฉพาะคุณสามารถวางทุกอย่างที่คุณอยากที่นี่ได้

69
00:03:03,934 --> 00:03:06,351
แล้วมาเริ่มกับ prompt และรูปสำหรับการออกแบบ

70
00:03:06,351 --> 00:03:08,712
landing page กันคุณสามารถทำได้คือคุณสามารถ

71
00:03:08,712 --> 00:03:10,624
screenshot หน้าที่คุณชอบจาก Mobbin

72
00:03:10,624 --> 00:03:13,210
หรือเว็บไซต์อื่นๆ นำไปวางใน Figma แล้วไปตรงจาก

73
00:03:13,210 --> 00:03:14,282
Figma ลงใน Claude

74
00:03:14,282 --> 00:03:17,993
และเหล่านี้คือสิ่งที่ผมเพิ่งเก็บจากอินเทอร์เน็ตถ้าคุณไม่รู้ว่าจะทำ

75
00:03:17,993 --> 00:03:20,073
prompt อย่างไรคุณก็สามารถใช้ template

76
00:03:20,073 --> 00:03:22,378
ของผมหรือถาม Claude เพื่อ optimize prompt

77
00:03:22,378 --> 00:03:24,739
ให้คุณได้ Prompt นี้สำคัมมากเพราะมันบอก AI

78
00:03:24,739 --> 00:03:27,325
ตรงนั้นเกี่ยวกับสิ่งที่คุณอยากให้เว็บไซต์ทำได้

79
00:03:27,325 --> 00:03:29,686
ดีเพื่อเริ่ม Claude มีสามโหมดต่างกัน: plan

80
00:03:29,686 --> 00:03:31,991
mode, accept all และ ask before accepting

81
00:03:31,991 --> 00:03:33,284
ผมแนะนำให้ใช้ plan mode

82
00:03:33,284 --> 00:03:35,251
เวลาที่คุณถามคำถามแรกหรือใช้ prompt

83
00:03:35,251 --> 00:03:37,163
ใหญ่เพื่อให้มันแบ่งออกเป็น subtask

84
00:03:37,163 --> 00:03:38,793
ก่อนจากนั้นผมมักจะทิ้ง Claude

85
00:03:38,793 --> 00:03:42,897
รันไว้ส่วนที่เหลือของเวลาเพราะผมเชื่อใจที่มันทำได้ส่วนใหญ่ของสิ่งที่มันทำ

86
00:03:42,897 --> 00:03:44,134
ดีในขณะที่รอให้ Claude

87
00:03:44,134 --> 00:03:46,720
เขียนโค้ดเสร็จและทำขณะที่ผมทำนี้ผมมักจะ scrool

88
00:03:46,720 --> 00:03:47,792
บน Tik Tok

89
00:03:47,792 --> 00:03:49,985
สวิงเก้าเกอร์ในเก้าเต่าเดินวงกลมแล้วแบม

90
00:03:49,985 --> 00:03:51,952
มันสร้างเวอร์ชันแรกของมันขึ้นมาแล้ว

91
00:03:51,952 --> 00:03:54,088
สำหรับโปรเจกต์ทุกตัวคุณต้องมีไฟล์ .env

92
00:03:54,088 --> 00:03:55,161
ไฟล์นี้เก็บ API key

93
00:03:55,161 --> 00:03:57,578
ทั้งหมดของคุณสำหรับโปรเจกต์นี้ เราอยากเพิ่ม

94
00:03:57,578 --> 00:03:59,883
authentication และ database ด้วย Supabase

95
00:03:59,883 --> 00:04:01,851
เพื่อชี้แจง เหตุผลที่ผมใช้ Supabase

96
00:04:01,851 --> 00:04:06,910
ก็เพราะดังที่คุณเห็นมันง่ายต่อการตั้งค่าและคุณสามารถมองเห็นข้อมูลและตารางทั้งหมดในที่เดียว

97
00:04:06,910 --> 00:04:09,440
ดีตอนนี้ที่เรามี authentication เรียบร้อยแล้ว

98
00:04:09,440 --> 00:04:11,633
เราให้ Claude เพิ่มมันลงไปใน super keys

99
00:04:11,633 --> 00:04:14,106
ที่เราให้มัน และ keys เหล่านี้ก็คือ API keys

100
00:04:14,106 --> 00:04:16,523
เพื่อให้โปรเจกต์ของคุณเชื่อมต่อกับ Supabale

101
00:04:16,523 --> 00:04:17,760
ได้ดี เรามาลองดูกันเลย

102
00:04:17,760 --> 00:04:20,234
เพื่อเริ่มการพัฒนาในเครื่อง คุณสามารถใช้ npm

103
00:04:20,234 --> 00:04:21,920
run dev แต่เราบอกมันให้ใช้ npm

104
00:04:21,920 --> 00:04:24,450
เนื่องจากเรากำลังรันด้วย npm run dev และโอเล่

105
00:04:24,450 --> 00:04:27,373
พรุ่งนี้ที่ผมไม่ได้รู้ล่ะมันก็ไม่เลวเหมือนกันเห็นไหม

106
00:04:27,373 --> 00:04:30,634
เรามีทั้งเว็บไซต์ที่ผู้ใช้สามารถกดปุ่มเพื่อแนะนำเพลงให้ได้

107
00:04:30,634 --> 00:04:32,039
มันถูกออกแบบได้ดีมากจริงๆ

108
00:04:32,039 --> 00:04:34,401
เพื่อให้มันแข็งแกร่งขึ้นผมจะเพิ่ม AI model

109
00:04:34,401 --> 00:04:37,155
เพื่อแนะนำเพลงเพิ่มเติมตามความชอบของผู้ใช้ผมจะใช้

110
00:04:37,155 --> 00:04:39,573
API key จาก Claude เพื่อทำสิ่งนี้และผมจะให้

111
00:04:39,573 --> 00:04:41,934
Claude สร้าง system prompt และรวม AI model

112
00:04:41,934 --> 00:04:44,801
นี้เข้าไปเพื่อแนะนำเพลงเพิ่มเติมตามความชอบของผู้ใช้

113
00:04:44,801 --> 00:04:47,387
มันจะเป็นประโยชน์มากหากคุณต้องการเพียงแค่เพิ่ม

114
00:04:47,387 --> 00:04:48,961
AI หรือสร้างโปรเจกต์ที่มี AI

115
00:04:48,961 --> 00:04:52,165
มันช่วยเยอะเพราะในยุคนี้ทุกคนใช้มันในทุกโปรเจกต์ของพวกเขา

116
00:04:52,165 --> 00:04:53,458
และแบม พรุ่งนี้มันมาเลย

117
00:04:53,458 --> 00:04:55,988
ตอนนี้เรามีผลิตภัณฑ์เสร็จแล้วและเรามี AI chat

118
00:04:55,988 --> 00:04:58,405
ที่ให้ความชอบของเพลงที่ผมอยากได้และสุ่มเพลง

119
00:04:58,405 --> 00:04:59,698
ถ้าคุณต้องการให้ Claude

120
00:04:59,698 --> 00:05:01,329
มองที่เว็บไซต์ที่คุณสร้างขึ้น

121
00:05:01,329 --> 00:05:03,858
คุณสามารถใช้บาอย่างที่เรียกว่า MCP หรือ Model

122
00:05:03,858 --> 00:05:04,931
Context Protocol

123
00:05:04,931 --> 00:05:10,496
คลอดสามารถมองเห็นสิ่งที่อยู่บนหนจอคุณเพราะบ่อยครั้งที่ผมพบว่าบางทีอาจจะอยากให้เปลี่ยนอะไรบางอย่างบน

124
00:05:10,496 --> 00:05:11,569
frontend

125
00:05:11,569 --> 00:05:13,761
แล้วคลอดไม่เข้าใจและมันก็เปลี่ยนไปแปลกๆ

126
00:05:13,761 --> 00:05:17,191
ดังนั้นมันจะช่วยให้คลอดรู้ตัวแทนว่าคุณอยากให้เปลี่ยนอะไรแปลกๆ

127
00:05:17,191 --> 00:05:19,439
เพิ่มเติม Claude ได้แนะนำสิ่งที่เรียกว่า

128
00:05:19,439 --> 00:05:20,512
Claude skills

129
00:05:20,512 --> 00:05:22,929
ปีนี้ผมจะไม่เข้าไปรายละเอียดสำหรับวิดีโอนี้

130
00:05:22,929 --> 00:05:24,728
แต่พวกนี้คือเครื่องมือที่ Claude

131
00:05:24,728 --> 00:05:26,920
สามารถใช้เพื่อให้การพัฒนาของคุณง่ายขึ้น

132
00:05:26,920 --> 00:05:30,069
หนึ่งในทักษะที่ผมใช้ในทุกโปรเจกต์ของผมคือหนึ่งที่ช่วยให้

133
00:05:30,069 --> 00:05:32,373
Claude ตรวจสอบ PR ของผมทุกครั้งที่ผม push

134
00:05:32,373 --> 00:05:34,116
การเปลี่ยนแปลงใหม่ๆ ลงบน GitHub

135
00:05:34,116 --> 00:05:38,051
มันสำคัมมากเพราะมันสามารถจับผิดบางอย่างที่ผมพลาดเพราะบ่อยครั้งที่ผมใช้

136
00:05:38,051 --> 00:05:39,232
AI ใน mode accept all

137
00:05:39,232 --> 00:05:40,750
มันสร้างการเปลี่ยนแปลงหลายๆ

138
00:05:40,750 --> 00:05:43,842
อย่างและมันช่วยให้มันตรวจสอบตัวเองดังนั้นจึงช่วยเยอะมาก

139
00:05:43,842 --> 00:05:45,528
ถ้าคุณต้องการ list คลอด skills

140
00:05:45,528 --> 00:05:48,395
เพิ่มเติมที่คุณสามารถเพิ่มเข้าไปในการพัฒนาของคุณเอง

141
00:05:48,395 --> 00:05:50,869
คุณสามารถดู GitHubs ที่นี่ได้ หวังว่าหลังจาก

142
00:05:50,869 --> 00:05:51,941
tutorial นี้

143
00:05:51,941 --> 00:05:54,359
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ AI

144
00:05:54,359 --> 00:05:55,820
ในการสร้างเว็บแอพของคุณเอง

145
00:05:55,820 --> 00:06:00,655
การนี้ใช้เวลาน้อยกว่าหนึ่งชั่วโมงในขณะที่ก่อนหน้านี้จะใช้เวลาหลายสัปดาห์ในการสร้างขึ้น

146
00:06:00,655 --> 00:06:01,948
ขอบคุณมากสำหรับการรับชม

147
00:06:01,948 --> 00:06:04,928
และติดตามเพื่อรับวิดีโอเพิ่มเติมเกี่ยวกับเทคโนโลยีและ

148
00:06:04,928 --> 00:06:06,000
AI