Вайб кодинг с нуля / 2 Часть из 5 — Transcript

Full transcript

1. 0:00В прошлой части мы собрали книгу и перо. Сейчас  будет тот самый момент, ради которого всё
2. 0:05затевалось. Я скажу перу одну фразу, и оно само  напишет рабочую программу без единой строчки кода
3. 0:12руками. Итак, это канал Маяк. Вторая часть  серии о вайпкодинге с нуля. Подпишись,
4. 0:18чтобы идти по маршруту дальше. Погнали. Коротко  напомню расклад из предыдущего уровня. Помните
5. 0:23аналогию? Книга - это VS-код. Она открыта, и  туда будет писаться наш проект. А перо - это код,
6. 0:30который будет писать внутри этой книги. Прежде  чем начнём наши первые шаги вайп-кодера, надо
7. 0:35разобраться с самой книгой, со средой разработки.  Как я говорил, книги бывают разные. Сейчас на
8. 0:42экране вы видите три примера: книга Cloud CД,  книга Visual Studio Code и книга Антигравити.
9. 0:49Все они среды разработки. Функционалу у каждой  похожий, отличается только интерфейс. Поэтому,
10. 0:55прежде чем нам перейти к самим книгам, нам  нужно разобраться с самим функционалом,
11. 0:59как это вообще работает, хочу предложить одну  аналогию. Наверняка каждый знает, как устроена
12. 1:06обычная папка на компьютере. Мы открываем папку и  слева видим столбец, проводник. В нём лежат папки
13. 1:13и файлы, которые можно открыть. И прямо здесь вот  вот вот в этом окне просмотра мы можем посмотреть,
14. 1:20что было внутри этой папки. Думаю, этот функционал  понятен всем. Так вот, в среде разработки всё
15. 1:27устроено аналогично. Для примера возьму Visual  Studio CД. Почему именно его? Поняв VS-код,
16. 1:33вы поймёте любую среду разработки. Что мы здесь  видим? В левом столбце тот самый проводник. В нём
17. 1:41папки и файлы. Любую папку или файл можно открыть,  а в окне просмотра посмотреть, что внутри, и даже
18. 1:49отредактировать сути, если это потребуется. Теперь  важно понять, как работать с папками. Каждый
19. 1:55проект - это одна папка, внутри которой собирается  файлы и выстраиваются в дерево. Ну, из которого в
20. 2:02дальнейшем уже складывается само приложение. Что  из этого следует? Сейчас нам нужно в левом столбце
21. 2:08в проводнике открыть папку, но сначала её нужно  создать. Для этого делаем так. Заходим, добавить
22. 2:15папку, создаём её. И мы её будем использовать  как уже готовый проект. То есть новая папка равно
23. 2:22новый проект. Например, я сделал веб-страницу  и так назову её, папку. Веб-страница подарок.
24. 2:28Ну почему подарок, дальше уже поймёте. Теперь  открываю эту папку в проводнике. Открыли и видим
25. 2:34внутри пусто. Папка пустая. В окне просто пока  ничего не отображается. Но это только поначалу,
26. 2:40потому что мы же проект тут начнём создавать. Для  нас сейчас самое главное понять саму аналогию э
27. 2:46данных книг, то есть средк, как они работают,  их функционал и какие они имеют возможности,
28. 2:52и какой главный посыл в их интерфейсе. Книга у  нас есть. Теперь нам нужно добавить сюда перо
29. 2:59автоперо, которое будет за нас заполнять весь  контекст, заполнять всю форму и создавать
30. 3:05какие-либо приложения. Для этого нам потребуется  сюда добавить плагин от Cloud Cд. Но так как он
31. 3:11у меня уже добавлен, вот вы можете здесь увидеть,  здесь появится такая кнопочка установить. И вы её
32. 3:18устанавливаете. Потом появляется у вас здесь  такое расширение, вот как оно здесь показано.
33. 3:24Здесь вам нужно будет сделать регистрацию через  свою электронную почту, где вы уже имеете свою
34. 3:29подписку. Это делается очень легко, интуитивно  и быстро. То есть там просто подтверждаете,
35. 3:35что вы заходите через свою электронную почту, и он  заходит через ваш браузер, подтверждает то, что вы
36. 3:40та самая личность, и всё, и у вас в самом этом  плагине уже открыты свой агент. Что происходит
37. 3:45дальше? Вот мы уже имеем тот самый проводник  той самой папкой. Веб-страница подарок. Здесь
38. 3:51мы теперь должны запустить самого агента, чтобы  мы могли здесь начать им пользоваться. От окна
39. 3:58показа, от окна просмотра. И здесь у вас появится  то самое расширение Cloud Code. Это тот самый
40. 4:04агент, который уже у вас вшитый внутри компьютера,  и он полностью через интернет, понятное дело,
41. 4:09контролирует весь процесс создания ваших  приложений. Давайте мы сейчас спросим следующее.
42. 4:15Ты видишь вот эту папку? Он таким образом сейчас  должен показать то, что он видит эту папку. Да,
43. 4:21я вижу. Это моя рабочая папка. Сейчас она пустая.  Нет файлов, ничего. Ну, нам это было известно.
44. 4:27Теперь внутри этой папки мы как раз-таки и будем  с вами создавать первое приложение, скажем так,
45. 4:33веб-страничку. Делаем самое простое, чтобы, ну,  могли мы почувствовать такую небольшую магию и как
46. 4:40дети порадоваться этому. Одна маленькая команда,  которую я сейчас продиктую, опять-таки, просто
47. 4:46обычными словами свою хотелку без какого-либо  промта. То есть, в основе желательно мы,
48. 4:51когда создаём большие проекты, мы должны всё-таки  подготавливать какой-то промт. Ну, мы это уже
49. 4:55будем говорить поддельно в других частях. В  общем, не будем использовать никаких сложных
50. 4:59терминов и никаких-то определённых кодов. В общем,  как попрошу любого обычного живого помощника. Вот
51. 5:06я хочу вот эту вот эту игрушку. Всё. И отправляем.  Итак, проговариваем следующую хотелку. Создай мне
52. 5:13веб-страницу подарок, где именинник заходит  на страницу и у него только одна кнопка
53. 5:19принять подарок. После того, когда нажмёт на эту  кнопку, откроется большое окно с поздравлениями.
54. 5:26Именинник, девушка, ей исполнилось 21 год. И  добавь какие-нибудь звуки интересные бабочек,
55. 5:33ээ, щебение птичек какие-нибудь, звуки природы,  где-нибудь речушка, чтобы что-то плавало. Всё,
56. 5:40мы, в общем, проговорили вот такую вот хотелку.  Посмотрим, что у нас из этого получится. Дизайн,
57. 5:45дизайн системы готовы. Романтиче, романтичный,  розовый плюс золото. Указал, какие шрифты будет
58. 5:50использовать. Теперь собираю страницу один  файл со звуками природы, которые генерирует
59. 5:56прямо в браузере без внешних аудиофайлов.  Работает оффлайн. Вот так вот. В общем,
60. 6:01посмотрим, что сейчас он сделает нам интересное  такое. Да, хочу здесь немножечко дополнить, да,
61. 6:05так как у меня есть глобальные скилы, о которых мы  поговорим дальше. Он их сейчас взял и использовал.
62. 6:12Я забыл уточниться, чтобы он не использовал  никакие скилы. Скилы - это, скажем так,
63. 6:18это навык для наших е агент, чтобы лучше получать  результаты. Вот такая вот игрушка получилась. Так,
64. 6:27специально для тебя. Тебя ждёт подарок. Один  маленький шаг, и начнётся волшебство. Нажми
65. 6:32на кнопку, чтобы открыть. Ну всё, вот понеслось. С  днём рождения, милая именинница. 21 - это возраст,
66. 6:40когда мир распускается. Так, слушаем звук. Речка,  птички. О, ещё что есть. Ну, такую вот мы хотелку
67. 6:50игрушку сделали. Ничего интересного. Можно ли  такое подарить девушке? Да, можно, я думаю. В
68. 6:55общем, для романтиков здесь идей будет полно. В  случае чего, если идей не появятся никаких, можете
69. 7:01спокойно самого Клауда спросить. Итак, ладно, мы  выключаем звук. Хватит нам этих шумов, подводных
70. 7:08водок. Что мы теперь самое главное должны здесь  понять? То самое автоперо, оно нам сейчас написало
71. 7:16текст. А давайте мы хотим же увидеть, а что же  он всё-таки написал? Вот в левом столбце мы здесь
72. 7:22видим в окне проводник в папке веб-сайт следующий  HTML-файл. Вот это всё он прописал сейчас сам. Не
73. 7:31вы, ни я, ни кто-либо другой. Это всё сделал  он сам. Вот это и есть тот самый кодинг,
74. 7:38о котором сейчас все говорят. То есть нам не нужно  выучивать весь этот синтаксис, чтобы мы могли с
75. 7:45вами здесь выставлять какие-то определённые цвета,  ээ использовать какие-то определённые звуки. Он
76. 7:51всё сам это делает. Вы просто указываете, что вас  устраивает, что вас не устраивает. Теперь вот мы
77. 7:57сейчас увидели вот эту страницу. Я её сейчас ещё  раз открываю. И в данном случае мне, например,
78. 8:04не нравится вот эта кнопочка. Она какая-то  золотистая или какая-то маленькая. Если честно,
79. 8:09она даже незаметная. Да. Я хочу, чтобы эта кнопка  была большая и более-менее заметная. И это первое,
80. 8:18что я хочу сделать. И второе. И второе. Я Давайте  начну вот как раз-таки с этого второго. Итак,
81. 8:26мне всё вроде бы понравилось, но единственное, я  бы хотел бы поиграться. В общем, чтобы на главной
82. 8:32странице появились две кнопки. Первая кнопка, она  говорила: "Да, она будет статичная", и кнопка нет,
83. 8:41которая будет бегать от моей мышки. То есть я  хочу, когда открывается первая страница, задавался
84. 8:47какой-то похожий вопрос: "Готова ли ты принять  подарок?" И два ответа: да и нет. Но самое важное,
85. 8:56чтобы мышка никогда не могла нажаться на кнопочку  Нет. То есть всё время эта кнопка убегала от самой
86. 9:03мышки. И когда уже именинница откроет ээ само  поздравление, здесь написано: "Запустить салют ещё
87. 9:10раз". Кнопка слишком маленькая. Я хочу, чтобы она  была больше и заметнее. Всё, мы вот будем сейчас
88. 9:17редактировать это. Иногда даже вы можете увидеть,  как на ваших глазах происходят изменения. То есть
89. 9:23бывают такие моменты. Если вы попадаете в то окно,  где именно идёт сейчас редактация. Ну да ладно,
90. 9:29как бы то ни было, бегать мы за ней сейчас не  будем. Для нас это не совсем столь так важно.
91. 9:33Для нас важно получить ту самую нашу хотелку. Всё,  вроде сделал. Теперь я хочу нажать на нет. И нет,
92. 9:42убегает. Ну что-то он совсем убежал. А у него  Погоди, я хочу, чтобы она постоянно убегала на
93. 9:48экране, а не исчезла. В общем, давайте мы  её доведём до совершенства. Всё, видите,
94. 9:53он каждый раз спрашивает разрешение о процессе. В  принципе, для начинания это самое то. Вы чем тем
95. 10:02самым вы будете всегда понимать, что именно  он просит, то есть в каком моменте он хочет
96. 10:06сделать изменения. Ну, мы, понятное дело, даём  добро. Вот. Но в случае того, что если это будет
97. 10:11какой-нибудь важный для вас файл на компьютере,  предупреждения будут очень важны для вас, чтобы
98. 10:16что-то не потерять или не стереть, или не изменить  вообще вовсе. Поэтому всегда учитывайте этот
99. 10:21момент. Но также существуют некоторые лайфхаки,  где можно все эти разрешения убрать, и он будет
100. 10:26сам идти без остановки и делать изменения. Так,  ладно, всё, мы теперь хотим нажать нет. И вот
101. 10:33теперь она по экрану начинает убегать. Как-то всё  равно не по всему экрану она бегает. Ну ладно,
102. 10:39в общем, как бы то ни было, нажимаем Да, всё, мы  видим теперь вот теперь и кнопочка побольше стала,
103. 10:44поинтереснее, и можно нажимать этот салют.  Ну во прямо сколько насыпало его. Я думаю,
104. 10:50всем будет это интересно. Как бы то ни было, по  крайней мере, выглядит уже не совсем так кринжово
105. 10:56поначалу, как это получилось. Теперь подытожим.  Второй уровень тоже уже пройден. Только что сейчас
106. 11:01создали мы первый рабочий результат буквально  словами через нашу хотелку. Довольно-таки скажу,
107. 11:07что результат получился неплохой, в принципе. Вот.  Можно его подоработать, улучшить, можно сделать
108. 11:12ещё некоторые детали, которые в голове появились  сейчас вот уже на ходу. Ну, как бы то ни было,
109. 11:18для первых сценарией, для первой возможности, для  первого шага внутри вайп-кодинга, я считаю, этого
110. 11:25уже будет достаточно для того, чтобы понять саму  аналогию. Самое главное - это понять его аналогию.
111. 11:32Для чего всё это делается, как это пользуется и  зачем это применяется. Мы сейчас сложили 1 +1 перо
112. 11:38и книгу и получили результат. Для вводной части,  я считаю, этого уже будет совсем достаточно.
113. 11:45И вот на этом моменте хочу остановиться. В третьей  части мы как раз-таки поговорим более детально,
114. 11:50как правильно задавать промты и как правильно  диктовать нашему перу, что мы хотим получить.
115. 11:56То есть не какую-то вот визуализацию или не  какую-то там идею или какую-то хотел, например,
116. 12:00как сейчас, а чтобы вот прямо реально получился  качественный продукт, который можно даже, кстати,
117. 12:05продавать. Я думаю, вот с этого момента  те, которые начинающие в Айп-кодере,
118. 12:10увидев весь этот результат, сразу поймут его  потенциал. в будущем, то, что они разбираются,
119. 12:17есть такие возможности, есть какие-то действия,  которые можно реализовать вот так вот легко.
120. 12:22Причём скажу, что через эти же AIгенты создают  целые операционные системы. Так как я состою в
121. 12:30одной Facebook группе закрытой viпкодера, где  большинстве случаев сидят латиноамериканцы,
122. 12:36испанцы, там есть некоторые деятели, которые  реально создают настоящую операционную систему.
123. 12:40И вот меня вот, знаете, удивляет это трата  токенов, это сколько они тратят денег,
124. 12:47чтобы вот просто создать себе вот эту хотелку.  Ну, для тех ребят, которые там этим занимаются,
125. 12:53я понимаю, им это позволительно. И те варианты  и те возможности, которые они имеют, ну, это
126. 12:59очень высокие звёздочки, скажем так. До них только  нам ещё мечтать и мечтать. Но как бы то ни было,
127. 13:05вы представляете, вот точно так же, имея какое-то  количество токенов, вы можете сесть и создать
128. 13:12свою операционную систему со своими иконками. Кто  знает, может быть, кто-то из вас будет следующий
129. 13:19будущей Стив Джобс. Всё возможно. Всё возможно.  В нашем мире сейчас нет никаких-то определённых
130. 13:25преград для того, чтобы начать с нуля. И я  считаю, что данная программа, которую я сейчас,
131. 13:31скажем так, продумал и разработал, оно мне пришло  как-то наитивно, знаете, то есть я всегда вижу,
132. 13:37каждые уроки, которые я видел, они все  были линейные, не было каких-то частей,
133. 13:41то есть программа не сложена в какую-то  определённую подгруппу. И я вот пытаюсь всё
134. 13:46это разгруппировать и выдавать вам эти дофамины,  чтобы вы могли получать после каждого выпуска
135. 13:52какой-то определённый вот реальный результат. И  вы могли его применить уже сейчас на практике,
136. 13:58не создавая каких-то определённых сложностей  внутри самой системы, продумывая: "Ой, кодинг, это
137. 14:05что-то страшно". Нет, это не страшно, это легко и  просто. Просто единственное нужно понять аналогию.
138. 14:10Вся моя программа состоит из того, что вы должны  понять аналогию, как это производится, и на
139. 14:16примере чего-то уже вам известного предоставить  вам уже какой-то, э, определённый экскурс внутри
140. 14:23новой системы. Так что в третьей части не  пропусти, будет очень много чего полезного и
141. 14:28важного для тебя по созданию правильных промтов и  познакомлю вас со своей одной техникой. Фконтекст
142. 14:35называется, и разберёмся, как им пользоваться  реально. Подпишись на канал, ставь комментарии,
143. 14:40лайки. Также у нас есть Telegram-канал, где  выпускаются различные новости и информация. И
144. 14:46будьте одними из первых, кто это может прочесть  и узнать. Всем пока. До третьей части. Yeah.