Claude Can Use Your Apps Now

1
00:00:00,000 --> 00:00:08,054
สวัสดีครับ คุณอาจจะเคยเห็น Claude connectors มาก่อน ซึ่งใช้เชื่อมต่อ Claude เข้ากับ GitHub,

2
00:00:08,054 --> 00:00:09,824
Gmail, Drive, Motion

3
00:00:09,824 --> 00:00:13,010
และแอปพลิเคชันจากบริษัทอื่นอีกมากมาย

4
00:00:13,010 --> 00:00:20,533
แต่คุณรู้ไหมครับว่าคุณสามารถสร้างตัวเชื่อมต่อแบบกำหนดเองสำหรับแอปพลิเคชันของคุณเองได้

5
00:00:20,533 --> 00:00:23,808
และในวิดีโอนี้ผมจะแสดงวิธีทำครับ ขอยก

6
00:00:23,808 --> 00:00:25,843
PulseBooks เป็นตัวอย่าง

7
00:00:25,843 --> 00:00:30,357
มันเป็นแอปทำบัญชีที่ผมสร้างขึ้นเพื่อธุรกิจของตัวเอง

8
00:00:30,357 --> 00:00:33,189
ทุกครั้งที่ต้องบันทึกรายจ่ายใหม่

9
00:00:33,189 --> 00:00:36,287
ผมต้องเข้าสู่ระบบแอป ไล่คลิกผ่าน UI

10
00:00:36,287 --> 00:00:40,181
และกรอกฟอร์มให้ครบ ซึ่งเสียเวลามาก และจริง ๆ

11
00:00:40,181 --> 00:00:43,633
แล้วผมแค่อยากส่งงานส่วนนี้ให้ผู้ช่วย AI

12
00:00:43,633 --> 00:00:47,704
ของผมจัดการแทน ผมจึงสร้าง PulseBooks connector

13
00:00:47,704 --> 00:00:51,244
ตัวนี้ขึ้นมา มันเชื่อม Claude เข้ากับแอป

14
00:00:51,244 --> 00:00:54,165
PulseBooks ของผม และตอนนี้ Claude

15
00:00:54,165 --> 00:00:56,643
ก็สามารถโต้ตอบกับแอปแทนผมได้

16
00:00:56,643 --> 00:01:00,626
หมายความว่าผมแค่อัปโหลดรูปใบเสร็จให้ agent ดู

17
00:01:00,626 --> 00:01:04,254
แล้วขอให้มันสร้างรายการค่าใช้จ่ายให้ แล้ว

18
00:01:04,254 --> 00:01:07,883
agent ก็อาจจะถามคำถามเพื่อความชัดเจน เช่น

19
00:01:07,883 --> 00:01:10,096
จะจัดให้อยู่ในหมวดหมู่ไหน

20
00:01:10,096 --> 00:01:12,751
แล้วจึงสร้างบันทึกรายจ่ายแทนผม

21
00:01:12,751 --> 00:01:15,406
ทุกอย่างทำอย่างปลอดภัยภายในแอป

22
00:01:15,406 --> 00:01:19,743
และใช้ได้เฉพาะฟังก์ชันที่ผมเลือกจะเปิดเผยเท่านั้น

23
00:01:19,743 --> 00:01:21,601
แล้ว agent ก็เสร็จงาน

24
00:01:21,601 --> 00:01:24,257
และถ้าผมรีเฟรชหน้ารายจ่ายในแอป

25
00:01:24,257 --> 00:01:28,505
ผมก็จะเห็นรายการนั้นพร้อมใบเสร็จที่แนบมาด้วยครับ

26
00:01:28,505 --> 00:01:30,629
ในบทช่วยสอนแบบครบถ้วนนี้

27
00:01:30,629 --> 00:01:33,550
เราจะสร้างทุกอย่างทีละขั้นตอนครับ

28
00:01:33,550 --> 00:01:37,178
ผมจะแสดงวิธีตั้งค่าโปรเจกต์ใหม่ให้ถูกต้อง

29
00:01:37,178 --> 00:01:39,037
เราจะสร้าง MCP server

30
00:01:39,037 --> 00:01:42,400
(เซิร์ฟเวอร์ที่เปิดเผยเครื่องมือให้ AI

31
00:01:42,400 --> 00:01:45,763
เรียกใช้) พร้อมการยืนยันตัวตนแบบ OAuth

32
00:01:45,763 --> 00:01:48,330
เราจะดีพลอยแอปขึ้น production

33
00:01:48,330 --> 00:01:52,313
และสุดท้ายก็จะเชื่อมต่อแอปเข้ากับ Claude หรือ

34
00:01:52,313 --> 00:01:55,499
agent ตัวอื่น ๆ ที่คุณต้องการ เอาล่ะ

35
00:01:55,499 --> 00:01:58,331
เราไปเริ่มกันเลยครับ อย่างแรกเลย

36
00:01:58,331 --> 00:02:02,314
เรามาตั้งค่าสภาพแวดล้อมสำหรับพัฒนากันครับ ใช้

37
00:02:02,314 --> 00:02:06,208
coding agent ตัวไหนก็ได้ตามสบาย ไม่ว่าจะเป็น

38
00:02:06,208 --> 00:02:08,686
Claude กับแอปเดสก์ท็อป Codex

39
00:02:08,686 --> 00:02:12,580
หรืออะไรก็ตามที่คุณชอบ ส่วนผมนี่จะใช้ Claude

40
00:02:12,580 --> 00:02:14,173
Code ภายใน VS Code

41
00:02:14,173 --> 00:02:18,156
ซึ่งจะทำให้ผมเห็นไฟล์ทั้งหมดที่ถูกสร้างขึ้นมา

42
00:02:18,156 --> 00:02:20,634
เอาล่ะ มาเปิดโปรเจกต์เปล่า ๆ

43
00:02:20,634 --> 00:02:24,351
กันครับ และผมจะเริ่มโปรเจกต์ด้วยสกิลเจ๋ง ๆ

44
00:02:24,351 --> 00:02:27,980
ตัวหนึ่ง ผมจะฝากลิงก์ไว้ในคำอธิบายใต้คลิป

45
00:02:27,980 --> 00:02:31,343
นี่คือสกิลที่ผมใช้ตอนเริ่มสร้างแอปใหม่

46
00:02:31,343 --> 00:02:34,264
และถ้าคุณไม่ชอบตั้งค่า tech stack

47
00:02:34,264 --> 00:02:37,715
(ชุดเทคโนโลยี) เอง หรือกังวลว่าแอปจะไม่

48
00:02:37,715 --> 00:02:39,928
scalable (ขยายได้ไม่ดีพอ)

49
00:02:39,928 --> 00:02:44,619
นี่คือสกิลที่ดีที่สุดสำหรับเริ่มสร้างเว็บแอปอะไรก็ได้

50
00:02:44,619 --> 00:02:48,248
สิ่งที่คุณต้องทำก็แค่ก๊อปคำสั่งจากหน้านี้

51
00:02:48,248 --> 00:02:50,283
แล้วส่งให้ coding agent

52
00:02:50,283 --> 00:02:52,761
ของคุณขอให้มันติดตั้งสกิลให้

53
00:02:52,761 --> 00:02:54,974
หรือถ้าคุณทำตามโดยใช้ IDE

54
00:02:54,974 --> 00:02:59,488
ก็เปิดหน้าต่างเทอร์มินัลขึ้นมาแล้ววางคำสั่งนั้นลงไป

55
00:02:59,488 --> 00:03:03,116
ผมจะเลือก Claude Code แล้วตั้งค่าที่ระดับ

56
00:03:03,116 --> 00:03:04,214
global

57
00:03:04,214 --> 00:03:07,843
เพื่อจะได้ไม่ต้องติดตั้งสกิลซ้ำอีกในอนาคต

58
00:03:07,843 --> 00:03:11,472
จากนั้นเลือก symlink แล้วดำเนินการติดตั้ง

59
00:03:11,472 --> 00:03:15,189
เท่านั้นเองครับ ลองเปิด Claude Code ขึ้นมา

60
00:03:15,189 --> 00:03:18,906
แล้วดูว่าสกิลพร้อมใช้งานไหม โดยพิมพ์คำสั่ง

61
00:03:18,906 --> 00:03:22,977
start แล้วผมก็จะเห็นสกิล start-app ปรากฏขึ้นมา

62
00:03:22,977 --> 00:03:26,252
เยี่ยมครับ จากนั้นสลับไปโหมด planning

63
00:03:26,252 --> 00:03:29,969
(โหมดวางแผน) แล้วบอกว่า ผมอยากสร้าง Trello

64
00:03:29,969 --> 00:03:33,952
clone ที่ทีมสามารถทำงานร่วมกันบนกระดาน Kanban

65
00:03:33,952 --> 00:03:38,023
board (กระดานคัมบัง) เดียวกัน รองรับหลายองค์กร

66
00:03:38,023 --> 00:03:39,793
หลายทีม และหลายบทบาท

67
00:03:39,793 --> 00:03:42,360
ควรชวนสมาชิกใหม่ด้วยลิงก์เชิญ

68
00:03:42,360 --> 00:03:44,661
สำหรับการยืนยันตัวตนผู้ใช้

69
00:03:44,661 --> 00:03:48,378
ใช้เป็นอีเมลกับรหัสผ่าน และบนกระดาน Kanban

70
00:03:48,378 --> 00:03:52,272
ควรลากการ์ดได้ แล้วก็บอกให้ใช้สกิล start-app

71
00:03:52,272 --> 00:03:55,547
ส่งเลยครับ สิ่งที่จะเกิดขึ้นคือ agent

72
00:03:55,547 --> 00:03:57,848
จะดึงสกิล start-app เข้ามา

73
00:03:57,848 --> 00:04:01,211
ซึ่งข้างในมีข้อมูลมีค่ามากมายที่ agent

74
00:04:01,211 --> 00:04:04,840
ต้องใช้เพื่อสร้างแอปได้อย่างมีประสิทธิภาพ

75
00:04:04,840 --> 00:04:05,938
agent

76
00:04:05,938 --> 00:04:10,628
จะถามคำถามเยอะแยะเพื่อทำความเข้าใจว่าแอปเกี่ยวกับอะไร

77
00:04:10,628 --> 00:04:12,576
และมันจะใช้ tech stack

78
00:04:12,576 --> 00:04:15,850
ที่ผ่านการใช้งานจริงในโปรดักชันมาแล้ว

79
00:04:15,850 --> 00:04:18,948
ซึ่งจะทำให้การดีพลอยขึ้น production

80
00:04:18,948 --> 00:04:22,931
และรองรับผู้ใช้เป็นร้อยเป็นพันง่ายขึ้นมากครับ

81
00:04:22,931 --> 00:04:25,851
ตัวอย่างเช่น ถ้าคุณเคยลองสร้างแอป

82
00:04:25,851 --> 00:04:29,126
คุณจะรู้ว่าการรองรับองค์กร ทีม สมาชิก

83
00:04:29,126 --> 00:04:30,896
และบทบาทมันยากแค่ไหน

84
00:04:30,896 --> 00:04:34,259
มันเป็นฝันร้ายเลยถ้าจะสร้างเอง และสกิล

85
00:04:34,259 --> 00:04:37,711
start-app มีส่วนประกอบทุกอย่างที่ agent

86
00:04:37,711 --> 00:04:41,694
ต้องการเพื่อสร้างเว็บแอปแทบทุกแบบที่คุณนึกออก

87
00:04:41,694 --> 00:04:44,791
จริง ๆ แล้วในสกิลบอกว่า Better Auth

88
00:04:44,791 --> 00:04:48,509
organization plug-in รองรับ orgs ทีม บทบาท

89
00:04:48,509 --> 00:04:50,456
และคำเชิญมาให้แบบเนทีฟ

90
00:04:50,456 --> 00:04:53,376
เราจึงไม่ได้สร้างทุกอย่างจากศูนย์

91
00:04:53,376 --> 00:04:56,474
แต่ใช้ส่วนประกอบที่สกิลเตรียมไว้ให้

92
00:04:56,474 --> 00:04:59,572
และแน่นอนว่า agent จะถามคำถามมากมาย

93
00:04:59,572 --> 00:05:02,315
ผมจะตอบไปและข้ามส่วนนั้นเลยครับ

94
00:05:02,315 --> 00:05:06,386
ผมหยุดที่คำถามข้อนี้หน่อย ถ้าคุณกำลังทำตามอยู่

95
00:05:06,386 --> 00:05:10,192
บางจุด agent จะถามว่าต้องการฐานข้อมูลตัวไหน

96
00:05:10,192 --> 00:05:13,821
ซึ่งสำคัญมากครับ มักจะเป็นตัวเลือกระหว่าง

97
00:05:13,821 --> 00:05:16,122
SQLite กับ Postgres SQLite

98
00:05:16,122 --> 00:05:19,928
เหมาะถ้าคุณไม่คิดจะดีพลอยแอปขึ้น production

99
00:05:19,928 --> 00:05:21,026
เลย

100
00:05:21,026 --> 00:05:24,920
มันจะสร้างไฟล์ฐานข้อมูลไว้ในโฟลเดอร์โปรเจกต์

101
00:05:24,920 --> 00:05:28,460
ซึ่งเก็บข้อมูลทุกอย่าง เช่น ข้อมูลผู้ใช้

102
00:05:28,460 --> 00:05:29,787
ข้อมูลงานต่าง ๆ

103
00:05:29,787 --> 00:05:33,328
แต่จะกลายเป็นปัญหาเมื่อคุณอยากดีพลอยขึ้น

104
00:05:33,328 --> 00:05:36,514
production ซึ่งเราจะทำในบทช่วยสอนนี้

105
00:05:36,514 --> 00:05:40,585
ดังนั้นขั้นนี้ผมจะเลือก Postgres ใน Docker อ้อ

106
00:05:40,585 --> 00:05:43,329
ขณะที่ agent กำลังสร้างแพลนอยู่

107
00:05:43,329 --> 00:05:49,347
ผมขอพูดไว้ตรงนี้ว่าคุณจะดาวน์โหลดพรอมต์ทั้งหมดที่ผมใช้ในวิดีโอนี้ได้

108
00:05:49,347 --> 00:05:51,648
และซอร์สโค้ดก็จะแจกให้ด้วย

109
00:05:51,648 --> 00:05:55,719
ผมจะฝากลิงก์ไว้ในคำอธิบายคลิปครับ เมื่อ Claude

110
00:05:55,719 --> 00:05:59,171
ทำแพลนเสร็จ ผมจะกด Escape กลับไปที่โหมด

111
00:05:59,171 --> 00:06:01,561
editing แล้วใช้เสียงสั่งว่า

112
00:06:01,561 --> 00:06:04,570
ให้เก็บแพลนนี้ไว้ในโฟลเดอร์ claude

113
00:06:04,570 --> 00:06:08,287
ภายในโปรเจกต์ แล้วผมจะใช้ชื่อ claude-plans

114
00:06:08,287 --> 00:06:12,801
เพราะผมชอบเก็บแพลนเหล่านี้ไว้กับโค้ดจริงของโปรเจกต์

115
00:06:12,801 --> 00:06:15,987
เราเก็บแพลนไว้ในโฟลเดอร์โปรเจกต์แล้ว

116
00:06:15,987 --> 00:06:18,908
แต่ผมอยากขยายรายละเอียดมากกว่านี้

117
00:06:18,908 --> 00:06:21,917
อยากได้แผนการ implement ที่ละเอียด

118
00:06:21,917 --> 00:06:25,811
แยกออกเป็นฟีเจอร์แต่ละตัว เพื่อให้ implement

119
00:06:25,811 --> 00:06:29,617
เป็นทีมได้ หรือใช้คำสั่ง goal รัน implement

120
00:06:29,617 --> 00:06:31,475
ทุกอย่างในเซสชันเดียว

121
00:06:31,475 --> 00:06:35,281
ผมจะดึงแพลนกลับมาแล้วบอกว่า ช่วยขยายแพลนนี้

122
00:06:35,281 --> 00:06:38,467
สร้าง implementation plan ที่ละเอียด

123
00:06:38,467 --> 00:06:41,034
เก็บไว้ในโฟลเดอร์เดียวกันชื่อ

124
00:06:41,034 --> 00:06:42,981
implementation-plan.md

125
00:06:42,981 --> 00:06:45,902
แล้วแยกแพลนออกเป็นฟีเจอร์แต่ละตัว

126
00:06:45,902 --> 00:06:48,911
เก็บเป็นไฟล์ในโฟลเดอร์โปรเจกต์ด้วย

127
00:06:48,911 --> 00:06:52,982
แต่ละไฟล์ต้องมีรายละเอียดเทคนิคในการ implement

128
00:06:52,982 --> 00:06:56,522
และ acceptance criteria (เกณฑ์การยอมรับ)

129
00:06:56,522 --> 00:06:57,761
แล้วรันเลยครับ

130
00:06:57,761 --> 00:07:00,593
คุณอาจสงสัยว่าทำไมผมต้องทำแบบนี้

131
00:07:00,593 --> 00:07:04,134
ทำไมไม่ส่งแพลนให้ Claude implement ไปเลย

132
00:07:04,134 --> 00:07:07,762
ประการแรก แพลนนี้มีข้อมูลไม่พอให้นักพัฒนา

133
00:07:07,762 --> 00:07:10,329
implement ได้อย่างถูกต้องครับ

134
00:07:10,329 --> 00:07:12,719
ถ้าคุณมีพื้นฐานด้านการพัฒนา

135
00:07:12,719 --> 00:07:17,586
คุณจะสังเกตว่ามันคือสถาปัตยกรรมของแอปในระดับสูงเท่านั้น

136
00:07:17,586 --> 00:07:20,418
ไม่มีใครพูดถึงเรื่องนี้กันจริง ๆ

137
00:07:20,418 --> 00:07:23,605
และถ้าส่งแพลนแบบนี้ให้นักพัฒนาจริง ๆ

138
00:07:23,605 --> 00:07:25,463
ผลลัพธ์จะกระจัดกระจาย

139
00:07:25,463 --> 00:07:28,915
และมีโอกาสสูงที่ฟีเจอร์บางอย่างจะตกหล่น

140
00:07:28,915 --> 00:07:32,809
การทำแบบนี้บังคับให้ agent คิดจริงจังกับแพลน

141
00:07:32,809 --> 00:07:35,995
และคิดว่าจะสร้างทุกอย่างออกมาอย่างไร

142
00:07:35,995 --> 00:07:37,500
เชื่อผมเถอะ agent

143
00:07:37,500 --> 00:07:40,775
จะรู้ตัวว่ามันมีโอกาสพลาดอะไรบางอย่าง

144
00:07:40,775 --> 00:07:42,368
ตอนที่ผมพูดอยู่นี้

145
00:07:42,368 --> 00:07:48,386
มันก็กำลังใช้เหตุผลอยู่ว่าต้องติดตั้งไลบรารีแต่ละตัวเวอร์ชันอะไรบ้าง

146
00:07:48,386 --> 00:07:50,776
นี่เป็นงานที่มีประโยชน์ครับ

147
00:07:50,776 --> 00:07:54,404
ถ้าอยากเรียนรู้วิธีทำงานกับ coding agents

148
00:07:54,404 --> 00:07:58,033
อย่างมีประสิทธิภาพ ผมมีคอร์สฟรี ฟรีจริง ๆ

149
00:07:58,033 --> 00:08:01,839
ไม่มีเงื่อนไขแอบแฝง สอนเรื่อง RAM framework

150
00:08:01,839 --> 00:08:05,644
ซึ่งเป็นกรอบแนวคิดของผมในการทำงานกับ coding

151
00:08:05,644 --> 00:08:06,742
agents

152
00:08:06,742 --> 00:08:11,964
และในคอร์สนั้นผมลงรายละเอียดอีกมากว่าทำไมต้องใช้วิธีนี้ครับ

153
00:08:11,964 --> 00:08:14,973
ขณะที่ coding agent กำลังทำงานอยู่

154
00:08:14,973 --> 00:08:18,956
ผมอยากเตรียมความพร้อมให้มันสักหน่อย ถ้าคุณใช้

155
00:08:18,956 --> 00:08:22,673
IDE หรือเทอร์มินัลแบบผม คุณต้องติดตั้ง MCP

156
00:08:22,673 --> 00:08:25,240
server หรือสกิลที่ทำให้ agent

157
00:08:25,240 --> 00:08:29,222
เปิดแอปในเบราว์เซอร์และทดสอบแอปจริง ๆ ได้ครับ

158
00:08:29,222 --> 00:08:33,117
แต่ถ้าคุณใช้ Claude desktop app หรือ ChatGPT

159
00:08:33,117 --> 00:08:36,834
desktop app ซึ่งมีเบราว์เซอร์ในตัวอยู่แล้ว

160
00:08:36,834 --> 00:08:40,374
ก็ข้ามขั้นนี้ได้ ผมจะเปิดเซสชันใหม่ เปิด

161
00:08:40,374 --> 00:08:43,826
Claude Code แล้วส่ง URL นี้ พร้อมบอกว่า

162
00:08:43,826 --> 00:08:47,720
โปรดติดตั้ง Playwright MCP server แล้วส่งเลย

163
00:08:47,720 --> 00:08:51,172
ผมรู้ว่าหลายคนชอบใช้ agent browser หรือ

164
00:08:51,172 --> 00:08:52,942
Playwright skill แทน

165
00:08:52,942 --> 00:08:56,747
ไม่ว่าอันไหนก็ไม่สำคัญครับ เราอยากให้ agent

166
00:08:56,747 --> 00:09:00,642
มีวิธีทดสอบงานของตัวเองบ้าง ตัวติดตั้งจัดการ

167
00:09:00,642 --> 00:09:02,766
MCP server ที่ระดับ user

168
00:09:02,766 --> 00:09:05,775
คุณจะไม่เห็นไฟล์ในโฟลเดอร์โปรเจกต์

169
00:09:05,775 --> 00:09:09,315
แต่เพราะมันอยู่ระดับ user Playwright MCP

170
00:09:09,315 --> 00:09:13,209
server นี้จึงใช้ได้กับ agent ทุกตัวของผมครับ

171
00:09:13,209 --> 00:09:16,838
อีกอย่างที่อยากทำคือตั้งค่าไฟล์ claude.md

172
00:09:16,838 --> 00:09:20,644
ผมจะสร้างสองไฟล์คือ agents.md และ claude.md

173
00:09:20,644 --> 00:09:24,449
โดยใน claude.md ผมแค่อ้างอิงไปที่ agents.md

174
00:09:24,449 --> 00:09:27,724
ส่วนใน agents.md ผมจะเก็บให้เรียบง่าย

175
00:09:27,724 --> 00:09:31,353
เพิ่มหัวข้อ testing the app (การทดสอบแอป)

176
00:09:31,353 --> 00:09:35,247
บอกว่า ให้ทดสอบแอปด้วย Playwright MCP server

177
00:09:35,247 --> 00:09:39,318
หรือ Playwright skill หรือ agent browser skill

178
00:09:39,318 --> 00:09:43,301
ที่คุณติดตั้งไว้เสมอ อีกอย่างที่ผมชอบเพิ่มคือ

179
00:09:43,301 --> 00:09:45,248
ให้ใช้ข้อมูลชุดเดิมซ้ำ

180
00:09:45,248 --> 00:09:48,877
อย่าสร้างข้อมูลผู้ใช้ใหม่ทุกครั้งที่ทดสอบ

181
00:09:48,877 --> 00:09:51,532
เก็บข้อมูลไว้ใน test-data.json

182
00:09:51,532 --> 00:09:54,452
ซึ่งอยู่ในโฟลเดอร์ claude ได้ด้วย

183
00:09:54,452 --> 00:09:57,904
เท่านั้นเองครับ หลักการคือ ตอนที่ agent

184
00:09:57,904 --> 00:10:00,913
ทดสอบแอป มันจะเปิดแอปในเบราว์เซอร์

185
00:10:00,913 --> 00:10:02,418
พยายามเข้าสู่ระบบ

186
00:10:02,418 --> 00:10:05,604
แล้วรู้ว่ายังไม่มีชื่อผู้ใช้รหัสผ่าน

187
00:10:05,604 --> 00:10:08,436
มันก็จะสร้างบัญชีใหม่สำหรับทดสอบ

188
00:10:08,436 --> 00:10:11,003
แต่ปัญหาคือครั้งหน้าเวลาทดสอบ

189
00:10:11,003 --> 00:10:13,127
มันจะไม่ใช้ข้อมูลชุดเดิม

190
00:10:13,127 --> 00:10:17,641
แต่จะพยายามสร้างข้อมูลทั้งหมดใหม่ตั้งแต่ต้นทุกครั้ง

191
00:10:17,641 --> 00:10:19,411
ไฟล์นี้จะทำให้ agent

192
00:10:19,411 --> 00:10:23,482
ใช้ข้อมูลซ้ำแทนที่จะสร้างใหม่ครับ เยี่ยม agent

193
00:10:23,482 --> 00:10:26,403
เพิ่งสร้างไฟล์ฟีเจอร์ทั้งหมดเสร็จ

194
00:10:26,403 --> 00:10:30,031
ตอนนี้ผมจะออกจาก Claude Code เพื่อให้ MCP

195
00:10:30,031 --> 00:10:34,014
server มีผล แล้วรีสตาร์ท Claude กลับมาที่โหมด

196
00:10:34,014 --> 00:10:37,377
edit ผมจะเก็บโฟลเดอร์ plans นี้ จริง ๆ

197
00:10:37,377 --> 00:10:44,812
แล้วไม่ควรอยู่ใน plans ทั้งหมด ให้สร้างโฟลเดอร์ย่อยชื่อ foundation แล้วลาก features,

198
00:10:44,812 --> 00:10:47,909
implementation plan และอันนี้เข้าไป

199
00:10:47,909 --> 00:10:51,627
ทุกอย่างอยู่ในโฟลเดอร์ foundation แล้วครับ

200
00:10:51,627 --> 00:10:54,459
ต่อไปขึ้นอยู่กับ agent ที่คุณใช้

201
00:10:54,459 --> 00:10:58,530
ถ้าใช้โมเดลที่ราคาถูกกว่าหรือโมเดล open-source

202
00:10:58,530 --> 00:11:01,805
ผมแนะนำให้ลากไฟล์ implementation plan

203
00:11:01,805 --> 00:11:05,699
พร้อมกับฟีเจอร์หนึ่ง แล้วให้ agent implement

204
00:11:05,699 --> 00:11:09,239
ฟีเจอร์นั้น พอเสร็จก็ล้างบทสนทนา แล้วดึง

205
00:11:09,239 --> 00:11:13,045
implementation plan กลับมาพร้อมฟีเจอร์ถัดไป

206
00:11:13,045 --> 00:11:17,027
ทำวนแบบนี้จนเสร็จทุกอย่างครับ แต่ถ้าใช้ Codex

207
00:11:17,027 --> 00:11:21,010
หรือ Claude Code อีกทางเลือกคือรันคำสั่ง goal

208
00:11:21,010 --> 00:11:24,727
โดยดึงโฟลเดอร์ foundation เข้ามาแล้วบอกว่า

209
00:11:24,727 --> 00:11:28,444
โปรด implement ฟีเจอร์ทั้งหมดในโฟลเดอร์นี้

210
00:11:28,444 --> 00:11:31,719
อย่าหยุดจนกว่าทุกอย่างจะถูก implement

211
00:11:31,719 --> 00:11:34,551
และทดสอบเสร็จ เท่านั้นเอง ส่งเลย

212
00:11:34,551 --> 00:11:37,737
แล้วเราก็เดินออกไปได้ ปล่อยให้ agent

213
00:11:37,737 --> 00:11:41,101
ทำงานของมัน ผมจะข้ามไปตอนที่ implement

214
00:11:41,101 --> 00:11:44,818
เสร็จแล้ว ไม่ต้องห่วงนะครับ เราจะได้ดู MCP

215
00:11:44,818 --> 00:11:47,827
server จริง ๆ และ Claude connector

216
00:11:47,827 --> 00:11:51,544
กันหลังจากสร้างแอปเสร็จแล้ว มาตรวจดู agent

217
00:11:51,544 --> 00:11:55,261
กันครับ มันจะรันการทดสอบ end-to-end โดยใช้

218
00:11:55,261 --> 00:11:57,120
Playwright MCP server

219
00:11:57,120 --> 00:12:01,457
ซึ่งหมายความว่ามันจะเปิดหน้าต่างเบราว์เซอร์แบบนี้

220
00:12:01,457 --> 00:12:06,325
แล้วทดสอบแอปตั้งแต่ต้นจนจบเพื่อให้แน่ใจว่าทุกอย่างทำงาน

221
00:12:06,325 --> 00:12:07,652
เยี่ยมมาก agent

222
00:12:07,652 --> 00:12:10,484
ทำการเปลี่ยนแปลงทั้งหมดเสร็จแล้ว

223
00:12:10,484 --> 00:12:14,201
และยังใช้เบราว์เซอร์ทดสอบแอปแบบ end-to-end

224
00:12:14,201 --> 00:12:16,149
ด้วย นี่คือผลลัพธ์ครับ

225
00:12:16,149 --> 00:12:19,246
เรามีระบบที่ใช้งานได้เต็มรูปแบบแล้ว

226
00:12:19,246 --> 00:12:23,052
ผมจะเข้าสู่ระบบ สร้างองค์กร แล้วก็ได้กระดาน

227
00:12:23,052 --> 00:12:27,035
Kanban ของเรา ลองเพิ่มการ์ดอย่าง "ซื้อขนมปัง"

228
00:12:27,035 --> 00:12:29,070
เซฟ แล้วเมื่อคลิกที่งาน

229
00:12:29,070 --> 00:12:31,902
เราก็สามารถมอบหมายงานให้ใครสักคน

230
00:12:31,902 --> 00:12:34,912
และตั้งข้อมูลเพิ่มเติมได้ เจ๋งครับ

231
00:12:34,912 --> 00:12:37,744
แต่นี่ไม่ใช่ประเด็นหลักของวิดีโอ

232
00:12:37,744 --> 00:12:41,726
สิ่งที่เราอยากโฟกัสคือการเพิ่ม MCP server และ

233
00:12:41,726 --> 00:12:43,497
Claude connector นี้

234
00:12:43,497 --> 00:12:46,771
แต่ก่อนอื่นมาดีพลอยแอปขึ้น production

235
00:12:46,771 --> 00:12:50,577
กันก่อนครับ เพื่อให้ Claude โดยเฉพาะ Claude

236
00:12:50,577 --> 00:12:54,471
web ตรวจพบแอปของคุณ แอปต้องรันบน URL สาธารณะ

237
00:12:54,471 --> 00:12:56,153
ไม่อย่างนั้น Claude

238
00:12:56,153 --> 00:13:00,843
จะไม่มีทางเห็นแอปที่รันอยู่บนฮาร์ดแวร์ของคุณเองได้เลย

239
00:13:00,843 --> 00:13:03,676
โชคดีที่ทำง่ายมาก และฟรีด้วยครับ

240
00:13:03,676 --> 00:13:08,720
ผมเคยทำวิดีโอหลายตัวเกี่ยวกับการตั้งโปรเจกต์และดีพลอยขึ้น

241
00:13:08,720 --> 00:13:12,615
production แล้ว จริง ๆ แล้วใน Agentic Coding

242
00:13:12,615 --> 00:13:14,119
Masterclass ของผม

243
00:13:14,119 --> 00:13:17,305
มีวิดีโอที่พาคุณผ่านกระบวนการทั้งหมด

244
00:13:17,305 --> 00:13:21,023
ตั้งแต่เริ่มจากโฟลเดอร์เปล่า ตั้ง Git ตั้ง

245
00:13:21,023 --> 00:13:24,740
GitHub ดีพลอยไปที่ Vercel และอื่น ๆ อีกมาก

246
00:13:24,740 --> 00:13:27,483
ถ้าสนใจผมจะฝากลิงก์ Masterclass

247
00:13:27,483 --> 00:13:29,342
ไว้ในคำอธิบายคลิปครับ

248
00:13:29,342 --> 00:13:31,732
ผมจะเร่งความเร็วตรงนี้หน่อย

249
00:13:31,732 --> 00:13:35,803
แต่มันตรงไปตรงมามากครับ สิ่งแรกคือสร้าง GitHub

250
00:13:35,803 --> 00:13:39,254
repository ตั้งชื่อว่า claude-connector

251
00:13:39,254 --> 00:13:41,290
และตั้งเป็น public ด้วย

252
00:13:41,290 --> 00:13:44,476
เพื่อที่ถ้าสนใจจะได้เข้าไปดูโปรเจกต์

253
00:13:44,476 --> 00:13:47,928
ก๊อปไปศึกษาเองได้ และเมื่อเปิดบน GitHub

254
00:13:47,928 --> 00:13:51,645
จะเห็นว่าโค้ดทั้งหมดที่อยู่บนเครื่องเราถูก

255
00:13:51,645 --> 00:13:54,566
push ไปยัง repository ระยะไกลแล้ว

256
00:13:54,566 --> 00:13:57,575
ซึ่งทำหน้าที่เป็นแบ็คอัปของโค้ดเรา

257
00:13:57,575 --> 00:13:59,611
ต่อไปโค้ดนี้ยังไม่ live

258
00:13:59,611 --> 00:14:03,151
ต้องดีพลอยไปยังบริษัทโฮสติ้งก่อน ผมจะใช้

259
00:14:03,151 --> 00:14:06,425
Vercel ซึ่งใช้ฟรีและตั้งง่ายมาก ไปที่

260
00:14:06,425 --> 00:14:10,231
vercel.com สมัครและเข้าสู่ระบบ แล้วคลิก add

261
00:14:10,231 --> 00:14:13,594
new project ค้นหาโปรเจกต์ที่เพิ่งสร้าง

262
00:14:13,594 --> 00:14:17,046
แล้วคลิก import กลับมาที่โปรเจกต์ของเรา

263
00:14:17,046 --> 00:14:20,321
เปิดไฟล์นี้แล้วก๊อปตัวแปรทั้งหมดมาวาง

264
00:14:20,321 --> 00:14:23,772
แต่ว่าเราต้องแก้บางจุดครับ Postgres URL

265
00:14:23,772 --> 00:14:27,224
ตอนนี้ชี้ไปที่ localhost ซึ่งไม่ถูกต้อง

266
00:14:27,224 --> 00:14:30,941
เราต้องชี้ไปที่ฐานข้อมูลที่รันอยู่บนคลาวด์

267
00:14:30,941 --> 00:14:34,393
ใช้ฐานข้อมูลที่รันบนเครื่องตัวเองไม่ได้

268
00:14:34,393 --> 00:14:38,199
โชคดีที่ตั้งง่ายเหมือนกัน กลับไปที่แดชบอร์ด

269
00:14:38,199 --> 00:14:42,270
Vercel ในอีกเซสชัน ไปที่ storage คลิก create a

270
00:14:42,270 --> 00:14:46,076
new database เลือก Neon serverless Postgres

271
00:14:46,076 --> 00:14:50,058
คลิก continue ตั้งชื่อว่า cl-demo คลิก create

272
00:14:50,058 --> 00:14:52,359
อีกครั้ง แล้วข้ามขั้นนี้ไป

273
00:14:52,359 --> 00:14:55,546
และจากส่วนนี้เราต้องคลิก show secret

274
00:14:55,546 --> 00:14:57,670
ค้นหาตัวแปร Postgres URL

275
00:14:57,670 --> 00:15:01,033
แล้วก๊อปทุกอย่างหลังเครื่องหมายเท่ากับ

276
00:15:01,033 --> 00:15:05,016
จากนั้นกลับไปที่ตัวแปรของเรา ตั้งค่า Postgres

277
00:15:05,016 --> 00:15:08,821
URL เป็นค่าใหม่นี้ เท่านี้ที่เราจะแก้ตอนนี้

278
00:15:08,821 --> 00:15:12,893
เดี๋ยวจะกลับมาแก้ทีหลังเมื่อรู้ว่า Better Auth

279
00:15:12,893 --> 00:15:16,787
URL ควรเป็นอะไร ตอนนี้ยังเป็น localhost อยู่

280
00:15:16,787 --> 00:15:19,619
แต่เราจะแทนที่มันเมื่อได้ domain

281
00:15:19,619 --> 00:15:23,071
ที่ระบบสร้างขึ้นมา แล้วคลิก deploy ครับ

282
00:15:23,071 --> 00:15:27,053
โปรเจกต์ถูกดีพลอยแล้ว ตอนนี้กลับไปที่แดชบอร์ด

283
00:15:27,053 --> 00:15:30,947
ก๊อป domain ที่สร้างขึ้นมา ไปที่ environment

284
00:15:30,947 --> 00:15:34,399
variables ตรง Better Auth URL คลิก edit

285
00:15:34,399 --> 00:15:36,700
แล้วเปลี่ยนเป็น domain นี้

286
00:15:36,700 --> 00:15:39,267
เซฟการเปลี่ยนแปลงและ redeploy

287
00:15:39,267 --> 00:15:43,161
เพื่อให้ค่าใหม่มีผล เมื่อเปลี่ยนแล้ว ลองเปิด

288
00:15:43,161 --> 00:15:45,993
domain ดูว่าทุกอย่างทำงานไหมครับ

289
00:15:45,993 --> 00:15:50,065
ตอนนี้มันรันบน domain สาธารณะแล้ว ใครที่มี URL

290
00:15:50,065 --> 00:15:53,162
นี้ก็เข้าใช้แอปได้ คลิก get started

291
00:15:53,162 --> 00:15:54,667
แล้วลองสร้างบัญชี

292
00:15:54,667 --> 00:15:57,499
ผมสังเกตว่ามันดูเหมือนจะไม่ทำงาน

293
00:15:57,499 --> 00:15:58,738
แทนที่จะข้ามไป

294
00:15:58,738 --> 00:16:02,278
ขอโชว์วิธีแก้ปัญหาที่คุณอาจเจอด้วยนะครับ

295
00:16:02,278 --> 00:16:05,199
เวลาเจอแบบนี้ ให้กลับไปที่ Vercel

296
00:16:05,199 --> 00:16:09,093
แล้วใต้โปรเจกต์คลิก logs หารายการสีแดงแบบนี้

297
00:16:09,093 --> 00:16:12,633
แล้วคลิกเพื่อก๊อป log เหล่านี้ กลับมาที่

298
00:16:12,633 --> 00:16:15,908
Claude บอกว่า ผมลองดีพลอยไปที่ Vercel

299
00:16:15,908 --> 00:16:18,652
แล้วพอเข้าสู่ระบบ ได้ error นี้

300
00:16:18,652 --> 00:16:22,723
วางข้อความทั้งหมดลงไป วิธีแก้คือ build command

301
00:16:22,723 --> 00:16:25,555
นี้ครับ ซึ่งเป็นคำสั่งที่ Vercel

302
00:16:25,555 --> 00:16:28,918
รันเมื่อดีพลอยโปรเจกต์ไปยังเซิร์ฟเวอร์

303
00:16:28,918 --> 00:16:32,901
เดิมมันมีแค่ next build ดังนั้นสิ่งที่ Claude

304
00:16:32,901 --> 00:16:36,795
ทำคือเพิ่มส่วนนี้เข้าไป เพื่อให้รัน database

305
00:16:36,795 --> 00:16:40,512
migration ด้วย ซึ่งจะสร้างตารางในฐานข้อมูล

306
00:16:40,512 --> 00:16:43,521
สาเหตุที่แอปของเราพังใน production

307
00:16:43,521 --> 00:16:46,088
ก็คือตารางในฐานข้อมูลยังไม่มี

308
00:16:46,088 --> 00:16:50,159
เพราะเรายังไม่ได้รัน migration เท่านั้นเองครับ

309
00:16:50,159 --> 00:16:53,434
ขอย้ำว่าซอร์สโค้ดมีอยู่ในคำอธิบายคลิป

310
00:16:53,434 --> 00:16:55,824
คุณสามารถก๊อป build command

311
00:16:55,824 --> 00:16:59,187
นี้ไปใช้ในโปรเจกต์ได้เลย และถ้าผมจำได้

312
00:16:59,187 --> 00:17:01,311
ผมจะอัปเดตสกิล start-app

313
00:17:01,311 --> 00:17:03,700
ให้รวมการเปลี่ยนแปลงนี้ด้วย

314
00:17:03,700 --> 00:17:07,064
คราวนี้ผมสร้างบัญชีได้แล้ว ตั้งชื่อว่า

315
00:17:07,064 --> 00:17:11,135
claude-demo สร้างองค์กร แล้วสร้างการ์ดแรกอย่าง

316
00:17:11,135 --> 00:17:14,321
"create claude connections tutorial"

317
00:17:14,321 --> 00:17:16,180
เพิ่มการ์ด เยี่ยมครับ

318
00:17:16,180 --> 00:17:19,277
นี่คือเวิร์กโฟลว์ที่คุณคุ้นเคยกันดี

319
00:17:19,277 --> 00:17:22,994
เราสร้างแอปเสร็จแล้ว มันทำงานบน production

320
00:17:22,994 --> 00:17:25,915
และคุณอาจมีผู้ใช้จริงกำลังใช้อยู่

321
00:17:25,915 --> 00:17:29,721
แล้วตอนนี้คุณอาจตัดสินใจเปิดเผยแอปนี้ให้ AI

322
00:17:29,721 --> 00:17:32,199
agent เข้าถึงผ่าน MCP server

323
00:17:32,199 --> 00:17:35,828
และอย่างที่เราจะทำในวิดีโอนี้ ผ่าน Claude

324
00:17:35,828 --> 00:17:39,191
connector ซึ่งง่ายมากครับ ถ้าทำตามอยู่

325
00:17:39,191 --> 00:17:42,466
ให้กลับไปที่โปรเจกต์ แล้วเราจะติดตั้ง

326
00:17:42,466 --> 00:17:45,829
dependency สองสามตัวที่จะช่วยให้ agent

327
00:17:45,829 --> 00:17:49,900
จัดการเรื่องพวกนี้ได้ เอาล่ะ มาถึงส่วนสนุกแล้ว

328
00:17:49,900 --> 00:17:51,759
เพื่อให้ทุกอย่างทำงาน

329
00:17:51,759 --> 00:17:55,564
เราต้องติดตั้งสกิลใหม่สองตัวเพื่อช่วย agent

330
00:17:55,564 --> 00:17:59,104
อันแรกคือ Better Auth skill ไปที่หน้านี้

331
00:17:59,104 --> 00:18:01,760
ซึ่งลิงก์ทั้งหมดอยู่ในคำอธิบาย

332
00:18:01,760 --> 00:18:05,123
แล้วติดตั้งสกิลนี้กลับเข้าไปในโปรเจกต์

333
00:18:05,123 --> 00:18:08,486
รันคำสั่งนี้ ติดตั้งสำหรับ Claude Code

334
00:18:08,486 --> 00:18:12,203
ที่ระดับโปรเจกต์ สกิลที่สองคือ MCP builder

335
00:18:12,203 --> 00:18:13,301
skill

336
00:18:13,301 --> 00:18:16,930
ก๊อปคำสั่งนี้แล้วรันในเทอร์มินัลเหมือนกัน

337
00:18:16,930 --> 00:18:21,266
สกิลนี้จะให้เอกสารอ้างอิงมากมายเกี่ยวกับวิธีสร้าง

338
00:18:21,266 --> 00:18:24,807
MCP servers ครับ หลักการคือ เรามี Claude

339
00:18:24,807 --> 00:18:27,904
ตรงนี้ หรือ agent อื่น ๆ หรือ Codex

340
00:18:27,904 --> 00:18:31,621
หรืออะไรก็ตามที่คุณใช้ และเราต้องให้ agent

341
00:18:31,621 --> 00:18:35,516
เข้าถึงแอปของเราซึ่งรันอยู่บนเว็บเซิร์ฟเวอร์

342
00:18:35,516 --> 00:18:38,790
ตอนนี้เราต้องใช้ UI เพื่อโต้ตอบกับแอป

343
00:18:38,790 --> 00:18:42,419
แต่เราไม่ต้องการให้ agent เชื่อมต่อกับ UI

344
00:18:42,419 --> 00:18:46,225
โดยตรง agent ควรเรียกใช้ tools (เครื่องมือ)

345
00:18:46,225 --> 00:18:49,588
ที่มีอยู่ในแอปโดยตรงครับ ในการทำแบบนี้

346
00:18:49,588 --> 00:18:53,482
เราจะเปิดเผย remote MCP server ซึ่งจะเปิดเผย

347
00:18:53,482 --> 00:18:56,757
tools ที่ agent เรียกใช้ได้ และ tools

348
00:18:56,757 --> 00:19:00,828
เหล่านั้นจะโต้ตอบกับแอปเบื้องหลัง ตัวอย่างเช่น

349
00:19:00,828 --> 00:19:03,483
อาจมี tool ชื่อ create expense

350
00:19:03,483 --> 00:19:06,492
ที่ถูกเปิดเผยโดย remote MCP server

351
00:19:06,492 --> 00:19:10,829
แล้วเซิร์ฟเวอร์นั้นจะเรียกฟังก์ชันในแอปชื่อประมาณ

352
00:19:10,829 --> 00:19:12,599
create expense entry

353
00:19:12,599 --> 00:19:15,520
ซึ่งจะสร้างรายจ่ายจริงในฐานข้อมูล

354
00:19:15,520 --> 00:19:18,971
หรือแม้แต่อัปโหลดไฟล์ก็ได้ การสร้าง MCP

355
00:19:18,971 --> 00:19:21,892
servers อาจเป็นเรื่องเทคนิคสูงมาก

356
00:19:21,892 --> 00:19:24,105
มีชิ้นส่วนที่ต้องดูแลเยอะ

357
00:19:24,105 --> 00:19:27,822
ทางออกที่ง่ายกว่าคือติดตั้งสกิลนี้ที่จะสอน

358
00:19:27,822 --> 00:19:31,805
agent สร้าง MCP server รวมถึงเอกสารอ้างอิงที่

359
00:19:31,805 --> 00:19:35,168
agent ใช้เรียนรู้วิธีสร้าง MCP servers

360
00:19:35,168 --> 00:19:39,151
และสำหรับแนวทางปฏิบัติที่ดีที่สุด Better Auth

361
00:19:39,151 --> 00:19:42,071
คือไลบรารียืนยันตัวตนผู้ใช้ของเรา

362
00:19:42,071 --> 00:19:46,408
แอปใช้มันให้ผู้ใช้สมัครและเข้าสู่ระบบอย่างปลอดภัย

363
00:19:46,408 --> 00:19:47,736
แต่ Better Auth

364
00:19:47,736 --> 00:19:51,541
ยังเปิดเผยอะไรที่สำคัญมากสำหรับ MCP servers

365
00:19:51,541 --> 00:19:55,524
ด้วยครับ เพราะ Claude เรียกแอปเราโดยตรงไม่ได้

366
00:19:55,524 --> 00:19:58,268
Claude ต้องยืนยันตัวตนในแอปก่อน

367
00:19:58,268 --> 00:20:01,719
เพื่อให้รู้ว่าผู้ใช้ตัวจริงที่ใช้ agent

368
00:20:01,719 --> 00:20:05,613
นี้คือใคร และ agent ก็เข้าสู่ระบบแอปแบบตรง ๆ

369
00:20:05,613 --> 00:20:09,596
ไม่ได้ มีโปรโตคอลพิเศษที่ทำให้ทั้งหมดนี้ทำงาน

370
00:20:09,596 --> 00:20:13,048
และโชคดีที่ Better Auth ทำให้มันง่ายมาก

371
00:20:13,048 --> 00:20:16,942
ลองย้ายมาตรงนี้ ตัว agent จะเรียก MCP server

372
00:20:16,942 --> 00:20:19,509
แล้ว MCP server จะบอกว่า "เฮ้

373
00:20:19,509 --> 00:20:23,491
ฉันไม่รู้ว่าคุณเป็นใคร ฉันรู้ว่าคุณเป็น agent

374
00:20:23,491 --> 00:20:25,527
ที่พยายามทำงานกับแอปนี้

375
00:20:25,527 --> 00:20:30,129
แต่ต้องมีบัญชีผู้ใช้ที่ถูกต้องอยู่เบื้องหลังคำขอนี้"

376
00:20:30,129 --> 00:20:33,846
และแน่นอน ถ้าผมเป็นคนใช้ agent ผมก็อยากให้

377
00:20:33,846 --> 00:20:35,351
Claude ทำงานแทนผม

378
00:20:35,351 --> 00:20:38,272
มันจึงต้องใช้บัญชีผู้ใช้จริงของผม

379
00:20:38,272 --> 00:20:41,281
ในการยืนยันบัญชีนั้น หรือให้ agent

380
00:20:41,281 --> 00:20:44,290
ระบุตัวตนและยืนยันตัวตนบนแอปของเรา

381
00:20:44,290 --> 00:20:46,326
มันจะผ่านโปรโตคอล OAuth

382
00:20:46,326 --> 00:20:50,043
ซึ่งจะขอให้ผู้ใช้ยืนยันตัวตนหรืออนุมัติให้

383
00:20:50,043 --> 00:20:51,990
agent นี้เข้าถึงแอปนี้

384
00:20:51,990 --> 00:20:54,822
เมื่อผู้ใช้อนุมัติคำขอนั้น token

385
00:20:54,822 --> 00:20:58,805
ที่ปลอดภัยจะถูกเก็บไว้ในแอป agent หรือตัวกลาง

386
00:20:58,805 --> 00:21:00,221
(harness) ของเรา

387
00:21:00,221 --> 00:21:04,646
ซึ่งหมายความว่าคำขอถัดไปทั้งหมดจะถูกยอมรับผ่านชั้น

388
00:21:04,646 --> 00:21:07,921
OAuth และ agent จะเข้าถึงแอปของเราได้

389
00:21:07,921 --> 00:21:11,461
และเราสามารถเพิกถอนการเข้าถึง MCP server

390
00:21:11,461 --> 00:21:13,851
ได้ทุกเมื่อ หรือฝั่ง client

391
00:21:13,851 --> 00:21:16,240
ก็ตัดการเชื่อมต่อได้เช่นกัน

392
00:21:16,240 --> 00:21:20,134
นี่คือสองชิ้นส่วนหลักของเรา เราต้องสร้าง MCP

393
00:21:20,134 --> 00:21:24,117
server และเปิดใช้งาน OAuth ในชั้น auth ของเรา

394
00:21:24,117 --> 00:21:28,188
ฟังดูเทคนิคมาก แต่ผมสัญญาว่ามันง่ายจริง ๆ ครับ

395
00:21:28,188 --> 00:21:31,729
ในคำอธิบายคลิปนี้ ผมจะให้บทความนี้กับคุณ

396
00:21:31,729 --> 00:21:35,711
ซึ่งมาจากเอกสารอย่างเป็นทางการของ Better Auth

397
00:21:35,711 --> 00:21:39,340
OAuth อธิบายการทำงานของ Better Auth OAuth

398
00:21:39,340 --> 00:21:41,464
plug-in สกิล Better Auth

399
00:21:41,464 --> 00:21:44,208
น่าจะมีข้อมูลทั้งหมดนี้อยู่แล้ว

400
00:21:44,208 --> 00:21:48,279
แต่ตอนอัดวิดีโอมีความสับสนเล็กน้อย เพราะมีหน้า

401
00:21:48,279 --> 00:21:51,642
MCP ที่ถูกทิ้งไว้ (deprecated) อยู่นี่

402
00:21:51,642 --> 00:21:55,625
ซึ่งเป็นวิธีที่ Better Auth เคยใช้ยืนยันตัวตน

403
00:21:55,625 --> 00:21:58,988
MCP providers แต่วิธีนี้เพิ่งเปลี่ยนไป

404
00:21:58,988 --> 00:22:02,971
และหน้านี้คือแหล่งข้อมูลที่ถูกต้อง (source of

405
00:22:02,971 --> 00:22:05,980
truth) ตอนนี้กลับไปที่ Claude Code

406
00:22:05,980 --> 00:22:08,724
เปิดเซสชันแล้วส่งพรอมต์นี้ครับ:

407
00:22:08,724 --> 00:22:12,087
ผมต้องการให้คุณสร้าง remote MCP server

408
00:22:12,087 --> 00:22:15,892
ให้แอปของเรา MCP server นี้ควรเปิดเผย tools

409
00:22:15,892 --> 00:22:18,017
ทั้งหมดที่จะให้ AI agent

410
00:22:18,017 --> 00:22:21,999
โต้ตอบกับแอปของเราแทนผู้ใช้ได้อย่างเต็มรูปแบบ

411
00:22:21,999 --> 00:22:25,893
MCP server จะอยู่ที่ route นี้ ผมจะใส่ประมาณ

412
00:22:25,893 --> 00:22:29,522
domain/mcp คุณมีสองสกิลที่ช่วยได้ นั่นคือ

413
00:22:29,522 --> 00:22:32,974
Better Auth skill และ MCP builder skill

414
00:22:32,974 --> 00:22:36,780
ซึ่งก็คือสองสกิลตรงนี้ สำหรับบริบทเพิ่มเติม

415
00:22:36,780 --> 00:22:40,585
ให้อ้างอิงหน้านี้ ซึ่งอยู่ใน OAuth provider

416
00:22:40,585 --> 00:22:43,329
URL และนี่ก็สำคัญมาก MCP server

417
00:22:43,329 --> 00:22:47,400
นี้ควรทำงานเป็น Claude connector ด้วย และยังมี

418
00:22:47,400 --> 00:22:50,232
URL อีกตัวที่จะช่วย agent ได้มาก

419
00:22:50,232 --> 00:22:54,038
และบอกไว้ก่อนว่านี่คือเรื่องปกติครับ นี่คือ

420
00:22:54,038 --> 00:22:57,136
context engineering (วิศวกรรมบริบท)

421
00:22:57,136 --> 00:22:59,437
เราพยายามให้บริบทกับ agent

422
00:22:59,437 --> 00:23:02,977
มากที่สุดเพื่อสร้างโซลูชันที่เชื่อถือได้

423
00:23:02,977 --> 00:23:06,960
บทความจาก Claude นี้ให้คำแนะนำวิธีตั้งค่า MCP

424
00:23:06,960 --> 00:23:10,411
servers เพื่อเชื่อมต่อกับ Claude ในฐานะ

425
00:23:10,411 --> 00:23:14,394
connector ลิงก์อยู่ในคำอธิบายคลิป แล้ววางลงไป

426
00:23:14,394 --> 00:23:17,492
ถ้าคุณมีแอปเดิมที่อยากเปิดใช้งาน AI

427
00:23:17,492 --> 00:23:21,120
นี่คือพรอมต์เดียวที่คุณต้องการจริง ๆ ครับ

428
00:23:21,120 --> 00:23:24,041
ส่งเลย agent ทำการเปลี่ยนแปลง MCP

429
00:23:24,041 --> 00:23:28,112
ทั้งหมดเสร็จแล้ว และผมขอให้มันสร้าง commit และ

430
00:23:28,112 --> 00:23:31,830
push การเปลี่ยนแปลงขึ้น production ผมจะบอก

431
00:23:31,830 --> 00:23:35,724
Claude ว่า ผมดีพลอยขึ้น production แล้ว ช่วย

432
00:23:35,724 --> 00:23:39,618
ping MCP server หน่อยว่าเรียบร้อยไหม แล้ววาง

433
00:23:39,618 --> 00:23:42,362
URL/MCP ลงไป ผมขัดจังหวะ Claude

434
00:23:42,362 --> 00:23:45,990
แต่มันก็บอกว่าทุกอย่างเป็นสีเขียว (green)

435
00:23:45,990 --> 00:23:49,884
แล้วอีกอย่างที่อยากโชว์คือ ตอนเข้าสู่ระบบแอป

436
00:23:49,884 --> 00:23:52,894
ตอนนี้เรามีส่วน connections ตรงนี้

437
00:23:52,894 --> 00:23:55,460
ซึ่งแสดงแอปพลิเคชันหรือ agent

438
00:23:55,460 --> 00:23:59,089
ที่เชื่อมต่ออยู่ทั้งหมด รวมถึง connection

439
00:23:59,089 --> 00:24:02,541
endpoint ของเรา สิ่งที่เหลือคือลองเพิ่ม

440
00:24:02,541 --> 00:24:05,815
connector นี้ให้ Claude ครับ คลิก add

441
00:24:05,815 --> 00:24:09,621
connectors แล้ว manage connectors ไปที่ add

442
00:24:09,621 --> 00:24:13,338
แล้ว add a custom connector ตั้งชื่อแอปว่า

443
00:24:13,338 --> 00:24:17,321
Lanes วาง URL ของเรา แล้วคลิก add เท่านั้นเอง

444
00:24:17,321 --> 00:24:20,153
มันจะถามให้เชื่อมต่อกับแอปของเรา

445
00:24:20,153 --> 00:24:24,313
ซึ่งก็คือขั้นที่เราต้องยืนยันตัวตนในแอปนั่นแหละ

446
00:24:24,313 --> 00:24:26,614
คลิก connect แล้วดูนี่ครับ

447
00:24:26,614 --> 00:24:30,154
มันให้หน้าเฉพาะตัวเรา ขอบคุณ Better Auth

448
00:24:30,154 --> 00:24:32,455
และตรงนี้ผมจะ allow Claude

449
00:24:32,455 --> 00:24:35,995
แล้วมันบอกว่าเชื่อมต่อแล้ว ปิดแท็บนี้ได้

450
00:24:35,995 --> 00:24:39,978
กลับมาที่ Claude เราก็เชื่อมต่อแล้ว และ agent

451
00:24:39,978 --> 00:24:43,164
เข้าถึง tools ทั้งหมดนี้ได้ มี tools

452
00:24:43,164 --> 00:24:46,085
แบบอ่านอย่างเดียวเยอะแยะ มี tools

453
00:24:46,085 --> 00:24:49,979
แบบเขียนและลบ เช่น สร้างการ์ด สร้างลิงก์เชิญ

454
00:24:49,979 --> 00:24:53,785
เจ๋งไหมล่ะครับ และเราควบคุมการเข้าถึง tools

455
00:24:53,785 --> 00:24:57,768
เหล่านี้ได้ ไม่ว่าจะจากในแอป โดยบอกให้ Claude

456
00:24:57,768 --> 00:25:00,157
Code เอาฟังก์ชันบางอย่างออก

457
00:25:00,157 --> 00:25:01,839
หรือควบคุมจากตรงนี้

458
00:25:01,839 --> 00:25:05,114
เลือกได้ว่าต้องการอนุมัติไหม บาง tool

459
00:25:05,114 --> 00:25:07,857
ควรถูกบล็อกทั้งหมด หรือบาง tool

460
00:25:07,857 --> 00:25:11,928
อนุมัติอัตโนมัติ ไม่ว่าจะแบบไหน มาทดสอบกันครับ

461
00:25:11,928 --> 00:25:15,469
ผมจะเปิดเซสชัน Claude ใหม่ ซึ่งรันอยู่ใน

462
00:25:15,469 --> 00:25:17,681
Claude desktop app นะครับ

463
00:25:17,681 --> 00:25:21,398
แต่ก็ควรโชว์ด้วยว่ามันใช้ได้กับ Claude web

464
00:25:21,398 --> 00:25:24,673
ตอนนี้ผมเปิด Claude web อยู่ ถ้าไปที่

465
00:25:24,673 --> 00:25:27,594
connectors แล้ว manage connectors

466
00:25:27,594 --> 00:25:31,045
จะเห็นการเชื่อมต่อ Lanes อยู่ตรงนี้ด้วย

467
00:25:31,045 --> 00:25:35,117
แปลว่าตอนนี้มันใช้ได้ทั้งบน Claude web, Claude

468
00:25:35,117 --> 00:25:38,126
desktop app และ Claude code เอาล่ะ

469
00:25:38,126 --> 00:25:42,197
มาดูกันว่ามันทำงานไหม โปรดสร้างงานใหม่ใน Lanes

470
00:25:42,197 --> 00:25:46,091
ชื่อว่า update claude code course in agentic

471
00:25:46,091 --> 00:25:49,897
labs ส่งเลย มันขออนุญาตเรียก tools เหล่านี้

472
00:25:49,897 --> 00:25:52,729
ผมเลือก always allow แล้ว Claude

473
00:25:52,729 --> 00:25:54,234
ก็เพิ่มงานใหม่ให้

474
00:25:54,234 --> 00:25:58,039
ลองกลับไปที่แอปของเราเพื่อดูครับ งาน update

475
00:25:58,039 --> 00:26:01,049
claude code course in agentic labs

476
00:26:01,049 --> 00:26:04,943
ตอนนี้ยังไม่ถูก assign ลองบอกว่า โปรด assign

477
00:26:04,943 --> 00:26:08,748
งานนี้ให้ฉัน ส่งเลย เสร็จเรียบร้อย การ์ดถูก

478
00:26:08,748 --> 00:26:12,820
assign ให้คุณแล้ว ลองดูว่าจริงไหม คลิกการ์ดนี้

479
00:26:12,820 --> 00:26:15,121
แล้วมันถูก assign ให้ Leon

480
00:26:15,121 --> 00:26:17,864
นี่คือสิ่งที่สำคัญมากครับ agent

481
00:26:17,864 --> 00:26:20,343
ตัวนี้ผ่านการเชื่อมต่อ OAuth

482
00:26:20,343 --> 00:26:24,414
นี้รู้ว่าคุณเป็นใคร มันทำหน้าที่แทนคุณในแอปนี้

483
00:26:24,414 --> 00:26:27,511
ดังนั้นการเปลี่ยนแปลงใด ๆ ที่ agent

484
00:26:27,511 --> 00:26:30,609
ทำในแอปจะแสดงภายใต้ชื่อผู้ใช้ของคุณ

485
00:26:30,609 --> 00:26:34,061
โปรดเปลี่ยนสถานะงานนี้เป็น doing ส่งเลย

486
00:26:34,061 --> 00:26:38,132
เราน่าจะเห็นการ์ดย้ายไปคอลัมน์ doing แล้วเสร็จ

487
00:26:38,132 --> 00:26:42,203
เจ๋งมากครับ โปรดแสดงรายการงานทั้งหมดที่ assign

488
00:26:42,203 --> 00:26:45,655
ให้ฉัน ถ้าเรามีสมาชิกในองค์กรมากกว่านี้

489
00:26:45,655 --> 00:26:49,195
เราก็จะ assign งานให้สมาชิกคนอื่นได้ด้วย

490
00:26:49,195 --> 00:26:53,178
เอาล่ะ มีงานเดียวที่ assign ให้ฉัน คือ update

491
00:26:53,178 --> 00:26:56,187
claude code course in Agentic Labs

492
00:26:56,187 --> 00:26:59,816
หวังว่าวิดีโอนี้จะมีประโยชน์นะครับ ถ้าใช่

493
00:26:59,816 --> 00:27:03,798
กดไลก์และสมัครเป็นสมาชิกช่องเพื่อรับบทช่วยสอน

494
00:27:03,798 --> 00:27:05,922
Agentic Coding เพิ่มเติม

495
00:27:05,922 --> 00:27:09,020
และถ้าอยากยกระดับทักษะ coding agent

496
00:27:09,020 --> 00:27:12,826
ของคุณให้ไปอีกขั้น ลองเข้าร่วม Agentic Labs

497
00:27:12,826 --> 00:27:16,543
ซึ่งเป็นคอมมูนิตี้ของผม ที่มีคอร์ส Agentic

498
00:27:16,543 --> 00:27:18,933
Coding Masterclass สุดพิเศษ

499
00:27:18,933 --> 00:27:23,004
ครอบคลุมทุกอย่างที่ต้องรู้เกี่ยวกับการทำงานกับ

500
00:27:23,004 --> 00:27:24,154
coding agents

501
00:27:24,154 --> 00:27:28,137
เรายังมีโปรเจกต์ขนาดใหญ่ที่สร้างแอป SaaS จริง

502
00:27:28,137 --> 00:27:31,854
ๆ รวมถึงการเชื่อมต่อการชำระเงิน ระบบผู้ใช้

503
00:27:31,854 --> 00:27:34,598
ทุกอย่าง และเราสร้างมันจากศูนย์

504
00:27:34,598 --> 00:27:37,873
ให้คุณทำตามทีละขั้นตอนได้ และ YouTube

505
00:27:37,873 --> 00:27:40,616
คิดว่าคุณจะชอบวิดีโออีกตัวหนึ่ง

506
00:27:40,616 --> 00:27:43,360
แล้วเจอกันวิดีโอหน้าครับ บายบาย