Transcription
Хорошо, давайте начнем с самого начала. Что такое GitHub Copilot? GitHub Copilot — это ИИ-ассистент программиста, который помогает вам писать код быстрее. Он разработан для помощи в задачах программирования и служит вашим помощником во время работы в вашем редакторе и на github.com. Не забывайте об этой части. Но это больше, чем просто автодополнение кода. Это полноценный компаньон для кодирования, который может помочь вам писать код на естественном языке, понимать команды оболочки, запоминать то, что вы забыли, описывать изменения в ваших pull request, и даже помогать вам с отладкой, плюс многое другое. Он доступен в Visual Studio Code, Visual Studio, JetBrains, NeoVim, Xcode, на мобильном GitHub и в ваших терминалах, а также на github.com. Вы можете использовать его с различными языками программирования в выбранном вами редакторе.
Теперь, как получить доступ к GitHub Copilot? Чтобы использовать GitHub Copilot, у вас должна быть учетная запись GitHub и лицензия GitHub Copilot. Вам доступны четыре варианта лицензии. Вы можете бесплатно зарегистрироваться на GitHub Copilot или Copilot Pro для частных лиц, или вы можете получить доступ через свою работу через бизнес-лицензию Copilot или корпоративную лицензию. Если вы студент или преподаватель, вы можете бесплатно получить доступ к Copilot Pro через GitHub Education. Вы также можете получить бесплатный доступ, если вы являетесь популярным сопровождающим проекта с открытым исходным кодом. Чтобы увидеть список всех функций, доступных для каждого уровня или каждой лицензии, нажмите на ссылку, которая появится на экране. Если вы никогда раньше не использовали GitHub Copilot, я призываю вас бесплатно зарегистрироваться на Copilot, чтобы попробовать. Это действительно хорошо.
Как только вы зарегистрируетесь на GitHub Copilot, вы готовы установить и использовать его в своем редакторе. Установка GitHub Copilot зависит от того, где вы его используете. Если вы используете VS Code, перейдите в магазин расширений и найдите GitHub Copilot. Нажмите на появившееся расширение и нажмите "Установить". Это установит два расширения. GitHub Copilot, который предоставляет предложения по написанию кода в реальном времени, и его компаньон, GitHub Copilot Chat, разговорный ИИ-ассистент, который помогает вам с задачами, специфичными для кодирования. После установки вам нужно будет войти в VS Code с вашей учетной записью GitHub, которая имеет доступ к GitHub Copilot. Если вы ранее не авторизовали VS Code в своей учетной записи GitHub, вам будет предложено войти в GitHub в VS Code. В качестве альтернативы вы можете войти в GitHub и VS Code, выбрав меню учетных записей на панели действий, а затем войдя в систему через GitHub, чтобы использовать GitHub Copilot. Как только вы это сделаете, вы будете перенаправлены в свой браузер, где вы сможете предоставить GitHub необходимые разрешения, необходимые для GitHub Copilot. Нажмите "Продолжить", чтобы авторизовать Visual Studio Code, одобрить, и вы готовы. Вернитесь в свой редактор, и вы заметите значок Copilot вверху рядом с центром команд. Вы также заметите значок Copilot внизу редактора, где, если вы нажмете на него, вас могут попросить выбрать учетную запись, которую вы хотите использовать. Затем мы покажем вам параметры меню, где статус должен быть "Готов". Если вы видите эти значки в своем VS Code, вы успешно установили GitHub Copilot и готовы к его использованию.
Теперь, если вы используете JetBrains IDE, позвольте мне показать вам, как вы можете установить GitHub Copilot. Сегодня я буду использовать PyCharm, но эти инструкции одинаковы для всех редакторов JetBrains. Откройте выбранный вами редактор и перейдите в магазин плагинов. Найдите GitHub Copilot и нажмите "Установить", а затем перезапустите свою IDE. Откройте проект, и вы заметите значок Copilot справа от вашего редактора. Вы также заметите два значка слева: один с GitHub Copilot и вопросительным знаком, а другой со значком чата. Выберите первый Copilot с вопросительным знаком, чтобы получить краткий обзор того, что такое GitHub Copilot, и приветственное сообщение. Нажмите на Copilot со значком чата, чтобы открыть Copilot Chat, где вы можете получить помощь по запросам, связанным с программированием. Если вы видите эти значки в своей JetBrains IDE, вы успешно установили GitHub Copilot. Если вы ранее не авторизовали JetBrains в своей учетной записи GitHub, вам будет предложено войти в GitHub в вашем редакторе. В качестве альтернативы вы можете нажать на значок Copilot внизу и выбрать "Войти в GitHub". Нажмите "Копировать и открыть" и "Продолжить" в своем браузере, чтобы одобрить необходимые разрешения. Нажмите Command+V или Control+V, чтобы вставить код. Нажмите "Продолжить" и, наконец, выберите "Авторизовать плагин GitHub Copilot". Вернитесь в свой редактор, и вы увидите сообщение о том, что GitHub Copilot успешно установлен. Теперь мы можем авторизовать GitHub Copilot Chat. Нажмите на значок чата и нажмите кнопку "Авторизовать". Выберите "Копировать и открыть" и вставьте код в свой браузер. Нажмите "Авторизовать GitHub Copilot для JetBrains IDE". Вернитесь в свой редактор, и вы должны увидеть приветствие от GitHub Copilot Chat. Как только вы это сделаете, вы готовы использовать GitHub Copilot в JetBrains.
Хорошо, теперь, когда у нас установлен Copilot в наших редакторах, давайте посмотрим, как его использовать. Для сегодняшнего примера я буду использовать Python в VS Code. Создайте новый файл с именем validate_email.py. Как только вы начнете печатать, GitHub Copilot будет генерировать предложения на основе того, что, по его мнению, вы хотите сделать. Например, я могу импортировать модуль `re`, и когда я нажму Enter, Copilot даст мне предложенный код на основе того, что, по его мнению, я хочу сделать. Поскольку файл называется validate_email, он предоставляет код для проверки электронной почты. Я могу нажать клавишу Tab на клавиатуре, чтобы принять предложение. Когда я нажимаю клавишу Return, он продолжает веселье, предоставляя основную функцию для запуска кода. Если я наведу курсор на предложенный код, я увижу несколько доступных мне вариантов. Я также могу открыть панель дополнений, чтобы увидеть еще больше предложений, которые были сгенерированы, и принять предложения оттуда. Это автодополнение кода в действии, где серый текст представляет собой "призрачный текст" с предложениями Copilot. Если вы попробуете это на своей машине и получите другой результат, это нормально. Одна вещь, которую следует помнить при работе с GitHub Copilot или любым LLM, заключается в том, что ответы недетерминированы. Это означает, что мы, вероятно, получим разный результат каждый раз, когда используем GitHub Copilot, и результат, который я получу, может отличаться от того, который получите вы.
Мы можем пойти дальше, используя GitHub Copilot Chat. Допустим, мы хотим понять, что означает этот код. Я вижу его впервые и хочу быстро разобраться. Я могу открыть Copilot Chat и ввести `/explain`, чтобы получить подробное объяснение того, что происходит в коде. Вы заметите, что Copilot Chat имеет представление о текущих открытых файлах, как указано значком прямо здесь. Когда я нажимаю Enter, я получаю красиво отформатированное объяснение кода. Теперь, скажем, я хотел бы улучшить регулярное выражение и позволить пользователям вводить несколько адресов электронной почты. Я могу сделать этот запрос прямо здесь, в Copilot Chat. Я могу сказать: "Позвольте пользователям вводить несколько адресов электронной почты для проверки, а также улучшите регулярное выражение, чтобы оно было более надежным". Затем я получаю план, обновленный блок кода и список внесенных изменений. Я могу нажать кнопку "Применить в редакторе", чтобы принять изменения, и GitHub Copilot внесет обновления от моего имени.
Теперь, прежде чем мы закончим, позвольте мне уделить время, чтобы обратиться к слону в комнате. Существует так много "копилотов". Так что же отличает GitHub Copilot и в чем разница между GitHub Copilot и другими копилотами? Ну, GitHub Copilot специально разработан для программирования. И поскольку он работает и существует там, где вы работаете, в вашем редакторе и на github.com, нет необходимости переключаться туда и обратно между браузером или другим приложением и вашим кодом. Вы можете по-настоящему оставаться сосредоточенным и больше не переключать контекст. Так что, когда вы слышите слова "GitHub Copilot", знайте, что это относится к вашему личному ИИ-ассистенту программиста.
Итак, мы сегодня рассмотрели немало, но теперь вы знаете, что такое GitHub Copilot, как получить к нему доступ, как его установить, аутентифицировать и начать использовать. Вы также знаете разницу между GitHub Copilot и другими инструментами Copilot. Я научу вас тому, что вам нужно знать о больших языковых моделях или LLM, и как с ними взаимодействовать с помощью инженерии подсказок. Подсказки — это то, что питает LLM, чтобы сделать нас более продуктивными в нашей работе. Когда вы поймете силу подсказок и их ограничения, вы сможете делать еще больше и быстрее.
Прежде чем мы перейдем к инженерии подсказок, нам следует больше узнать о том, что такое LLM "под капотом". Большие языковые модели — это тип ИИ, который обучается на больших, отсюда и название, объемах текстовых данных, чтобы понимать и генерировать человекоподобный язык. Они работают, предсказывая следующее слово в предложении на основе контекста слов, которые предшествовали ему, делая их ответы релевантными и связными для людей, которые их используют. Вы можете думать об этом как об ультраумном автодополнении. Есть три вещи, которые вам действительно нужно знать, чтобы понять LLM. Контекст, токены и ограничения. Думайте о контексте как об окружающей информации, которая помогает LLM понять, о чем вы говорите. Точно так же, как в разговоре с другом, чем больше контекста у вас есть, тем более осмысленным будет разговор. В мире LLM текст разбивается на единицы — токены. Токен может быть словом, частью слова или даже отдельной буквой. Модель ИИ обрабатывает токены для генерации ответов. Количество токенов, которые вы используете с LLM, может повлиять на ее ответ. Слишком мало токенов, и ей может не хватать контекста, но слишком много, и она может быть перегружена.
Хотя LLM мощны, они не всемогущи. Они не по-настоящему понимают язык, как люди. Они полагаются на закономерности и вероятности, которые были в данных, на которых они обучались. Мы не будем вдаваться в подробности обучения в этом эпизоде, но, надеюсь, это быстро объяснит, почему нам нужен разнообразный и широкий набор данных для обучения для получения наилучших ответов. Модели никогда не бывают идеальными, поэтому они иногда дают неверные или бессмысленные ответы, иногда называемые галлюцинациями. Вы можете работать с мощью и ограничениями LLM, объединяя все в подсказку. Подсказка предоставляет модели контекст через токены и обходит потенциальные ограничения модели, чтобы модель могла дать вам ответ. Например, если вы дадите LLM подсказку "Напишите функцию JavaScript для вычисления факториала числа", она использует свое обучение, чтобы дать вам функцию, которая выполняет эту задачу. В зависимости от того, как была обучена модель, она может по-разному понимать вашу подсказку и выдавать разный код. Вот почему вы можете видеть разные результаты от различных моделей, таких как GPT от OpenAI, Claude от Anthropic, Gemini от Google и так далее. Все они обучены по-разному и, как следствие, по-разному понимают и выдают результаты.
Итак, теперь мы знаем, что такое подсказка, но что такое инженерия подсказок? Честно говоря, это просто термин для создания подсказок. Точно так же, как четкие инструкции могут помочь другу выполнить задачу именно так, как вы хотите, хорошо составленная подсказка может помочь LLM понять и предоставить то, что вы ищете. Хорошая инженерия подсказок может значительно улучшить качество и релевантность результатов, которые вы получаете от LLM.
Теперь давайте поговорим о некоторых ключевых компонентах эффективного составления подсказок. Эффективная подсказка должна быть ясной и точной. Неоднозначность может сбить модель с толку, поэтому не забывайте, что эффективная подсказка также дает достаточно контекста. Вы хотите предоставить достаточно фоновой информации для выполнения задачи, не перегружая модель ненужными деталями. И не забывайте, вы всегда можете итерировать и уточнять свои подсказки. Если вы просите что-то и не получаете того, что ожидаете, измените свою формулировку.
Теперь представьте, что вы используете GitHub Copilot и говорите: "Напиши функцию, которая будет возводить числа в списке в квадрат". На первый взгляд, это предложение не так уж плохо. Но позвольте мне спросить вас, на каком языке должна быть написана функция? Вы хотите включить отрицательные числа? Ввод когда-нибудь будет содержать нечисловые значения? Должна ли она изменять исходный список или возвращать новый список? Давайте немного уточним нашу подсказку. Итак, мы можем сказать: "Напиши функцию Python, которая принимает список целых чисел и возвращает новый список, где каждое число возведено в квадрат, исключая любые отрицательные числа". Видите разницу? Эта подсказка ясна и конкретна относительно языка, который мы хотим использовать, что должна делать функция, какие есть ограничения и какой ожидается тип ввода. Предоставляя GitHub Copilot больше контекста, результат будет более релевантным именно тому, что мы от него хотим.
В итоге, инженерия подсказок — это, по сути, умение хорошо общаться с компьютером. Очень похоже на кодирование. Тщательно составляя свои подсказки, вы можете использовать всю мощь таких инструментов, как GitHub Copilot, чтобы сделать ваш опыт более плавным и эффективным.
Теперь, когда вы работаете с GitHub Copilot и другими инструментами LLM, вы можете столкнуться с ситуациями, когда вы не получаете желаемого результата. Проблема не всегда в том, что вы недостаточно конкретны. Вот некоторые вещи, с которыми вы можете столкнуться, и как их можно улучшить.
Путаница в подсказках. Иногда мы смешиваем несколько запросов или недостаточно ясны, что может привести к путанице в результатах. Например, мы можем выделить что-то в VS Code и сказать: "Исправь ошибки в этом коде и оптимизируй его". Должен ли ИИ сначала исправить ошибки или оптимизировать? Для чего следует оптимизировать? Скорость, память, читаемость? Чтобы решить эту проблему, разбейте ее. Разделите свои запросы в подсказке. Сначала исправьте ошибки в фрагменте кода. Затем оптимизируйте исправленный код для лучшей производительности. Постепенное построение подсказки с большей вероятностью приведет к желаемому конечному результату, потому что каждый шаг был продуман.
Мы обсуждали, что токены — это единицы слов или части слов, с которыми может работать модель. Важно помнить, что существует предел количества токенов, которое может обрабатывать данная модель одновременно. Если ваша подсказка слишком длинная или ожидаемый результат очень обширный, LLM может начать галлюцинировать, оборваться и дать вам только частичный ответ или вообще не сработать. Вы хотите, чтобы ваши подсказки были краткими. Аналогично предыдущему, вы захотите итерировать по меньшим частям, но также предоставлять только необходимый контекст. Нужен ли LLM весь ваш файл кода для работы? Или он может использовать всего несколько строк кода в определенной функции? Вместо того, чтобы просить его сгенерировать целое приложение, можете ли вы попросить его создавать каждый компонент шаг за шагом?
И, наконец, мы часто предполагаем, что LLM знает больше, чем на самом деле. Если вы скажете: "Добавь аутентификацию в мое приложение", знает ли он вообще, что делает ваше приложение? Знает ли он, какие технологии вы можете захотеть использовать? При выполнении такой подсказки вам нужно явно указать свои требования, изложить свои конкретные потребности, упомянуть лучшие практики, если это необходимо, и быть готовым снова итерировать с граничными случаями и ограничениями. Указывая все свои требования, вы помогаете гарантировать, что LLM не упустит критические аспекты вашего запроса при генерации результата.
Мы рассмотрели многое в этом разделе. Инженерия подсказок — это искусство и наука, и вы станете лучше с практикой. В качестве краткого обзора, когда вы работаете с GitHub Copilot или любым другим инструментом LLM, вы используете токены, чтобы предоставить модели контекст, учитывая любые ограничения, которые она может иметь. Ваши подсказки должны быть ясными, краткими и точными для достижения наилучших результатов, предоставляя столько контекста, сколько может потребоваться модели. Вам следует разбивать свои подсказки на более мелкие части, если есть несколько задач, которые нужно выполнить, и итерировать оттуда. Вам следует быть конкретным в отношении своих требований и потребностей, чтобы модель понимала ограничения того, что она должна вам предоставить.
Я не хочу быть причиной взлома моего приложения, и вы тоже. Если мы хотим быть хорошими разработчиками, мы должны быть безопасными разработчиками. Большинство команд безопасности, не по своей вине, не имеют достаточного времени и ресурсов для надлежащего обеспечения безопасности кода своей компании. Поэтому, как разработчики, мы являемся первой линией обороны, что трудно, потому что половина из нас не получает достаточного формального обучения безопасности, чтобы делать это должным образом, и в конечном итоге приходится изучать эти навыки на работе. К счастью для вас, GitHub здесь, чтобы помочь. Как с Copilot, который может помочь вам безопасно создавать и исправлять код, так и с множеством инструментов безопасности, которые доступны бесплатно, если вы создаете код с открытым исходным кодом. Сегодня у меня есть супер специальный гость, который поможет нам освоить все, что связано с безопасностью. Привет, Эйприл. >> Привет, Кадия. >> Как дела? >> Хорошо. А у тебя? >> Отлично. Добро пожаловать на шоу. >> Спасибо, что пригласили. >> И она возьмет на себя управление. Хорошо, Кадеша, давайте углубимся в лучшие практики безопасности. Copilot не просто знает, как писать код. Он также понимает, как сделать код более безопасным, но он не идеален, и на самом деле никто из нас не идеален. Так что вам действительно нужно знать, что спрашивать, и вы не должны полагаться на него как на единственный инструмент безопасности. Но мы доберемся до этого немного позже. Давайте начнем с простого примера. Я ввожу некоторую информацию в базу данных SQL, используя оператор `insert`. Я, возможно, слышал о проблеме под названием SQL-инъекция. И это когда кто-то вставляет вредоносную инструкцию, такую как `drop table`, которая удалит мои существующие данные, в не привилегированное текстовое поле, такое как поле для комментариев или поле имени. Но я могу не знать, как защититься от этой проблемы. Итак, один из методов, который я могу использовать, — это просто попросить Copilot перегенерировать мой код. Я могу удалить функцию, где я записываю в базу данных. Убедитесь, что мой комментарий объясняет, что я хочу сделать. Затем позвольте Copilot найти решение. И тогда эта часть действительно важна. На самом деле прочитайте то, что он написал. Я не хочу просто слепо принимать любое предложение Copilot. Я хочу проверить его работу, и я хочу учиться на нем. Теперь я вижу, что он очищает ввод, убеждаясь, что он не содержит вредоносного текста, прежде чем добавлять его в мой оператор `insert`. Если я не хочу удалять и пересоздавать код, или если у меня есть большой объем кода, который я хочу проверить. Другой вариант — я могу просто попросить Copilot просмотреть и исправить его. Я могу сделать это, выбрав блок кода, а затем задав Copilot вопрос, например: "Есть ли какие-либо уязвимости в этой функции?" или я могу работать более широко, выбрав весь файл или даже используя `@workspace`, что позволяет Copilot учитывать другие файлы в проекте. Итак, давайте попробуем спросить `@workspace`: "Какова поверхность атаки?" Это просто модный способ сказать, как кто-то может попытаться атаковать этот проект, и я вижу, что Copilot дает ряд рекомендаций. Они включают конкретные изменения в моем коде, а также определенные пакеты, которые я, возможно, захочу рассмотреть для добавления в проект, чтобы сделать его более безопасным. О, и кстати, если вы хотите получить еще более широкие рекомендации, включая общее качество кода или эффективность, вы можете использовать команду `/fix`. И какую бы рекомендацию он ни дал, я всегда могу задать более подробные вопросы, попросив Copilot объяснить, что такое конкретная проблема безопасности, или даже предложить альтернативные способы ее решения.
Хотя Copilot может помочь в поиске уязвимостей и предложении способов их устранения, он не является полной заменой всех инструментов безопасности. Отчасти это связано с тем, что Copilot — это универсал, а не специалист. И поскольку Copilot не всегда может видеть полный контекст вашей производственной среды, специализированные инструменты безопасности могут учитывать такие вещи, как какой компилятор вы используете, какие переменные среды установлены и как вы развертываете свое приложение. К счастью, у GitHub есть ряд предложений по безопасности, все из которых бесплатны для сопровождающих проектов с открытым исходным кодом, поэтому вы можете использовать их бесплатно в своих общедоступных репозиториях. Давайте рассмотрим несколько из них. Если вы работали над кодом в общедоступном репозитории GitHub, вы, возможно, уже заметили входящий pull request от кого-то по имени Dependabot. Это инструмент GitHub для проверки того, что ваши зависимости свободны от уязвимостей и обновлены. Вы можете включить или отключить это в настройках вашего репозитория. Просто прокрутите вниз до "Безопасность" и нажмите "Безопасность кода". Здесь я включил оповещения Dependabot. Они сообщают мне, какие зависимости имеют известные уязвимости. И здесь я включил обновления безопасности Dependabot, которые автоматически создают pull request, обновляющий эти зависимости до безопасных версий. Ниже находится раздел "Сканирование кода". Если вы не видите этот раздел, вы, вероятно, работаете в частном репозитории. Но если он у вас есть, я рекомендую нажать кнопку "Настроить" рядом с анализом CodeQL. Это позволит GitHub искать уязвимости на основе шаблонов в нашем коде. Такие вещи, как проблемы с SQL-инъекциями, которые я упомянул ранее. Это происходит автоматически при фиксации нового кода в вашем репозитории. Когда вы создаете новые pull request, а также при периодическом сканировании. Если обнаружена новая проблема, вы получите уведомление от GitHub. И тогда вам нужно будет ее исправить, вероятно, сделав что-то вроде открытия вашего кода и попросив Copilot помочь вам исправить уязвимость, на которую было указано в уведомлении. Однако в некоторых случаях вам может даже не понадобиться это делать. Вы могли уже заметить прямо под кнопкой включения CodeQL другую настройку под названием Copilot Autofix. GitHub будет использовать движок Copilot "за кулисами" для вас, автоматически предлагая исправление этой проблемы. Тогда все, что вам нужно сделать, это принять исправление PR, и нет необходимости запускать GitHub Copilot вручную. Есть множество других функций безопасности, на которые у нас нет времени, но есть еще одна, которую вам определенно стоит включить в своих общедоступных репозиториях. Сканирование секретов. Сканирование секретов позволяет GitHub предупреждать вас об обнаруженных секретах, таких как пароли или токены безопасности. Вы никогда не хотите, чтобы они были напрямую встроены в ваш код. Поэтому сканирование секретов сообщает вам, если оно их обнаружит, и говорит, где их удалить. А с включенной защитой от push-запросов оно поможет проактивно блокировать любые новые секреты от фиксации в вашей кодовой базе GitHub.
Большое спасибо, Эйприл, за то, что дали нам такое полное понимание лучших практик безопасности на GitHub и с GitHub Copilot. Итак, безопасность — это невероятно глубокая тема, и мы не ожидаем, что вы станете экспертом, но пока просто запомните эти три вещи. Всякий раз, когда вы пишете код, попросите Copilot помочь вам найти и исправить уязвимости в вашем коде. Это может быть просто запуск `/fix` в Copilot Chat, или это может быть что-то более детальное, например, выбор подозрительного или совершенно нового фрагмента кода и просьба Copilot проверить его на уязвимости. >> Номер два: когда Copilot или другой инструмент обнаружит проблему, попросите Copilot предоставить более подробную информацию, чтобы вы могли узнать об этом типе проблемы и о том, как вы можете предотвратить ее повторение в будущем. Третий и последний совет: зайдите в настройки безопасности кода в каждом из ваших репозиториев и убедитесь, что Dependabot, сканирование кода и сканирование секретов включены. И если они присылают вам оповещения, помните, что GitHub помогает вам их исправить. Вместе эти шаги помогут вам избежать уязвимостей в ваших приложениях и позволят вам продолжать учиться, чтобы стать лучшим, более безопасным разработчиком.
[Музыка]
Чтобы освежить вашу память, GitHub Copilot — это ИИ-ассистент программиста, который помогает вам писать код быстрее. Чтобы использовать GitHub Copilot, у вас должна быть лицензия. Вы можете зарегистрироваться на лицензию GitHub Copilot, посетив gh.io/copilot. Как только у вас будет доступ, вы можете установить расширение в своем редакторе. Аутентифицируйтесь, и вы готовы к работе. Чтобы узнать, как установить расширение, посмотрите первый эпизод этой серии.
Теперь, скажем, вы хотите создать игру "камень, ножницы, бумага" на Python. Мы можем начать с создания нового файла и добавления комментария в наш код, который гласит: "Создайте игру "камень, ножницы, бумага", где игрок вводит свой выбор и играет против компьютера, который случайным образом выбирает свой ход, а игра показывает, кто выиграл каждый раунд. Добавьте счетчик очков, который отслеживает победы игрока и компьютера, и позвольте игре продолжаться до тех пор, пока игрок не введет "quit"." Как только я нажму клавишу Return или Enter на клавиатуре, вы заметите серый текст, который предоставляется GitHub Copilot. Это называется "призрачный текст", и вы можете нажать клавишу Tab на клавиатуре, чтобы принять предложение. Теперь давайте создадим основную функцию для игры. Опять же, мы увидим "призрачный текст", генерируемый GitHub Copilot. Если вы наведете курсор на текст, вы получите этот вариант меню, который позволяет вам видеть другие предложения. Примите одно слово, примите текущее предложение и даже откройте панель дополнений. Таким образом, вы можете увидеть еще больше предоставленных предложений. Давайте посмотрим, что у нас есть. Вы увидите список всех предложений для различных способов реализации этого кода. Я собираюсь принять первое предложение. Я могу либо нажать Tab, чтобы принять, либо выбрать предложение из панели дополнений, которую мы открыли здесь. Давайте вызовем функцию, запустим ее в наших терминалах и поиграем.
[Музыка]
Хорошо, теперь, когда у нас есть MVP игры, давайте немного обновим игру. На этот раз я буду использовать встроенный чат для более гибкой обработки ввода. Я могу выделить часть кода для обновления, нажать Command или Control+I на клавиатуре и написать свою подсказку. Итак, я могу сказать: "Позвольте пользователю вводить R для камня, P для бумаги и S для ножниц". Я могу выбрать модель, которую хочу использовать, нажать Enter и наблюдать, как приходят обновления.
[Музыка]
Давайте протестируем изменения. И удивительно, они работают. Функция встроенного чата очень хорошо помогает вам применять быстрые исправления к вашему коду. Но если вы хотите работать глубже, вы можете использовать Copilot Chat для этого. GitHub Copilot Chat может помочь вам с объяснениями кода, созданием полных MVP, написанием тестов, исправлением ошибок терминала и многим другим. Давайте используем Copilot Chat для создания графического пользовательского интерфейса или GUI для нашей игры "камень, ножницы, бумага". Нажмите значок чата, чтобы открыть панель чата. Затем введите свою подсказку. "Создайте простой GUI, используя такую библиотеку, как tkinter, для игры". Вы заметите, что у меня открыт файл справа, и он отображается здесь в панели чата в качестве контекста. Если вы не хотите, чтобы Copilot Chat использовал текущие открытые файлы в качестве контекста, нажмите значок отключения файла, и он будет удален. Однако лучшая практика — позволить Copilot видеть ваш текущий открытый файл, чтобы он мог генерировать релевантный код для вас. Давайте снова включим контекст файла. Выберите нашу модель. Сегодня мы будем использовать Claude 3.5 Sonnet и отправим запрос. Вы заметите несколько вещей после завершения предложения. Здесь указано, что он использует один файл в качестве ссылки. Затем он предоставляет нам план действий и фактический блок кода, который мы будем использовать. Нам также предоставляются цитаты кода, которые мы можем увидеть прямо здесь, в панели чата. У вас есть несколько доступных вариантов. Вы можете прослушать код. Вы также можете повторно отправить запрос, если вам не понравился ответ, и вы можете поставить ему оценку вверх или вниз. Давайте подробнее рассмотрим блок кода, который нам был предоставлен. Если вы наведете курсор на блок кода, вы заметите появление трех значков. Первый — кнопка "Применить в редакторе". Это позволяет быстро применять изменения кода в вашем файле одним щелчком мыши. Не нужно копировать и вставлять. Следующий значок — кнопка "Вставить в курсор", которая позволяет вставлять блок кода в текущую позицию курсора в вашем файле. Затем у нас есть кнопка "Копировать", которая позволяет копировать сгенерированный код. Если вы нажмете кнопку "Дополнительные действия", эти три точки, которые вы видите здесь, вы увидите выпадающее меню, которое позволит вам запустить код непосредственно в вашем терминале или добавить код в новый файл. Давайте используем кнопку "Применить в редакторе", чтобы обновить код. Отлично. Вы увидите здесь, что весь файл был изменен. Теперь мы можем принять, отклонить или показать или скрыть внесенные изменения с помощью опций прямо здесь. Давайте примем эти изменения и посмотрим, что у нас получилось. Похоже, Copilot Chat переработал весь код, чтобы он стал игрой "камень, ножницы, бумага" на основе GUI, которая имеет два основных метода внутри класса. Метод `play` обрабатывает основную логику игры, а метод `run` запускает цикл событий окна GUI. Когда мы запускаем код, мы видим, что теперь мы можем играть в игру более интерактивно.
Хорошо, давайте посмотрим на другие удивительные вещи, которые вы можете делать с GitHub Copilot Chat. Мы добавили команды `/`, чтобы помочь вам получать объяснения кода, исправлять код, создавать новую записную книжку, писать тесты и многое другое. Существуют ярлыки для распространенных подсказок, которые, как мы обнаружили, особенно полезны в повседневной разработке на основе нашего собственного внутреннего использования. Откройте Copilot Chat и нажмите клавишу `/` на клавиатуре. Вы увидите список команд `/`, которые вы можете использовать. Например, я могу выбрать команду `/explain` и получить полное объяснение кода в моем текущем файле. Я также могу использовать команду `/help`, чтобы получить обзор того, как GitHub Copilot может мне помочь, и список доступных команд `/` и их назначение. Так что, если вы когда-нибудь застрянете, просто помните `/help`. Вы можете предоставить Copilot дополнительный контекст и помочь ему понять ваши вопросы, используя переменные в интерфейсе чата. Вы можете прикрепить файл с переменной `#file` или искать по своей кодовой базе с переменной `#codebase`. У нас есть список доступных вам переменных по ссылке в описании. Участники чата — это как эксперты, у которых есть специальность, с которой они могут вам помочь. Вы можете вызвать участника чата, набрав `@` в поле ввода чата, за которым следует имя участника. Некоторые из них включают `@workspace`, который имеет контекст о всей вашей рабочей области, `@terminal`, который имеет контекст об интегрированном терминале в VS Code, и `@github`, который имеет знания о ваших проблемах с репозиториями GitHub, pull request, а также может искать в Интернете. Например, если я вызову участника чата `@workspace`, я предоставлю Copilot доступ ко всему моему репозиторию. Это может быть полезно, если я хочу быстро узнать, где определяется функция, или если я хочу создать подробное README для моего проекта.
Одной из самых последних и захватывающих функций GitHub Copilot является GitHub Copilot Edits. С помощью Copilot Edits вы можете быстро начать сеанс кодирования для итерации изменений кода с использованием естественного языка. Он позволяет редактировать несколько файлов одновременно и объединяет разговорный поток Copilot Chat и быструю обратную связь от встроенного чата в одном опыте. Давайте используем Copilot Edits, чтобы добавить более подробную таблицу результатов в нашу игру. Поскольку у меня установлено расширение VS Code Speech, я могу использовать его, чтобы говорить с Copilot Edits. Итак, я могу сказать: "Добавьте подробную таблицу результатов для отслеживания и отображения количества ничьих, побед игрока и побед компьютера после каждого раунда". Вы можете выбрать модель, прикрепить соответствующие файлы и отправить запрос. Как только вы это сделаете, вы сможете увидеть, как ответы транслируются. Давайте нажмем "Принять" и запустим игру. Мы можем видеть, что дополнительные игровые статистики были добавлены в GUI для игры. Copilot Edits становится еще мощнее, когда вы используете его для редактирования нескольких файлов одновременно. Мы рассмотрим это в другом эпизоде. А пока я хочу, чтобы вы запомнили все, что узнали в этом видео о GitHub Copilot. Как вы можете видеть, это гораздо больше, чем просто автодополнение кода. Это прекрасный ИИ-ассистент программиста, который может помочь вам выполнять работу намного быстрее, оставаясь в потоке разработки. Посмотрите на этот пример. Теперь, когда мы закончили игру, давайте отправим ее на проверку в VS Code. Нажмите кнопку "Управление исходным кодом". Зафиксируйте свои изменения, а затем нажмите этот блестящий значок в поле сообщения коммита. Вы увидите сообщение коммита, сгенерированное GitHub Copilot. Мы можем пойти дальше, получив обзоры кода в наших редакторах. Я могу выделить часть кода. Нажмите на блестящий значок, который появляется, и выберите "Проверить с помощью Copilot". Теперь я могу получить первоначальный обзор моего кода, прежде чем отправлять его на окончательную проверку моей команде. Вы также можете получить этот первоначальный обзор от Copilot на github.com, если это ваше предпочтение.
Если вы используете JetBrains IDE, у вас есть доступ к Copilot Code Complete, а также к Copilot Chat. Чтобы увидеть полный список функций, доступных в JetBrains, перейдите по ссылке в описании ниже.
Мы создаем бэкенд API для Plan Venture, конструктора туристических маршрутов, который помогает пользователям планировать свои поездки. Полное описание того, что мы строим сегодня, включено в стартовый репозиторий, который вы можете клонировать по этой ссылке. Чтобы следовать за мной, вам понадобится доступ к редактору кода. Я использую VS Code, у вас установлен Python на вашей машине, и у вас есть доступ к API-клиенту, такому как Bruno, для тестирования наших маршрутов. Вам также понадобится доступ к GitHub Copilot. Так что убедитесь, что вы зарегистрировались бесплатно, если вы еще этого не сделали. Мы будем использовать фреймворк Flask с SQLAlchemy для базы данных, и мы добавим аутентификацию и полную функциональность CRUD для управления поездками. Каждая поездка будет включать пункт назначения, даты начала и окончания, а также базовую структуру маршрута с координатами местоположения для картографирования. Мы сосредоточимся в первую очередь на MVP или основных функциях, необходимых для поддержки фронтенда, который мы построим в следующем эпизоде. Наша цель сегодня — создать рабочий API, который обрабатывает аутентификацию пользователей и базовое управление поездками. Я хотел бы, чтобы вы следовали за мной и использовали GitHub Copilot для совместного создания.
Теперь перейдем к коду.
Хорошо, на GitHub перейдите в этот репозиторий: gh.io/planventure. Клонируйте репозиторий и перейдите в каталог planventure-api. Теперь давайте создадим виртуальное окружение. Откройте свой терминал и введите `python -m venv venv`. Нажмите Enter или клавишу Return на клавиатуре. Теперь введите `source venv/bin/activate`, чтобы активировать и использовать виртуальное окружение. Вы узнаете, что окружение активно, когда ваш терминал укажет `venv` прямо здесь. Теперь давайте установим наши зависимости. Введите `pip install -r requirements.txt`. И, наконец, давайте запустим базовый сервер, который у нас есть. Итак, в вашем терминале выполните `flask run --debug`. Ваш сервер теперь должен быть на порту 5000. Откройте свой API-клиент, чтобы проверить, что он работает. Сегодня я использую Bruno, поэтому в Bruno я могу создать новый GET-запрос, добавить URL и нажать "Выполнить". Я должен получить сообщение: "Добро пожаловать в API Plan Venture". И похоже, мы готовы начать строить.
Итак, следующее, что мы хотим сделать, это настроить нашу базу данных. Откройте файл `app.py` и откройте Copilot Chat и введите `@workspace Update the Flask app with SQLAlchemy and basic configurations`. Выберите модель Claude 3.5 Sonnet и нажмите Enter, чтобы отправить запрос. Вы получите вывод плана, блок кода и сводку изменений, внесенных GitHub Copilot. Давайте посмотрим, что он только что сгенерировал для нас. Давайте примем эти изменения. Чтобы обновить файл `app.py`, нажмите кнопку "Применить в редакторе", и Copilot внесет это обновление для нас. Теперь давайте сохраним это изменение кода в новом файле. Нажмите на три точки здесь и выберите "Вставить в новый файл". Сохраните файл и сделайте то же самое ниже для других изменений. Наконец, давайте установим наши зависимости. Вернитесь в Copilot Chat и введите `@workspace Update requirements.txt with the necessary packages for Flask API with SQLAlchemy and JWT`. Примите изменения, нажав кнопку "Применить в редакторе", и сохраните файл.
Теперь давайте создадим наши модели пользователей и поездок на основе проблемы GitHub, которую нам поручили. Пользователь должен иметь электронную почту, пароль, и мы должны включить хеширование пароля и временные метки. Поездка должна иметь пункт назначения, даты начала и окончания, координаты и маршрут со связью с пользователем. Это много всего. Итак, давайте пригласим Эйприл, чтобы помочь нам сделать эти вещи. >> Привет, Кадеша, ты готова создать эти модели? >> Абсолютно. >> Хорошо, давайте начнем. Откройте свою IDE. Мы перейдем к GitHub Copilot, а затем к Copilot Edits. Как только мы перейдем к Copilot Edits, мы хотим прикрепить файлы. Затем мы хотим выбрать модель Claude 3.5 Sonnet и ввести "create SQLAlchemy user model with email, password hash, and timestamps. Add code in new files". Теперь давайте посмотрим, как Copilot Edits приступит к работе. Он даст нам план. Затем вы увидите, что он создал новые папки, файлы, и он даст нам полный код, который нам нужен для нашей модели пользователя. Давайте примем эти изменения, сохраним файлы и посмотрим на код.
[Музыка] Привет, [Музыка] привет, привет. [Музыка] Теперь мы создадим скрипт Python для создания таблиц базы данных. Мы собираемся вернуться к Copilot Edits и ввести "update code to be able to create the DB tables with a Python shell script". [Музыка] Примите код и инициализируйте базу данных. Откройте свой терминал и выполните `python init_db.py`. Вы увидите новый файл `planventure.db`, сгенерированный. Давайте установим расширение, чтобы мы могли видеть таблицы. Перейдите на вкладку "Расширения" и найдите "SQLite Viewer". Нажмите "Установить", и тогда вы сможете нажать на экземпляр `db` и лучше рассмотреть таблицы. Давайте создадим модель поездки. Мы вернемся к Copilot Edits и введем "create SQLAlchemy trip model with user relationship, destination, start date, end date, coordinates, and itinerary". Каждый раз, когда я вижу, как Copilot создает файлы, генерирует папки и обновляет код, мой разум просто взрывается. Давайте примем эти изменения и посмотрим, что у нас получилось.
[Музыка] [Музыка] Круто. Теперь давайте запустим `python init_db.py`, чтобы добавить поездки в базу данных. Отлично. Мы только что завершили эти модели базы данных в рекордно короткие сроки. Давайте зафиксируем наши изменения и займемся аутентификацией. И это на самом деле подводит меня к отличному скрытому сокровищу в VS Code. Перейдите к кнопке "Управление исходным кодом" здесь и зафиксируйте свои изменения. Теперь этот блестящий значок здесь, нажмите на него, и вы увидите, как Copilot генерирует сообщение коммита. Как это круто? Если вы заметили, я всегда убеждаюсь, что просматриваю предложения, которые предоставляет Copilot. Это гарантирует, что я сразу же поймаю любые ошибки и смогу при необходимости скорректировать код. Пока что он справляется довольно хорошо. Итак, я просто просматривал эту проблему GitHub для создания Plan Venture. Для нашего аутентифицированного маршрута пользователя я хотел убедиться, что мы включили хеширование пароля и соль для дополнительной безопасности. Итак, мы собираемся вернуться и снова открыть Copilot Edits. "create password hashing and salt utility functions for the user model". Давайте посмотрим, что было сгенерировано. Мы можем нажать на ссылки на файлы, которые были изменены Copilot Edits. Итак, давайте нажмем на каждый файл и посмотрим, что он вывел. Давайте примем эти изменения. Теперь давайте настроим генерацию и проверку токенов JWT. Продолжая в нашем окне GitHub Copilot Chat, мы собираемся ввести "setup JWT token generation and validation functions". Мы можем видеть, что изменения генерируются. И давайте посмотрим на это. Привет, [Музыка] привет, привет. Привет, привет, привет. [Музыка] [Музыка] Привет, Давайте сохраним эти изменения и установим пакет JWT. Давайте создадим фактический маршрут, чтобы мы могли зарегистрировать нового пользователя. Мы продолжим вводить в окне чата с GitHub Copilot. "Create all routes for user registration with email validation". Давайте примем эти изменения и посмотрим на вывод GitHub Copilot.
[Музыка] [Музыка] Я не [Музыка] Очень круто. Это было так приятно смотреть. Думаю, пора протестировать наш маршрут регистрации. Это абсолютно так. Мы собираемся использовать Bruno сегодня. Итак, давайте перейдем к Bruno. Мы добавим наш собственный URL. Итак, это будет базовый URL `/register`. Мы сделаем POST-запрос и добавим наш JSON-тело. Итак, я скажу: "email: test@mail.com" и "password: test1234". Супер безопасно. Очень безопасно. >> Теперь, конечно, этот пароль только для этой демонстрации. Убедитесь, что вы используете гораздо более надежный пароль для вашего входа. >> Да. И нам пока не нужно устанавливать никакой токен аутентификации, потому что мы получим этот токен доступа от сервера, когда зарегистрируемся. >> Именно. Итак, давайте настроим наши заголовки. Итак, я добавляю `Content-Type: application/json`. Это выглядит очень хорошо. Итак, давайте запустим это и надеемся на ответ 200. >> Отлично. Это работает. Удивительно. Если мы зайдем в наш Plan Venture DB, мы должны увидеть, что пользователь теперь отображается, когда мы обновим файл. Отлично. У нас есть test@.com в нашей базе данных. >> Похоже, все работает очень хорошо. >> Абсолютно. Давайте добавим маршрут входа. >> Отлично. Мы продолжим использовать Copilot Edits, потому что это просто так весело и, честно говоря, легко использовать. "Create login route with JWT token generation". Это должно дать нам полный маршрут, который мы можем принять и протестировать немедленно в Bruno.
Теперь пришло время протестировать маршрут в Bruno. Итак, я добавлю JSON-тело с электронной почтой и паролем пользователя, которые мы уже ранее зарегистрировали. Я также добавлю заголовок `Content-Type` с `application/json`. Опять же, сделаем это POST-запросом и нажмем "Отправить". Отлично. Похоже, наш маршрут входа работает, и наш пользователь может успешно зарегистрироваться и войти, и мы создали эти маршруты довольно бесшовно, используя естественный язык и мощь Copilot Edits. Это было так весело.
Следующее, что нам нужно сделать, это middleware аутентификации для защиты наших маршрутов. Ах, конечно. Давайте вернемся в Copilot Edits, чтобы сделать это. Введите "create auth middleware to protect routes". Теперь, вот небольшой пасхальный сюрприз для вас. Если вы используете Visual Studio Code локально, вы можете говорить с Visual Studio Code своим естественным голосом. >> О, и это благодаря расширению VS Code Voice, верно? >> Абсолютно. >> Это намного проще и удобнее говорить, чем иногда печатать. Итак, давайте посмотрим на изменения. >> Давайте примем эти изменения и снова протестируем маршруты, чтобы точно убедиться, что они работают. Ого, похоже, все работает идеально. >> Да. И это означает, что аутентификация завершена. Так что позвольте мне зафиксировать эти изменения и отправить их на проверку. >> Вау, мы так много сделали за такое короткое время. Есть еще один маршрут, который нам нужно сделать, но большое спасибо, Эйприл, за всю проделанную работу. Давайте посмотрим на проблему GitHub для следующего маршрута и продолжим работу.
Хорошо, похоже, что маршрут поездки требует полных CRUD-операций с шаблоном маршрута по умолчанию. Давайте продолжим использовать Copilot Edits, чтобы сделать это. Итак, я открою Copilot Edits и введу "create trip routes blueprint with CRUD operations". Итак, я ожидаю получить маршруты создания, чтения, обновления и удаления с этой подсказкой. Итак, давайте посмотрим, что было сгенерировано.
[Музыка] [Музыка] Привет, привет, привет. Привет, привет, привет, привет, привет, привет, привет, привет, привет, привет, [Музыка] [Музыка] привет. Хорошо, давайте примем эти изменения, сохраним наши файлы и протестируем маршруты.
[Музыка]
Первый маршрут для тестирования — это маршрут создания. Давайте добавим URL `/trips`. Теперь мы можем добавить наше JSON-тело с пунктом назначения, датой начала и датой окончания вот так. Сделаем это POST-запросом. Добавим наши заголовки `Content-Type: application/json` и `Authorization`, который будет нашим токеном Bearer. Давайте войдем в систему пользователя. Получим токен доступа. Вернемся к запросу на создание поездки в Bruno и добавим токен Bearer. Если вы используете другой API-клиент, добавьте свой токен в соответствующую область, и давайте отправим запрос.
[Музыка] [Музыка] [Музыка] [Музыка] Дай мне жару. Удивительно.
[Музыка]
Теперь давайте добавим шаблон маршрута по умолчанию. Откройте Edits и введите "create a function to generate the default itinerary template". Давайте посмотрим на изменения, примем их и сохраним файлы. Но сначала давайте убедимся, что мы просмотрели код, который мы только что получили от Copilot.
[Музыка] Привет, привет, привет. [Музыка] [Музыка] [Музыка] [Музыка] Привет, привет, Привет, [Музыка] привет, [Музыка] Привет. [Музыка] Привет. [Музыка] Хорошо. Теперь, когда мы запустим маршрут `get trip by ID`, мы должны получить прикрепленный к нему маршрут, вот так. Удивительно. Все выглядит очень хорошо. Мы можем добавить гораздо больше в этот API, но для этого проекта он выглядит хорошо. Давайте настроим CORS и добавим базовую конечную точку проверки работоспособности и закончим MVP.
[Музыка] [Музыка] Отлично. Итак, давайте примем эти изменения. И похоже, мы только что завершили MVP API, что означает, что вы только что создали API с помощью GitHub Copilot.
>> Кадия, прежде чем мы закончим этот MVP, нам, вероятно, нужно добавить некоторую документацию в README. >> Ах, это очень хорошая мысль. И нам также следует добавить тесты. >> Абсолютно. Итак, я люблю использовать GitHub Copilot Chat для быстрого и эффективного написания README для меня. Итак, я собираюсь открыть GitHub Copilot Chat и ввести `@workspace Create a detailed README about the Plan Venture API`. Я могу нажать и получить полный файл README, который я теперь могу поместить в документацию README API, и мы закончили. Ах, это так прекрасно. Теперь действительно нет причин для пустых файлов README. Я хочу показать вам, как создать проект фронтенда с помощью GitHub Copilot. И что может быть лучше, чем создать клиент React. Теперь давайте посмотрим, что мы будем строить. Итак, мы создаем клиентский фронтенд для Plan Venture, конструктора туристических маршрутов, который помогает пользователям планировать свои поездки. Этот проект основан на предыдущем эпизоде, где мы создали бэкенд API с помощью
Flask и GitHub Copilot. Чтобы следовать за мной, вам понадобится доступ к редактору кода. Я использую VS Code, самую последнюю версию Node.js и менеджер пакетов, такой как npm, установленный на вашей машине. Или вы можете открыть кодовое пространство для разработки в облаке. Вам также нужно будет быть знакомым с созданием клиентских приложений с помощью React, так как именно эту библиотеку мы будем использовать сегодня. Мы будем использовать React с VIT для клиента и Material UI в качестве библиотеки компонентов для простоты стилизации. Мы добавим защищенные маршруты, позволим пользователям добавлять информацию о своих поездках и маршрутах с возможностью вносить обновления по мере необходимости. Наша цель сегодня — создать работающее фронтенд-приложение, которое обрабатывает аутентификацию пользователей и базовое управление поездками. Полное описание того, что мы будем создавать сегодня, включено в стартовый репозиторий, который вы можете клонировать по этой ссылке. Я хотел бы, чтобы вы следовали за мной и использовали GitHub Copilot для совместной разработки. Теперь давайте перейдем к коду на GitHub. Перейдите в этот репозиторий gh.io/planventure. Клонируйте репозиторий и перейдите в каталог planventure-client. Вы заметите, что у нас есть довольно минималистичное React-приложение с уже настроенным для нас Vite. Давайте установим наши зависимости и запустим сервер разработки. Откройте свои терминалы и выполните npm install. Ваш сервер должен запуститься на localhost:5173, и вы должны увидеть этот пользовательский интерфейс в своем браузере, когда нажмете на ссылку. Потрясающе. Теперь давайте посмотрим на код и посмотрим, что у нас есть. У нас есть защищенные маршруты, уже настроенные с помощью React Router DOM. У нас также настроен Material UI для стилизации, а также базовый navbar и footer на главной странице. У нас уже настроены наши компоненты off-контекста и основного макета, и на самом деле я могу зайти сюда, открыть чат Copilot и спросить у рабочей области: "Расскажи мне о настройке конфигурации в React-приложении". Он предоставит мне подробное описание всего кода, который уже есть в нашем каталоге. Таким образом, мы можем быстрее войти в курс дела. Отлично. Теперь, когда мы знаем, что у нас есть, давайте посмотрим на проблему GitHub, которая содержит подробности о том, что нам нужно создать. Итак, похоже, первое, что нам нужно, это настроить аутентификацию. Значит, нам нужно будет создать форму входа и форму регистрации. Давайте сначала создадим компонент макета off, который мы можем использовать для всех аутентифицированных маршрутов. Откройте чат Copilot и введите в рабочей области: "Создай компонент макета off с навигацией и центрированным содержимым". Нажмите на три точки и вставьте код в новый файл. Теперь давайте посмотрим, что было сгенерировано. Отлично. Давайте сохраним код. А теперь давайте создадим форму входа для реализации компонента макета off. Откройте чат Copilot и введите в рабочей области: "Создай компонент формы входа с полями email и пароля и валидацией". Давайте теперь создадим новую папку с именем off в папке components. Вернитесь в Copilot Chat и снова нажмите на три точки. Выберите "Вставить в новый файл". Сохраните файл в папке off. [Музыка] [Музыка] Теперь давайте обновим компонент home, чтобы он перенаправлял нас на страницу входа. Откройте редактирования Copilot и введите: "Обнови navbar, чтобы использовать новую страницу входа, и добавь кнопку "Начать" на главную страницу, которая перенаправляет нас на страницу входа". [Музыка] [Музыка] Давайте рассмотрим код, примем изменения и обновим страницу браузера. Теперь, когда это решено, давайте зафиксируем наши изменения и посмотрим, что у нас есть на данный момент. Отлично. Вы увидите новую кнопку "Начать" в пользовательском интерфейсе и страницу входа. Теперь давайте создадим страницу регистрации, чтобы новые пользователи могли регистрироваться. Откройте Copilot Chat и введите в рабочей области: "Создай компонент формы регистрации, соответствующий стилю формы входа, и новую страницу регистрации. Обязательно обновите маршрутизацию". Выберите "Вставить в новый файл", чтобы сохранить форму регистрации в папке off. Вернитесь в Copilot Chat еще раз и нажмите на три точки. Выберите "Вставить в новый файл", чтобы сохранить страницу регистрации. Сохраните этот файл в папке pages. Откройте файл routes.jsx и нажмите кнопку "Применить в редакторе" из обновленного блока кода, который мы получили от GitHub Copilot. [Музыка] Обновите браузер и протестируйте новые страницы. Давайте зафиксируем наши изменения, а затем обновим файл off-контекста. Откройте файл offcontext.jsx (JSX) и также откройте Copilot Chat. Затем введите: "Настрой контекст аутентификации и управление токенами". Введите #file и прикрепите файл protected-routes.jsx. Нажмите кнопку "Применить в редакторе", чтобы принять изменения в файле offcontext.jsx. И давайте рассмотрим изменения. Откройте файл protected-routes.jsx и нажмите "Применить в редакторе" и примите эти изменения. Если возникнут какие-либо ошибки, мы решим их с помощью GitHub Copilot. Теперь давайте перейдем к отправке запроса на серверную часть, чтобы мы могли зарегистрироваться и войти в систему. Для этого я приглашу Кристофера, чтобы помочь нам быстрее разрабатывать >> Для создания форм входа и регистрации. Мы будем работать с тремя файлами. К счастью, GitHub Copilot Chat имеет возможность редактировать несколько файлов одновременно. Мы добавим эти файлы в чат, а затем дадим Copilot инструкцию создать как формы входа, так и формы регистрации. Мы можем изучить весь сгенерированный код, убедиться, что все работает, и применить его в редакторе. Привет, привет, привет. Привет, привет, привет. После применения этих изменений мы можем вернуться на сайт и фактически протестировать все. И мы можем видеть, что мы можем зарегистрировать совершенно нового пользователя и войти под этим совершенно новым пользователем. Когда мы создаем веб-сайт, мы хотим убедиться, что людям легко выполнять некоторые из наиболее распространенных задач, мы хотим убедиться, что они могут очень быстро войти в систему. Поэтому мы хотим добавить это в navbar слева. Вернувшись в Copilot Chat, мы сделаем то же самое, работая с несколькими файлами. Мы дадим Copilot Chat инструкцию добавить эту функциональность в navbar. Снова изучим сделанные им изменения. И давайте вернемся в браузер и убедимся, что все выглядит хорошо. Теперь мы можем видеть ссылку "Вход" в нашем разделе nav. Давайте протестируем ее и убедимся, что мы по-прежнему можем войти под пользователем, которого мы создали ранее. Продолжая этот путь, чтобы убедиться, что у наших пользователей есть легкий доступ к информации, которая их наиболее часто интересует. Давайте обновим панель управления, чтобы добавить информацию об их поездках. Затем мы дадим Copilot указание создать макет панели управления с навигацией по боковой панели. Copilot сгенерирует код, и, как всегда, мы захотим просмотреть код и убедиться, что он выглядит хорошо. Теперь, когда у нас есть макет, давайте создадим компонент карточки поездок и списка поездок для отображения всех этих поездок. Вернувшись к Copilot, мы попросим его создать компонент карточки поездок и списка поездок для отображения всех этих поездок. И мы также попросим его добавить сообщение для различных состояний загрузки. Мы также попросим Copilot сгенерировать компонент панели управления для отображения поездок, к которым пользователи перенаправляются при входе в систему. Если у пользователя нет входа, то мы хотим показать ему приветственное сообщение на этой панели управления. Я также хочу убедиться, что если при запуске сайта возникнет ошибка, мы отобразим забавное маленькое сообщение об ошибке. Я скажу Copilot добавить это и добавить ресурсы в соответствующие папки. [Музыка] [Музыка] Давайте сохраним все эти файлы, рассмотрим все изменения и убедимся, что все выглядит хорошо. Одна вещь, которую я хочу подчеркнуть здесь, это тот факт, что мы работали интерактивно. И это одна большая вещь, когда вы работаете с Copilot, это то, что вы можете посмотреть на то, что он сделал, и предоставить дополнительные предложения. Таким образом, вам не нужно объединять все в один огромный запрос. А теперь давайте вернемся на сайт и посмотрим, как все это работает. У нас есть вход, выход и весь код ошибок, работающий должным образом. Если вы заметили, я всегда слежу за тем, чтобы просматривать изменения кода, которые предоставляет Copilot. Это гарантирует, что я сразу же обнаружу любые ошибки, а затем я могу попросить ИИ внести изменения или я могу вручную скорректировать код по мере необходимости. Пока что, похоже, у нас все идет довольно хорошо. >> Вау, мы добиваемся такого большого прогресса здесь. Большое спасибо, Кристофер, за всю вашу помощь. Теперь давайте перейдем к фактической части управления поездками. Нам нужно создать новую форму, которая позволит пользователям добавлять свои поездки и сохранять их на панели управления. Нам нужно будет отправить POST-запрос по маршруту /trip/new. А для выбора даты мы будем использовать библиотеку dayjs. Давайте откроем Copilot и начнем. Введите: "Создай новую форму поездки с полями назначения и даты. Используй библиотеку dayjs". Откройте свои терминалы и установите эти зависимости. Нам нужен dayjs для выбора даты, и нам также нужен выбор даты mux для работы с ним. Давайте рассмотрим наши изменения. Примите эти изменения. А теперь давайте протестируем наш пользовательский интерфейс. Давайте вернемся к редактированиям Copilot и введем: "Создай компоненты "день маршрута" и "временной слот" для управления ежедневными действиями с возможностью редактирования". Давайте рассмотрим наши изменения, примем эти изменения и сохраним наши файлы. Хорошо, тогда откройте редактирования Copilot и введите: "Если у пользователя нет маршрута для его поездки, предложите ему добавить маршрут. Также включите шаблон маршрута по умолчанию". Давайте рассмотрим изменения, примем изменения и сохраним наш файл. [Музыка] Вау, мы только что создали полностью функциональный MVP приложения за короткое время с помощью GitHub Copilot. Это действительно сила совместной разработки с ИИ-инструментом, который просто работает. Вероятно, самый базовый вопрос при написании кода: работает ли он? И способ узнать это — запустить приложение. Но по мере роста и усложнения нашей кодовой базы это действие становится утомительным и обременительным. К счастью, мы можем автоматизировать это, создавая тесты. Давайте поговорим о тестировании, модульных тестах и этой штуке под названием разработка, управляемая тестами. Прежде чем мы начнем, я хочу подчеркнуть, что наша цель сегодня — не углубляться в тонкости тестирования. Это может быть отдельная серия. Вместо этого мы хотим осветить основные концепции и то, как мы можем начать тестировать наш код. Сегодня у меня есть очень специальный гость, Кристофер, чтобы помочь нам начать работу со всем, что связано с тестированием с помощью GitHub Copilot. >> Спасибо за представление, Кадия. Теперь давайте начнем с некоторых определений. Что такое тестирование и почему оно важно? Тестирование — это, как следует из названия, проверка того, что наш код делает то, что мы от него ожидаем. Это может принимать различные формы. У нас могут быть приемочные тесты, где мы убеждаемся, что наше приложение соответствует определенному набору функций, или интеграционные тесты, где мы убеждаемся, что наше приложение может взаимодействовать с различными системами, такими как базы данных и API. И у нас есть модульные тесты, на которых мы здесь сосредоточимся, где мы тестируем небольшие единицы кода. Модульные тесты сосредоточены на самом коде и разбиты на небольшие, хорошо структурированные единицы. Это небольшие атомарные изолированные действия, которые выполняет наш код. Это может быть проверка того, что число находится в определенном диапазоне, или что ошибка выбрасывается в нужное время, или что возвращается значение. Но почему модульные тесты важны? Ну, это позволяет нам убедиться, что наш код работает так, как мы ожидаем. Как Кадия подчеркнула в начале, если мы фактически не запускаем наш код, откуда мы знаем, что он работает? И мы делаем это на очень низком уровне, автоматизированно, с помощью модульных тестов. И в этом вся прелесть этого процесса. Вы можете буквально иметь тысячи тестов, которые запускаются по команде и быстро дают вам статус вашего приложения. Кроме того, они могут сообщить вам, сломали ли какие-либо изменения, внесенные вами в ваш код, что-то, чего вы не ожидали, что, я думаю, мы все испытывали. Теперь давайте попросим Copilot создать некоторые модульные тесты и изучить их. Я начну с открытия файла validators.py и выделения функции validate_email_format, чтобы сосредоточить внимание Copilot на этой функции. Я открываю чат Copilot, и вы заметите, что он фактически предложит использовать команду /tests, как и следовало ожидать. Это поможет нам быстро создать наши тесты. Когда я запущу это в первый раз, Copilot спросит, хочу ли я настроить тестовый фреймворк для нашего проекта. Я откажусь от этого. Я просто буду строго придерживаться настройки модульных тестов. Он даст мне краткий обзор того, что он хочет сделать, а затем сгенерирует код для меня. Что я замечу, это то, что он тестирует функцию как на успех. Другими словами, это действительный адрес электронной почты. И если он терпит неудачу, я теперь могу добавить это в совершенно новый файл под названием test_validators. Теперь у меня есть коллекция тестов для этой функции. И если я запущу эти тесты, я замечу, что они вернутся и скажут мне, что все успешно. Теперь давайте переключим наше внимание на TDD, или разработку, управляемую тестами. Это один из тех случаев, когда разбиение английских слов дает нам действительно хорошее объяснение того, что означает терминология. Мы уже рассмотрели тесты, убедившись, что что-то работает. Driven (управляемый) в английском языке — это то, что ведет или направляет нас, а development (разработка) — это, конечно, написание кода. Таким образом, в двух словах, TDD позволяет тестам управлять тем, как и что мы разрабатываем, пока мы пишем наш код. В частности, с TDD мы фактически сначала пишем наши тесты, а затем фактическую реализацию. Это дает нам множество больших преимуществ. И способ, которым вы обычно проходите через это, — это шаблон, известный как "красный-зеленый-рефакторинг". Теперь требуется некоторое время, чтобы приспособить мозг к этому подходу, но, как я уже подчеркнул, есть много преимуществ. Это дает вам возможность увидеть, как ваш код будет фактически вести себя до того, как вы его написали, и убедиться, что тесты, которые вы пишете, тестируют то, что вы ожидаете. Итак, вы сначала пишете эти тесты. Они не пройдут, потому что вы еще не создали код. Возможно, он даже не соберется из-за этого. Затем вы пишете ровно столько кода, сколько нужно для прохождения теста. Так что, если я тестирую, что выбрасывается ошибка, если число меньше нуля, то это все, что я собираюсь написать для кода. Затем, когда вы снова запустите тесты, они пройдут. Это зеленая часть. Это дает вам уверенность в том, что вы активно внесли изменение в кодовую базу для реализации желаемой функциональности. Наконец, вы выполняете любой рефакторинг, чтобы сделать ваш код красивым. Если вы похожи на меня, вы, вероятно, начинаете просто с того, что заставляете вещи работать, а затем фокусируетесь на том, чтобы сделать их красивыми. И это, по сути, то, что мы здесь делаем. И что здорово, так это то, что у нас есть наши модульные тесты, которые говорят нам, что внесенные нами изменения ничего не сломали. Но как насчет функции, которой вообще не существует? Мы все еще можем сделать это с Copilot. Итак, я объясняю Copilot, что мне нужна совершенно новая функция для проверки имен пользователей. Я предоставляю критерии, которые я ожидаю. Я хочу, чтобы оно было не менее трех, но не более 16 символов. Всегда начинаться с буквы или подчеркивания. Не может быть нескольких подчеркиваний. И что после первой буквы вы можете иметь подчеркивания, цифры и дополнительные буквы. Copilot сгенерирует модульные тесты на основе этой функциональности. Я вернусь еще раз и запущу эти тесты. Они не пройдут, потому что, опять же, этой функции не существует. Я возвращаюсь к Copilot. Я прошу его создать эту функцию. Copilot генерирует этот код. Я вставлю его в свои валидаторы. [Музыка] И снова я запускаю тесты. Я вижу, что все проходит. Итак, я сделал это "красное" — кода даже не существовало, и "зеленое" — теперь все успешно. Теперь, когда мы создали все наши тесты, давайте немного поговорим о лучших практиках. Основная причина, по которой Copilot так хорошо работает с модульными тестами, заключается в том, что модульные тесты в конечном итоге являются просто кодом. Поэтому документируйте свои тесты, делайте их красивыми, относитесь к ним так же, как к производственному коду. Создавайте утилиты, чтобы ускорить написание тестов, и убедитесь, что вы обновляете свои тесты по мере внесения изменений в ваш код. И снова, Copilot может помочь вам на каждом этапе пути. К сожалению, у нас нет времени, чтобы охватить каждый аспект разработки, управляемой тестами, или модульных тестов, но существует множество ресурсов, некоторые из которых мы поделимся в примечаниях к выпуску. Я добавлю, что, по моему мнению, мне больше всего помогло изучение проектирования модульных тестов, мок-объектов, где вы притворяетесь, что что-то другое, и других типов тестов, которые вы можете создать. Большое спасибо, Кристофер, за то, что пришли и показали нам, как мы можем реализовать TDD с помощью GitHub Copilot, и действительно научили нас многому о тестировании в целом. Я очень надеюсь, что вы узнали столько же, сколько и я, из сегодняшнего эпизода. Тестирование — неотъемлемая часть разработки, и возможность добавлять тесты более эффективно делает их менее утомительными для написания. Сегодня я научу вас тому, что вам нужно знать, чтобы начать рефакторинг и проверку кода с помощью GitHub Copilot. Независимо от того, полируете ли вы свой первый проект или просто хотите привести свой код в порядок, GitHub Copilot поможет вам. Прежде всего, что такое проверка кода и что означает рефакторинг применительно к вашему коду? Проверка кода — это как иметь второй взгляд на ваш код. Это помогает вам находить ошибки, улучшать качество кода и обеспечивать согласованность. Рефакторинг, с другой стороны, — это процесс реструктуризации существующего кода без изменения его функциональности. Думайте об этом как о наведении порядка на рабочем месте, чтобы сделать вещи более эффективными и легкими для понимания. В любом проекте разработки поддержание чистого и эффективного кода имеет решающее значение для облегчения будущей работы. Но давайте признаем, что легко допустить беспорядок, особенно когда вы жонглируете несколькими задачами. Вот где может пригодиться GitHub Copilot. Он не только помогает писать код, но и делает процесс проверки и рефакторинга более плавным и эффективным. Теперь давайте посмотрим на некоторые примеры из реальной жизни. Представьте, что у вас есть функция, которая становится слишком длинной и трудной для понимания. С помощью Copilot вы можете выделить эту функцию и запросить предложения по рефакторингу. Copilot может разбить ее на более мелкие, более управляемые части или оптимизировать логику для повышения производительности. Другой пример: предположим, у вас есть блок кода, который не соответствует соглашениям об именовании вашей команды. Copilot может автоматически предлагать правильные имена переменных, помогая обеспечить согласованность во всем вашем проекте. Хорошо, давайте предположим, что у нас есть этот компонент панели управления, и мы хотим увидеть, есть ли что-то, что можно улучшить. Мы можем открыть чат Copilot и спросить: "Как я могу улучшить этот код?". Copilot затем просмотрит наш код и даст нам некоторые предложения о том, как код можно улучшить. Давайте посмотрим, что он сгенерировал. Итак, мы можем применить эти предложения, нажав кнопку "Применить в редакторе", и Copilot внесет обновления за нас. Мы также можем попросить Copilot объяснить каждое предложение шаг за шагом. Мы можем пойти дальше, задавая конкретные и прямые вопросы. Например, скажем, я хотел создать пользовательский хук для централизации логики получения данных о поездках в нашем приложении, чтобы сделать ее повторно используемой в компонентах. Я могу создать новый разговор в чате и спросить: "Как я могу извлечь логику получения данных в пользовательский хук?". Затем нам будет предоставлен рефакторинговый код, который позволит нам извлечь эту логику из компонента панели управления в новый каталог хуков, который мы затем сможем использовать в нескольких компонентах по всему нашему приложению. Гораздо лучше. Привет, привет, привет. Теперь, что, если мы хотим выявить избыточный код в нашем компоненте? Имея открытый файл, я могу спросить: "Есть ли в этом файле избыточный код?". Вы увидите здесь, что Copilot нашел некоторые избыточности, которые он исправил от моего имени в сгенерированном блоке кода. Я могу продолжить и принять эти изменения по мере необходимости. Проверка и рефакторинг вашего кода с помощью GitHub Copilot — отличный способ провести первоначальный обзор проделанной вами работы. Вы также можете попросить Copilot предложения по улучшению производительности, как сделать функции более модульными, добавить комментарии для читаемости, обновить синтаксис до более современного и так далее. Мы также можем, если у вас есть доступ, использовать проверку кода Copilot на github.com, чтобы сделать процесс проверки кода еще более бесшовным. Давайте быстро взглянем. Допустим, у нас есть этот pull request, который включает компонент для фронтенда React-проекта. Я могу фактически получить первоначальную проверку моего кода от GitHub Copilot. Итак, на github.com вы заметите под "рецензентом" у вас есть Copilot. Нажмите кнопку "Запросить" и подождите, пока Copilot проверит ваш код. После завершения прокрутите страницу вниз, и вы увидите некоторые комментарии Copilot. Следует отметить, что Copilot всегда будет оставлять комментарий-обзор, а не одобрение или запрос изменений. Это означает, что обзоры Copilot не учитываются при обязательных обзорах для pull request, и обзоры Copilot не будут блокировать слияние изменений. Я могу принять эти предложения, нажав на выпадающее меню "Принять предложения", а затем нажав "Принять изменения". Это обновит файл с предложенными изменениями прямо на github.com. Я также могу принять предложения пакетами, нажав кнопку "Добавить в пакет". Когда вы закончите с вашим PR, вы можете запросить дополнительные обзоры от Copilot и снова пройти через принятие предложений. С помощью проверки кода Copilot вы можете попросить GitHub Copilot взглянуть на ваш код, прежде чем просить вашу команду о финальном обзоре. Итак, каковы ключевые компоненты использования Copilot для проверки кода и рефакторинга? Мы можем разбить это на пять областей. Автоматические предложения. Здесь Copilot предлагает улучшения и оптимизации во время проверки вашего кода. Проверки согласованности. Здесь Copilot помогает поддерживать стандарты кодирования, предлагая согласованные соглашения об именовании и структуры для ваших функций. Помощь в рефакторинге. Будь то упрощение сложных функций или реорганизация вашей кодовой базы, Copilot предоставляет действенные советы по рефакторингу. Обнаружение ошибок. GitHub Copilot может выявлять потенциальные ошибки или неэффективность, которые вы могли упустить во время разработки. Поддержка комментариев. Copilot может помочь генерировать четкие комментарии в вашем коде, делая ваш код более понятным для других. Теперь помните, что вы пилот, и мы называем его C-pilot не просто так. Это мощный инструмент, но у него есть некоторые ограничения. C-Ilot, как и любой LLM, полагается на предоставленный вами контекст. Поэтому неясный или плохо документированный код может привести к менее эффективным предложениям. Кроме того, хотя Copilot может выявлять многие проблемы, он не является заменой тщательной человеческой проверки. Всегда дважды проверяйте предложенные им изменения, чтобы убедиться, что они соответствуют целям и стандартам вашего проекта, а также политике вашей организации. В заключение, GitHub Copilot — это бесценный помощник для проверки кода и рефакторинга. Он помогает вам поддерживать чистый, эффективный и согласованный код, экономя ваше время и уменьшая количество ошибок. Интегрируя Copilot в свой рабочий процесс, вы можете больше сосредоточиться на создании отличных функций и меньше — на мелочах обслуживания кода.