Replay - Vibe Coding Academy Broadcast #1

1
00:00:00,000 --> 00:00:07,795
[P1] การสตรีมจะเปิดให้เข้าร่วมได้ และ คนอื่นๆ ก็จะเข้ามาได้ครับ

2
00:00:07,795 --> 00:00:14,477
โอเค ผมจะขอปรับเลย์เอาต์ (layout) ตรงนี้นิดหน่อยนะครับ

3
00:00:14,477 --> 00:00:21,035
อีกจุดเดียว แล้ว ผมจะเริ่มเลย ทุกคนได้ยินผมชัดไหมครับ

4
00:00:21,035 --> 00:00:27,098
เห็นหน้าจอผมชัดไหมครับ ทุกอย่าง เรียบร้อยดีไหม >>

5
00:00:27,098 --> 00:00:34,027
ครับ ทุกอย่างโอเค >> เยี่ยมมากครับ ทุกคนตอบได้ผ่านอิโมจิ

6
00:00:34,027 --> 00:00:40,090
และ อย่าลืมถามคำถามได้ตลอดการนำเสนอเลยนะครับ โอเค

7
00:00:40,090 --> 00:00:45,905
ผมจะเริ่มจับเวลา แล้ว เราจะเริ่มกันทันที เอาล่ะ

8
00:00:45,905 --> 00:00:52,092
ขอต้อนรับอีกครั้งสู่ Vibe Coding Academy Broadcast

9
00:00:52,092 --> 00:01:00,753
ฉบับแรกครับ [P2] ต้องขอโทษอีกครั้ง สำหรับ ปัญหาทางเทคนิคเล็กน้อยนะครับ

10
00:01:00,753 --> 00:01:06,569
เราจะดำเนินการจัด Vibe Coding Academy Broadcast

11
00:01:06,569 --> 00:01:13,498
ฉบับแรกนี้กัน โดยพื้นฐานแล้ว นี่คือฉบับไลฟ์ของจดหมายข่าว

12
00:01:13,498 --> 00:01:21,664
(newsletter) ของ Vibe Coding Academy ที่ทุกคนจะได้รับทุกสองสัปดาห์

13
00:01:21,664 --> 00:01:29,707
และ เดี๋ยวผมจะอธิบายรายละเอียดเพิ่มเติมว่า ทำไมผมถึงเกิดไอเดียจัด

14
00:01:29,707 --> 00:01:36,141
broadcast ทุกสองสัปดาห์นี้ขึ้นมา เอาล่ะ ไม่รอช้าแล้ว

15
00:01:36,141 --> 00:01:43,441
ขอเริ่มจากแนะนำตัวสั้นๆ ก่อน เพราะ บางคนอาจจะยังไม่รู้จักผม

16
00:01:43,441 --> 00:01:49,381
หรือ รู้ว่าผมทำอะไรอยู่ ขอทบทวนให้อีกครั้งนะครับ

17
00:01:49,381 --> 00:01:57,671
ผมชื่อ Jul [P3] ผมเป็นอดีต product manager และ ตอนนี้เป็นผู้ก่อตั้ง

18
00:01:57,671 --> 00:02:03,734
Vibe Coding Academy ซึ่งเป็นแพลตฟอร์มที่ช่วยคนสาย

19
00:02:03,734 --> 00:02:10,044
product ในการเปลี่ยนผ่านสู่บทบาทใหม่ๆ อย่าง product

20
00:02:10,044 --> 00:02:16,602
builder ที่ขับเคลื่อนด้วย AI หรือ จะเรียกเป็น product

21
00:02:16,602 --> 00:02:29,223
manager ยุคใหม่ก็ได้ ซึ่งเป็นตำแหน่งงานใหม่ที่ผู้คนทำงานโปรเจกต์ให้เดินหน้าต่อไปได้โดยไม่ต้องพึ่งพาใคร

22
00:02:29,223 --> 00:02:38,874
เพราะ ด้วย AI พวกเขาสามารถเข้าถึงทักษะทั้งหมดที่เมื่อก่อนมีแค่ในมือของนักพัฒนา

23
00:02:38,874 --> 00:02:45,184
นักออกแบบ นักวิเคราะห์ข้อมูล ฯลฯ [P4] และ ผ่าน Vibe

24
00:02:45,184 --> 00:02:52,732
Coding Academy ผมมีการเรียน e-learning การสอน รวมถึงคอร์สไลฟ์

25
00:02:52,732 --> 00:03:03,126
ซึ่งเดี๋ยวผมจะลงรายละเอียดเพิ่มเติม แต่สิ่งที่ผมแชร์ด้วยก็คือจดหมายข่าวรายสองสัปดาห์

26
00:03:03,126 --> 00:03:09,436
ที่ผมจะแชร์ข่าวสารเกี่ยวกับแอคาเดมี รวมถึงข่าวอื่นๆ

27
00:03:09,436 --> 00:03:15,623
ที่เกี่ยวข้องกับช่อง YouTube ของผม ฯลฯ ครับ เอาล่ะ

28
00:03:15,623 --> 00:03:21,562
สวัสดีทุกคนที่เพิ่งเข้าร่วม ขอโทษอีกครั้ง สำหรับ

29
00:03:21,562 --> 00:03:27,996
ปัญหาทางเทคนิค และ ขอบคุณ ที่เข้าร่วมกันอีกครั้งครับ

30
00:03:27,996 --> 00:03:35,049
[P5] แล้วทำไมผมถึงตัดสินใจเปลี่ยนจดหมายข่าวนี้ให้กลายเป็น

31
00:03:35,049 --> 00:03:41,359
podcast ล่ะ? ก็คือ ผมมีอัตราการเปิดอ่าน (open rate)

32
00:03:41,359 --> 00:03:47,175
ที่ค่อนข้างดี ผมคิดว่าน่าจะต่ำกว่า 40% นิดหน่อย

33
00:03:47,175 --> 00:03:53,609
ดังนั้น ผมดีใจที่เห็นคนเข้ามาอ่านบทความทุกสองสัปดาห์

34
00:03:53,609 --> 00:04:02,642
แต่ไม่กี่สัปดาห์ก่อน ผมถอยออกมามองภาพรวม และ พยายามคิดทบทวนถึงคุณค่าต่างๆ

35
00:04:02,642 --> 00:04:09,200
ที่ผมอยากสื่อสาร ในฐานะผู้ก่อตั้ง Vibe Coding Academy

36
00:04:09,200 --> 00:04:16,995
และ มันก็ง่ายมากที่จะได้คุณค่าสามข้อนี้มา ข้อแรกคือความไว้วางใจ

37
00:04:16,995 --> 00:04:28,749
(trust) [P6] โดยพื้นฐาน ผมอยากให้ทุกคนเชื่อว่า สิ่งที่ผมแชร์ในคอนเทนต์ทั้งหมดนั้นเป็นเรื่องจริง

38
00:04:28,749 --> 00:04:40,628
และ เป็นสิ่งที่ผมทดสอบด้วยตัวเองจริงๆ เพราะ เป้าหมายของผมคือการช่วยให้ทุกคนเรียนรู้ทักษะเหล่านี้

39
00:04:40,628 --> 00:04:47,186
ข้อที่สองคือความจริงใจ (authenticity) ผมอยากลดตัวกรอง

40
00:04:47,186 --> 00:04:53,249
(filter) ให้เหลือน้อยที่สุด ผมอยากให้ทุกคนเห็นว่า

41
00:04:53,249 --> 00:05:03,147
อะไรใช้ได้ อะไรใช้ไม่ได้ เพราะ การได้เห็นของจริงทั้งที่ใช้ได้และใช้ไม่ได้นี่แหละ

42
00:05:03,147 --> 00:05:11,314
ที่ทำให้ทุกคนเรียนรู้ได้จริง และ สิ่งที่ผมอยากโชว์อีกอย่างคือฝีมือ

43
00:05:11,314 --> 00:05:18,490
(craft) ผมอยากโชว์งานจริงๆ [P7] ผมอยากโชว์ทักษะที่เป็นจริง

44
00:05:18,490 --> 00:05:26,657
ที่ผมสามารถสอนและถ่ายทอดให้ทุกคนได้ ไม่ว่าจะผ่านเซสชันไลฟ์เหล่านี้

45
00:05:26,657 --> 00:05:32,472
หรือ ผ่านคอร์สที่ผมมี ขอหยุดแป๊บนึงนะครับ เพราะ

46
00:05:32,472 --> 00:05:38,535
เห็นว่ามีคนตอบรับเข้ามา ขอแชร์ลิงก์อีกครั้งนะครับ

47
00:05:38,535 --> 00:05:44,722
เอาล่ะ ขอโทษทีครับ เรามาดูแผนการวันนี้กันต่อดีกว่า

48
00:05:44,722 --> 00:05:54,126
แผนของ broadcast นี้โดยรวม ก็คือแผนเดียวกับที่ผมใช้จัดระเบียบจดหมายข่าวของผม

49
00:05:54,126 --> 00:06:00,560
[P8] เราจะเริ่มด้วยข่าวเกี่ยวกับ Vibe Coding Academy

50
00:06:00,560 --> 00:06:08,602
ว่าเกิดอะไรขึ้นในสองสัปดาห์ที่ผ่านมา จากนั้นเราจะเจาะลึกข่าววงการ

51
00:06:08,602 --> 00:06:14,418
vibe coding ว่าเกิดอะไรขึ้นในโลกของ vibe coding

52
00:06:14,418 --> 00:06:20,357
และ สุดท้ายแต่ไม่ท้ายสุด เราจะโฟกัสที่หัวข้อหลัก

53
00:06:20,357 --> 00:06:26,296
ซึ่งก็คือ loop engineering เราจะมาเรียนรู้กันว่า

54
00:06:26,296 --> 00:06:32,112
วงวน (loop) คืออะไร และ ผมจะพาทุกคนลงมือทำ loop

55
00:06:32,112 --> 00:06:38,670
จริงๆ หนึ่งตัว สำหรับฟีเจอร์เฉพาะที่เราจะสร้างร่วมกัน

56
00:06:38,670 --> 00:06:44,485
เอาล่ะ แล้วสองสัปดาห์ที่ผ่านมาเกิดอะไรขึ้นบ้าง?

57
00:06:44,485 --> 00:06:50,301
[P9] ก็มีคอร์สไลฟ์สองรุ่น (cohort) ของคอร์สชื่อ

58
00:06:50,301 --> 00:06:58,838
Code for Product Managers ที่กำลังดำเนินอยู่ ตอนนี้เหลืออยู่รุ่นเดียว

59
00:06:58,838 --> 00:07:06,634
เพราะ รุ่นภาษาอังกฤษเพิ่งจบไป เมื่อวานนี้เอง ที่มีเซสชันสุดท้าย

60
00:07:06,634 --> 00:07:13,439
กับคนที่มาจากเยอรมนี อเมริกา และ ฝรั่งเศส มันคุ้มค่ามาก

61
00:07:13,439 --> 00:07:19,749
และ ดีใจที่เห็นคนเริ่มเก่งทักษะ Claude Code มากขึ้น

62
00:07:19,749 --> 00:07:25,936
และ นำไปใช้กับแบบฝึกหัดจริง ฯลฯ และ ในอีกด้านหนึ่ง

63
00:07:25,936 --> 00:07:31,875
ผมก็เริ่มคอร์สรุ่นภาษาฝรั่งเศส ของคอร์ส Code for

64
00:07:31,875 --> 00:07:40,165
Product Managers เมื่อวานเช่นกัน [P10] เซสชันภาษาฝรั่งเศสเพิ่งเริ่ม

65
00:07:40,165 --> 00:07:50,064
เซสชันแรกมีคนในห้องกว่าสิบคนนิดหน่อย และ จะดำเนินต่อไปในอีกไม่กี่สัปดาห์ข้างหน้า

66
00:07:50,064 --> 00:07:56,869
ด้วยเซสชันเพิ่มเติมอีกสองเซสชัน ในสองสัปดาห์ที่จะถึงนี้

67
00:07:56,869 --> 00:08:04,046
และ มีข่าวเกี่ยวกับสิ่งที่กำลังจะมาถึงด้วย คอร์สทั้งสองนี้

68
00:08:04,046 --> 00:08:10,851
ทั้ง Code for Product Managers และ เวอร์ชันภาษาฝรั่งเศส

69
00:08:10,851 --> 00:08:19,513
ผมเปิดรอบรับสมัคร (cohort) ใหม่แล้ว ทุกคนสามารถกดลิงก์เพื่อสมัครได้เลย

70
00:08:19,513 --> 00:08:26,813
[P11] ผมจะแชร์แหล่งข้อมูลให้แน่นอน แต่คอร์สเปิดรับสมัครแล้ว

71
00:08:26,813 --> 00:08:34,113
เริ่มสมัครได้ตั้งแต่วันนี้ และ ในฐานะสมาชิกชุมชนของแอคาเดมี

72
00:08:34,113 --> 00:08:41,042
ทุกคนได้ส่วนลด 20% ด้วยโค้ดโปรโมชัน สำหรับคอร์สสองตัวนี้

73
00:08:41,042 --> 00:08:49,209
ไม่ว่าจะเป็นเวอร์ชันภาษาฝรั่งเศสหรือภาษาอังกฤษ แล้วแต่ที่ทุกคนถนัด

74
00:08:49,209 --> 00:08:56,756
และ ยังมีอีกคอร์สที่ผมคิดว่าได้แชร์ในจดหมายข่าวฉบับล่าสุดแล้ว

75
00:08:56,756 --> 00:09:02,819
ซึ่งเป็นคอร์สที่แตกต่างไปโดยสิ้นเชิง ชื่อว่า Ship

76
00:09:02,819 --> 00:09:09,377
Your First Test with Code [P12] โดยพื้นฐานแล้ว นี่คือ

77
00:09:09,377 --> 00:09:16,059
bootcamp แปดสัปดาห์ สำหรับผู้ที่ใฝ่ฝันจะเป็นผู้ก่อตั้ง

78
00:09:16,059 --> 00:09:24,968
ที่อยากไปจากศูนย์ จากไอเดีย (idea) จริงๆ จนกลายเป็นผลิตภัณฑ์ที่พร้อมขึ้น

79
00:09:24,968 --> 00:09:31,278
production ครับ นี่เป็นคอร์สที่แตกต่างจากคอร์สอื่นๆ

80
00:09:31,278 --> 00:09:38,207
ที่ผมทำมา โดยอิงจาก master course ซึ่งเป็นคอร์สเรือธงของ

81
00:09:38,207 --> 00:09:46,126
Vibe Coding Academy ที่คุณจะได้เรียนรู้วิธีสร้างแอปพลิเคชันจริงๆ

82
00:09:46,126 --> 00:09:52,437
เพียงแต่ แทนที่จะต้องดูวิดีโอแบบ asynchronous [P13]

83
00:09:52,437 --> 00:10:00,850
สิ่งที่ผมทำคือจัดเซสชันไลฟ์ และ เซสชันเหล่านี้กระจายไปทั่วแปดสัปดาห์

84
00:10:00,850 --> 00:10:08,151
ปิดท้ายด้วย demo day ที่ทุกคนจะโชว์เดโมสดของผลิตภัณฑ์ตัวเอง

85
00:10:08,151 --> 00:10:14,090
ซึ่งผลิตภัณฑ์ที่พร้อมขึ้น production หมายความว่า

86
00:10:14,090 --> 00:10:20,524
ต้องมีระบบชำระเงินด้วย Stripe มีการเตรียมพร้อมสำหรับ

87
00:10:20,524 --> 00:10:30,547
deployment มีการยืนยันตัวตนด้วย Supabase และ เข้าใจทุกอย่างที่ทำงานอยู่เบื้องหลัง

88
00:10:30,547 --> 00:10:37,599
ซึ่งสำคัญมาก เมื่อต้องสร้างผลิตภัณฑ์ที่พร้อมขึ้นโปรดักชัน

89
00:10:37,599 --> 00:10:44,281
และ คุณสบายใจที่จะ iterate ปรับปรุง ตอบสนองคำขอฟีเจอร์

90
00:10:44,281 --> 00:10:51,829
ฯลฯ นี่คือข่าวทั้งหมด และ ผมยังไม่ได้พูดถึง แต่สำหรับคอร์สนี้

91
00:10:51,829 --> 00:10:59,129
ก็มีโค้ดส่วนลด 20% ที่ใช้ได้ทันที มีผลจนถึงสิ้นเดือนกรกฎาคม

92
00:10:59,129 --> 00:11:05,934
และ อีกอย่างที่ผมไม่ได้พูดถึง ในสไลด์ก่อนหน้า เกี่ยวกับ

93
00:11:05,934 --> 00:11:12,121
broadcast นี้ [P14] เป้าหมายก็คือการพูดคุยกับชุมชน

94
00:11:12,121 --> 00:11:20,287
ตอบคำถาม และ รับฟัง feedback จากทุกคน เป้าหมายของเซสชันเหล่านี้คือ

95
00:11:20,287 --> 00:11:27,835
ทุกคนสามารถถามคำถามอะไรก็ได้ที่อยากรู้ ดังนั้น ถามได้เลยในแชท

96
00:11:27,835 --> 00:11:35,135
แล้วผมจะตอบ และ ถ้าใครอยากจะพูดออกมาถามสดๆ ก็เชิญได้เลยครับ

97
00:11:35,135 --> 00:11:44,787
ผมอยากทำให้รูปแบบนี้โต้ตอบได้มากที่สุด เอาล่ะ มาถึงส่วนที่สองของเว็บบินาร์แล้ว

98
00:11:44,787 --> 00:11:51,468
อะไรใหม่ใน Vibe Coding Academy? [P15] เกิดอะไรขึ้นบ้าง

99
00:11:51,468 --> 00:12:00,253
และ ผมเห็นอะไรในสองสัปดาห์ที่ผ่านมา ที่น่าสนใจสำหรับคนที่อยากติดตามข่าว

100
00:12:00,253 --> 00:12:10,276
vibe coding ข่าวเหล่านี้มาจากอีกโปรเจกต์หนึ่ง ที่ผมเคยแชร์ในจดหมายข่าวก่อนหน้านี้

101
00:12:10,276 --> 00:12:16,710
ซึ่งเป็นช่องทางรวม changelog (Yet Another Changelog)

102
00:12:16,710 --> 00:12:22,649
ที่รวบรวมข่าว vibe coding ล่าสุดและร้อนแรงที่สุด

103
00:12:22,649 --> 00:12:30,073
และ จากข้อมูลนี้ สำหรับแต่ละผลิตภัณฑ์ ผมคัดเลือกสี่รีลีสหลัก

104
00:12:30,073 --> 00:12:36,136
ที่โดนใจผมจริงๆ และ คิดว่าน่าจะเกี่ยวข้องกับทุกคน

105
00:12:36,136 --> 00:12:42,570
[P16] อย่างแรกก็คือการปล่อย GPT 5.6 ขอโทษที การปล่อย

106
00:12:42,570 --> 00:12:50,118
GPT-5.6 นี่คือโมเดลใหม่ล่าสุดจาก OpenAI ผมเริ่มเล่นกับมันแล้ว

107
00:12:50,118 --> 00:12:57,542
แต่ถ้าจะให้พูดตรงๆ ว่าผมได้ข้อสรุปจริงๆ เกี่ยวกับโมเดลนี้ไหม

108
00:12:57,542 --> 00:13:04,471
ผมรู้สึกว่ามันสูสีกับ Opus 4.6 แต่สำหรับผม มันยังเป็นรอง

109
00:13:04,471 --> 00:13:10,534
Fable อยู่ ข้อดีคือ ดูเหมือนมันกิน token น้อยกว่า

110
00:13:10,534 --> 00:13:17,587
Opus 4.8 แต่ก็เป็นการคาดเดาล้วนๆ ผมยังไม่ได้ทดสอบมันมากพอ

111
00:13:17,587 --> 00:13:26,372
ที่จะให้ข้อสรุปที่เป็นรูปธรรมจริงๆ [P17] อีกรีลีสหนึ่งที่ผมว่าสนุกดีคือ

112
00:13:26,372 --> 00:13:32,806
Bolt ครับ ทุกคนอาจจะรู้จัก Bolt พวกเขาเป็นคู่แข่งของ

113
00:13:32,806 --> 00:13:38,745
Lovable และ เพิ่งออกฟีเจอร์เจ๋งๆ คือ interactive

114
00:13:38,745 --> 00:13:44,808
AI presentation คุณสามารถสร้างสไลด์ได้โดยตรงภายใน

115
00:13:44,808 --> 00:13:51,985
Bolt จาก Codex หรือ Cursor ก็ได้ นั่นเป็นการเพิ่มเติมที่ดี

116
00:13:51,985 --> 00:13:57,800
และ อีกครั้ง ผมไม่ได้วางแผนจะใช้มัน เพราะ ผมใช้

117
00:13:57,800 --> 00:14:03,987
Figma Slides อยู่แล้ว แต่น่าจะลองดูได้นะครับ [P18]

118
00:14:03,987 --> 00:14:13,267
อีกเรื่องหนึ่งที่อาจฟังดูไม่สำคัญ แต่สำหรับผม มันเป็นตัวเปลี่ยนเกมครั้งใหญ่

119
00:14:13,267 --> 00:14:19,206
นั่นคือ OpenAI ตัดสินใจรวม Codex เข้ากับ ChatGPT

120
00:14:19,206 --> 00:14:25,022
หมายความว่า พวกเขาเสนอความสามารถทั้งหมดของโมเดล

121
00:14:25,022 --> 00:14:31,827
OpenAI ในแอปเดียว ในแบบเดียวกับที่แอป Claude ให้เข้าถึง

122
00:14:31,827 --> 00:14:38,014
Claude Code และ Claude Chat ในที่เดียว และ สุดท้าย

123
00:14:38,014 --> 00:14:43,829
มีบทความหนึ่งที่อยากแชร์ ซึ่งเขียนโดย Anthropic

124
00:14:43,829 --> 00:14:49,892
เกี่ยวกับวิธีเลือกโมเดลที่ใช่ และ ระดับความพยายาม

125
00:14:49,892 --> 00:14:57,316
(effort) ที่ใช่ สำหรับงานที่ใช่ [P19] ขอแชร์ลิงก์ให้ในแชทเลย

126
00:14:57,316 --> 00:15:03,874
แล้ว ก็มีส่วนหนึ่งที่น่าสนใจมาก มีส่วนที่คุณจะเห็นว่า

127
00:15:03,874 --> 00:15:09,690
OpenAI ที่ low effort เป็นยังไง ที่ high effort

128
00:15:09,690 --> 00:15:15,876
เป็นยังไง และ Fable แม้แต่ที่ low effort เป็นยังไง

129
00:15:15,876 --> 00:15:26,146
เช่น เขาบอกว่า Sonnet ที่ high effort ก็เหมือนได้นักทำงานทั่วไปที่เก่งมากมาทั้งบ่าย

130
00:15:26,146 --> 00:15:31,962
เขาจะอ่านทุกอย่าง รันทุกอย่าง ตรวจงานสองรอบ และ

131
00:15:31,962 --> 00:15:38,148
สุดท้ายเข้าใจโค้ดเฉพาะของคุณอย่างถ่องแท้ [P20] และ

132
00:15:38,148 --> 00:15:44,582
พวกเขาไม่ได้มีความรู้สึกแบบ "ฉันเคยเห็นแบบนี้มาก่อน"

133
00:15:44,582 --> 00:15:52,996
ในขณะที่ Fable แม้แต่ที่ low effort ก็เป็นเหมือนผู้เชี่ยวชาญเฉพาะทาง

134
00:15:52,996 --> 00:16:00,420
ที่มองงานคุณปุ๊บ แล้วสามารถหาและชี้จุดที่ไม่มีใครอื่นเห็นได้

135
00:16:00,420 --> 00:16:06,483
เอาล่ะ ผมจะไม่ลงรายละเอียดของพรีเซนเทชันนี้แน่นอน

136
00:16:06,483 --> 00:16:13,165
เพราะ เราไม่มีเวลา แต่ผมแนะนำอย่างยิ่ง ให้ทุกคนไปลองดู

137
00:16:13,165 --> 00:16:20,836
มันน่าสนใจจริงๆ โอเค ไปสไลด์ถัดไปกัน และ ไปที่บทความจริงกันเลย

138
00:16:20,836 --> 00:16:26,652
[P21] ผมไม่รู้ว่าทุกคนติดตามจดหมายข่าวของ Lenny

139
00:16:26,652 --> 00:16:32,591
หรือเปล่า แต่ผมว่ามันดีที่สุด ถ้ายังไม่ได้ติดตาม

140
00:16:32,591 --> 00:16:39,149
ผมแนะนำให้ติดตามเลย เพราะ ปริมาณคอนเทนต์ที่เขาทำออกมา

141
00:16:39,149 --> 00:16:45,336
กับแขกระดับสูงมากมายขนาดนั้น หาที่เปรียบได้ยาก และ

142
00:16:45,336 --> 00:16:51,399
ในพอดแคสต์ล่าสุด เขาสัมภาษณ์ CPTO ของ Netflix คือ

143
00:16:51,399 --> 00:16:57,956
Elizabeth Stone ซึ่งบอกว่า เราต้องการคนที่คิดเชิงระบบ

144
00:16:57,956 --> 00:17:03,772
(system thinkers) มากขึ้น ในโลกที่เต็มไปด้วย AI

145
00:17:03,772 --> 00:17:15,527
แล้วเธอหมายความว่าอะไร? สิ่งที่เธอหมายถึงก็คือ ในโลกที่เทคโนโลยีสุดยอดนี้เปิดให้ทุกคนเข้าถึงได้

146
00:17:15,527 --> 00:17:22,951
[P22] สิ่งที่สร้างความแตกต่างอย่างแท้จริงคือ คุณสามารถประสาน

147
00:17:22,951 --> 00:17:28,766
และ รวมการใช้ AI ภายในบริษัทหนึ่งๆ ได้มากแค่ไหน

148
00:17:28,766 --> 00:17:37,180
[P23] เพราะ ถ้าในบริษัทหนึ่ง มีสมาชิกทีมคนหนึ่งที่เป็นผู้ใช้ระดับสูง

149
00:17:37,180 --> 00:17:43,490
ผู้เชี่ยวชาญและ power user ของ Claude Code ในขณะที่

150
00:17:43,490 --> 00:17:50,048
product designer ที่เขาร่วมงานด้วย กลับใช้ AI ไม่เป็น

151
00:17:50,048 --> 00:17:55,864
ในองค์กรแบบนี้ คุณกำลังสูญเสียพลังที่แท้จริงของ

152
00:17:55,864 --> 00:18:01,927
AI ไป และ นี่เป็นตัวอย่างที่เฉพาะเจาะจงและง่ายมาก

153
00:18:01,927 --> 00:18:09,846
จริงๆ แล้วง่ายมาก แต่ขอย้ำว่า ตัวสร้างความแตกต่างหลักในทุกวันนี้

154
00:18:09,846 --> 00:18:16,527
คือการทำให้วิธีการทำงานของสมาชิกในทีมเป็นหนึ่งเดียวกัน

155
00:18:16,527 --> 00:18:23,333
แม้แต่กับคนที่เชี่ยวชาญโค้ดอยู่แล้ว ซึ่งหมายถึงการสร้าง

156
00:18:23,333 --> 00:18:29,891
skills การสร้าง sub agents หรือ ทั้งหมดที่เราเรียกว่า

157
00:18:29,891 --> 00:18:37,562
harness ซึ่งต้องใช้การฝึกฝนพอสมควร นี่คือเหตุผลที่ผมสร้างคอร์ส

158
00:18:37,562 --> 00:18:44,615
Code for PMs ขึ้นมา [P24] แต่มีระบบหนึ่งที่คุณสามารถสร้าง

159
00:18:44,615 --> 00:18:50,925
และ แพร่กระจายในทีมของคุณได้ นั่นคือ loops แล้วทำไม

160
00:18:50,925 --> 00:18:56,741
loops ถึงน่าสนใจ? ขออธิบายปัญหาที่มันแก้ได้ก่อน

161
00:18:56,741 --> 00:19:02,927
ผมเรียกมันว่า กับดักงานซับซ้อน (complex task trap)

162
00:19:02,927 --> 00:19:08,990
ลองจินตนาการว่า เราอยู่ในสถานการณ์นี้ เราเริ่มใช้

163
00:19:08,990 --> 00:19:17,404
Claude Code [P25] ผมไม่รู้ว่าทุกคนอยู่ระดับไหน แต่ถ้าคุณเริ่มเล่นกับ

164
00:19:17,404 --> 00:19:24,828
Claude Code รู้พื้นฐานของ Claude Code แล้ว ตอนนี้อาจเริ่มรัน

165
00:19:24,828 --> 00:19:31,386
agents หรือ ใช้ skills เพื่อเพิ่มประสิทธิภาพการใช้งาน

166
00:19:31,386 --> 00:19:39,181
ถ้าคุณเริ่มมีสิ่งที่เราเรียกว่า harness ที่ให้คุณทำงานอัตโนมัติ

167
00:19:39,181 --> 00:19:46,110
และ ใช้ AI อย่างมีประสิทธิภาพ คุณอาจเริ่มทำงานที่ซับซ้อน

168
00:19:46,110 --> 00:19:52,421
ซึ่งหมายความว่า คุณอาจเริ่มใช้ frontier model [P26]

169
00:19:52,421 --> 00:20:01,206
โมเดลระดับ frontier อย่าง Fable ที่สามารถจัดการงานซับซ้อนพวกนั้นได้จริง

170
00:20:01,206 --> 00:20:09,744
แต่ข้อเสียหลักคือ Fable กิน token เยอะมาก และ ยังไม่พร้อมใช้งานเสมอไป

171
00:20:09,744 --> 00:20:15,807
มันใช้ได้เฉพาะแผน Max เท่านั้น พูดง่ายๆ คือแพงมาก

172
00:20:15,807 --> 00:20:23,231
[P27] ในทางกลับกัน คุณอาจบอกว่า โอเค ฉันจะใช้โมเดลที่ถูกกว่า

173
00:20:23,231 --> 00:20:32,511
ใช้ Sonnet แทน แต่สำหรับงานซับซ้อนพวกนี้ ถ้าคุณอยากให้งานสำเร็จอย่างถูกต้อง

174
00:20:32,511 --> 00:20:38,574
คุณจะต้อง prompt ซ้ำแล้วซ้ำเล่า iterate ไปเรื่อยๆ

175
00:20:38,574 --> 00:20:45,379
ซึ่งสุดท้าย คุณก็จะกิน token เยอะพอๆ กับการใช้ frontier

176
00:20:45,379 --> 00:20:53,298
model เช่นเดียวกัน ดังนั้น สิ่งที่เกิดขึ้นคือ ไม่ทางใดก็ทางหนึ่ง

177
00:20:53,298 --> 00:21:00,227
คุณจ่าย ไม่ด้วย token ก็ด้วยคุณภาพ [P28] นั่นหมายความว่า

178
00:21:00,227 --> 00:21:07,527
มันแพงมาก หรือ ไม่ก็ต้องยอมลดคุณภาพลง และ มันน่าหงุดหงิดมาก

179
00:21:07,527 --> 00:21:16,065
เวลาต้องยอมลดคุณภาพ เมื่อคุณอยากขายของ หรือ อยากสร้างผลิตภัณฑ์ที่ดูดี

180
00:21:16,065 --> 00:21:23,736
โดยเฉพาะทุกวันนี้ ที่ใครๆ ก็สร้างได้ ดังนั้น ยังมีอีกวิธีหนึ่ง

181
00:21:23,736 --> 00:21:29,799
ที่จะใช้ frontier model เหล่านั้น โดยไม่กิน token

182
00:21:29,799 --> 00:21:35,738
มากเกินไป และ ไม่ต้องยอมลดคุณภาพ นั่นก็คือ loops

183
00:21:35,738 --> 00:21:42,420
[P29] ผมเรียนรู้เรื่อง loops เยอะมากจากคอนเทนต์ออนไลน์

184
00:21:42,420 --> 00:21:50,834
แต่มีบทความหนึ่งของ Anthropic ที่เกี่ยวข้องมาก ที่ช่วยให้เริ่มต้นกับ

185
00:21:50,834 --> 00:21:58,258
loops ได้ และ เพื่อเป็นการเริ่ม ผมสรุปบางส่วนของบทความนี้ไว้

186
00:21:58,258 --> 00:22:06,548
เพื่อประหยัดเวลาให้ทุกคน และ อย่างน้อย ทุกคนจะเข้าใจอย่างรวดเร็วว่า

187
00:22:06,548 --> 00:22:12,982
loops คืออะไร [P30] หลักการหลักก็คือ คุณตั้งเป้าหมาย

188
00:22:12,982 --> 00:22:19,540
(goal) สำหรับสิ่งที่อยากทำให้สำเร็จ จากนั้นลงมือทำงาน

189
00:22:19,540 --> 00:22:28,078
เปรียบเทียบผลลัพธ์ของงานกับเป้าหมาย และ ตราบใดที่เป้าหมายยังไม่สำเร็จ

190
00:22:28,078 --> 00:22:34,883
คุณก็ยังคง execute, prompt AI ไปเรื่อยๆ และ ด้วยวิธีนี้

191
00:22:34,883 --> 00:22:40,822
คุณสามารถแบ่งงานระหว่าง planner กับ executor ได้

192
00:22:40,822 --> 00:22:46,638
เดี๋ยวผมจะลงรายละเอียดเพิ่มเติมอีกทีหลัง เอาล่ะ

193
00:22:46,638 --> 00:22:52,948
นี่คือแนวคิดแรกที่พวกเขานำเสนอ คือ turn-based loops

194
00:22:52,948 --> 00:22:59,506
แล้ว turn-based loops คืออะไร? [P31] นี่คือวิธีการที่

195
00:22:59,506 --> 00:23:06,559
Claude Code ทำงานอยู่ในปัจจุบันพอดี แล้วมันทำงานยังไงล่ะ?

196
00:23:06,559 --> 00:23:12,374
ก็คือ คุณเริ่มจาก prompt เมื่อคุณ prompt Claude

197
00:23:12,374 --> 00:23:19,427
Code สิ่งที่เกิดขึ้นคือ คุณเริ่มด้วย prompt พร้อมกับบริบท

198
00:23:19,427 --> 00:23:27,222
(context) ที่โมเดลจะรวบรวม ลงมือทำ และ มันจะตรวจสอบงานของตัวเอง

199
00:23:27,222 --> 00:23:33,409
กับเป้าหมายที่มันกำหนดขึ้นเอง จากบริบทที่มันเข้าใจ

200
00:23:33,409 --> 00:23:39,225
[P32] นั่นหมายความว่า โดยค่าเริ่มต้นแล้ว Claude

201
00:23:39,225 --> 00:23:48,628
Code ใช้ loops เหล่านี้ สำหรับงานซับซ้อน โดยอิงจากเป้าหมายที่ตัวมันเองตีความ

202
00:23:48,628 --> 00:23:56,300
และ เปรียบเทียบไปเรื่อยๆ จนกว่าจะได้ผลลัพธ์ที่มันคิดว่าถูกต้อง

203
00:23:56,300 --> 00:24:02,858
โอเค [P33] นี่คือสิ่งที่คุณใช้งานอยู่ โดยที่ไม่รู้ตัว

204
00:24:02,858 --> 00:24:09,292
และ มันทำงานได้ดีมาก ถ้าคุณโฟกัสกับงานเล็กๆ งานง่ายๆ

205
00:24:09,292 --> 00:24:16,840
ฯลฯ จากนั้นก็มี goal-based loops ซึ่งก็คือหลักการเดียวกันเป๊ะ

206
00:24:16,840 --> 00:24:24,387
เว้นแต่ ใช้คำสั่ง /goal ที่คุณอาจจะรู้จัก และ ใช้ได้กับผู้ใช้

207
00:24:24,387 --> 00:24:30,450
Claude Code ทุกคน แทนที่จะให้ AI กำหนดเป้าหมายเอง

208
00:24:30,450 --> 00:24:37,751
จากบริบทที่คุณให้ คุณเริ่มต้นด้วยการ prompt ด้วยเป้าหมายแทน

209
00:24:37,751 --> 00:24:44,185
[P34] คุณจะพิมพ์ว่า /goal เปลี่ยนแบรนดิ้ง (branding)

210
00:24:44,185 --> 00:24:50,248
ของเว็บไซต์เรา ให้เหมาะกับแอคาเดมี หรือ แพลตฟอร์ม

211
00:24:50,248 --> 00:24:56,434
e-learning มากขึ้น เป็นต้น นี่ถือเป็นการอัปเกรดจาก

212
00:24:56,434 --> 00:25:05,591
loop แบบแรก แต่ก็ยังค่อนข้างจำกัด และ มันไม่สามารถแก้ปัญหาที่ผมยกขึ้นมาได้

213
00:25:05,591 --> 00:25:11,777
นั่นคือ โอเค ฉันอยากใช้ Fable สำหรับบางงานเท่านั้น

214
00:25:11,777 --> 00:25:18,706
และ อยากใช้โมเดลที่ถูกกว่าสำหรับงานอื่น และ นี่คือจุดที่

215
00:25:18,706 --> 00:25:24,522
agent-based loops เข้ามา วิธีการทำงานเป็นแบบนี้

216
00:25:24,522 --> 00:25:31,575
คุณมีตัวกระตุ้น (trigger) สำหรับ loop [P35] ตัวกระตุ้นคือ

217
00:25:31,575 --> 00:25:39,494
คุณเปิดใช้งานมันด้วยมือ หรือ คุณตั้งเวลามัน เพื่อให้รันอัตโนมัติ

218
00:25:39,494 --> 00:25:45,557
เช่น ทุกวันเที่ยงคืน แล้ว สิ่งที่มันจะทำคือ เรียก

219
00:25:45,557 --> 00:25:52,115
agent หนึ่ง ที่จะเรียก agent ที่สอง มันจะคิดงานขึ้นมา

220
00:25:52,115 --> 00:26:00,033
เขียนสเปก (spec) แล้ว เรียก agent อีกตัว ที่จะทำงานนั้นให้สำเร็จ

221
00:26:00,033 --> 00:26:06,344
จากนั้นส่งผลลัพธ์กลับไปให้ agent ตัวแรก โอเค? [P36]

222
00:26:06,344 --> 00:26:12,283
และ ด้วยวิธีนี้ เรามีระบบของ agents ที่คุยกันเอง

223
00:26:12,283 --> 00:26:20,697
ไปเรื่อยๆ จนกว่าเป้าหมายจะสำเร็จ แล้วมันหมายความว่าอะไรในทางปฏิบัติ?

224
00:26:20,697 --> 00:26:27,874
ผมจะโชว์ให้ดูจริงๆ ว่า รัน agent-based loops เหล่านี้ยังไง

225
00:26:27,874 --> 00:26:34,184
และ เราจะนำมันไปใช้ จริงๆ กับการสร้างฟีเจอร์ใหม่ให้

226
00:26:34,184 --> 00:26:39,999
Vibe Coding Academy โดยสิ่งที่เราจะทำคือ ใช้สอง

227
00:26:39,999 --> 00:26:46,062
agents หนึ่งคือ senior developer ที่ใช้ Fable และ

228
00:26:46,062 --> 00:26:55,342
อีกหนึ่งคือ junior developer ที่ใช้ Sonnet และ สองคนนี้จะทำงานร่วมกันแบบนี้

229
00:26:55,342 --> 00:27:01,777
[P37] ขอเปิดไดอะแกรมที่อยากแชร์ให้ดูหน่อย โดยพื้นฐาน

230
00:27:01,777 --> 00:27:08,706
สิ่งที่จะเกิดขึ้นเป็นแบบนี้ โอเค ผมว่า ทุกคนยังไม่เห็นนะ

231
00:27:08,706 --> 00:27:16,872
เอาล่ะ ขอแชร์หน้าจออีกครั้ง เอาล่ะ ปกติแล้ว ทุกคนน่าจะเห็นไดอะแกรม

232
00:27:16,872 --> 00:27:24,049
Excalidraw แล้ว ขอแป๊บนึง เพราะ ผมไม่แน่ใจว่ามันถูกต้องไหม

233
00:27:24,049 --> 00:27:32,215
ใช่ นี่คือสิ่งที่ผมต้องการ ใช่ เยี่ยมมาก แล้วจะเกิดอะไรขึ้นตรงนี้?

234
00:27:32,215 --> 00:27:39,886
[P38] เรามีไอเดียฟีเจอร์ใหม่ที่อยากสร้าง และ สิ่งที่เราจะทำคือ

235
00:27:39,886 --> 00:27:46,197
รัน loop และ สิ่งที่จะเกิดขึ้นคือ เมื่อไหร่ก็ตามที่

236
00:27:46,197 --> 00:27:56,467
loop ถูกกระตุ้น senior dev จะเขียนสเปกขึ้นมา สเปกเหล่านี้จะถูกแบ่งออกเป็นสามงานหลัก

237
00:27:56,467 --> 00:28:02,406
งานหนึ่งสำหรับ front end งานหนึ่งสำหรับ back end

238
00:28:02,406 --> 00:28:08,593
และ งานหนึ่งสำหรับเชื่อมต่อ front end กับ back end

239
00:28:08,593 --> 00:28:15,027
เข้าด้วยกัน [P39] และ เมื่องานเหล่านี้ถูกแบ่งออกแล้ว

240
00:28:15,027 --> 00:28:20,842
งานเหล่านี้จะถูกส่งต่อโดย senior dev ให้ junior

241
00:28:20,842 --> 00:28:26,782
dev ลงมือทำ และ จากนั้น ขอให้ senior dev ตรวจสอบ

242
00:28:26,782 --> 00:28:33,092
หรือ ทำ QA ให้ งานแรก แล้ว ถ้าผ่านการตรวจสอบ senior

243
00:28:33,092 --> 00:28:39,031
dev ก็จะส่งต่องานให้ junior dev ลงมือทำให้สำเร็จ

244
00:28:39,031 --> 00:28:44,970
ถ้า QA ไม่ผ่าน senior dev ก็จะบอก junior dev ว่า

245
00:28:44,970 --> 00:28:53,384
อันนี้ใช้ไม่ได้ ลงมือทำงานใหม่ ฯลฯ ไปเรื่อยๆ จนกว่างานทั้งหมดจะเสร็จ

246
00:28:53,384 --> 00:28:59,447
[P40] และ สิ่งที่น่าสนใจในหลักการหลักนี้คือ เรามี

247
00:28:59,447 --> 00:29:05,881
senior dev ที่ทำงานกับ Fable ตรงนี้ และ เรามี junior

248
00:29:05,881 --> 00:29:12,316
dev ที่ทำงานกับ Sonnet และ นั่นหมายความว่า การแตกงาน

249
00:29:12,316 --> 00:29:18,873
(breakdown) ไม่ว่าจะตรงนี้ หรือ ตรงนี้ จะเกิดขึ้นด้วย

250
00:29:18,873 --> 00:29:26,669
frontier model ซึ่งเป็นตัวที่แพงที่สุด ในขณะที่งานที่ง่ายที่สุด

251
00:29:26,669 --> 00:29:32,979
ซึ่งก็คือการลงมือเขียนโค้ดตามสเปก และ ตามการแบ่งงาน

252
00:29:32,979 --> 00:29:40,651
จะทำโดย dev ที่ใช้ Sonnet โดยตรง [P41] เราจะนำสิ่งนี้ไปใช้จริง

253
00:29:40,651 --> 00:29:47,951
กับตัวอย่างที่เป็นรูปธรรม ขอพักแป๊บนึงตรงนี้ ทุกคนเข้าใจไหม

254
00:29:47,951 --> 00:29:56,983
หรือ งงไปหมดแล้ว? บอกผมได้เลย แค่อยากรู้ว่า อย่างน้อยมันก็เข้าใจได้ใช่ไหม

255
00:29:56,983 --> 00:30:03,170
ตอบได้ด้วยอิโมจิ ถ้าชอบ ทุกอย่างดี เยี่ยมมาก ดีมาก

256
00:30:03,170 --> 00:30:10,099
โอเค ผมยังไม่ได้เปิดแชท เยี่ยม ไปที่การสาธิตกันต่อดีกว่า

257
00:30:10,099 --> 00:30:16,410
เอาล่ะ ไปกันเลย เราจะสร้างฟีเจอร์ใหม่ให้เว็บไซต์ของ

258
00:30:16,410 --> 00:30:22,720
Vibe Coding Academy ขอเปิด Vibe Coding Academy ก่อน

259
00:30:22,720 --> 00:30:29,030
[P42] ผมเปิดมันไว้ใน environment ในเครื่องของผมแล้ว

260
00:30:29,030 --> 00:30:37,073
ซึ่งโดยพื้นฐานก็ตรงกับที่อยู่บน production และ อย่างที่เห็นบนหน้า

261
00:30:37,073 --> 00:30:42,889
index ของ Vibe Coding Academy ผมมี testimonials

262
00:30:42,889 --> 00:30:49,818
จากนักเรียนของ Vibe Coding Academy ตรงนี้ มันดูดีทีเดียว

263
00:30:49,818 --> 00:30:55,757
แต่ผมอยากปรับปรุงดีไซน์ของ testimonials เหล่านี้

264
00:30:55,757 --> 00:31:02,067
[P43] และ มีจุดหนึ่งเกี่ยวกับ testimonials เหล่านี้

265
00:31:02,067 --> 00:31:11,966
คือ มันถูกรวบรวมขึ้นตามคอร์สที่ผมสอน และ ผมเก็บมันไว้ในเครื่องมือเฉพาะที่ชื่อว่า

266
00:31:11,966 --> 00:31:19,266
Senja (senja.io) ซึ่งเป็น SaaS ที่จัดการเรื่อง testimonials

267
00:31:19,266 --> 00:31:26,195
ให้คุณ และ มีอยู่หน้าหนึ่งที่ผมชอบมาก ที่มี testimonials

268
00:31:26,195 --> 00:31:32,382
แบบ flip cards ที่ผมอยากนำมาปรับใช้บนเว็บไซต์ของผม

269
00:31:32,382 --> 00:31:38,445
นี่คือสิ่งที่เราจะสร้าง [P44] สิ่งที่เราอยากทำคือ

270
00:31:38,445 --> 00:31:44,508
แทนที่ ticker ตรงนี้ ด้วย carousel ของ flip cards

271
00:31:44,508 --> 00:31:50,818
แบบนี้ ที่ดูเหมือนกับอันนี้เป๊ะ เอาล่ะ มาลงมือทำกัน

272
00:31:50,818 --> 00:31:57,005
ในการทำแบบนี้ ผมจะเปิด Claude Code ขอโทษด้วยนะครับ

273
00:31:57,005 --> 00:32:03,563
แต่ด้วยเหตุผลหลายอย่าง ที่ผมจะไม่ลงรายละเอียด ผมจะใช้

274
00:32:03,563 --> 00:32:09,378
Claude Code จากเทอร์มินัล ไม่ใช่แอป Claude Code

275
00:32:09,378 --> 00:32:15,194
desktop แต่ไม่ต้องกังวล มันทำงานเหมือนกันเป๊ะบน

276
00:32:15,194 --> 00:32:21,999
Claude Code desktop แค่สะดวกกว่าสำหรับผมในการเปิดใช้งาน

277
00:32:21,999 --> 00:32:27,938
[P45] ตรงนี้ เราสามารถเปิดเซสชัน Claude Code ได้

278
00:32:27,938 --> 00:32:34,001
และ สิ่งที่เราจะทำคือ เปลี่ยนโหมด ไปที่ auto mode

279
00:32:34,001 --> 00:32:39,817
ถ้าคุณไม่รู้จักช็อตคัตนี้ คุณกดปุ่ม shift + tab

280
00:32:39,817 --> 00:32:46,622
แล้ว จะสลับไปมาระหว่างโหมดต่างๆ และ โหมดที่ผมอยากใช้คือ

281
00:32:46,622 --> 00:32:53,304
auto mode ซึ่งเป็นโหมดที่ผมไม่ต้องตรวจสอบงานทั้งหมดที่

282
00:32:53,304 --> 00:33:00,233
Claude Code รัน และ สิ่งที่ผมจะทำคือ อธิบายสิ่งที่อยากทำ

283
00:33:00,233 --> 00:33:06,791
และ ขอให้เริ่ม loop อย่างชัดเจน [P46] โอเค ผมจะพูดว่า

284
00:33:06,791 --> 00:33:14,215
ผมจะเปิดใช้ custom command ที่ผมสร้างไว้ ผมจะไม่ลงรายละเอียด

285
00:33:14,215 --> 00:33:20,030
เกี่ยวกับวิธีสร้าง custom command ที่ผมสร้างเอง

286
00:33:20,030 --> 00:33:26,712
และ ช่วยให้ผมปรับแต่งงานเฉพาะได้ ยังไงก็ตาม ผมจะไม่ใช้

287
00:33:26,712 --> 00:33:33,888
Fable สำหรับอันนี้ ผมจะใช้ Opus แม้ว่า อย่างที่ทุกคนเข้าใจ

288
00:33:33,888 --> 00:33:40,075
โมเดลที่ใช้อย่างน้อยในการกระตุ้นงาน จะไม่สำคัญเท่า

289
00:33:40,075 --> 00:33:46,138
สิ่งที่สำคัญคือโมเดลที่จะใช้สำหรับทั้ง junior dev

290
00:33:46,138 --> 00:33:52,448
และ senior dev ของเรา โดยพื้นฐาน นี่คือวิธีเริ่มมัน

291
00:33:52,448 --> 00:33:58,388
[P47] งั้น loop ผมอยากสร้างฟีเจอร์ใหม่บนเว็บไซต์

292
00:33:58,388 --> 00:34:04,946
Vibe Coding Academy แทนที่ ตรงไหนนะ ใช่ แทนที่ ticker

293
00:34:04,946 --> 00:34:11,008
ของ testimonials ที่มีอยู่บนหน้า index และ ตรงนี้

294
00:34:11,008 --> 00:34:18,185
สิ่งที่ผมจะทำคือ วาง screenshot ที่ผมถ่ายไว้ลงในเทอร์มินัล

295
00:34:18,185 --> 00:34:24,248
โอเค ผมจะเปิด screenshot ของผม และ เอาอันนี้ โอเค

296
00:34:24,248 --> 00:34:31,548
ผมอยากรีดีไซน์มัน ให้ดูเหมือน testimonials ที่อยู่บนหน้านี้

297
00:34:31,548 --> 00:34:37,611
[P48] และ นี่คือจุดที่ผมจะวางลิงก์ที่เพิ่งโชว์จาก

298
00:34:37,611 --> 00:34:43,427
Senja และ เจาะจงกว่านั้น นี่คือลักษณะที่มันเป็น

299
00:34:43,427 --> 00:34:49,490
โอเค ตรงนี้ คุณรู้ไหม ผมใช้เวลาจริงๆ ในการ prompt

300
00:34:49,490 --> 00:34:55,676
ตรงนี้ ถ้าผมอยู่คนเดียว ผมจะทำแบบนี้ด้วยเครื่องมือ

301
00:34:55,676 --> 00:35:03,719
dictation แต่ เพราะ ผมแค่อยากโชว์ให้ทุกคนเห็นรายละเอียดมากขึ้นว่า

302
00:35:03,719 --> 00:35:09,782
มันควรมีอะไรบ้าง ผมเลยทำแบบ manual มากขึ้น นี่คือ

303
00:35:09,782 --> 00:35:18,072
flip card ที่มีรูปของนักเรียน และ testimonial ของพวกเขาอยู่ด้านหลัง

304
00:35:18,072 --> 00:35:23,888
สิ่งที่ผมอยากทำคือ ระบุเกณฑ์ความสำเร็จ (success

305
00:35:23,888 --> 00:35:30,693
criteria) ของโปรเจกต์นี้ [P49] ตรงนี้ สิ่งที่อยากพูดคือ

306
00:35:30,693 --> 00:35:36,880
เพื่อยืนยันความสำเร็จของโปรเจกต์นี้ front end หรือ

307
00:35:36,880 --> 00:35:42,943
flip cards ควรจะดูเหมือนบนเว็บไซต์อ้างอิงเป๊ะ และ

308
00:35:42,943 --> 00:35:49,995
ผมคิดว่า ประมาณนี้ ถ้าผมจำไม่ผิด เราเพิ่งพูดถึงเจาะจงขึ้น

309
00:35:49,995 --> 00:35:56,306
เกี่ยวกับดีไซน์ใหม่ และ รูปลักษณ์ต้นแบบ (lookalike)

310
00:35:56,306 --> 00:36:03,235
ที่เราอยากอ้างอิง งั้นลองกดคำสั่งนี้ดู แล้ว คุณจะเห็นว่า

311
00:36:03,235 --> 00:36:09,545
ปกติมันจะแตกออกเป็นชุดของ agents อย่างที่เห็นตรงนี้

312
00:36:09,545 --> 00:36:15,979
มันบอกว่า step zero คือประกอบ design reference [P50]

313
00:36:15,979 --> 00:36:25,259
โดยพื้นฐาน มันเป็นขั้นตอนแรก ในการกำหนดว่า เกณฑ์ความสำเร็จที่แท้จริงคืออะไร

314
00:36:25,259 --> 00:36:31,570
เราจะรอสักครู่ ให้งานรัน ตรงนี้เราอยู่ที่ step zero

315
00:36:31,570 --> 00:36:37,757
senior dev ยังไม่ได้เข้ามาแทรกอะไร แค่ประกอบดีไซน์

316
00:36:37,757 --> 00:36:44,933
เพื่อกำหนดเป้าหมาย นี่คือขั้นตอนแรกจริงๆ สำหรับงานเฉพาะนี้

317
00:36:44,933 --> 00:36:50,749
โมเดลที่ใช้คือตัวที่คุณเลือกเป็นค่าเริ่มต้น และ

318
00:36:50,749 --> 00:36:56,564
อย่างที่เห็น ตรงนี้มันเรียกว่า senior dev [P51]

319
00:36:56,564 --> 00:37:04,730
ตอนนี้ senior dev กำลังสำรวจ repo และ ร่างสเปก เดี๋ยวผมจะโชว์ให้ดู

320
00:37:04,730 --> 00:37:11,041
เมื่อมันกลับมา แล้ว มอบหมายงาน front end ให้ junior

321
00:37:11,041 --> 00:37:18,960
dev อย่างที่เห็น คุณกดปุ่มลูกศรย้อนกลับได้ และ ที่ด้านล่างตรงนี้

322
00:37:18,960 --> 00:37:27,869
ถ้าคุณคลิกที่เซสชันนั้น จะเห็นว่า มี prompt เฉพาะที่ถูกส่งไปยังเซสชันนี้

323
00:37:27,869 --> 00:37:36,159
ให้ senior dev ทำงานกับสเปก และ senior dev นี้ ตามที่นิยามไว้ตรงนี้

324
00:37:36,159 --> 00:37:42,469
ใช้ Fable เป็นโมเดลหลัก โอเค เราจะหยุดแป๊บนึงตรงนี้

325
00:37:42,469 --> 00:37:48,285
[P52] เราหยุดตรงนี้ และ อย่างที่เห็น senior dev

326
00:37:48,285 --> 00:37:54,843
ทำงานเสร็จแล้ว และ มันบอกว่า โอเค ไปทำ native central

327
00:37:54,843 --> 00:38:00,782
style flip card carousel เป็นคอมโพเนนต์ใหม่ บลาๆ

328
00:38:00,782 --> 00:38:08,206
บลาๆ stage หนึ่ง front end mock แล้ว มันจะเริ่มด้วยโปรโตไทป์

329
00:38:08,206 --> 00:38:14,392
จากนั้น จะทำ back end และ จากนั้น เชื่อมต่อระหว่าง

330
00:38:14,392 --> 00:38:20,455
front end กับ back end และ สิ่งที่เจ๋งคือ ในแต่ละ

331
00:38:20,455 --> 00:38:26,766
stage เราจะมี senior dev ตรวจสอบงาน (QA) จริงๆ โอเค

332
00:38:26,766 --> 00:38:33,819
งั้นเรามาดำเนินการต่อ [P53] โดยพื้นฐาน สิ่งที่เกิดขึ้นคือ

333
00:38:33,819 --> 00:38:40,624
ตอนนี้ senior dev ทำงานเสร็จแล้ว senior dev ทำสเปกเสร็จ

334
00:38:40,624 --> 00:38:48,295
ผมจะใส่สีเขียวให้ senior dev นะ และ ตอนนี้มันกำลังส่งต่องานให้

335
00:38:48,295 --> 00:38:55,967
junior dev ซึ่งปกติจะเริ่มทำงาน มาดูกันว่ามันเริ่มทำงานหรือยัง

336
00:38:55,967 --> 00:39:05,000
อย่างที่เห็น junior dev กำลังทำงาน ถ้าผมกลับไปที่เซสชันที่เริ่มแบบคู่ขนาน

337
00:39:05,000 --> 00:39:10,939
junior dev กำลังทำงาน และ อย่างที่เห็น มี branch

338
00:39:10,939 --> 00:39:17,249
เฉพาะ [P54] คุณคือ junior dev ในกลุ่ม senior junior

339
00:39:17,249 --> 00:39:23,188
build group จงทำ stage หนึ่ง front end mock data

340
00:39:23,188 --> 00:39:30,117
ตามสเปกด้านล่าง และ สเปกมีอยู่ตรงนี้ พร้อมเกณฑ์การยอมรับ

341
00:39:30,117 --> 00:39:35,933
(acceptance criteria) ฯลฯ ฯลฯ โอเค คุณจะเห็นว่า

342
00:39:35,933 --> 00:39:43,976
มันกำลังเพิ่มโค้ดเข้าไปใน front end นี่คือสิ่งที่เราจะเพิ่มตรงนี้

343
00:39:43,976 --> 00:39:49,791
เอาล่ะ junior dev กำลังลงมือเขียนโค้ด front end

344
00:39:49,791 --> 00:39:55,730
สิ่งที่เจ๋งคือ เมื่อคุณกลับไปที่เซสชันหลักตรงนี้

345
00:39:55,730 --> 00:40:03,402
คุณจะไม่เห็นอะไรนอกจาก background agent ที่ทำงานอยู่เบื้องหลัง

346
00:40:03,402 --> 00:40:10,702
[P55] โอเค แต่คุณสามารถดำดิ่งและโฟกัสไปที่เซสชันเฉพาะนี้ได้

347
00:40:10,702 --> 00:40:17,260
และ ใช่ นั่นเป็นสิ่งที่เจ๋งมาก ที่ได้เห็นว่าสิ่งต่างๆ

348
00:40:17,260 --> 00:40:24,684
เดินหน้าไปยังไง นี่คือสิ่งที่คุณอาจไม่รู้ ถ้าคุณยังไม่เคยใช้

349
00:40:24,684 --> 00:40:31,118
sub agents แต่สิ่งที่น่าสนใจหลักของการใช้ sub agents

350
00:40:31,118 --> 00:40:37,800
คือ พวกมันทำงานใน code session ของตัวเอง ภายใน context

351
00:40:37,800 --> 00:40:43,986
ของตัวเอง เอาล่ะ junior dev ดูเหมือนทำงานเสร็จแล้ว

352
00:40:43,986 --> 00:40:50,792
มาดูกันว่าเกิดอะไรขึ้นต่อ เราน่าจะได้รับคำแนะนำบางอย่าง

353
00:40:50,792 --> 00:40:56,855
ว่าเราจะเห็น testimonial ใหม่นั้นได้หรือไม่ [P56]

354
00:40:56,855 --> 00:41:02,670
เรามารอสักครู่ และ ดูว่าเกิดอะไรขึ้น ถ้ามีคำถาม

355
00:41:02,670 --> 00:41:09,970
ถามได้เลยนะครับ เรามีกันไม่กี่คนในเซสชันนี้ คุณสามารถถามได้

356
00:41:09,970 --> 00:41:16,900
ถ้ามีอะไรไม่ชัดเจน เอาล่ะ รอแป๊บนึงตรงนี้ เรากำลังใช้สอง

357
00:41:16,900 --> 00:41:23,581
sub agents ตามที่ผมโชว์ให้ดู ซึ่งนิยามโดยไฟล์ markdown

358
00:41:23,581 --> 00:41:29,892
สองไฟล์นี้ เราสามารถดูพรีวิวของอินเทอร์แอคชันนี้ได้

359
00:41:29,892 --> 00:41:38,677
อย่างที่เห็น เราใช้ junior developer บลาๆ บลาๆ งานของคุณคือทำงานให้เร็ว

360
00:41:38,677 --> 00:41:44,740
และ implement ตามที่ถูกขอเป๊ะ [P57] ในระหว่างนั้น

361
00:41:44,740 --> 00:41:50,926
อย่างที่เห็น senior dev กำลังรีวิว stage front end

362
00:41:50,926 --> 00:41:57,732
อยู่ ตอนนี้ senior กำลังทำ QA ของตัวเอง ถ่าย screenshot

363
00:41:57,732 --> 00:42:04,166
พรีวิว และ เปรียบเทียบเคียงข้างกัน กับกรอบอ้างอิงจาก

364
00:42:04,166 --> 00:42:12,209
Senja โอเค เพื่อให้รู้ไว้ สิ่งที่มันทำคือ ใช้เครื่องมือที่ชื่อว่า

365
00:42:12,209 --> 00:42:18,271
Playwright ซึ่งให้คุณรันเบราว์เซอร์ เพื่อทดสอบงาน

366
00:42:18,271 --> 00:42:25,077
front end และ จริงๆ แล้ว senior dev กำลังใช้ Playwright

367
00:42:25,077 --> 00:42:31,511
เพื่อเปรียบเทียบผลลัพธ์ที่มันสร้าง กับเป้าหมายตรงนี้

368
00:42:31,511 --> 00:42:38,440
[P58] เราก้าวหน้าไปแล้ว และ จริงๆ แล้วสิ่งที่เกิดขึ้นคือ

369
00:42:38,440 --> 00:42:46,112
junior dev ส่งต่องาน QA ให้ senior dev แล้ว ตรงนี้ผมไม่ได้โชว์

370
00:42:46,112 --> 00:42:52,174
loops โดยตรง แต่แค่โชว์ว่างานถูกวางซ้อนกันทีละงาน

371
00:42:52,174 --> 00:42:57,990
senior dev กำลังเข้าคิว front end ในระหว่างนั้น

372
00:42:57,990 --> 00:43:05,785
ผมสงสัยว่า เราจะเห็นมันได้ที่ไหนสักแห่งไหม บางทีสิ่งที่ทำได้คือ

373
00:43:05,785 --> 00:43:11,724
คุณสามารถกดคำสั่ง ที่ให้คุณถามคำถามระหว่างทางได้

374
00:43:11,724 --> 00:43:20,509
[P59] หน้าอะไร ที่โปรโตไทป์นี้พร้อมใช้งาน? ผมไม่รู้ว่าทุกคนรู้จักคำสั่ง

375
00:43:20,509 --> 00:43:27,562
slash นี้หรือเปล่า แต่มันมีประโยชน์มาก ถ้าคุณอยากถามคำถาม

376
00:43:27,562 --> 00:43:35,729
โดยไม่ต้องหยุดงานที่กำลังดำเนินอยู่ เอาล่ะ มาดูกันว่ามันทำงานยังไง

377
00:43:35,729 --> 00:43:44,390
และ อย่างที่เห็น เรามีสิ่งที่ดูเหมือนจะคล้ายกับดีไซน์ที่เรามีตรงนี้มาก

378
00:43:44,390 --> 00:43:50,206
และ สิ่งที่เกิดขึ้นคือ นี่คือ testimonials ปลอม

379
00:43:50,206 --> 00:43:56,021
โอเค พวกนี้ไม่ใช่ testimonials ของนักเรียน Vibe

380
00:43:56,021 --> 00:44:02,826
Coding Academy จริงๆ [P60] พวกนี้คือ mock data อีกครั้ง

381
00:44:02,826 --> 00:44:09,261
ข้อมูลจริงมาจาก testimonials จริง ที่ผมมีอยู่ในบัญชี

382
00:44:09,261 --> 00:44:15,323
Senja ของผม และ เราควรจะเห็นมัน ตอนท้ายของเดโมนี่

383
00:44:15,323 --> 00:44:22,747
เราจะได้เห็นว่ามันจะออกมาเป็นยังไง บางทีมันอาจจะดึงสิ่งต่างๆ

384
00:44:22,747 --> 00:44:30,171
ขึ้นมาที่เราไม่เห็นในทันที จะน่าสนใจที่จะดูว่ามันทำอะไรออกมา

385
00:44:30,171 --> 00:44:36,729
เอาล่ะ มันกำลังเพิ่มโค้ดอยู่ แต่โค้ดนี้ใช้สำหรับการทำ

386
00:44:36,729 --> 00:44:46,999
QA ใช่แล้ว ใช่ [P61] รออีกสักครู่ตรงนี้ดีกว่า สิ่งที่มักใช้เวลานานกว่าคือการตรวจสอบ

387
00:44:46,999 --> 00:44:54,300
front end เพราะ เมื่อพูดถึง อ้อ ขอโทษที ผมไม่เห็นว่ามีคำถาม

388
00:44:54,300 --> 00:45:00,857
ขอโทษ Carlo ที่พลาดคำถามของคุณ ขอตอบทันทีเลย คำถามคือ

389
00:45:00,857 --> 00:45:08,281
อันนี้รันด้วย extension ได้ไหม หรือ ใช้ในเทอร์มินัลเท่านั้น?

390
00:45:08,281 --> 00:45:14,344
ใช่ ได้แน่นอน มันรันด้วย extension ได้ มันรันด้วย

391
00:45:14,344 --> 00:45:20,160
Claude Code desktop ได้ ไม่มีข้อจำกัดอะไร [P62]

392
00:45:20,160 --> 00:45:26,718
เหตุผลที่ผมใช้ Claude Code ตรงนี้ ก็เพราะ ด้วย Claude

393
00:45:26,718 --> 00:45:35,627
Code มันง่ายกว่ามาก ในการจัดการกับ screenshot มันอาจฟังดูงี่เง่านิดหน่อย

394
00:45:35,627 --> 00:45:42,184
แต่ด้วย Claude Code คุณสามารถวางลิงก์ไปยังรูปภาพเฉพาะ

395
00:45:42,184 --> 00:45:48,495
ณ ตำแหน่งเฉพาะใน prompt ได้ ซึ่งดีกว่า เพราะ คุณส่ง

396
00:45:48,495 --> 00:45:56,043
screenshot ไปยังจุดที่คุณต้องการใช้มันจริงๆ นี่คือเหตุผลหนึ่ง

397
00:45:56,043 --> 00:46:02,848
[P63] และ ผมเกรงว่า อย่างน้อยในเดโมนี่ ถ้าผมไม่แม่นยำพอ

398
00:46:02,848 --> 00:46:08,663
กับ prompt ผมอาจพลาดบางอย่างไป เอาล่ะ มันบอกว่า

399
00:46:08,663 --> 00:46:14,850
senior กำลังทำ QA ของตัวเอง ถ่าย screenshot พรีวิว

400
00:46:14,850 --> 00:46:21,779
และ เปรียบเทียบเคียงข้างกัน ผล verdict ผ่าน อย่างที่เห็น

401
00:46:21,779 --> 00:46:28,337
front end ผ่านในครั้งแรก senior ยืนยันด้วย screenshot

402
00:46:28,337 --> 00:46:34,153
geometry overlay flip with yellow highlight และ

403
00:46:34,153 --> 00:46:40,092
side-by-side fidelity ตรงกันทั้งหมด [P64] ตอนนี้

404
00:46:40,092 --> 00:46:46,155
มันส่งต่อไปยัง stage สอง ซึ่งก็คือการสร้างฟีเจอร์

405
00:46:46,155 --> 00:46:51,970
back end ต่อ เมื่อ front end ผ่านการตรวจสอบแล้ว

406
00:46:51,970 --> 00:46:57,786
และ นี่คือจุดที่มันทรงพลังมาก คุณสามารถปรับแต่ง

407
00:46:57,786 --> 00:47:06,447
agent ของคุณได้ตามที่ต้องการ หมายความว่า ยิ่งคุณให้รายละเอียดเกี่ยวกับ

408
00:47:06,447 --> 00:47:12,510
agents เหล่านี้ เกี่ยวกับข้อกำหนดเฉพาะของคุณในแง่

409
00:47:12,510 --> 00:47:21,790
QA มากเท่าไหร่ ยิ่งดี และ ตรงนี้ ไม่มีขีดจำกัด สำหรับทีมแบบที่คุณจะสร้างได้

410
00:47:21,790 --> 00:47:29,585
[P65] โดยพื้นฐาน คุณต้องคิดถึงการตั้งค่านี้ เหมือนกับว่าคุณเป็น

411
00:47:29,585 --> 00:47:35,648
head of product หรือ lead developer หรือ CTO เช่น

412
00:47:35,648 --> 00:47:41,711
คุณอยากจ้างคนที่มีความเชี่ยวชาญเฉพาะเจาะจงมาก และ

413
00:47:41,711 --> 00:47:47,898
อยากให้พวกเขาทำงานร่วมกันอย่างมีประสิทธิภาพ เอาล่ะ

414
00:47:47,898 --> 00:47:53,713
Mariam ถามว่า "agent ของคุณมีบัญชีใน Playwright

415
00:47:53,713 --> 00:48:02,127
เพื่อรันเทสต์อัตโนมัติไหม?" ใช่ มี มันมีบัญชีสำหรับรันเทสต์อัตโนมัติ

416
00:48:02,127 --> 00:48:07,943
[P66] คุณเคยใช้เครื่องมือแบบนี้มาก่อนไหม Mariam

417
00:48:07,943 --> 00:48:13,882
หรือ คุณคุ้นเคยกับเครื่องมือแบบนี้ไหม? ไม่เป็นไร

418
00:48:13,882 --> 00:48:19,697
ถ้ายังไม่รู้ เดี๋ยวเราค่อยหาคำตอบกันทีหลัง โอเค

419
00:48:19,697 --> 00:48:26,008
จริงๆ แล้วขั้นตอน back end กำลังดำเนินอยู่ ดูเหมือน

420
00:48:26,008 --> 00:48:31,947
senior dev กำลังรีวิว stage back end อยู่ senior

421
00:48:31,947 --> 00:48:38,134
กำลังรีวิว backend API conversion fit adapter บลาๆ

422
00:48:38,134 --> 00:48:43,949
บลาๆ โดยพื้นฐาน มันบอกว่า มันสร้าง API endpoint

423
00:48:43,949 --> 00:48:50,507
ใหม่ หรือ ใช้ API endpoint ที่มีอยู่แล้ว ที่เป็นไปตาม

424
00:48:50,507 --> 00:48:59,540
best practices ของเรา [P67] ใช่ นี่คือสิ่งที่มันกำลังทำอยู่ในตอนนี้แน่นอน

425
00:48:59,540 --> 00:49:05,850
เอาล่ะ review mode stage under review back end บลาๆ

426
00:49:05,850 --> 00:49:12,284
บลาๆ โอเค โอเค ในระหว่างนี้ ผมจะดำเนินการนำเสนอต่อไป

427
00:49:12,284 --> 00:49:19,832
มีอะไรที่ผมอยากพูดถึงอีก? โดยพื้นฐาน ทำไมการตั้งค่านี้ถึงชนะ?

428
00:49:19,832 --> 00:49:27,256
เพราะ อย่างแรก มันถูกกว่า หมายความว่า ปริมาณงานส่วนใหญ่รันบน

429
00:49:27,256 --> 00:49:34,061
Sonnet ปริมาณงานส่วนใหญ่ของงานโดยพื้นฐาน [P68] ในขณะที่

430
00:49:34,061 --> 00:49:42,475
frontier model ใช้สำหรับงานเฉพาะเจาะจงเท่านั้น ซึ่งก็คือการเขียนสเปก

431
00:49:42,475 --> 00:49:48,538
การแบ่งงาน และ การทำ QA โอเค คุณยังใช้ token อยู่

432
00:49:48,538 --> 00:49:54,477
แต่คุณใช้ token อย่างชาญฉลาดขึ้น ซึ่งหมายความว่า

433
00:49:54,477 --> 00:50:01,035
คุณใช้ประโยชน์จากการสมัครสมาชิก Anthropic หรือ Claude

434
00:50:01,035 --> 00:50:10,934
ของคุณได้ดีขึ้น และ สิ่งที่น่าสนใจอีกอย่างคือ การตั้งค่าแบบนี้เชื่อถือได้มากกว่า

435
00:50:10,934 --> 00:50:16,997
เพราะ คุณมีโมเดลที่ดีที่สุด ในขั้นตอนที่ leverage

436
00:50:16,997 --> 00:50:27,143
สูงที่สุด ซึ่งก็คือสเปก เพราะ ทุกอย่างในการเขียนโค้ดหมุนรอบความแม่นยำของสเปกของคุณ

437
00:50:27,143 --> 00:50:35,062
[P69] และ ใช่ สิ่งที่ฉลาดมากอีกอย่างเกี่ยวกับการตั้งค่าแบบนี้คือ

438
00:50:35,062 --> 00:50:41,991
คุณใช้สิ่งที่เราเรียกว่า context engineering หมายความว่า

439
00:50:41,991 --> 00:50:47,930
แทนที่จะมี agent ตัวเดียว ทำงานบางอย่าง และ เติม

440
00:50:47,930 --> 00:50:56,963
context ให้เต็ม เรามี agents เฉพาะทาง ที่โฟกัสกับงานของตัวเองอย่างเฉียบคม

441
00:50:56,963 --> 00:51:02,778
[P70] และ คุณรู้ไหม agents ทำงานเหมือนกับมนุษย์

442
00:51:02,778 --> 00:51:10,573
หมายความว่า ยิ่งมี context มากเท่าไหร่ โอเค มันดีสำหรับเราที่มี

443
00:51:10,573 --> 00:51:17,008
context บ้างเพื่อทำงาน แต่ถ้าเรามี context มากเกินไป

444
00:51:17,008 --> 00:51:25,422
เราอาจหลงทาง และ ทำงานได้ไม่ดีอย่างที่ต้องการ แล้วเราอยู่ตรงไหนแล้ว?

445
00:51:25,422 --> 00:51:31,732
ดูเหมือน stage back end ผ่านแล้ว senior ยืนยัน root

446
00:51:31,732 --> 00:51:39,156
บลาๆ บลาๆ นี่คือเรื่องเทคนิค ที่เราไม่ต้องลงรายละเอียดตอนนี้

447
00:51:39,156 --> 00:51:45,219
และ ตอนนี้เรากำลังไปสู่ stage เชื่อมต่อ (wire up)

448
00:51:45,219 --> 00:51:51,282
[P71] และ นั่นหมายความว่า เราจะเชื่อมต่อ back end

449
00:51:51,282 --> 00:51:57,716
ใหม่ กับ front end ใหม่ที่เราตรวจสอบแล้ว ผมพูดว่าเรา

450
00:51:57,716 --> 00:52:03,531
แต่จริงๆ แล้ว เมื่อไหร่ที่คุ้มค่าที่จะใช้ loops

451
00:52:03,531 --> 00:52:12,193
แบบนี้? สำหรับผม มีหลายเกณฑ์ ด้วยเหตุนี้ มันสมเหตุสมผลมากสำหรับงานใหญ่

452
00:52:12,193 --> 00:52:19,493
ผมว่า สำหรับฟีเจอร์เล็กๆ แบบนี้ อาจจะเกินความจำเป็นนิดหน่อย

453
00:52:19,493 --> 00:52:27,536
แต่คุณรู้ไหม ผมใช้มัน เพราะ ผมอยากโชว์ตัวอย่างที่เป็นรูปธรรมให้ดู

454
00:52:27,536 --> 00:52:35,578
[P72] แน่นอน มันสมเหตุสมผลมาก เมื่อคุณต้องทำงานแบบนี้ให้อัตโนมัติ

455
00:52:35,578 --> 00:52:42,508
เพราะ ผมไม่ค่อยโอเค กับการทำให้ทุกอย่างเป็นอัตโนมัติด้วย

456
00:52:42,508 --> 00:52:49,932
AI ผมยังคิดว่า ควรมีสัมผัสของมนุษย์แทรกอยู่ตลอดโปรเจกต์ต่างๆ

457
00:52:49,932 --> 00:52:56,118
แต่สำหรับงานเฉพาะแบบนี้ ผมไม่ต้องเข้าไปยุ่ง ยกเว้น

458
00:52:56,118 --> 00:53:02,552
ถ้าผมไม่ไว้ใจ senior dev ของผม ว่าจะทำ QA หน้า front

459
00:53:02,552 --> 00:53:10,966
end ได้แม่นยำมากพอ แต่สำหรับงานแบบนี้ อย่างน้อยในการสร้างเวอร์ชันแรก

460
00:53:10,966 --> 00:53:18,390
มันโอเคที่จะทำงานให้อัตโนมัติเต็มรูปแบบ [P73] มันยังใช้ได้ดี

461
00:53:18,390 --> 00:53:25,072
เมื่อคุณมีเกณฑ์ความสำเร็จที่ชัดเจน ที่สามารถตรวจสอบได้

462
00:53:25,072 --> 00:53:31,011
และ เกณฑ์นั้นไม่ใช่ ในกรณีของเรามันยังโอเค เพราะ

463
00:53:31,011 --> 00:53:36,950
front end ตรวจสอบได้ แม้มันจะค่อนข้าง subjective

464
00:53:36,950 --> 00:53:44,251
สำหรับ agent แต่ก็มีบางกรณี ที่คุณต้องให้มนุษย์ตรวจสอบจริงๆ

465
00:53:44,251 --> 00:53:50,314
และ โดยพื้นฐาน เมื่อความเชื่อถือได้ (reliability)

466
00:53:50,314 --> 00:53:56,995
มีความสำคัญ เมื่อคุณอยากใช้เวลา ให้โมเดลระดับ frontier

467
00:53:56,995 --> 00:54:02,811
ตรวจสอบเป้าหมาย เพราะ คุณต้องการความเชื่อถือได้

468
00:54:02,811 --> 00:54:08,874
นั่นหมายความว่า คุณอยู่ในกรณีที่คุ้มค่าจริงๆ โอเค

469
00:54:08,874 --> 00:54:15,926
[P74] และ คุณควรข้ามมันไป ถ้าคุณมีงานเล็กๆ ทำครั้งเดียวจบ

470
00:54:15,926 --> 00:54:21,742
(one-shot) ไม่มีนิยามของความสำเร็จที่ตรวจสอบได้

471
00:54:21,742 --> 00:54:28,671
และ ถ้าค่าใช้จ่ายในการประสานงาน สูงกว่าสิ่งที่ประหยัดได้

472
00:54:28,671 --> 00:54:34,981
ขอเช็คดูว่าเราอยู่ตรงไหนแล้ว เอาล่ะ ดูเหมือน junior

473
00:54:34,981 --> 00:54:43,767
dev สร้าง wire up เสร็จแล้ว ดูเหมือนเรากำลังมุ่งหน้าไปสู่ขั้นตอนสุดท้าย

474
00:54:43,767 --> 00:54:49,829
มาดูกันว่า มีอะไรถูก implement จริงหรือเปล่า โอเค

475
00:54:49,829 --> 00:54:56,140
เรามี error ตรงนี้ ใช่ ดูเหมือนเซิร์ฟเวอร์หยุดทำงาน

476
00:54:56,140 --> 00:55:02,945
ซึ่งไม่เป็นไร เพราะ พวกเขายังทำงานอยู่ [P75] มันยังแสดง

477
00:55:02,945 --> 00:55:09,132
error อยู่ ซึ่งโอเคสำหรับตอนนี้ มีอะไรจะพูดถึงอีก?

478
00:55:09,132 --> 00:55:15,319
แน่นอน loops คุณจะได้ยินคำนี้บ่อยมาก ในงานวิศวกรรม

479
00:55:15,319 --> 00:55:21,753
โดยพื้นฐาน การสร้างฟีเจอร์ใหม่ การสร้างผลิตภัณฑ์ใหม่

480
00:55:21,753 --> 00:55:27,816
แต่จริงๆ แล้วมันใช้ได้กับงานทุกประเภท ที่คุณทำกับ

481
00:55:27,816 --> 00:55:36,477
Claude [P76] โดยพื้นฐาน ถ้าคุณเขียนคอนเทนต์ ถ้าคุณเขียนบล็อกโพสต์เพื่อ

482
00:55:36,477 --> 00:55:43,035
SEO ถ้าคุณทำโฆษณา ถ้าคุณอยากปล่อยฟีเจอร์จนกว่า metric

483
00:55:43,035 --> 00:55:48,850
ตัวเดียวจะขยับ คุณอยู่ในกรณีการใช้งาน ที่ loops

484
00:55:48,850 --> 00:55:55,408
สมเหตุสมผลมาก และ ตรงนี้ ผมโชว์ loop ที่คุณรันด้วยมือ

485
00:55:55,408 --> 00:56:01,224
และ ที่คุณอยากให้การตรวจสอบเกิดขึ้นแบบสดๆ [P77]

486
00:56:01,224 --> 00:56:07,782
แต่คุณสามารถสร้าง loops ที่รันตามตารางเวลา (schedule)

487
00:56:07,782 --> 00:56:14,463
ได้ และ ให้การตรวจสอบรันตามตารางเวลาด้วย เช่น สมมติว่า

488
00:56:14,463 --> 00:56:21,392
คุณมี agent ที่จะเขียนคอนเทนต์บล็อกของคุณ ณ จุดเวลาหนึ่ง

489
00:56:21,392 --> 00:56:28,074
ผลลัพธ์จากการเขียนบล็อกโพสต์ เกี่ยวกับจำนวน impression

490
00:56:28,074 --> 00:56:34,137
ใน SEO โดยทั่วไป ต้องใช้เวลาอย่างน้อยหนึ่งสัปดาห์

491
00:56:34,137 --> 00:56:41,808
ถึงจะเห็นผลแรกจากการกระทำนี้ และ นี่คือจุดที่การตั้งเวลาสำหรับ

492
00:56:41,808 --> 00:56:48,243
reviewer ด้วย ไม่ใช่แค่ executor ก็สมเหตุสมผลเช่นกัน

493
00:56:48,243 --> 00:56:56,904
[P78] นี่คือกรณีการใช้งานที่ซับซ้อนกว่านั้นมาก ที่ผมไม่โชว์ให้ดูวันนี้

494
00:56:56,904 --> 00:57:02,719
แต่ เมื่อคุณเข้าใจวิธีสร้างการตั้งค่าแบบนี้แล้ว

495
00:57:02,719 --> 00:57:12,371
โดยพื้นฐาน ท้องฟ้าคือขีดจำกัด และ คุณสามารถสร้างสิ่งที่ซับซ้อนกว่านี้ได้อีกมาก

496
00:57:12,371 --> 00:57:19,300
ตอนนี้ senior กำลังรัน QA สุดท้าย บนหน้าแรกสด ด้วยข้อมูล

497
00:57:19,300 --> 00:57:26,352
Senna จริง ตรวจสอบ overflow ฯลฯ ฯลฯ ใช่ ส่วน testimonials

498
00:57:26,352 --> 00:57:36,870
ไม่ถูกแตะต้อง บลาๆ บลาๆ โอเค รออีกไม่กี่วินาที มาดูกันว่ามีอะไรพร้อมใช้งานแล้วหรือยัง

499
00:57:36,870 --> 00:57:44,789
โอเค ดูเหมือนมันยังไม่ได้ implement [P79] มันยังเป็นงานระหว่างทำ

500
00:57:44,789 --> 00:57:52,089
(work in progress) ลองดูพรีวิวหน่อยดีกว่า และ ในระหว่างนั้น

501
00:57:52,089 --> 00:57:59,266
เราเห็นว่า wire up ทำงานได้จริง เพราะ สิ่งที่เราเห็นตรงนี้

502
00:57:59,266 --> 00:58:05,576
คือข้อมูลจริงจากนักเรียนจริงของ Vibe Coding Academy

503
00:58:05,576 --> 00:58:11,392
ตรงนี้ โอเค พวกนี้คือ testimonials จริง เช่น มี

504
00:58:11,392 --> 00:58:18,073
testimonial จาก Mario ตรงนี้ อันนี้มีอยู่บน production

505
00:58:18,073 --> 00:58:24,260
จริงๆ อย่างตรงนี้ โอเค พวกนี้คือ testimonials จริง

506
00:58:24,260 --> 00:58:32,055
และ ตอนนี้มันไลฟ์แล้ว [P80] ปัญหาที่เหลืออยู่เพียงอย่างเดียวคือ

507
00:58:32,055 --> 00:58:37,994
testimonials ตรงนี้ มีแค่ในหน้าพรีวิวนี้เท่านั้น

508
00:58:37,994 --> 00:58:44,057
และ ตอนนี้เราอยากย้ายมัน ไปยังตำแหน่งเฉพาะตรงนั้น

509
00:58:44,057 --> 00:58:50,368
มาดูกันว่ามันจะเป็นยังไง เอาล่ะ ในขณะที่มันยังทำงาน

510
00:58:50,368 --> 00:58:59,029
QA อยู่ ไปที่ขั้นตอนสุดท้ายกัน อ้อ จริงๆ แล้วผมพูดสิ่งที่อยากพูดจบแล้ว

511
00:58:59,029 --> 00:59:06,082
โดยพื้นฐาน การวางแผน (planning) บวกการลงมือทำ (executing)

512
00:59:06,082 --> 00:59:12,145
และ การแบ่งงานระหว่างสองบทบาทนี้ มันสมเหตุสมผลมาก

513
00:59:12,145 --> 00:59:18,579
[P81] และ ถ้าคุณให้พวกเขาทำงานร่วมกันเป็น loop ได้ดี

514
00:59:18,579 --> 00:59:25,508
คุณจะได้ผลลัพธ์ที่ดีกว่า แน่นอน ด้วยค่าใช้จ่ายที่ถูกกว่า

515
00:59:25,508 --> 00:59:32,190
หรือ อย่างน้อยก็ใช้ token น้อยลง โดยพื้นฐาน ถ้าอยากให้

516
00:59:32,190 --> 00:59:39,614
feedback คุณสามารถสแกน QR code ได้ และ ผมยินดีมากที่จะรับฟัง

517
00:59:39,614 --> 00:59:46,914
feedback ของคุณ แน่นอน ผมขอโทษอีกครั้ง สำหรับปัญหาทางเทคนิค

518
00:59:46,914 --> 00:59:53,101
เห็นว่าบางคนอยากเข้าร่วม แต่ผมว่า พวกเขากลับไปแล้ว

519
00:59:53,101 --> 00:59:59,782
เข้าร่วมไม่สำเร็จ [P82] แต่ ใช่ ผมหวังว่ามันมีประโยชน์

520
00:59:59,782 --> 01:00:08,196
และ นี่คือเวลาสำหรับคำถามทั้งหมดของคุณ ถ้ามี คุณสามารถพูดออกมาได้เลย

521
01:00:08,196 --> 01:00:14,506
และ ถามผมได้โดยตรง ถ้าคุณคิดว่ามันสมเหตุสมผล เอาล่ะ

522
01:00:14,506 --> 01:00:21,559
ในระหว่างที่ให้ทุกคนคิดคำถามใหม่ๆ ดูเหมือนว่ามันทำงานแล้ว

523
01:00:21,559 --> 01:00:30,716
ดูเหมือนด่านสุดท้ายผ่านแล้ว loop เสร็จสมบูรณ์ หน้าแรกแบบไลฟ์ตอนนี้เรนเดอร์

524
01:00:30,716 --> 01:00:37,026
flip cards สไตล์ Senja ด้วยข้อมูล testimonials จริง

525
01:00:37,026 --> 01:00:43,460
บลาๆ บลาๆ ฯลฯ ฯลฯ มันยังไม่ได้ commit แต่เราดูได้ที่

526
01:00:43,460 --> 01:00:51,379
localhost:3000 [P83] โอเค มาดูกันตรงนี้ โอเค ดูเหมือนมันไม่ทำงาน

527
01:00:51,379 --> 01:00:59,051
ขอโทษที ดูเหมือนมันไม่ได้ implement จริง เรามีเวอร์ชันเดิมอยู่

528
01:00:59,051 --> 01:01:06,722
ซึ่งอาจเป็นปัญหา cache หรือ อาจเป็นสิ่งที่ AI ไม่ได้สังเกตเห็น

529
01:01:06,722 --> 01:01:14,641
บนเบราว์เซอร์ที่เราใช้ แต่ ขอให้ Claude Code ประเมินปัญหานี้ก่อน

530
01:01:14,641 --> 01:01:20,828
[P84] ผมจะเปิดในโหมด incognito เพื่อดูว่าเป็นปัญหา

531
01:01:20,828 --> 01:01:27,509
cache หรือเปล่า โอเค มันแปลก เพราะ ผมไม่เห็นมันอีกแล้ว

532
01:01:27,509 --> 01:01:33,696
ยังไงก็ตาม ดูเหมือนมีอะไรเกี่ยวข้องกับ cache เพราะ

533
01:01:33,696 --> 01:01:39,511
ตรงนี้ เมื่ออยู่ใน incognito มันกำลังทำงานจริงๆ

534
01:01:39,511 --> 01:01:45,451
ใช่ ดูเหมือนมันกำลังทำการแทนที่ตรงนี้ คุณเห็นไหม

535
01:01:45,451 --> 01:01:52,751
และ นั่นคือเหตุผลที่ผมอยากโชว์เดโมแบบสด [P85] คุณเห็นไหมว่า

536
01:01:52,751 --> 01:01:58,814
มันไม่จำเป็นต้องทำงานสำเร็จในครั้งแรก หมายความว่า

537
01:01:58,814 --> 01:02:06,485
การ implement การตั้งค่า loops ที่สมบูรณ์ ต้องใช้การลองหลายรอบ

538
01:02:06,485 --> 01:02:13,662
และ ตรงนี้ ผลลัพธ์จากการพูดคุยนี้คือ โอเค บางทีผมต้องขอให้

539
01:02:13,662 --> 01:02:19,477
senior dev คำนึงถึงคำแนะนำที่ให้ไว้มากขึ้น หรือ

540
01:02:19,477 --> 01:02:26,901
อย่างน้อย ตรวจสอบให้แน่ใจว่า เราไม่พึ่งพาแค่พรีวิวของฟีเจอร์

541
01:02:26,901 --> 01:02:33,336
แต่ตรวจสอบให้แน่ใจว่า เราทำ QA ฟีเจอร์ตามสเปกตั้งต้น

542
01:02:33,336 --> 01:02:39,770
และ นี่อาจเป็นความผิดพลาดของผมเอง [P86] ผมน่าจะขอให้

543
01:02:39,770 --> 01:02:47,317
senior dev ให้ผมตรวจสอบสเปกก่อน เพื่อให้แน่ใจว่าเราเห็นตรงกัน

544
01:02:47,317 --> 01:02:54,370
ในโค้ดเดียวกัน เอาล่ะ มาดูตรงนี้กัน หวังว่ามันจะทำงานแล้ว

545
01:02:54,370 --> 01:03:01,423
เอาล่ะ ผมไม่เห็นมันอีกแล้ว โอเค ผมไม่แน่ใจว่าเกิดอะไรขึ้น

546
01:03:01,423 --> 01:03:07,239
เพราะ พรีวิว flip cards ไม่มีอยู่อีกแล้ว เอาล่ะ

547
01:03:07,239 --> 01:03:14,415
ขอ push มันตรงนี้ เราไม่เห็นมันอีกแล้ว ใช่ มันค่อนข้างแปลก

548
01:03:14,415 --> 01:03:20,973
พูดตรงๆ [P87] สมมติฐานของผมคือ มีบางอย่างที่ใช้ไม่ได้

549
01:03:20,973 --> 01:03:26,789
กับวิดเจ็ต Senja เพราะ ผมเคยใช้วิดเจ็ตจาก Senja

550
01:03:26,789 --> 01:03:33,223
และ มันอาจพังไป หรือ กับตัวตั้งค่า แต่ให้มันซ่อมก่อน

551
01:03:33,223 --> 01:03:39,286
โอเค มาดูกันว่ามันสรุปอะไรออกมา และ ไปกันเลย โอเค

552
01:03:39,286 --> 01:03:45,596
ในที่สุด เราก็มี ticker ตรงนี้ และ ตอนนี้เรามันแล้ว

553
01:03:45,596 --> 01:03:51,783
และ เราสามารถ push มันขึ้น production ได้ โอเค ใช่

554
01:03:51,783 --> 01:03:59,083
โชคร้ายหน่อย ที่ไม่สามารถ push และ ทำให้สำเร็จได้ในครั้งแรก

555
01:03:59,083 --> 01:04:05,393
[P88] แต่ อีกครั้ง สิ่งที่ผมจะทำคือ ปรับปรุง junior

556
01:04:05,393 --> 01:04:11,456
dev และ senior dev เพื่อให้ error ในแง่ QA พวกนี้

557
01:04:11,456 --> 01:04:19,375
ไม่เกิดขึ้นอีก โอเค และ คุณเห็นไหมว่า ทีมของคุณพัฒนาขึ้นได้ยังไง

558
01:04:19,375 --> 01:04:26,057
โดยการหาว่าอะไรที่ขาดหายไป และ ทำให้แน่ใจว่า ครั้งหน้า

559
01:04:26,057 --> 01:04:33,728
มันจะไม่เกิดขึ้นอีก และ นี่คือวิธีเดียวกับที่คุณพัฒนาทีมของคุณ

560
01:04:33,728 --> 01:04:41,895
เพื่อที่ในระยะยาว ทุกคนพัฒนาขึ้นเรื่อยๆ และ ผลลัพธ์ก็ดีขึ้นเรื่อยๆ

561
01:04:41,895 --> 01:04:47,834
[P89] ใช่ นั่นคือทั้งหมดสำหรับผม ในเว็บบินาร์นี้

562
01:04:47,834 --> 01:04:57,114
มันยาวกว่าที่คาดไว้เล็กน้อย ขอโทษด้วย และ ขอโทษสำหรับปัญหาทางเทคนิคอีกครั้ง

563
01:04:57,114 --> 01:05:02,930
แต่ ขอบคุณมาก สำหรับการมีส่วนร่วมและคำถามของคุณ

564
01:05:02,930 --> 01:05:08,992
ใช่ ได้โปรดบอกผมด้วย ถ้าคุณคิดว่า feedback แบบนี้

565
01:05:08,992 --> 01:05:17,035
มันน่าสนใจมาก เช่น feedback ของคุณ Mariam เพื่อเป็นการเตือนความจำ

566
01:05:17,035 --> 01:05:23,098
broadcast เวอร์ชันนี้ จะถูกแปลงเป็นบทความฉบับเต็ม

567
01:05:23,098 --> 01:05:31,141
ที่คุณจะได้รับตามปกติในอินบ็อกซ์ของคุณ ภายในพรุ่งนี้ตอนบ่ายสองโมง

568
01:05:31,141 --> 01:05:37,327
[P90] และ แน่นอน ถ้าคุณคิดว่า และ ถ้าผมมี feedback

569
01:05:37,327 --> 01:05:44,257
แบบคุณ Mariam ผมจะจัดเดโมแบบนี้ ทุกสองสัปดาห์ด้วยเช่นกัน

570
01:05:44,257 --> 01:05:50,443
มันน่าสนใจมาก ที่ได้พูดคุยกับทุกคน และ ได้เจอชุมชน

571
01:05:50,443 --> 01:05:56,259
ดังนั้น ขอบคุณอีกครั้ง และ ขอให้ทุกคนมีวันที่ดี

572
01:05:56,259 --> 01:06:02,693
หรือ ค่ำคืนที่ดี ไม่ว่าคุณจะอยู่ที่ไหน และ ขอบคุณมาก

573
01:06:02,693 --> 01:06:03,559
บาย บาย