Hermes Desktop Masterclass: 2. Working in the App

1
00:00:00,000 --> 00:00:05,125
ยินดีต้อนรับสู่โมดูลที่สองของมาสเตอร์คลาสแอปเดสก์ท็อป

2
00:00:05,125 --> 00:00:06,286
Hermes Agent

3
00:00:06,286 --> 00:00:09,767
โมดูลนี้จะพูดถึงการทำงานจริงภายในแอป

4
00:00:09,767 --> 00:00:13,635
ทั้งเรื่องโค้ดใน cockpit เรื่อง sessions

5
00:00:13,635 --> 00:00:17,890
เรื่องแชต เรื่องเสียง และหัวข้ออื่นอีกมากมาย

6
00:00:17,890 --> 00:00:21,468
ในโมดูลที่หนึ่งเราติดตั้งแอปกันไปแล้ว

7
00:00:21,468 --> 00:00:25,046
เราดูการตั้งค่าบางส่วน สำรวจหน้าตาแอป

8
00:00:25,046 --> 00:00:28,140
และเชื่อมต่อ backend ไปสองสามตัว

9
00:00:28,140 --> 00:00:32,202
แต่วิดีโอนี้เราจะเริ่มทำงานจริงในแอปกันเลย

10
00:00:32,202 --> 00:00:36,070
เพราะถึงจะใช้ Hermes Agent ได้หลายแบบมาก

11
00:00:36,070 --> 00:00:39,842
แต่มันก็เป็น coding agent ชั้นหนึ่งด้วย

12
00:00:39,842 --> 00:00:45,257
และในแอปก็มีฟีเจอร์เยอะมากที่ช่วยให้ทำงานกับเอเจนต์ได้ดี

13
00:00:45,257 --> 00:00:49,415
เพื่อสร้างของจริงออกมา นี่คือแผนของโมดูลนี้

14
00:00:49,415 --> 00:00:53,477
ข้อหนึ่งคือจะสร้าง cockpit ข้อสองจะโชว์ว่า

15
00:00:53,477 --> 00:00:57,055
sessions จัดระเบียบยังไง ว่า projects

16
00:00:57,055 --> 00:01:01,116
จัดระเบียบยังไง จะพูดถึง composer นิดหน่อย

17
00:01:01,116 --> 00:01:04,984
จะพูดถึงฟังก์ชันเสียงแบบต่าง ๆ ที่ใช้ได้

18
00:01:04,984 --> 00:01:07,982
จะได้ดูมันทำงานจริงผ่าน preview

19
00:01:07,982 --> 00:01:10,593
และตลอดทางเราจะสร้างแอปจริง

20
00:01:10,593 --> 00:01:13,397
สำหรับโปรเจกต์จริงของผมไปด้วย

21
00:01:13,397 --> 00:01:16,298
ข้อหกซึ่งเป็นหัวใจของวิดีโอนี้

22
00:01:16,298 --> 00:01:20,263
คือเรื่องการส่งงาน worktree แถบ review AI

23
00:01:20,263 --> 00:01:23,454
commits และ PR ก็คือการจัดการ git

24
00:01:23,454 --> 00:01:26,065
กับโปรเจกต์จริงในแอปนั่นเอง

25
00:01:26,065 --> 00:01:30,030
นี่คือแผนของโมดูลที่สองของ Hermes Desktop

26
00:01:30,030 --> 00:01:32,448
Masterclass มาเริ่มกันเลย

27
00:01:32,448 --> 00:01:35,639
และถ้าอยากยกระดับเอเจนต์ของตัวเอง

28
00:01:35,639 --> 00:01:40,087
ลองดูโปรเจกต์ Agent Wikis (คลังความรู้เอเจนต์)

29
00:01:40,087 --> 00:01:43,955
ของผม ที่นั่นมีคลังความรู้ที่ผมใช้ทุกวัน

30
00:01:43,955 --> 00:01:47,727
ทั้งค้นคว้าวิดีโอพวกนี้และสร้างโปรเจกต์

31
00:01:47,727 --> 00:01:51,595
หัวข้อมีทั้ง Hermes Agent มี hyperframes

32
00:01:51,595 --> 00:01:55,366
มีเครื่องมือ local AI และอีกมากมาย wiki

33
00:01:55,366 --> 00:01:59,621
มาตรฐานทั้งหมดใช้ฟรี แต่ถ้าสมัคร Agent Wikis

34
00:01:59,621 --> 00:02:03,779
Pro จะเข้าถึง wiki ขั้นสูงได้ รวมถึง custom

35
00:02:03,779 --> 00:02:06,777
skills ที่ผมพัฒนาร่วมกับเอเจนต์

36
00:02:06,777 --> 00:02:10,839
มาตลอดหลายเดือนที่ทำงานด้วยกัน Pro เดือนละ

37
00:02:10,839 --> 00:02:12,773
9.99 ดอลลาร์เท่านั้น

38
00:02:12,773 --> 00:02:16,931
และถ้าสมัครตอนนี้จะล็อกเรตราคานี้ไว้ตลอดชีพ

39
00:02:16,931 --> 00:02:20,702
ตอนนี้ผมกำลังทำ agent profiles เฉพาะทาง

40
00:02:20,702 --> 00:02:24,087
กับเทมเพลต automation workflow อยู่

41
00:02:24,087 --> 00:02:27,665
พอปล่อยออกมาแล้วราคาเทียร์ Pro จะขึ้น

42
00:02:27,665 --> 00:02:31,340
เลยอยากให้สมัครวันนี้ที่ agentwiks.com

43
00:02:31,340 --> 00:02:33,854
ขอบคุณทุกคนที่สนับสนุนครับ

44
00:02:33,854 --> 00:02:35,885
กลับมาที่วิดีโอกันต่อ

45
00:02:35,885 --> 00:02:39,946
โอเคส่วนที่หนึ่งมาคุยเรื่อง coding cockpit

46
00:02:39,946 --> 00:02:42,944
(ห้องนักบินสำหรับเขียนโค้ด) กัน

47
00:02:42,944 --> 00:02:47,489
มีหลายวิธีมากที่จะปรับแต่งพื้นที่ทำงานของตัวเอง

48
00:02:47,489 --> 00:02:50,003
เรื่องนี้จริงกับทั้งแอปเลย

49
00:02:50,003 --> 00:02:54,355
แต่เฉพาะกับพื้นที่เขียนโค้ดยิ่งจริงเข้าไปใหญ่

50
00:02:54,355 --> 00:02:57,643
ที่เห็นอยู่นี่คือแอปเดสก์ท็อปของผม

51
00:02:57,643 --> 00:03:00,641
โดยทั่วไปนี่คือเลย์เอาต์ตั้งต้น

52
00:03:00,641 --> 00:03:04,509
แต่ถ้าขึ้นไปข้างบนนี้จะเจอ layout editor

53
00:03:04,509 --> 00:03:06,346
(ตัวแก้ไขผังหน้าจอ)

54
00:03:06,346 --> 00:03:10,601
มันมีตัวเลือกหลายแบบว่าเราอยากจัดหน้าจอยังไง

55
00:03:10,601 --> 00:03:13,309
อันนี้คือแบบตั้งต้นคือ focus

56
00:03:13,309 --> 00:03:15,339
ซึ่งจะเอาแถบข้างออกไป

57
00:03:15,339 --> 00:03:19,401
แล้วรวมไว้เป็นแท็บข้างบนนี้แทน จะเห็นว่ามี

58
00:03:19,401 --> 00:03:23,849
review กับ terminal อยู่ข้างบนนี้ แบบ terminal

59
00:03:23,849 --> 00:03:27,427
deck จะเอา terminal ไว้ข้างล่างตรงนี้

60
00:03:27,427 --> 00:03:31,682
แล้วเอาไฟล์กับ review ไว้ตรงนี้ ส่วนแบบ quad

61
00:03:31,682 --> 00:03:35,840
จะจัดแบบนี้ คือมี review อยู่ข้างล่างตรงนี้

62
00:03:35,840 --> 00:03:39,128
แล้วมี terminal อยู่ข้างล่างตรงนี้

63
00:03:39,128 --> 00:03:41,159
งั้นกลับไปแบบ default

64
00:03:41,159 --> 00:03:44,834
ก่อนเพราะผมใช้แบบนี้เป็นหลัก workspace

65
00:03:44,834 --> 00:03:49,185
นี้ก็คือหนึ่ง session ใช่ไหม ที่ผมพิมพ์ hello

66
00:03:49,185 --> 00:03:52,763
ตรงนี้ทั้งหมดนี้คือแชตเดียว แต่จริง ๆ

67
00:03:52,763 --> 00:03:54,794
แปลงเป็นหลาย pane ได้

68
00:03:54,794 --> 00:03:59,049
ตอนนี้ผมอยู่ในแชตนี้แล้วมันกินพื้นที่ทั้งหมด

69
00:03:59,049 --> 00:04:01,757
แต่ถ้าคลิกแล้วลากอันนี้ออกไป

70
00:04:01,757 --> 00:04:05,045
จะเห็นว่าตอนนี้มันแยกเป็นสองจอแล้ว

71
00:04:05,045 --> 00:04:08,139
ถ้าอยากเอาอันนี้ลงข้างล่างตรงนี้

72
00:04:08,139 --> 00:04:11,137
จะเห็นว่ามันแบ่งเป็นสามส่วนแล้ว

73
00:04:11,137 --> 00:04:14,812
นี่คือวิธีทำงานกับหลาย sessions แบบนี้

74
00:04:14,812 --> 00:04:16,842
ถ้าเรามีหลาย sessions

75
00:04:16,842 --> 00:04:21,194
ก็จัดตามขนาดหน้าจอของเราได้เลย พวกนี้คือ pane

76
00:04:21,194 --> 00:04:25,256
แยกกัน และยังเพิ่มแท็บแยกได้ด้วย พวกนี้คือ

77
00:04:25,256 --> 00:04:29,317
session tabs ผมเริ่ม session ใหม่ตรงนี้ได้

78
00:04:29,317 --> 00:04:33,572
แล้วก็ได้แท็บใหม่มา จะเห็นว่ามันเปิด session

79
00:04:33,572 --> 00:04:37,633
ใหม่เอี่ยมตรงนี้ แล้วมันก็โผล่ขึ้นมาข้าง ๆ

80
00:04:37,633 --> 00:04:39,954
ตรงนี้ วิธีทำก็แบบนี้เลย

81
00:04:39,954 --> 00:04:43,726
จากนั้นก็จับมันลากลงมาข้างล่างตรงนี้ได้

82
00:04:43,726 --> 00:04:46,337
ตอนนี้เลยมีสี่อันแล้วใช่ไหม

83
00:04:46,337 --> 00:04:50,398
แล้วทั้งหมดนี้พับเก็บได้ จะเห็นลูกศรเล็ก ๆ

84
00:04:50,398 --> 00:04:52,622
ชี้ลงตรงนี้ ผมพับมันได้

85
00:04:52,622 --> 00:04:55,330
แล้วมันก็พับทั้งฝั่งนั้นลงไป

86
00:04:55,330 --> 00:04:58,715
แล้วดึงกลับขึ้นมาได้ด้วยลูกศรตรงนี้

87
00:04:58,715 --> 00:05:02,099
มันก็ดึงทั้งฝั่งกลับขึ้นมาเหมือนกัน

88
00:05:02,099 --> 00:05:05,484
อันนี้ก็เหมือนกันปิดแล้วเปิดใหม่ได้

89
00:05:05,484 --> 00:05:09,449
และถ้าผมไปตรงนี้แล้วกด control shift n บน

90
00:05:09,449 --> 00:05:12,350
Windows มันจะสร้างหน้าต่างใหม่

91
00:05:12,350 --> 00:05:16,024
จะเห็นข้างล่างตรงนี้ว่ามันเหมือนกันเลย

92
00:05:16,024 --> 00:05:19,312
ถ้ามีหลายจอแบบผมก็ลากไปไว้อีกจอได้

93
00:05:19,312 --> 00:05:22,117
ก็คือมีหลายหน้าต่างได้นั่นเอง

94
00:05:22,117 --> 00:05:26,468
และถ้าหน้าต่างต่าง ๆ กันเปิด session เดียวกัน

95
00:05:26,468 --> 00:05:30,240
มันจะซิงก์กัน อย่างเช่น 5 + 5 ได้เท่าไร

96
00:05:30,240 --> 00:05:32,657
อันนี้คืออันที่ผมดึงออกมา

97
00:05:32,657 --> 00:05:35,365
แล้วลองกลับไปที่หน้าต่างเดิม

98
00:05:35,365 --> 00:05:38,073
เห็นไหมมันกำลังตอบเรา ได้ 10

99
00:05:38,073 --> 00:05:40,587
แล้วในหน้าต่างเดิมก็ได้ 10

100
00:05:40,587 --> 00:05:43,972
มันซิงก์กันหมดแม้จะเป็นคนละหน้าต่าง

101
00:05:43,972 --> 00:05:48,420
ปิดอันนี้ไปก่อนกลับไปเหลือหนึ่งอัน สมมติว่าชอบ

102
00:05:48,420 --> 00:05:52,095
workspace แบบนี้ ก็ไปที่ layout editor

103
00:05:52,095 --> 00:05:56,156
แล้วบันทึกการจัดปัจจุบัน เป็น template ได้

104
00:05:56,156 --> 00:05:59,347
ตั้งชื่อสัก four pane แล้วกด save

105
00:05:59,347 --> 00:06:03,892
ตอนนี้ก็มีเลย์เอาต์ของตัวเองใช้เมื่อไรก็ได้แล้ว

106
00:06:03,892 --> 00:06:07,374
ต่อไปคือเรื่อง sessions กับ projects

107
00:06:07,374 --> 00:06:09,694
จัดระเบียบยังไง sessions

108
00:06:09,694 --> 00:06:12,982
ก็คือบทสนทนาแยกกันพวกนี้ตามที่เห็น

109
00:06:12,982 --> 00:06:15,110
ทั้งหมดนี้คือ sessions

110
00:06:15,110 --> 00:06:19,365
และที่คุยกันในวิดีโอเดือน June ก็ยังจริงอยู่

111
00:06:19,365 --> 00:06:21,686
การแยกกันคือการคุมต้นทุน

112
00:06:21,686 --> 00:06:25,747
ทุกข้อความจะส่งบทสนทนาทั้งหมดซ้ำ เธรดยาว ๆ

113
00:06:25,747 --> 00:06:29,422
เลยแพง ถ้ามีงานใหม่ก็เปิด session ใหม่

114
00:06:29,422 --> 00:06:32,710
อย่าเอาทุกงานไปรวมใน session เดียว

115
00:06:32,710 --> 00:06:35,901
เพราะจะเสียโทเค็นมหาศาล บริบทเต็ม

116
00:06:35,901 --> 00:06:38,415
แล้วต้องบีบอัดบริบทหลายรอบ

117
00:06:38,415 --> 00:06:41,606
ซึ่งยิ่งทำให้ทุกอย่างแพงขึ้นไปอีก

118
00:06:41,606 --> 00:06:45,184
แต่บางอย่างก็ใหม่ อย่าง timeline rail

119
00:06:45,184 --> 00:06:49,536
(แถบไทม์ไลน์) ที่อยู่ตรงนี้ จะเห็นว่า session

120
00:06:49,536 --> 00:06:52,050
นี้ยังใหม่ ปิดบางอันไปก่อน

121
00:06:52,050 --> 00:06:56,015
ถ้าอยากปิดก็แค่คลิกขวาแล้วกด close ตรงนี้

122
00:06:56,015 --> 00:06:59,206
อันนี้ก็ปิดได้เหมือนกัน เรียบร้อย

123
00:06:59,206 --> 00:07:03,461
อันนี้เป็นเธรดค่อนข้างยาว สิ่งที่ทำได้คือใช้

124
00:07:03,461 --> 00:07:06,749
timeline rail นี้ ดู prompt ต่าง ๆ

125
00:07:06,749 --> 00:07:09,457
ที่เคยทำมาก่อนทั้งหมด ใช่ไหม

126
00:07:09,457 --> 00:07:13,808
ถ้าอยากข้ามไปดูบางช่วงก็ไม่ต้องเลื่อนไม่รู้จบ

127
00:07:13,808 --> 00:07:17,000
แค่ขึ้นไปข้างบนนี้แล้วคลิกอันนั้น

128
00:07:17,000 --> 00:07:20,674
มันก็กระโดดไปที่ prompt นั้นเลย นี่คือ

129
00:07:20,674 --> 00:07:21,931
timeline rail

130
00:07:21,931 --> 00:07:26,186
ทีนี้มาดูแถบข้างนิดหนึ่งเพราะคงสังเกตเห็นกัน

131
00:07:26,186 --> 00:07:30,635
ตอนดูหน้าตาแอปเราข้ามตรงนี้ไป จะเห็นว่าอยู่ใต้

132
00:07:30,635 --> 00:07:34,890
projects และ projects พวกนี้ผมไม่ได้สร้างเอง

133
00:07:34,890 --> 00:07:39,048
แอปมันเจอเอง ดูได้ในการตั้งค่าตรง workspace

134
00:07:39,048 --> 00:07:41,852
แล้ว automatic repo discovery

135
00:07:41,852 --> 00:07:46,300
มันจะสแกนโฟลเดอร์ในเครื่องหา git repo มาโชว์ใน

136
00:07:46,300 --> 00:07:47,944
projects projects

137
00:07:47,944 --> 00:07:51,716
ถูกสร้างมาแบบนี้แล้วเห็นอยู่ข้างล่างนี้

138
00:07:51,716 --> 00:07:56,164
ขออธิบายให้ชัดเพื่อให้มีภาพในหัวที่ถูก project

139
00:07:56,164 --> 00:08:00,516
คือระเบียนในฐานข้อมูล ตัวมันเองไม่ใช่โฟลเดอร์

140
00:08:00,516 --> 00:08:02,643
ไม่ใช่ไดเรกทอรีบนดิสก์

141
00:08:02,643 --> 00:08:06,801
แต่มันคือข้อมูลหนึ่งในฐานข้อมูล project ของ

142
00:08:06,801 --> 00:08:10,476
backend ที่มีโฟลเดอร์ของตัวเอง มี repo

143
00:08:10,476 --> 00:08:14,924
ของตัวเอง มี worktree ของตัวเอง และมี sessions

144
00:08:14,924 --> 00:08:19,179
ที่เคยรันในนั้น และนั่นคือเหตุผลที่ projects

145
00:08:19,179 --> 00:08:22,757
แยกตาม profile ด้วย ถ้าผมสลับ profile

146
00:08:22,757 --> 00:08:26,529
ตรงนี้ก็จะเจอ projects อีกชุด ถ้าสลับไป

147
00:08:26,529 --> 00:08:29,333
gateway ตัวอื่นของผม projects

148
00:08:29,333 --> 00:08:31,751
ที่เห็นก็เปลี่ยนเหมือนกัน

149
00:08:31,751 --> 00:08:35,425
จะเห็นว่าตอนนี้ผมสลับไป Hana แล้วมันมี

150
00:08:35,425 --> 00:08:38,810
projects อีกเพียบที่ไม่เกี่ยวกันเลย

151
00:08:38,810 --> 00:08:40,164
งั้นสลับกลับมา

152
00:08:40,164 --> 00:08:44,419
เห็นไหมพอสลับกลับมาเลย์เอาต์ก็สลับกลับมาด้วย

153
00:08:44,419 --> 00:08:48,674
เราย้าย projects พวกนี้ได้ ตรงนี้มีขีดเล็ก ๆ

154
00:08:48,674 --> 00:08:51,962
อยู่ ก็เลื่อนขึ้นเลื่อนลงได้ตามชอบ

155
00:08:51,962 --> 00:08:55,540
ถ้าอยากให้ความสำคัญกับอันไหนเป็นพิเศษ

156
00:08:55,540 --> 00:08:59,698
ซ่อนก็ได้ ซ่อน sessions ทั้งหมดก็ได้ถ้าอยาก

157
00:08:59,698 --> 00:09:03,373
ถ้าคลิกเข้าไปก็เห็น tree (แผนผัง) จริง

158
00:09:03,373 --> 00:09:07,337
แต่เดี๋ยวลงรายละเอียดอีกทีทีหลัง และเริ่ม

159
00:09:07,337 --> 00:09:09,562
project ใหม่ตรงนี้ก็ได้

160
00:09:09,562 --> 00:09:13,333
ใส่ชื่อแล้วเพิ่มโฟลเดอร์เข้าไปตามไอเดีย

161
00:09:13,333 --> 00:09:17,685
ทั้งหมดนี้ก็จะถูกบันทึกเป็น project เหมือนกัน

162
00:09:17,685 --> 00:09:22,133
ถ้าอยากสร้างเองแบบ manual นี่คือมุมมอง project

163
00:09:22,133 --> 00:09:25,517
ตรงนี้ และ sessions ไหนก็ปักหมุดได้

164
00:09:25,517 --> 00:09:28,322
จะเห็นว่าผมปักอันนี้ไว้ตรงนี้

165
00:09:28,322 --> 00:09:31,030
สมมติอยากปักอันนี้ก็ทำแบบนี้

166
00:09:31,030 --> 00:09:35,188
มันก็ขึ้นไปอยู่ข้างบน ถอนหมุดก็ได้เหมือนกัน

167
00:09:35,188 --> 00:09:39,636
นี่คือมุมมอง projects และมีหลายวิธีดูมุมมองนี้

168
00:09:39,636 --> 00:09:42,537
ขึ้นไปข้างบนนี้จะเห็นมีหลายแบบ

169
00:09:42,537 --> 00:09:45,438
จะเห็นว่าตอนนี้อยู่แบบ project

170
00:09:45,438 --> 00:09:49,500
กดตรงนี้แล้วจะเห็นว่าตอนนี้อยู่แบบ project

171
00:09:49,500 --> 00:09:53,948
แต่เลือกได้ว่าจะจัดกลุ่มตาม status ตาม profile

172
00:09:53,948 --> 00:09:58,300
หรือตาม updated แบบ updated ก็จะเข้า sessions

173
00:09:58,300 --> 00:10:01,684
ใช่ไหม ตอนนี้ไม่มี projects รวมแล้ว

174
00:10:01,684 --> 00:10:05,456
เหลือแค่ลิสต์ sessions ว่าเมื่อไรอัปเดต

175
00:10:05,456 --> 00:10:09,904
นี่คือเรียงตามเวลา ทำแบบ status ก็ได้เหมือนกัน

176
00:10:09,904 --> 00:10:13,869
ตอนนี้แสดงว่า sessions พวกนี้เสร็จหมดแล้ว

177
00:10:13,869 --> 00:10:15,996
ตอนนี้ไม่มีอะไรรันอยู่

178
00:10:15,996 --> 00:10:18,414
แต่ถ้าเริ่มอันหนึ่งขึ้นมา

179
00:10:18,414 --> 00:10:21,315
จะเห็นว่าตอนนี้ขึ้นว่า working

180
00:10:21,315 --> 00:10:24,023
แล้วแป๊บเดียวก็กลายเป็น done

181
00:10:24,023 --> 00:10:27,504
มันโชว์สถานะแบบนี้ถ้ามีหลาย sessions

182
00:10:27,504 --> 00:10:28,761
ทำงานพร้อมกัน

183
00:10:28,761 --> 00:10:32,919
จะได้เห็นว่าอันไหนกำลังทำงานอันไหนเสร็จแล้ว

184
00:10:32,919 --> 00:10:35,627
พอเสร็จแล้วจะมีไฟเขียวเล็ก ๆ

185
00:10:35,627 --> 00:10:42,299
อีกแบบคือตาม profile อันนี้เอาไว้ดู sessions ทั้งหมดใน profile ต่าง ๆ

186
00:10:42,299 --> 00:10:46,748
อย่างอันนี้คือ session ตั้งต้นของผม KT builder

187
00:10:46,748 --> 00:10:51,196
สำหรับ keepsake threads พวกนี้คือที่เพิ่งใช้ไป

188
00:10:51,196 --> 00:10:55,161
มี KT main ให้เห็น กับอีกเพียบ ข้างล่างมี

189
00:10:55,161 --> 00:10:57,675
Reviewer นี่คือแบบ profile

190
00:10:57,675 --> 00:11:00,576
และข้างล่างนี้ยังเห็น sessions

191
00:11:00,576 --> 00:11:03,477
ตามแอปแชตได้ด้วย ผมมี Telegram

192
00:11:03,477 --> 00:11:06,765
สำหรับเอเจนต์ตัวนี้ผมไม่ค่อยได้ใช้

193
00:11:06,765 --> 00:11:10,633
แต่จะเห็นว่ามี sessions อยู่สองสามอัน มี

194
00:11:10,633 --> 00:11:14,211
WhatsApp ด้วย มี Photon กับ cron jobs

195
00:11:14,211 --> 00:11:18,370
อยู่ข้างล่างนี้เหมือนกัน พวกนี้คือ sessions

196
00:11:18,370 --> 00:11:22,528
เฉพาะของแอปแชต และ basically ทุกอย่างที่ใช้

197
00:11:22,528 --> 00:11:26,879
gateway อยู่ข้างล่างนี้ มีวิธีดูได้หลายแบบมาก

198
00:11:26,879 --> 00:11:30,361
งั้นกลับไปก่อน กลับมาที่ project กัน

199
00:11:30,361 --> 00:11:34,325
มาดูเรื่องการจัดเรียงลำดับกันต่อ เรียงตาม

200
00:11:34,325 --> 00:11:38,097
updated ได้ เรียงตาม created ได้เช่นกัน

201
00:11:38,097 --> 00:11:42,545
เรียงตาม status ได้ด้วย คุณจะเห็นสถานะของแต่ละ

202
00:11:42,545 --> 00:11:46,994
session ได้เลย อันไหนพร้อมใช้งานแล้วเห็นชัดเลย

203
00:11:46,994 --> 00:11:51,152
เรียงตามจำนวน tokens ได้ ดูตรง home session

204
00:11:51,152 --> 00:11:54,246
ได้เลย จะเห็นว่าอันไหนใช้ tokens

205
00:11:54,246 --> 00:11:58,018
เพิ่มขึ้นหรือลดลง session นี้ใช้ tokens

206
00:11:58,018 --> 00:12:01,112
เยอะที่สุด ใช่เลย ดูแล้วน่าจะใช่

207
00:12:01,112 --> 00:12:04,787
นี่คือวิธีจัดเรียงแบบต่าง ๆ ดูตาม cost

208
00:12:04,787 --> 00:12:08,462
ได้ด้วยถ้าอยากรู้ มันจะโชว์ว่า session

209
00:12:08,462 --> 00:12:12,040
ไหนแพงที่สุด session นั้นเป็นงานทำเกม

210
00:12:12,040 --> 00:12:16,294
นี่คือเรื่องการจัดเรียง กลับมาที่แบบ updated

211
00:12:16,294 --> 00:12:19,776
กัน คุณจะเห็นว่าเป็นแบบ updated แล้ว

212
00:12:19,776 --> 00:12:23,257
นี่คือแท็บ sessions ที่โชว์ข้อมูลนี้

213
00:12:23,257 --> 00:12:27,512
ตรงนี้มีจำนวน tokens ใช่ไหม เปิดดู costs ได้

214
00:12:27,512 --> 00:12:30,800
เปิดดู PRs ได้ เปิดดู profiles ได้

215
00:12:30,800 --> 00:12:35,055
ตรงนี้โชว์ทุกอย่างจริง ๆ ขยายให้ดูใหญ่ขึ้นนะ

216
00:12:35,055 --> 00:12:39,020
จะได้เห็นข้อมูลทั้งหมดในแท็บนี้ ทั้งจำนวน

217
00:12:39,020 --> 00:12:42,211
tokens ทั้ง cost ของแต่ละ session

218
00:12:42,211 --> 00:12:46,079
เห็นไหมว่าอันนี้ทำไปราคา $54 ไอคอนเล็ก ๆ

219
00:12:46,079 --> 00:12:48,496
ตรงนี้คือ profiles ต่าง ๆ

220
00:12:48,496 --> 00:12:52,558
มีข้อมูลให้ดูเยอะมากตรงนี้ ปิดตรงนี้ไปก่อน

221
00:12:52,558 --> 00:12:56,813
มาดูแบบ inbox กัน inbox style จะหน้าตาแบบนี้

222
00:12:56,813 --> 00:12:59,327
เป็นมุมมองยอดนิยมของหลายคน

223
00:12:59,327 --> 00:13:03,775
มันโชว์เป็นการ์ดแบบนี้ มี title ให้ด้วย มีชื่อ

224
00:13:03,775 --> 00:13:07,450
model ให้ด้วย มีจำนวน messages ให้ด้วย

225
00:13:07,450 --> 00:13:11,318
ทั้งหมดนี้คือแท็บ projects หรือ sessions

226
00:13:11,318 --> 00:13:15,283
ปิดหรือเปิดก็ได้ตามสะดวก แต่นี่คือที่เก็บ

227
00:13:15,283 --> 00:13:19,538
sessions ทั้งหมดของคุณ ปรับแต่งได้หลายแบบเลย

228
00:13:19,538 --> 00:13:23,986
อีกอย่างที่ทำได้คือเปลี่ยนรูปลักษณ์ของ session

229
00:13:23,986 --> 00:13:27,854
ไปที่ appearance ตรงนี้ ลองทำให้ session

230
00:13:27,854 --> 00:13:30,175
นี้เป็นสีเหลืองหรือสีส้ม

231
00:13:30,175 --> 00:13:33,270
จะเห็นว่าเปลี่ยนไอคอนได้เล็กน้อย

232
00:13:33,270 --> 00:13:35,107
เปลี่ยนสีได้หลายแบบ

233
00:13:35,107 --> 00:13:38,975
ต่อไปจะพูดถึงพื้นที่ทำงานจริงของ session

234
00:13:38,975 --> 00:13:42,650
เริ่มจาก composer ก่อน ถ้ายังไม่รู้จัก

235
00:13:42,650 --> 00:13:46,905
composer มันคือช่องตรงนี้ คือช่องที่เราพิมพ์

236
00:13:46,905 --> 00:13:50,386
prompts ลงไป คลิกแล้วลากย้ายได้ตามใจ

237
00:13:50,386 --> 00:13:54,351
มันไม่ได้ยึดติดตายตัว แต่ถ้าวางลงข้างล่าง

238
00:13:54,351 --> 00:13:58,799
มันจะล็อกกลับเข้าที่เอง ใน composer ก็แค่พิมพ์

239
00:13:58,799 --> 00:14:02,377
prompts ลงไป เพื่อคุยกับ agent ใช่ไหม

240
00:14:02,377 --> 00:14:06,826
ฝั่งนี้แนบรูปภาพได้ แนบไฟล์ต่าง ๆ ได้ เพื่อใส่

241
00:14:06,826 --> 00:14:10,887
context เพิ่มให้ prompt มี prompt snippets

242
00:14:10,887 --> 00:14:14,078
ให้ใช้ด้วย ตรงนี้คือ model ที่ใช้

243
00:14:14,078 --> 00:14:18,333
เลือกได้ว่าจะใช้ model ไหน วิดีโอนี้เราจะใช้

244
00:14:18,333 --> 00:14:21,815
GPT 5.6 เปลี่ยนใจลองใช้ Terra ดีกว่า

245
00:14:21,815 --> 00:14:25,393
แล้วก็มีฟังก์ชัน voice ที่จะพูดถึงกัน

246
00:14:25,393 --> 00:14:29,551
ตอนนี้เราจะทำกันใน project Keepsake Threads

247
00:14:29,551 --> 00:14:33,032
สิ่งที่เราจะทำในวิดีโอนี้คือ web app

248
00:14:33,032 --> 00:14:36,223
เป็นเหมือน dashboard หรือ tracker

249
00:14:36,223 --> 00:14:40,575
เอาไว้ติดตามทุกองค์ประกอบของ project Keepsake

250
00:14:40,575 --> 00:14:44,443
Threads ถ้าใครยังไม่ได้ดูวิดีโออื่นของผม

251
00:14:44,443 --> 00:14:48,505
Keepsake Threads คือธุรกิจ print on demand

252
00:14:48,505 --> 00:14:52,566
แบบกำหนดเอง ขับเคลื่อนด้วย AI เชื่อมต่อกับ

253
00:14:52,566 --> 00:14:55,467
Shopify ตอนนี้ผมกำลังสร้างอยู่

254
00:14:55,467 --> 00:14:59,722
สร้างด้วยเครื่องมือ AI ทั้งหมด และให้ agents

255
00:14:59,722 --> 00:15:03,880
เป็นคนดูแลระบบ ผมสั่งไปว่าอยากสร้าง web app

256
00:15:03,880 --> 00:15:08,329
ที่ติดตามทุกปัจจัยของ project Keepsake Threads

257
00:15:08,329 --> 00:15:12,003
ช่วยรีเสิร์ช stack ที่ดีที่สุดให้หน่อย

258
00:15:12,003 --> 00:15:16,355
ต้องเชื่อมกับ Shopify ได้ และเชื่อมกับ Hermes

259
00:15:16,355 --> 00:15:19,159
agent ได้ด้วย พอผมส่งไปแบบนี้

260
00:15:19,159 --> 00:15:20,900
มันก็เริ่มทำงานเลย

261
00:15:20,900 --> 00:15:26,605
สิ่งที่ทำได้อีกอย่างคือเปลี่ยนทิศทางระหว่างที่มันกำลังทำงาน

262
00:15:26,605 --> 00:15:30,860
เมื่อก่อนต้องกด control C หรือขัดจังหวะ turn

263
00:15:30,860 --> 00:15:35,019
นั้นก่อน แล้วค่อยสั่งใหม่ แต่ตอนนี้แค่เพิ่ม

264
00:15:35,019 --> 00:15:38,790
prompt เข้าไป ก็สั่งเปลี่ยนทิศทางได้เลย

265
00:15:38,790 --> 00:15:42,465
อย่างเช่นผมพิมพ์เพิ่มว่า also printful

266
00:15:42,465 --> 00:15:45,172
integration ผมแค่เพิ่มเข้าไป

267
00:15:45,172 --> 00:15:47,106
จะเห็นว่ามันรับไปเลย

268
00:15:47,106 --> 00:15:49,814
มันไม่หยุดสิ่งที่กำลังทำอยู่

269
00:15:49,814 --> 00:15:53,972
ทั้งที่กำลังคิดและกำลังใช้ tools อยู่ ผมใส่

270
00:15:53,972 --> 00:15:58,130
prompt ว่า also printful integration เข้าไป

271
00:15:58,130 --> 00:16:00,838
มันก็รับได้เลยโดยไม่ต้องหยุด

272
00:16:00,838 --> 00:16:03,449
เห็นไหมว่ามันทำงานต่อได้เลย

273
00:16:03,449 --> 00:16:06,930
ดูข้างล่างได้เลยว่ามันเพิ่ม Printful

274
00:16:06,930 --> 00:16:10,799
เข้าไปแล้ว นี่คือสิ่งที่จะเกิดเมื่อพิมพ์

275
00:16:10,799 --> 00:16:13,216
prompt ระหว่างที่มันทำงาน

276
00:16:13,216 --> 00:16:17,664
มันจะปรับทิศทางให้แบบนี้เลย ยังตั้งคิว prompts

277
00:16:17,664 --> 00:16:21,436
หลายอันได้ด้วยถ้างานใหญ่ ทำแบบนี้ได้ กด

278
00:16:21,436 --> 00:16:25,207
control ค้างไว้แล้วกด enter มันจะขึ้น Q

279
00:16:25,207 --> 00:16:26,368
ตรงนี้ใช่ไหม

280
00:16:26,368 --> 00:16:29,946
มันจะไม่ส่งทันทีขณะที่มันยังทำงานอยู่

281
00:16:29,946 --> 00:16:31,976
แต่มันจะสร้างคิวรอไว้

282
00:16:31,976 --> 00:16:34,878
คุณก็สั่งเปลี่ยนทิศทางของ turn

283
00:16:34,878 --> 00:16:37,488
ที่กำลังรันได้เลย แล้วใส่ Q

284
00:16:37,488 --> 00:16:39,906
นี้เป็นงานถัดไปที่จะเพิ่ม

285
00:16:39,906 --> 00:16:44,161
แก้ไขตรงนี้ได้เลยถ้าต้องการ เรียงลำดับได้ กด

286
00:16:44,161 --> 00:16:47,932
Save ตรงนี้ เรียบร้อย ลบออกก็ได้เช่นกัน

287
00:16:47,932 --> 00:16:49,576
ถ้ากดส่งแบบ steer

288
00:16:49,576 --> 00:16:52,381
มันก็จะเป็นแบบที่เห็นเมื่อกี้

289
00:16:52,381 --> 00:16:56,732
คือมันแทรกเข้าไปทันทีตรงนั้นเลย แล้วอันนี้คือ

290
00:16:56,732 --> 00:17:00,891
which is priority ขอย้ำอีกทีว่ากด control +

291
00:17:00,891 --> 00:17:04,759
enter เพื่อใส่คิว แล้วเพิ่มได้หลายอันเลย

292
00:17:04,759 --> 00:17:07,853
พิมพ์ว่า list them by text stack

293
00:17:07,853 --> 00:17:09,981
ตอนนี้ก็มีสองคิวรออยู่

294
00:17:09,981 --> 00:17:12,495
เพิ่มแบบนี้เป็นงานถัดไปได้

295
00:17:12,495 --> 00:17:16,073
แล้วเลือกได้ว่าจะให้ทำ prompt ไหนก่อน

296
00:17:16,073 --> 00:17:20,038
เห็นไหมว่ามันทำครบทุกอย่าง ทั้งที่ผมขอว่า

297
00:17:20,038 --> 00:17:24,293
which is priority ทั้งเรื่อง text stack ด้วย

298
00:17:24,293 --> 00:17:27,387
นี่คืออีกวิธีในการต่อคิว prompts

299
00:17:27,387 --> 00:17:30,868
ระหว่างที่มันกำลังทำงานอย่างอื่นอยู่

300
00:17:30,868 --> 00:17:35,027
เพราะงานบางอย่างใช้เวลานานมาก บางที 30 นาที

301
00:17:35,027 --> 00:17:38,024
บางทีเป็นชั่วโมง การใส่ prompts

302
00:17:38,024 --> 00:17:40,635
ล่วงหน้าว่าอยากให้ทำอะไรต่อ

303
00:17:40,635 --> 00:17:44,600
ช่วยประหยัดเวลาได้เยอะ ยังมีทริก composer

304
00:17:44,600 --> 00:17:47,501
อีกสองสามอย่าง ใช้ at mentions

305
00:17:47,501 --> 00:17:51,659
เพื่ออ้างถึงไฟล์และ context ได้ ถ้าพิมพ์ at

306
00:17:51,659 --> 00:17:55,818
ตรงนี้ จะเห็นว่ามันค้นหาให้ มีของหลายแบบมาก

307
00:17:55,818 --> 00:17:59,879
อาจเป็นไฟล์ต่าง ๆ อาจเป็น git diffs ต่าง ๆ

308
00:17:59,879 --> 00:18:02,974
อาจเป็นการคุยกับ profiles ต่าง ๆ

309
00:18:02,974 --> 00:18:07,132
มีตัวเลือกเยอะมากตรง at นี้ มี model switch

310
00:18:07,132 --> 00:18:11,484
แบบกดสองจังหวะ มี reactions มี quick entry มี

311
00:18:11,484 --> 00:18:15,062
pop out composer สำหรับ prompts ยาว ๆ

312
00:18:15,062 --> 00:18:17,866
ส่วนต่อไปจะพูดถึงเรื่อง voice

313
00:18:17,866 --> 00:18:21,250
รู้ว่าหลายคนชอบใช้ voice กับ agents

314
00:18:21,250 --> 00:18:25,215
ผมเองยังลังเลอยู่เล็กน้อย แต่เพื่อให้เป็น

315
00:18:25,215 --> 00:18:28,987
masterclass ที่ครบถ้วน ก็จะพูดถึงให้ครบ

316
00:18:28,987 --> 00:18:33,145
ฟังก์ชัน voice มีเยอะมาก ทั้งหมดควบคุมได้ใน

317
00:18:33,145 --> 00:18:37,593
settings ใต้หัวข้อ voice ตรงนี้ตั้งค่า text to

318
00:18:37,593 --> 00:18:41,848
speech provider ได้ ตอนนี้ตั้งไว้เป็น OpenAI

319
00:18:41,848 --> 00:18:46,200
คิดว่าน่าจะโอเค มีตัวเลือกเยอะมาก Edge ใช้ฟรี

320
00:18:46,200 --> 00:18:50,648
รู้มาว่าตัวของ XAI ดีมาก แต่มีตัวเลือกเยอะจริง

321
00:18:50,648 --> 00:18:54,710
ๆ แล้วก็มี speech to text มี automatically

322
00:18:54,710 --> 00:18:57,127
speak assistant responses

323
00:18:57,127 --> 00:18:59,448
คือมันพูดตอบออกมาได้จริง

324
00:18:59,448 --> 00:19:03,316
เลือกได้ว่าจะใช้เสียงไหนตรงนี้ ลองกันเลย

325
00:19:03,316 --> 00:19:07,571
ดูข้างล่างตรงนี้คือ wake word ตั้งให้ Hermes

326
00:19:07,571 --> 00:19:11,729
เปิด session ใหม่ได้เลยด้วยคำว่า hey Hermes

327
00:19:11,729 --> 00:19:16,178
ลองกันเลย Hey Hermes มันเริ่ม session ใหม่แล้ว

328
00:19:16,178 --> 00:19:20,529
ผมถามว่า Can you do some research on print on

329
00:19:20,529 --> 00:19:23,527
demand businesses มันตอบว่า Yes

330
00:19:23,527 --> 00:19:27,879
ผลสแกนเบื้องต้นยืนยันว่าการตัดสินใจเรื่อง pod

331
00:19:27,879 --> 00:19:31,843
ไม่ใช่แค่การเลือกดีไซน์ แต่คือเรื่อง unit

332
00:19:31,843 --> 00:19:36,292
economics เรื่องความน่าเชื่อถือของ fulfillment

333
00:19:36,292 --> 00:19:40,547
เรื่องค่าธรรมเนียมของ channel และการหาลูกค้า

334
00:19:40,547 --> 00:19:44,028
Printful มีแผนเริ่มต้นฟรี แผน Growth

335
00:19:44,028 --> 00:19:47,026
แบบจ่ายเงินราคา $24.99 ต่อเดือน

336
00:19:47,026 --> 00:19:49,250
มียอดขายรายปีฟรีที่ $12

337
00:19:49,250 --> 00:19:53,505
และโฆษณาส่วนลดราคาสูงสุด 33% ผมถามต่อว่าแล้ว

338
00:19:53,505 --> 00:19:57,470
margin ปกติของธุรกิจ Shopify แบบ print on

339
00:19:57,470 --> 00:19:59,404
demand อยู่ที่เท่าไร

340
00:19:59,404 --> 00:20:03,852
มันตอบว่าร้านทั่วไปอยู่ที่ gross margin ประมาณ

341
00:20:03,852 --> 00:20:08,010
30 ถึง 40% ต่อออเดอร์ หลังหักต้นทุน Shopify

342
00:20:08,010 --> 00:20:11,782
แล้ว และหลังหักเรื่อง refunds ที่คาดไว้

343
00:20:11,782 --> 00:20:15,940
แต่ยังไม่รวมค่าโฆษณา ค่าเวลาของคุณ ค่า apps

344
00:20:15,940 --> 00:20:19,711
และค่าใช้จ่ายทั่วไป ข้อมูลนี้อ้างอิงจาก

345
00:20:19,711 --> 00:20:23,289
Shopify notes และคำแนะนำเรื่อง margin

346
00:20:23,289 --> 00:20:27,157
พอเสร็จแล้ว เมื่อกี้น่าจะเห็นเดโมกันแล้ว

347
00:20:27,157 --> 00:20:29,962
ผมพูดแทรกไม่ได้ตอนมันกำลังพูด

348
00:20:29,962 --> 00:20:32,089
เพราะมันรอให้ผมพูดอยู่

349
00:20:32,089 --> 00:20:35,764
เห็นกันแล้วว่าผมคุยกับมันยังไง prompts

350
00:20:35,764 --> 00:20:38,665
โผล่ขึ้นมา แล้วเราก็ได้คำตอบมา

351
00:20:38,665 --> 00:20:41,566
มันอ่านคำตอบกลับมาให้ฟังจริง ๆ

352
00:20:41,566 --> 00:20:43,307
ผมต้องตัดให้สั้นลง

353
00:20:43,307 --> 00:20:46,111
เพราะให้มันพูดทั้งหมดจะนานมาก

354
00:20:46,111 --> 00:20:48,045
แต่มันทำงานแบบนี้เลย

355
00:20:48,045 --> 00:20:50,850
ถ้าอยากคุยแบบสนทนาแทนการพิมพ์

356
00:20:50,850 --> 00:20:54,137
จบการสนทนาก็ทำแบบนี้ กด end ตรงนี้

357
00:20:54,137 --> 00:20:57,522
แค่นี้ก็กลับมาเป็น session ปกติแล้ว

358
00:20:57,522 --> 00:21:00,713
นี่คือฟังก์ชัน voice conversation

359
00:21:00,713 --> 00:21:04,485
ส่วนต่อไปจะดูเรื่อง preview เพราะ agent

360
00:21:04,485 --> 00:21:07,482
ขับเคลื่อน preview ของตัวเองได้

361
00:21:07,482 --> 00:21:11,351
เราจะได้เห็นมันสร้าง app นี้ขึ้นมาจริง ๆ

362
00:21:11,351 --> 00:21:15,122
ปิดอันนี้ก่อนจะได้เห็นชัดขึ้น มันจะเปิด

363
00:21:15,122 --> 00:21:19,280
preview pane ขึ้นมา เราจะได้ดูมันเริ่มสร้าง

364
00:21:19,280 --> 00:21:23,632
app กัน preview pane เป็นสิ่งที่มันคลิกเองได้

365
00:21:23,632 --> 00:21:28,080
Drive preview มี element wraps มี real pointer

366
00:21:28,080 --> 00:21:32,045
และ keyboard hover แล้วเมนูเปิดขึ้นมาจริง

367
00:21:32,045 --> 00:21:36,493
annotate บน preview ได้ มี persistent outlines

368
00:21:36,493 --> 00:21:40,555
ที่ตาม element ไป ทั้งหมดนี้สำหรับ desktop

369
00:21:40,555 --> 00:21:45,003
sessions เท่านั้น แต่ใช้ได้กับทุก backend ทั้ง

370
00:21:45,003 --> 00:21:47,227
local และ SSH และ cloud

371
00:21:47,227 --> 00:21:50,032
มันไม่ได้แค่โชว์หน้าเว็บให้ดู

372
00:21:50,032 --> 00:21:52,449
แต่มันคลิกหน้าเว็บได้จริง

373
00:21:52,449 --> 00:21:55,350
และชี้ได้ว่ากำลังพูดถึงส่วนไหน

374
00:21:55,350 --> 00:21:59,315
อาจใช้เวลาสักหน่อย เพราะเรากำลังสร้าง app

375
00:21:59,315 --> 00:22:03,280
จริงตรงนี้ ไม่ใช่งานเดโมเล่น ๆ เห็นไหมว่า

376
00:22:03,280 --> 00:22:07,148
Hermes browse พร้อม snapshot ของ default

377
00:22:07,148 --> 00:22:10,919
มันใช้ profile ของผม เห็นไหมว่ามันเริ่ม

378
00:22:10,919 --> 00:22:13,047
annotate และ observing

379
00:22:13,047 --> 00:22:16,818
เราจะดูมันทำงานจริงตรงนี้ แล้วสร้าง app

380
00:22:16,818 --> 00:22:19,623
นี้ขึ้นมา นี่คือ preview pane

381
00:22:19,623 --> 00:22:22,330
มันกำลังจัดการกับปุ่มนี้อยู่

382
00:22:22,330 --> 00:22:25,425
มันคลิกปุ่มจริงเพื่อดูรายละเอียด

383
00:22:25,425 --> 00:22:28,229
เพื่อเช็กว่าฟังก์ชันนี้ใช้ได้

384
00:22:28,229 --> 00:22:32,678
ดูข้างบนตรงนี้ว่ามันกำลังดูเรื่อง button click

385
00:22:32,678 --> 00:22:36,546
failure คุณดูได้เลยว่ามันกำลังทำอะไรอยู่

386
00:22:36,546 --> 00:22:39,737
เห็นไหมว่ามันสร้างออกมาแล้วตรงนี้

387
00:22:39,737 --> 00:22:42,831
บางส่วนยังเป็นข้อมูล placeholder

388
00:22:42,831 --> 00:22:44,765
และยังดูเรียบง่ายมาก

389
00:22:44,765 --> 00:22:48,150
เพราะผมไม่ได้สั่งเรื่องสไตล์อะไรเลย

390
00:22:48,150 --> 00:22:51,728
แต่มันใช้งานได้แล้ว ในพื้นที่ preview

391
00:22:51,728 --> 00:22:55,983
ตรงนี้คุณพูดได้ว่า can you give me a tour of

392
00:22:55,983 --> 00:23:00,238
each section in the preview area ข้อหนึ่งคือ

393
00:23:00,238 --> 00:23:04,493
safety posture ตรงนี้ เป็น console แบบ local

394
00:23:04,493 --> 00:23:08,361
only ออกแบบมาเป็นจุดเริ่มต้นของ operator

395
00:23:08,361 --> 00:23:12,616
เลื่อนลงมาที่ next priority metrics ต่อมาคือ

396
00:23:12,616 --> 00:23:16,677
work area นี่คือ work area triage Q ตรงนี้

397
00:23:16,677 --> 00:23:21,029
ต่อมาคือ next line item focus แล้วก็ evidence

398
00:23:21,029 --> 00:23:25,477
posture เสร็จแล้ว พวกนี้คือทั้งหมดของ ส่วนต่าง

399
00:23:25,477 --> 00:23:28,475
ๆ เหล่านี้รวมกันเป็นทัวร์สั้น ๆ

400
00:23:28,475 --> 00:23:31,569
ให้คุณเห็นทุกอย่างในพรีวิวได้ครบ

401
00:23:31,569 --> 00:23:35,341
คุณยังสั่งให้มันใส่คำอธิบายเพิ่มได้ด้วย

402
00:23:35,341 --> 00:23:39,596
เช่นสั่งให้อธิบายทุกส่วนที่เกี่ยวกับ Shopify

403
00:23:39,596 --> 00:23:43,851
คุณเห็นทุกอย่างตรงนี้ได้เลย ทั้ง Gate status

404
00:23:43,851 --> 00:23:48,299
และ Shopify posture ส่วนด้านล่างนี้คือ Shopify

405
00:23:48,299 --> 00:23:50,427
order และ Shopify gate

406
00:23:50,427 --> 00:23:54,295
คุณเลยใช้วิธีนี้ทำงานร่วมกับเอเจนต์ในแอป

407
00:23:54,295 --> 00:23:55,394
desktop ได้

408
00:23:55,394 --> 00:23:59,262
นี่คือจุดพิเศษของแอปที่คุณจะไม่เจอใน TUI

409
00:23:59,262 --> 00:24:03,421
โดยเฉพาะงานที่เป็นภาพและมีฟรอนต์เอนด์แบบนี้

410
00:24:03,421 --> 00:24:05,935
มันยิ่งมีประโยชน์มากจริง ๆ

411
00:24:05,935 --> 00:24:09,513
ต่อไปในพาร์ทหกเราจะคุยเรื่อง shipping

412
00:24:09,513 --> 00:24:13,574
ซึ่งก็คือเรื่องการเขียนโค้ดและ code review

413
00:24:13,574 --> 00:24:17,152
งานนี้ผมอยากเปลี่ยนเป็นมุมมองแบบ quad

414
00:24:17,152 --> 00:24:21,214
เพราะเราต้องใช้ review panel (แผงตรวจโค้ด)

415
00:24:21,214 --> 00:24:25,565
มุมมองนี้อาจจะดีกว่า งั้นเราใช้ terminal deck

416
00:24:25,565 --> 00:24:29,724
กัน ตอนนี้เรายังทำงานต่อในโปรเจกต์ keepsake

417
00:24:29,724 --> 00:24:33,302
threads คุณเห็นว่าผมย้ายเลย์เอาต์แล้ว

418
00:24:33,302 --> 00:24:35,719
เพื่อให้มีส่วน review นี้

419
00:24:35,719 --> 00:24:39,491
ตรงนี้คือไฟล์ทั้งหมดในโปรเจกต์ keepsake

420
00:24:39,491 --> 00:24:43,649
threads และนี่คือ git repo ในเครื่อง นี่คือ

421
00:24:43,649 --> 00:24:47,710
main branch ผมเพิ่งเพิ่มไฟล์ readme เข้าไป

422
00:24:47,710 --> 00:24:51,772
ถ้าผมเปิด review ตอนนี้จะเห็นว่ามันยังเป็น

423
00:24:51,772 --> 00:24:55,833
uncommitted ส่วนที่เหลือของโปรเจกต์ commit

424
00:24:55,833 --> 00:25:00,088
ไปหมดแล้ว แต่ไฟล์ readme นี้ยังไม่ได้ commit

425
00:25:00,088 --> 00:25:04,343
คุณกดดูตรงนี้ได้เลย จะ stage ไฟล์หรือ revert

426
00:25:04,343 --> 00:25:06,181
การเปลี่ยนแปลงก็ได้

427
00:25:06,181 --> 00:25:10,049
เห็นได้ชัดว่าเปลี่ยนอะไรไปบ้าง จากนั้นก็

428
00:25:10,049 --> 00:25:14,497
commit ในเครื่องได้เลย ข้อความว่า readme added

429
00:25:14,497 --> 00:25:18,075
คุณสร้าง PR ได้ด้วย งั้นกด commit กัน

430
00:25:18,075 --> 00:25:21,846
เรียบร้อย ตอนนี้ไม่มี diff เหลือใน repo

431
00:25:21,846 --> 00:25:26,005
นี้แล้ว สองแนวคิดที่ใช้บ่อยตรงนี้คือ branch

432
00:25:26,005 --> 00:25:29,196
กับ worktree branch ก็คือ pointer

433
00:25:29,196 --> 00:25:33,451
ที่มีชื่อในฐานข้อมูล git มันคือสายของ commit

434
00:25:33,451 --> 00:25:37,706
ต่อ ๆ กัน มันคือข้อมูล ไม่ใช่ไฟล์โดยตรง repo

435
00:25:37,706 --> 00:25:40,220
หนึ่งมีได้ถึงห้าสิบ branch

436
00:25:40,220 --> 00:25:44,668
แต่โฟลเดอร์ทำงานของคุณ checkout ได้ทีละ branch

437
00:25:44,668 --> 00:25:47,763
เดียว พอคุณสั่ง git checkout git

438
00:25:47,763 --> 00:25:51,921
จะสลับไฟล์ในโฟลเดอร์เดียวนั้นแทนที่กัน ส่วน

439
00:25:51,921 --> 00:25:56,176
worktree คือโฟลเดอร์ทำงานเสริมที่ผูกกับ repo

440
00:25:56,176 --> 00:25:59,657
เดียวกัน ข้างใต้ยังเป็นฐานข้อมูล git

441
00:25:59,657 --> 00:26:00,757
ตัวเดียวกัน

442
00:26:00,757 --> 00:26:05,302
แต่ตอนนี้มีสองหรือสามหรือสี่โฟลเดอร์จริงบนดิสก์

443
00:26:05,302 --> 00:26:09,750
แต่ละโฟลเดอร์ checkout คนละ branch พร้อมกันได้

444
00:26:09,750 --> 00:26:12,651
นั่นคือแนวคิดหลักของมัน branch

445
00:26:12,651 --> 00:26:15,842
ทำให้ประวัติแยกสายกันได้ worktree

446
00:26:15,842 --> 00:26:20,484
ทำให้หลายเวอร์ชันที่แยกกันอยู่บนดิสก์พร้อมกันได้

447
00:26:20,484 --> 00:26:22,805
เดี๋ยวผมสาธิตให้ดูจริง ๆ

448
00:26:22,805 --> 00:26:26,770
เพราะแค่นึกในหัวนึกภาพตามยาก งั้นเราสร้าง

449
00:26:26,770 --> 00:26:29,864
branch ชื่อ design กัน เรียบร้อย

450
00:26:29,864 --> 00:26:33,926
สร้างและสลับมาที่ local branch ชื่อ design

451
00:26:33,926 --> 00:26:38,084
แล้ว ดูด้านล่างนี้จะเห็นชัดว่าคุณอยู่ตรงไหน

452
00:26:38,084 --> 00:26:41,759
อยู่ branch ไหน ตอนนี้เราอยู่ใน design

453
00:26:41,759 --> 00:26:45,724
เดี๋ยวผมเปิด terminal ใหม่ แล้วเราจะสร้าง

454
00:26:45,724 --> 00:26:48,721
worktree ใหม่กัน ดูด้านบนตรงนี้

455
00:26:48,721 --> 00:26:52,589
นี่คือส่วนจัดการ git แบบเต็มที่อยู่เหนือ

456
00:26:52,589 --> 00:26:56,844
composer กดขึ้นไปจะเห็นตัวเลือกต่าง ๆ มี New

457
00:26:56,844 --> 00:27:00,132
branch from design เราสร้าง branch

458
00:27:00,132 --> 00:27:04,290
ใหม่จากตัวนี้ได้ ซึ่งตัวนี้เองก็เป็น branch

459
00:27:04,290 --> 00:27:07,578
อยู่แล้ว หรือจะสร้างจาก main ก็ได้

460
00:27:07,578 --> 00:27:11,350
คุณสลับอย่างอื่นได้ด้วยถ้าอยากทำแบบนั้น

461
00:27:11,350 --> 00:27:15,411
แล้วก็มีส่วน worktrees ด้วย อย่างที่บอกว่า

462
00:27:15,411 --> 00:27:18,699
worktrees คือไฟล์จริงบนดิสก์ของคุณ

463
00:27:18,699 --> 00:27:23,051
งั้นเราสร้าง worktree ใหม่กันเลย แล้วตั้งชื่อ

464
00:27:23,051 --> 00:27:27,306
branch ให้ worktree นี้ โปรเจกต์คือ keepsake

465
00:27:27,306 --> 00:27:31,754
threads มันจะแยกออกมาจาก design คุณแปลง branch

466
00:27:31,754 --> 00:27:35,139
ที่มีอยู่แล้วให้เป็น worktree ก็ได้

467
00:27:35,139 --> 00:27:39,394
งั้นเราตั้งชื่อว่า design worktree เรียบร้อย

468
00:27:39,394 --> 00:27:40,844
มันสร้างให้แล้ว

469
00:27:40,844 --> 00:27:45,099
เพราะนี่คือครั้งแรกมันเลยสร้างไฟล์ worktrees

470
00:27:45,099 --> 00:27:48,194
นี้ขึ้นมา ทีนี้มาแก้แอปของเรากัน

471
00:27:48,194 --> 00:27:51,868
ผมสั่งว่าให้ใช้ front-end design skill

472
00:27:51,868 --> 00:27:56,317
เปลี่ยนหน้าตา dashboard web app ของโปรเจกต์นี้

473
00:27:56,317 --> 00:28:00,088
อยากให้ตรงกับสไตล์และธีมฟรอนต์เอนด์จริง

474
00:28:00,088 --> 00:28:03,859
เรียบร้อย กดตรงนี้จะเห็น อาจมองยากหน่อย

475
00:28:03,859 --> 00:28:07,437
แต่เห็นว่าโฟลเดอร์คือ keepsakethreads

476
00:28:07,437 --> 00:28:11,886
worktrees/designworktree แปลว่าตอนนี้เราอยู่ใน

477
00:28:11,886 --> 00:28:15,077
design worktree กำลังทำงานได้แล้ว

478
00:28:15,077 --> 00:28:19,332
ลองอีกอันหนึ่ง ดูด้านข้างในโปรเจกต์ keepsake

479
00:28:19,332 --> 00:28:23,297
threads จะเห็น worktree ต่าง ๆ อยู่ตรงนี้

480
00:28:23,297 --> 00:28:27,261
เรามีตัวหลัก แล้วตอนนี้มี design worktree

481
00:28:27,261 --> 00:28:30,646
พวกนี้มี session ของตัวเองจากตัวนี้

482
00:28:30,646 --> 00:28:34,998
เช่นถ้าผมกลับมาตรงนี้ ถึงจะเป็น main worktree

483
00:28:34,998 --> 00:28:39,446
แต่มันอยู่ใน design branch หวังว่าจะพอเข้าใจนะ

484
00:28:39,446 --> 00:28:43,507
งั้นผมสร้าง branch อีก อันนี้จะเป็นชุดใหม่

485
00:28:43,507 --> 00:28:47,376
จะเห็นว่าผมสร้างใหม่สามอันชื่อ animation

486
00:28:47,376 --> 00:28:51,244
character และ production ทั้งหมดแยกมาจาก

487
00:28:51,244 --> 00:28:55,112
design ปัจจุบัน เรายังค้างอยู่ที่ design

488
00:28:55,112 --> 00:28:59,173
แต่เดี๋ยวสลับกลับไป main ตรงนี้ผมสลับมาที่

489
00:28:59,173 --> 00:29:02,268
animation ผมจะสร้างของต่าง ๆ กัน

490
00:29:02,268 --> 00:29:06,426
เช่นสั่งว่าเพิ่มแอนิเมชันห้าตัวใน dashboard

491
00:29:06,426 --> 00:29:10,681
web app อันนี้จะอยู่เฉพาะบน animation branch

492
00:29:10,681 --> 00:29:14,549
ดูว่าอีกตัวทำงานยังไง ตอนนี้เรากลับมาที่

493
00:29:14,549 --> 00:29:18,804
design worktree เห็นว่าเพิ่มไฟล์ใหม่มาตรงนี้

494
00:29:18,804 --> 00:29:21,802
มี Styles.scss ลองไปดู main กัน

495
00:29:21,802 --> 00:29:26,057
ตรงนี้เห็นว่ามันเพิ่ม operation console test

496
00:29:26,057 --> 00:29:30,312
จะเห็นว่า animation เป็นแค่ branch มันไม่ใช่

497
00:29:30,312 --> 00:29:34,470
worktree ใน file manager ตรงนี้ เรายังมีแค่

498
00:29:34,470 --> 00:29:37,468
design worksheet ที่เราสร้างไว้

499
00:29:37,468 --> 00:29:41,432
หวังว่าคุณมองเห็นชัดนะ แต่ถ้าเปิดดูข้างใน

500
00:29:41,432 --> 00:29:45,687
มันมีไฟล์ชุดเดียวกับใน main เลย อย่าง GitHub

501
00:29:45,687 --> 00:29:49,846
กับ Hermes เห็น apps design docs infra เห็น

502
00:29:49,846 --> 00:29:51,973
apps design docs infra

503
00:29:51,973 --> 00:29:56,228
มันคือสำเนาจริงบนดิสก์ของชุดเดียวกัน แค่เป็น

504
00:29:56,228 --> 00:29:59,806
worktree แยกของตัวเอง ส่วนตรงนี้ไม่มี

505
00:29:59,806 --> 00:30:03,190
animation worktree มันเป็นแค่รายการ

506
00:30:03,190 --> 00:30:06,285
มันเป็นแค่ข้อมูล นั่นคือความต่าง

507
00:30:06,285 --> 00:30:10,153
มันคือรายการของ commit ต่าง ๆ ที่กำลังทำ

508
00:30:10,153 --> 00:30:14,215
อย่างของพวกนี้ทั้งหมด แล้วตรงนี้มี preview

509
00:30:14,215 --> 00:30:17,793
pane เด้งขึ้นมา แต่ที่ตรงนี้เหลือน้อย

510
00:30:17,793 --> 00:30:22,144
งั้นยุบไปก่อน ดูว่าตัวนี้ทำงานยังไง เรียบร้อย

511
00:30:22,144 --> 00:30:25,916
มันเพิ่มแอนิเมชันห้าตัวตรงนี้แล้ว เพิ่ม

512
00:30:25,916 --> 00:30:30,267
dashboard animation ห้าตัวบน animation branch

513
00:30:30,267 --> 00:30:31,367
แล้ว

514
00:30:31,367 --> 00:30:36,009
ตอนนี้เห็นแล้วว่ามันเพิ่มแอนิเมชันแดชบอร์ดห้าตัว

515
00:30:36,009 --> 00:30:39,973
บน animation branch งั้น commit พวกนี้กัน

516
00:30:39,973 --> 00:30:43,648
เรียบร้อย เรายังเหลือ worktree ที่เป็น

517
00:30:43,648 --> 00:30:48,096
uncommitted จะเห็นว่าถ้าเราสร้าง worktree ใหม่

518
00:30:48,096 --> 00:30:51,094
ก็แยกจากตัวต่าง ๆ พวกนี้ได้ด้วย

519
00:30:51,094 --> 00:30:55,543
ตอนนี้เรามีเยอะเลย จะใช้ animation ก็ได้ จะใช้

520
00:30:55,543 --> 00:30:59,604
design worktree ก็ได้ หรือแค่ design ก็ได้

521
00:30:59,604 --> 00:31:02,505
มีตัวเลือกเยอะมาก การมี branch

522
00:31:02,505 --> 00:31:04,246
หลายแบบช่วยได้เยอะ

523
00:31:04,246 --> 00:31:08,017
ถ้ามีหลายเอเจนต์ทำงานบนโปรเจกต์เดียวกัน

524
00:31:08,017 --> 00:31:11,982
มันจะไม่ชนกัน แต่ละตัวมีสำเนาของตัวเองได้

525
00:31:11,982 --> 00:31:15,657
แล้วค่อย merge รวมกันตอนท้ายเมื่อพร้อม

526
00:31:15,657 --> 00:31:20,105
ดูตรงนี้จะเห็นว่าเสร็จงานนี้แล้ว กำลังทำเรื่อง

527
00:31:20,105 --> 00:31:23,103
color theme ใหม่ เห็นได้ตรงนั้น

528
00:31:23,103 --> 00:31:27,551
การเปลี่ยนทั้งหมดนี้อยู่ใน local worktree งั้น

529
00:31:27,551 --> 00:31:30,936
commit การเปลี่ยนแปลงพวกนี้กัน โอเค

530
00:31:30,936 --> 00:31:34,997
ตอนนี้ไม่มี diff แล้ว ถ้าคุณติดตั้ง gh ไว้

531
00:31:34,997 --> 00:31:39,349
คุณสร้าง PR ได้เหมือนที่ผมโชว์ก่อนหน้านี้ ตรง

532
00:31:39,349 --> 00:31:42,927
review page ด้านล่างนี้แล้วกดสร้าง PR

533
00:31:42,927 --> 00:31:45,635
สุดท้ายผมอยาก spawn subagent

534
00:31:45,635 --> 00:31:49,696
มาตรวจการเปลี่ยนทั้งหมด ร่วมกับ main agent

535
00:31:49,696 --> 00:31:53,661
ของผม นั่นคือสิ่งที่เราทำ เดี๋ยวโชว์ให้ดู

536
00:31:53,661 --> 00:31:57,916
ในโมดูลแรกผมไม่ได้โชว์ตรงนี้ แต่มี subagents

537
00:31:57,916 --> 00:32:02,074
pane ตรงนี้ กดที่ด้านล่าง จะเห็น spawn tree

538
00:32:02,074 --> 00:32:06,135
ตอนนี้มี worker สองตัวกำลังทำงาน กำลังตรวจ

539
00:32:06,135 --> 00:32:10,390
committed changes บน design tree หรือ design

540
00:32:10,390 --> 00:32:13,872
worktree เดี๋ยวก็ได้ผลลัพธ์แล้ว โอเค

541
00:32:13,872 --> 00:32:17,450
ตรงนั้นเสร็จแล้ว สุดท้ายเราอยาก merge

542
00:32:17,450 --> 00:32:21,705
งานทั้งหมดที่ทำบน worktree เข้ากับ main tree

543
00:32:21,705 --> 00:32:26,056
ของเรา มีสองสามวิธี วิธีหลักที่ตรงแบบฉบับ git

544
00:32:26,056 --> 00:32:30,118
ที่สุดคือเปิด PR อันนี้ของผมยังไม่ใช่ repo

545
00:32:30,118 --> 00:32:33,986
จริงบน GitHub ของผม นี่เป็นแค่ local git

546
00:32:33,986 --> 00:32:38,241
แต่ถ้าคุณทำแบบนั้น คุณแค่สั่ง Hermes ให้เปิด

547
00:32:38,241 --> 00:32:42,496
PR แล้วใช้เครื่องมือ gh สำหรับ GitHub คุณส่ง

548
00:32:42,496 --> 00:32:46,847
PR ได้ แล้วบน main ก็กด merge ได้เลย ทำเหมือน

549
00:32:46,847 --> 00:32:50,135
PR ปกติทั่วไป เพราะของผมเป็น local

550
00:32:50,135 --> 00:32:54,487
ผมเลยกลับไปที่ main แล้วสั่ง Hermes ให้ merge

551
00:32:54,487 --> 00:32:58,548
local changes เข้า main โอเค เรียบร้อย มัน

552
00:32:58,548 --> 00:33:02,900
merge assigned worktree เข้า main ตามนั้นแล้ว

553
00:33:02,900 --> 00:33:04,931
ครบแล้วตั้งแต่ต้นจนจบ

554
00:33:04,931 --> 00:33:08,605
กับการเรียนรู้วิธีทำงานใน Hermes agent

555
00:33:08,605 --> 00:33:12,667
อย่างแรกที่เราทำคือปรับแต่งและสร้าง coding

556
00:33:12,667 --> 00:33:16,728
cockpit ที่เข้ากับคุณแล้วบันทึกเป็น preset

557
00:33:16,728 --> 00:33:19,823
เราเรียนรู้เรื่อง session ต่าง ๆ

558
00:33:19,823 --> 00:33:24,658
ว่ามันจัดเป็น projects ยังไง วิธีปรับแต่งแบบต่าง ๆ

559
00:33:24,658 --> 00:33:28,623
คุยเรื่อง composer กับฟีเจอร์คุยด้วยเสียง

560
00:33:28,623 --> 00:33:32,588
คุยครบทุกเรื่องทั้ง worktrees กับ reviews

561
00:33:32,588 --> 00:33:36,843
branches และของพวกนั้นทั้งหมด เวลาคุณทำงานบน

562
00:33:36,843 --> 00:33:40,421
codebase ใหญ่แล้วต้องใช้ฟีเจอร์พวกนี้

563
00:33:40,421 --> 00:33:44,772
เพราะคุณไม่อยากแก้โค้ดที่ใช้จริงบน production

564
00:33:44,772 --> 00:33:46,706
ตอนแค่ลองฟีเจอร์ใหม่

565
00:33:46,706 --> 00:33:51,058
และคุณทำทั้งหมดนี้โดยไม่ต้องออกจากแอป แถมเห็น

566
00:33:51,058 --> 00:33:55,023
subagents ทำงานด้วย จบแล้ว นี่คือโมดูลสอง

567
00:33:55,023 --> 00:33:58,311
ผมว่านี่อาจเป็นโมดูลที่ค่อนข้างยาว

568
00:33:58,311 --> 00:34:01,792
แต่นี่คือเนื้อหลักของแอป desktop เลย

569
00:34:01,792 --> 00:34:04,500
เพราะสุดท้ายเราต้องทำงานจริง

570
00:34:04,500 --> 00:34:08,561
การรู้วิธีทำงานให้มีประสิทธิภาพ และเข้ากับ

571
00:34:08,561 --> 00:34:12,816
workflow ของคุณเลยสำคัญมาก จบโมดูลสองเท่านี้

572
00:34:12,816 --> 00:34:16,878
โมดูลสามจะเป็นเรื่องทำให้เป็นของคุณ เรื่อง

573
00:34:16,878 --> 00:34:20,552
customization เรื่องฟีเจอร์พิเศษต่าง ๆ

574
00:34:20,552 --> 00:34:28,772
marketplace themes ระบบ plug-in ซึ่งเป็นเรื่องใหญ่ [ฟังไม่ชัด] กับ HUD bots แบบต่าง ๆ

575
00:34:28,772 --> 00:34:32,447
pets และของแบบนั้น มีของสนุก ๆ อีกเยอะ

576
00:34:32,447 --> 00:34:36,605
ทั้งหมดนี้จะอยู่ใน module 3 ตอนจบของ Hermes

577
00:34:36,605 --> 00:34:39,893
desktop masterclass ขอบคุณที่รับชม

578
00:34:39,893 --> 00:34:44,341
ฝากคอมเมนต์ด้วย บอกหน่อยว่าคุณใช้ Hermes agent

579
00:34:44,341 --> 00:34:47,726
desktop app เป็น coding agent ยังไง

580
00:34:47,726 --> 00:34:50,240
แล้วเจอกันในวิดีโอหน้าครับ