The Ultimate Guide to Hermes Desktop Plugins

1
00:00:00,000 --> 00:00:04,632
สัปดาห์ที่แล้วผมทำวิดีโอแนะนำ plugin ของ Hermes

2
00:00:04,632 --> 00:00:10,446
Agent Desktop และในคลิปนั้นก็ได้ลองสร้างปลั๊กอินไปสองสามตัว

3
00:00:10,446 --> 00:00:17,344
มีตัวเบสบอลกับตัวพยากรณ์อากาศ แต่คลิปนี้ผมอยากเจาะลึกเรื่องนี้โดยเฉพาะ

4
00:00:17,344 --> 00:00:21,976
เพราะคิดว่ามันทำได้เยอะมากจริงๆ ช่วงนี้ผมใช้แอป

5
00:00:21,976 --> 00:00:28,283
Hermes Agent Desktop บ่อยขึ้นเรื่อยๆ ทั้งทำงานโปรเจกต์และตั้งค่า

6
00:00:28,283 --> 00:00:35,575
workflow (ขั้นตอนการทำงาน) ต่างๆ การใช้ plugin ตัวนี้จึงมีประโยชน์มากจริงๆ

7
00:00:35,575 --> 00:00:40,601
ครับ อย่างแรก ผมต้องสร้าง plugin ไว้นำเสนอสไลด์ก่อน

8
00:00:40,601 --> 00:00:48,288
เพราะผมเตรียมสไลด์ไว้อธิบายว่าด้วย Plugin SDK คุณสร้างอะไรได้บ้างและไม่ได้บ้าง

9
00:00:48,288 --> 00:00:54,102
ผมเลยบอก Hermes ไปว่า "สร้าง plugin สำหรับนำเสนอสไลด์ได้ไหม

10
00:00:54,102 --> 00:00:59,128
ต้องมีปุ่มเปิดไฟล์ และถ้าผมคลิกไฟล์ HTML ในแผงต่างๆ

11
00:00:59,128 --> 00:01:05,336
ซึ่งทั้งหมดเป็น pane (แผงหน้าต่าง) มันควรเด้งขึ้นมาให้อัตโนมัติ

12
00:01:05,336 --> 00:01:10,362
เอาไปไว้ในแถบเซสชันใต้ Kanban (กระดานคัมบัง) หน่อย"

13
00:01:10,362 --> 00:01:17,852
เราก็เลยเริ่มต้นด้วยการสร้าง plugin ตัวนี้ เพื่อที่ผมจะได้ใช้มันนำเสนอเรื่อง

14
00:01:17,852 --> 00:01:25,046
plugin โดยเฉพาะ เอาล่ะ เห็นว่ามันทำงานแล้ว มันเด้งขึ้นมาทางด้านข้างตรงนี้

15
00:01:25,046 --> 00:01:30,663
มีคำว่า slides กดดูได้เลย โหลดสไลด์เด็คนี้เข้ามาเรียบร้อย

16
00:01:30,663 --> 00:01:36,379
เราก็มีสไลด์อยู่ใน slides plugin ของเราแล้ว ในวิดีโอวันนี้

17
00:01:36,379 --> 00:01:41,010
ผมจะอธิบายว่า Hermes Desktop Plugin SDK คืออะไร

18
00:01:41,010 --> 00:01:46,135
ข้อมูลแบบไหนที่คุณนำเสนอได้ ข้อมูลแบบไหนที่ควรเลี่ยง

19
00:01:46,135 --> 00:01:51,259
พาไปดูว่ามีจุดไหนในแอป Desktop ที่วาง plugin ได้บ้าง

20
00:01:51,259 --> 00:01:57,566
ซึ่งที่จริงผมเจอมา 25 ตำแหน่งด้วยกัน และจะโชว์ให้ดูครบทุกจุดด้วย

21
00:01:57,566 --> 00:02:02,296
plugin จริงๆ จากนั้นเราจะลงมือสร้าง plugin จริงๆ

22
00:02:02,296 --> 00:02:07,027
กันหลายตัว เพื่อดูว่ามันไปได้ไกลแค่ไหน ผมจะลองทำ

23
00:02:07,027 --> 00:02:11,954
plugin สำหรับ Spotify, เทรดดิ้งเทอร์มินัล และอื่นๆ

24
00:02:11,954 --> 00:02:20,429
อีก ตั้งใจจะกดดันมันสุดๆ ดูซิว่าเราจะสร้างอะไรได้บ้างโดยที่ไม่ทำให้แอปของผมพังไปซะก่อน

25
00:02:20,429 --> 00:02:25,258
เริ่มกันเลยครับ ถ้าใครอยากสนับสนุนช่อง Tonbi's AI

26
00:02:25,258 --> 00:02:30,678
Garage เพิ่มเติม ลองกดปุ่ม join เพื่อเป็นสมาชิกดูนะครับ

27
00:02:30,678 --> 00:02:35,999
สมาชิก Team Garage จะได้ดูวิดีโอใหม่ก่อนใคร ส่วนสมาชิก

28
00:02:35,999 --> 00:02:42,602
Team Garage Live ได้สิทธิ์นั้นด้วย พร้อมกับไลฟ์สตรีมรายสัปดาห์กับผม

29
00:02:42,602 --> 00:02:49,796
ไว้ถามคำถาม คุยเรื่อง AI และดูผมสร้างของแบบสดๆ ขอบคุณทุกคนที่รับชมมากครับ

30
00:02:49,796 --> 00:02:54,428
แรงสนับสนุนนี้ทำให้ผมมีกำลังใจทำช่อง Tonbi's AI

31
00:02:54,428 --> 00:02:59,059
Garage ให้เป็นที่เรียน AI ที่ดีที่สุดบน YouTube

32
00:02:59,059 --> 00:03:04,282
ต่อไป กลับมาที่เนื้อหากันครับ สิ่งที่ทำได้กับ desktop

33
00:03:04,282 --> 00:03:11,575
plugin ตัวนี้มีเยอะมาก และที่สำคัญคือมีหลายจุดมากที่เราสามารถวางมันไว้รอบๆ

34
00:03:11,575 --> 00:03:16,601
แอป desktop ได้ ถ้าเป็นอะไรที่ต้องการ UI เต็มรูปแบบ

35
00:03:16,601 --> 00:03:21,725
ก็วางไว้ใน pane ได้เลย ถ้าแค่ต้องการแสดงชื่อกับสถานะ

36
00:03:21,725 --> 00:03:26,652
ก็ใช้แบบ compact UI (อินเทอร์เฟซขนาดกะทัดรัด) หรือ

37
00:03:26,652 --> 00:03:31,284
popover (ป๊อปโอเวอร์/ป้ายลอย) อย่างที่เพิ่งเห็น

38
00:03:31,284 --> 00:03:36,408
อันนี้ถือเป็น popover บน composer (ช่องพิมพ์ข้อความ)

39
00:03:36,408 --> 00:03:42,715
และยังมีแถบ route กับ sidebar (แถบด้านข้าง) สำหรับแอปพลิเคชันอีก

40
00:03:42,715 --> 00:03:47,938
ตำแหน่งต่างๆ เหล่านี้ยังส่งผลต่อประเภทของปลั๊กอินด้วย

41
00:03:47,938 --> 00:03:54,344
เดี๋ยวให้ดูกัน นี่คือ plugin ที่ผมสร้างไว้สำหรับย้ายไปตามจุดต่างๆ

42
00:03:54,344 --> 00:03:59,468
เรียกชื่อว่า placement playground (สนามทดลองตำแหน่ง)

43
00:03:59,468 --> 00:04:05,677
เราจะย้ายมันไปรอบๆ หน้าจอและรอบๆ แอป แล้วคุณจะได้เห็นทุกตำแหน่ง

44
00:04:05,677 --> 00:04:11,294
ปลั๊กอินนี้มีหน้าที่เดียวคือบอกว่าตอนนี้มันอยู่ตำแหน่งไหน

45
00:04:11,294 --> 00:04:16,123
แล้วเราก็ย้ายมันไปตำแหน่งถัดไปได้เรื่อยๆ เริ่มจาก

46
00:04:16,123 --> 00:04:20,952
pane หลัก (main pane) จากนั้นตำแหน่งถัดไปคือ pane

47
00:04:20,952 --> 00:04:26,372
ทางซ้าย ซึ่งจะไปอยู่ตรง sidebar ที่ปกติไว้เก็บ sessions

48
00:04:26,372 --> 00:04:31,496
(เซสชัน) อยู่ มีแท็บ placement playground อยู่ด้านบน

49
00:04:31,496 --> 00:04:36,423
นี่คือ pane left ต่อมาเป็น pane right ตามที่คิดไว้

50
00:04:36,423 --> 00:04:42,139
ถ้าเปิดแถบด้านข้างขวา จะเห็นว่าปกติมันเป็นตัวสำรวจโฟลเดอร์

51
00:04:42,139 --> 00:04:49,530
แต่ตอนนี้มี placement playground อยู่ตรงนี้ จะยุบเก็บไว้ตามขอบด้านข้างก็ได้

52
00:04:49,530 --> 00:04:55,837
พอคลิกก็ขยายออกมา ตำแหน่งถัดไปคือ pane top พาเรากลับขึ้นไปด้านบน

53
00:04:55,837 --> 00:05:00,469
โดยพื้นฐานก็เหมือน pane หลัก เพราะเราไม่ได้ตั้ง

54
00:05:00,469 --> 00:05:06,579
pane ล่างกับบนไว้ แต่ถ้าตั้งไว้ มันจะไปอยู่ตำแหน่งบนสุดตรงนั้น

55
00:05:06,579 --> 00:05:13,674
สำหรับปลั๊กอินแบบ pane จะแสดง UI เต็มรูปแบบ ทำให้ได้พื้นที่หน้าจอมากขึ้น

56
00:05:13,674 --> 00:05:21,656
ตำแหน่งถัดไปคือ pane bottom ซึ่งในเซ็ตอัปของผม มันจะไปอยู่ในเทอร์มินัลด้านล่างนี่

57
00:05:21,656 --> 00:05:26,387
เห็นไหม ขึ้นอยู่กับว่าเราตั้งค่าอย่างไร ถ้าดูที่

58
00:05:26,387 --> 00:05:34,566
default หรือ layouts ด้านบน ผมใช้แบบ default ซึ่งมันจะไปอยู่ทางด้านขวาใต้เทอร์มินัล

59
00:05:34,566 --> 00:05:39,198
นี่คือ placement playground ตำแหน่ง pane bottom

60
00:05:39,198 --> 00:05:44,223
ต่อไปคือ workspace top อยู่ด้านบนของเวิร์กสเปซ เห็น

61
00:05:44,223 --> 00:05:49,052
tab ทั้งหมดที่เปิดไว้ไหม มันจะไปจอดอยู่ด้านบนนั่น

62
00:05:49,052 --> 00:05:54,374
คล้ายถูกตรึงติดกับขอบบน พอปิดก็ยุบลง เปิดกลับมาได้ใหม่

63
00:05:54,374 --> 00:06:02,060
นี่คือ workspace top แบบ docked (จอดตรึง) ซึ่งหมายถึงถูกตั้งอยู่ในตำแหน่งเดียว

64
00:06:02,060 --> 00:06:09,353
ต่อด้วย workspace bottom แบบเดียวกัน จอดอยู่ด้านล่างของเวิร์กสเปซซึ่งก็คือ

65
00:06:09,353 --> 00:06:14,477
tab เซสชันสองสามตัวที่เปิดไว้ จากนั้น dock workspace

66
00:06:14,477 --> 00:06:20,193
left อยู่ทางซ้ายของ tab เหล่านั้น ยุบหรือเปิดได้เหมือนเดิม

67
00:06:20,193 --> 00:06:25,416
ปิดอันนั้น แล้วก็ dock workspace right ซึ่งอยู่ทางขวา

68
00:06:25,416 --> 00:06:30,639
ตามที่คิดไว้ ต่อมา workspace center ย้ายกลับมาตรงกลาง

69
00:06:30,639 --> 00:06:35,862
ถัดไป status bar left เริ่มเข้าสู่โหมดขั้นสูงขึ้นแล้ว

70
00:06:35,862 --> 00:06:41,775
ก่อนหน้านี้มันแสดง UI เต็มรูปแบบ แต่ตอนนี้ถ้ามองลงไปข้างล่าง

71
00:06:41,775 --> 00:06:48,574
จะเห็นว่ามันไปอยู่ที่แถบสถานะฝั่งซ้าย อยู่ติดกับตัวจัดการไฟล์กับสถานะ

72
00:06:48,574 --> 00:06:53,699
gateway (เกตเวย์/ตัวเชื่อมต่อ) พอคลิกอีกทีก็จะย้ายไป

73
00:06:53,699 --> 00:06:58,429
status bar right ไปอยู่อีกฝั่งหนึ่ง ตำแหน่งถัดไป

74
00:06:58,429 --> 00:07:04,440
title bar left แถบด้านบนนี่เรียกว่า title bar (แถบชื่อเรื่อง)

75
00:07:04,440 --> 00:07:10,353
ไอคอนเล็กๆ นี่คือ plugin ของเรา มันเปลี่ยนรูปแบบไปตามตำแหน่ง

76
00:07:10,353 --> 00:07:14,985
ตอนอยู่ในเวิร์กสเปซมันแสดงชื่อเต็มว่า placement

77
00:07:14,985 --> 00:07:19,912
playground พอลงมาข้างล่างก็เหลือแค่คำว่า placement

78
00:07:19,912 --> 00:07:24,840
แต่ตอนนี้บนนี้เหลือแค่ไอคอน คล้ายกับไอคอน settings

79
00:07:24,840 --> 00:07:29,570
กับเสียงด้านบน พอคลิกก็จะย้ายไป title bar center

80
00:07:29,570 --> 00:07:39,622
แล้วก็ title bar right ตามลำดับ แบบนี้เหมาะกับของที่เอาไว้คลิกแล้วมีป๊อปอัปหรืออะไรทำนองนั้นเด้งขึ้นมา

81
00:07:39,622 --> 00:07:44,450
อันนี้เป็นแบบลอย (floating) เรียกว่า pop over top

82
00:07:44,450 --> 00:07:49,575
คือเมื่อมีอะไรลอยอยู่ ป๊อปโอเวอร์ก็จะเด้งไปตำแหน่งบน

83
00:07:49,575 --> 00:07:54,207
ถัดไป pop over bottom เด้งลงมาด้านล่าง pop over

84
00:07:54,207 --> 00:08:00,612
left เด้งไปทางซ้าย pop over right เด้งไปทางขวา แล้วก็ตำแหน่งถัดไป

85
00:08:00,612 --> 00:08:05,244
ต่อมาคือ composer top อันนี้น่าสนใจอีกแบบ เรามี

86
00:08:05,244 --> 00:08:11,058
composer อยู่ตรงนี้ ขอเปิดในเซสชันใหม่ก่อนเพื่อไม่ให้มัน...

87
00:08:11,058 --> 00:08:16,774
เอาเป็นว่า มันนั่งอยู่บนสุดของ composer ตำแหน่งนี้เหมาะกับ

88
00:08:16,774 --> 00:08:21,504
UI ขนาดกะทัดรัดมาก เช่นแค่สถานะหรืออะไรทำนองนั้น

89
00:08:21,504 --> 00:08:27,614
ไม่ใช่ปลั๊กอินเต็มรูปแบบ ถัดไป composer bottom อยู่ด้านล่างของ

90
00:08:27,614 --> 00:08:34,118
composer วางอยู่ตรงนั้น แล้ว composer leading อยู่ก่อนช่องที่พิมพ์

91
00:08:34,118 --> 00:08:39,045
prompt (คำสั่ง) ส่วน composer actions ย้ายไปทางขวา

92
00:08:39,045 --> 00:08:43,775
และ composer attachments อยู่ตรงส่วน attachments

93
00:08:43,775 --> 00:08:49,688
(ไฟล์แนบ) บางทีคุณอาจสงสัยว่าตอนนี้มันอยู่ไหน มันอยู่ตรงนั้น

94
00:08:49,688 --> 00:08:55,601
พอเปิด attachments มันก็ไปโผล่ตรงนั้น แล้วก็เพิ่มเข้าไปในแถบ

95
00:08:55,601 --> 00:09:00,528
prompt เอง ตำแหน่งสุดท้ายคือย้ายไปด้านข้าง นั่นคือ

96
00:09:00,528 --> 00:09:05,948
workspace route และ sidebar ซึ่งเป็นที่ที่ผมวางสไลด์ไว้

97
00:09:05,948 --> 00:09:13,142
อันนี้สะดวกตรงที่มันจะคลุมเซสชันที่เปิดอยู่ พอกลับไปที่เซสชันก็ยังอยู่ครบ

98
00:09:13,142 --> 00:09:18,168
แล้วคลิกอีกทีก็เปิดขึ้นมาแบบสไลด์ที่เราเห็น นั่นคือ

99
00:09:18,168 --> 00:09:24,672
placement playground ที่โชว์ทุกวิธีวางปลั๊กอินตามฟังก์ชันการใช้งาน

100
00:09:24,672 --> 00:09:31,571
และบางตำแหน่งก็ใช้ร่วมกันได้ เช่นปลั๊กอินอากาศนี้อยู่ทางขวาของแถบสถานะ

101
00:09:31,571 --> 00:09:37,188
แต่มันคือ popover พอคลิกก็มีเอฟเฟกต์ป๊อปโอเวอร์เด้งขึ้นมา

102
00:09:37,188 --> 00:09:42,214
กลับมาที่สไลด์ ผมพูดไปนิดหน่อยในส่วน placement แล้ว

103
00:09:42,214 --> 00:09:48,324
แต่ขอย้ำว่า form follows the job รูปแบบต้องตามหน้าที่การใช้งาน

104
00:09:48,324 --> 00:09:53,547
คุณต้องตัดสินใจเลือกฟอร์มจากสิ่งที่ปลั๊กอินตั้งใจจะทำ

105
00:09:53,547 --> 00:10:01,332
เลือกแบบ compact ถ้าเป็นแค่ ambient awareness (การรับรู้สภาพแวดล้อมแบบพื้นหลัง)

106
00:10:01,332 --> 00:10:06,555
เช่นตัวชี้วัดเดียว การกระทำเดียวที่ควรอยู่ใกล้มือเสมอ

107
00:10:06,555 --> 00:10:15,030
แบบ anchored (ยึดติด) เหมาะกับของที่มีรายละเอียดมากขึ้นโดยไม่ต้องออกจากบทสนทนาปัจจุบัน

108
00:10:15,030 --> 00:10:19,858
เพื่อควบคุมได้เร็ว เช่นตัวควบคุมสื่อแบบนี้ ใช้กับ

109
00:10:19,858 --> 00:10:25,377
plugin หรือ popover ได้ดี และแบบ expansive (ขยายเต็มที่)

110
00:10:25,377 --> 00:10:30,304
สำหรับแอปพลิเคชันเต็มรูปแบบ อย่างการค้นหา การนำทาง

111
00:10:30,304 --> 00:10:34,936
ข้อมูลหนาแน่น หรือ workflow หลายขั้นตอน ส่วนแบบ

112
00:10:34,936 --> 00:10:39,568
declarative (ประกาศข้อมูล) สำหรับ UI ที่ Hermes

113
00:10:39,568 --> 00:10:44,495
เป็นเจ้าของ นั่นคือคุณส่งข้อมูลที่มีโครงสร้าง แล้ว

114
00:10:44,495 --> 00:10:53,857
Hermes เป็นคนตัดสินใจว่าจะแสดงผลอย่างไร นี่คือสองสามวิธีปรับฟอร์มตามสิ่งที่คุณอยากให้ปลั๊กอินทำ

115
00:10:53,857 --> 00:10:59,474
แล้วพลังของ plugin มาจากไหน มีวิธีปรับแต่งได้มากมายมหาศาล

116
00:10:59,474 --> 00:11:05,781
มาจากสถานะของ Hermes เองก็ได้ เช่น plugin ที่บอกสถานะปัจจุบันของ

117
00:11:05,781 --> 00:11:10,413
agent (เอเจนต์/ตัวแทน) หรือเวิร์กสเปซของคุณ ใช้

118
00:11:10,413 --> 00:11:15,143
Hermes เป็น gateway ก็ได้ ซึ่งมีข้อมูล sessions,

119
00:11:15,143 --> 00:11:20,169
cron jobs (งานตามกำหนดเวลา), Kanban และอื่นๆ Kanban

120
00:11:20,169 --> 00:11:26,969
เป็นตัวอย่างที่ดี เพราะมันเกี่ยวกับตัว Hermes เองว่ากำลังเกิดอะไรขึ้น

121
00:11:26,969 --> 00:11:32,487
ใช้ backend (แบ็กเอนด์/ระบบหลังบ้าน) ก็ได้ เช่นฐานข้อมูล

122
00:11:32,487 --> 00:11:37,809
ไฟล์ ไลบรารีเนทีฟ web sockets (เว็บซ็อกเก็ต) แล้วก็ใช้

123
00:11:37,809 --> 00:11:42,736
media ของเบราว์เซอร์เพื่อเรนเดอร์ผลลัพธ์ที่สมบูรณ์

124
00:11:42,736 --> 00:11:49,536
เช่นรูปภาพ เสียง วิดีโอ ฯลฯ plugin แบบเรนเดอร์อย่างเดียวแข็งแรงสำหรับ

125
00:11:49,536 --> 00:11:55,843
UI ส่วน plugin บวกกับ Python backend กลายเป็นผลิตภัณฑ์จริงได้เลย

126
00:11:55,843 --> 00:12:00,967
แล้ว plugin ทำอะไรไม่ได้บ้าง สำคัญพอๆ กันที่จะเข้าใจ

127
00:12:00,967 --> 00:12:06,782
คุณไม่สามารถเข้าถึงโหนดหรือ native API (อินเทอร์เฟซของระบบ)

128
00:12:06,782 --> 00:12:12,596
ตามอำเภอใจได้ แน่นอนว่าเลี่ยงมาตรการความปลอดภัยภายนอกไม่ได้

129
00:12:12,596 --> 00:12:19,001
ห้ามใช้ตำแหน่ง shell ที่ไม่รู้จัก plugin ครอบครองได้แค่พื้นที่ที่

130
00:12:19,001 --> 00:12:25,703
Hermes ใช้เอง จะสร้างพื้นที่ shell ใหม่พร้อมชื่ออำเภอใจแบบนั้นไม่ได้

131
00:12:25,703 --> 00:12:31,714
มันไม่ใช่ media store ไม่มีความสามารถเก็บข้อมูลไบนารีไม่จำกัด

132
00:12:31,714 --> 00:12:38,119
พื้นที่เก็บของ plugin เป็นแค่ JSON สถานะเล็กๆ ไม่ใช่ไลบรารีวิดีโอ

133
00:12:38,119 --> 00:12:45,018
ไม่ใช่ฐานข้อมูล มันเชื่อมต่อฐานข้อมูลได้ แต่ตัวมันเองเป็นแค่องค์ประกอบ

134
00:12:45,018 --> 00:12:50,044
UI มันไม่รันตลอดเวลา พอปิดแอป desktop มันก็ไม่ทำงาน

135
00:12:50,044 --> 00:12:58,617
มันเป็นแค่ส่วนหนึ่งของแอป และมันไม่ใช่เลเยอร์ที่เหมาะสมสำหรับระบบเนทีฟที่ต้องสิทธิพิเศษ

136
00:12:58,617 --> 00:13:03,643
การมี backend ขยายความสามารถไม่ได้ลบขอบเขตทางกฎหมาย

137
00:13:03,643 --> 00:13:12,414
ความปลอดภัย ลิขสิทธิ์ หรือแพลตฟอร์มแต่อย่างใด นี่คือสถาปัตยกรรมที่ขยายขนาดได้ที่เราพูดถึง

138
00:13:12,414 --> 00:13:17,440
Hermes desktop plugin ทำหน้าที่เป็น UI เชื่อมต่อกับ

139
00:13:17,440 --> 00:13:22,564
backend บางตัว ซึ่งเชื่อมต่อกับบริการหรือแอปเฉพาะทาง

140
00:13:22,564 --> 00:13:27,688
เราอาจลองทำตัวตัดต่อวิดีโอที่เชื่อมต่อ UI ของ Hermes

141
00:13:27,688 --> 00:13:33,601
desktop กับบริการ FFmpeg ดู เดี๋ยวรู้กันว่ามันจะเวิร์กแค่ไหน

142
00:13:33,601 --> 00:13:38,627
ถ้าอะไรแสดงเป็นข้อมูล ตัวควบคุม หรือตัวติดต่อ agent

143
00:13:38,627 --> 00:13:44,244
ได้ มันก็เป็นของที่เหมาะกับ plugin ของ Hermes โดยธรรมชาติ

144
00:13:44,244 --> 00:13:49,664
แต่ถ้าต้องเครื่องมือเฉพาะทาง ก็เก็บเครื่องมือนั้นไว้นอก

145
00:13:49,664 --> 00:13:56,365
Hermes แล้วให้ Hermes เป็นตัวควบคุมอัจฉริยะให้ หวังว่าพอจะเห็นภาพว่า

146
00:13:56,365 --> 00:14:02,574
plugin คืออะไรและสร้างอะไรกับมันได้บ้าง กลับมาลงมือสร้างจริงกัน

147
00:14:02,574 --> 00:14:07,698
อย่างแรกคิดว่าจะลองสร้างเทรดดิ้งเทอร์มินัลก่อน ผมบอก

148
00:14:07,698 --> 00:14:12,527
Hermes ไปว่า "ลองสร้างเทรดดิ้งเทอร์มินัลก่อนดีไหม

149
00:14:12,527 --> 00:14:17,947
จะแนะนำเรื่องฟอร์มกับตำแหน่งว่ายังไง" มันแนะนำให้อยู่บน

150
00:14:17,947 --> 00:14:24,451
sidebar สำหรับ markets หรือ trading เพราะเป็นที่ที่งานจริงเกิดขึ้น

151
00:14:24,451 --> 00:14:32,236
ใช้เส้นทางเต็มแบบสไลด์น่าจะสมเหตุสมผล หรือเป็นไอเทมบนแถบสถานะสำหรับสถานะรอบข้าง

152
00:14:32,236 --> 00:14:39,233
เช่น ticker (ตัวเลขราคาวิ่ง) เล็กๆ ข้างล่าง และจะลองใช้ดีไซน์สามพื้นผิว

153
00:14:39,233 --> 00:14:46,230
(three surface design) โดยมี popover สำหรับเช็คและควบคุมเร็วจากแถบสถานะ

154
00:14:46,230 --> 00:14:51,256
ลองดูกัน ใช้ hyper liquid charts (กราฟ Hyperliquid)

155
00:14:51,256 --> 00:14:58,548
หรือ provider อื่นก็ได้ ผมปล่อยให้มันทำงาน แล้วจะบอกว่ามันใช้เวลานานแค่ไหน

156
00:14:58,548 --> 00:15:03,870
แล้วโชว์ผลงานสุดท้าย หรือถ้ามันพังก็โชว์ให้ดูเหมือนกัน

157
00:15:03,870 --> 00:15:09,586
เห็นแล้วว่ามันสร้าง markets ขึ้นมาตรงนี้ และข้างล่างมีแท็ก

158
00:15:09,586 --> 00:15:14,513
Bitcoin เป็นปลั๊กอิน Hyperliquid แบบอ่านอย่างเดียว

159
00:15:14,513 --> 00:15:19,539
(read-only) มี ticker สกุลเงินดิจิทัลหลายตัว พอคลิก

160
00:15:19,539 --> 00:15:24,663
markets ตรงนี้ ก็เจอ Bitcoin เลือกช่วงเวลา 1 ชั่วโมง

161
00:15:24,663 --> 00:15:29,492
หรือ 4 ชั่วโมงได้ สลับเป็น ETH หรือ HYPE ก็ได้ มี

162
00:15:29,492 --> 00:15:35,898
watch list (รายการเฝ้าดู) เล็กๆ ปรับแต่งเองได้ สร้างแค่รอบเดียวจบ

163
00:15:35,898 --> 00:15:41,613
มีข้อมูล order book (สมุดรายการคำสั่งซื้อขาย) ราคาปัจจุบัน

164
00:15:41,613 --> 00:15:46,541
และพอเลือกตัวใดตัวหนึ่ง ข้อมูลด้านล่างก็เปลี่ยนตาม

165
00:15:46,541 --> 00:15:52,256
แม้จะมีสองส่วนแต่นี่คือปลั๊กอินตัวเดียวกัน ปรับช่วงเวลาได้

166
00:15:52,256 --> 00:15:58,268
15 นาที 1 ชั่วโมง หรือ 4 ชั่วโมง ลองทำชาร์ตให้สวยขึ้นอีกหน่อย

167
00:15:58,268 --> 00:16:03,589
แล้วก็มี watch list พอคลิกมันก็จะไปที่ตัวนั้นอัตโนมัติ

168
00:16:03,589 --> 00:16:09,601
ลองเรียกกราฟ TradingView จริงๆ เข้ามา เอาล่ะ อันนี้ดีขึ้นเยอะ

169
00:16:09,601 --> 00:16:14,626
ได้กราฟ TradingView เต็มรูปแบบมาแล้ว นี่คือ markets

170
00:16:14,626 --> 00:16:19,455
plugin หน้าตาใช้ได้เลย ปกติผมต้องเปิด TradingView

171
00:16:19,455 --> 00:16:24,284
ไว้ข้างๆ เพื่อเช็คตลาด แต่ตอนนี้แค่คลิกตรงนี้ก็พอ

172
00:16:24,284 --> 00:16:28,916
และคุณก็เปลี่ยนได้ตามใจ ไม่จำเป็นต้องเป็นคริปโต

173
00:16:28,916 --> 00:16:33,646
จะเป็นหุ้น สกุลเงิน หรืออะไรก็ได้ ตัวต่อไปอยากทำ

174
00:16:33,646 --> 00:16:40,347
Spotify เพราะผมฟังเพลงระหว่าง live coding หรือตอนทำงานอะไรก็ตามบ่อยๆ

175
00:16:40,347 --> 00:16:45,866
อยากได้ popover ด้านล่างแบบเดียวกับ Bitcoin หรือตัวอากาศ

176
00:16:45,866 --> 00:16:54,045
เพื่อที่ผมจะค้นหาศิลปินแล้วเล่นเพลงในแอปได้เลย อันนี้ต้องทำงานเพิ่มหน่อยเพราะต้องมี

177
00:16:54,045 --> 00:16:59,465
authentication (การยืนยันตัวตน) แต่คิดว่าเคยมี built-in

178
00:16:59,465 --> 00:17:04,885
plugin หรือไม่ก็อินทิเกรชันกับ Hermes Sessions อยู่แล้ว

179
00:17:04,885 --> 00:17:09,813
แค่ดึงเข้ามาในแอป เดี๋ยวดูกัน plugin เชื่อมต่อแล้ว

180
00:17:09,813 --> 00:17:14,543
แค่ต้อง authorize (ให้สิทธิ์) ผมแยกทำขั้นตอนนั้น

181
00:17:14,543 --> 00:17:19,273
ผ่านขั้นตอนล็อกอินบัญชี Spotify มาแล้ว ต้องสร้าง

182
00:17:19,273 --> 00:17:25,087
app ก่อน แต่ใช้เวลาแค่แป๊บเดียว Hermes จะแนะนำขั้นตอนให้เอง

183
00:17:25,087 --> 00:17:30,507
เสร็จแล้ว ได้รับอนุญาตแล้ว ลองฟังเพลงดู เชื่อมต่อสำเร็จ

184
00:17:30,507 --> 00:17:36,223
แค่ค้นหาเพลงก็เล่นได้เบื้องหลัง เห็นไหม ควบคุมได้จากตรงนี้

185
00:17:36,223 --> 00:17:41,939
เปลี่ยนเพลง เปลี่ยนวง ค้นหาวงอื่นได้ ผมจะค้นหาศิลปินอื่นดู

186
00:17:41,939 --> 00:17:46,768
แล้วเสียงเพลงก็ดังขึ้นมา "How many roads must..."

187
00:17:46,768 --> 00:17:52,089
(กี่ถนนที่ต้อง...) แล้วก็ได้แอป Spotify เล็กๆ น่ารักมา

188
00:17:52,089 --> 00:17:57,016
เล่นเพลงได้หลายเพลง ข้อจำกัดคือต้องเปิดแอป Spotify

189
00:17:57,016 --> 00:18:02,239
บนเดสก์ท็อปไว้ มันเป็นตัวควบคุมมากกว่าเล่นตรงๆ ที่นี่

190
00:18:02,239 --> 00:18:08,546
เพลงเล่นในแอป Spotify แต่ควบคุมจากตรงนี้ได้ เป็นข้อจำกัดเล็กน้อย

191
00:18:08,546 --> 00:18:14,459
แต่สำหรับการใช้งานของผมถือว่าใช้ได้ดีทีเดียว ตัวต่อไปจะลองทำ

192
00:18:14,459 --> 00:18:19,485
SNES emulator (โปรแกรมจำลองเครื่อง SNES) ไว้เล่นเกม

193
00:18:19,485 --> 00:18:24,215
SNES ถ้ามี ROM (ไฟล์เกม) และระหว่างทำงานในเซสชัน

194
00:18:24,215 --> 00:18:29,438
บางทีก็อยากเล่นเกมไปพลางๆ ขณะที่ agent กำลังทำงานอยู่

195
00:18:29,438 --> 00:18:34,858
คิดว่าน่าจะเป็น plugin ที่สนุกดี เห็นตรงนี้ไหม โหลดไฟล์

196
00:18:34,858 --> 00:18:39,786
ROM เข้ามา ได้มาอย่างถูกกฎหมายแน่นอน นี่เลย Legend

197
00:18:39,786 --> 00:18:44,713
of Zelda: A Link to the Past สร้างด้วย emulator.js

198
00:18:44,713 --> 00:18:50,921
เล่นได้เลย เรียกความหลังสุดๆ เล่นเกมแบบนี้ได้ แถมหยุดพักกลางเกม

199
00:18:50,921 --> 00:18:55,947
แล้วกลับมาทำงานในเซสชันต่อ แล้วค่อยกลับมาเล่นเกมต่อ

200
00:18:55,947 --> 00:19:01,269
ทำงานใน Hermes อีกเซสชันไปด้วย เล่นเกมย้อนยุคไปด้วยได้

201
00:19:01,269 --> 00:19:06,492
คอยสังเกตว่ามันยังทำงานอยู่ไหม ถ้ายังก็เล่นเกมไปพลางๆ

202
00:19:06,492 --> 00:19:12,109
ถ้าเสร็จแล้วก็กลับไปช่วยเจ้าหญิงต่อ เอาล่ะ จบกันที่ตรงนี้

203
00:19:12,109 --> 00:19:17,332
เราสร้าง plugin ไปหลายตัว ทั้ง markets plugin Spotify

204
00:19:17,332 --> 00:19:23,442
plugin และ SNES emulator plugin บอกกันหน่อยว่าคุณกำลังลองสร้าง

205
00:19:23,442 --> 00:19:32,015
plugin แบบไหนอยู่ คิดว่าผมจะเปิดซอร์สทั้งหมดนี้สักทีพอเก็บรายละเอียดให้เรียบร้อยกว่านี้

206
00:19:32,015 --> 00:19:36,844
เพื่อให้ทุกคนได้ลองใช้กัน ไปดูได้ที่ GitHub ของผม

207
00:19:36,844 --> 00:19:42,067
ชื่อ Tonbi Studio (คำบรรยายอัตโนมัติอ่านว่า Tombstone

208
00:19:42,067 --> 00:19:49,064
Studio) และติดตาม X ของผมด้วย ผมจะประกาศชื่อโฟลเดอร์ที่แน่นอนไว้ที่นั่น

209
00:19:49,064 --> 00:19:53,400
นี่คือทั้งหมดของวิดีโอนี้ ขอบคุณที่รับชมครับ