# Создание и развертывание приложений на базе искусственного интеллекта с помощью GitHub Spark Узнайте, как создать и развернуть интеллектуальное веб-приложение на естественном языке с помощью GitHub Spark. > \[!NOTE] > > * GitHub Spark находится в Общедоступная предварительная версия с [защитой данных](https://gh.io/dpa) и может быть изменен. > * Настройка GitHub Copilot , блокирующая предложения, совпадающие с публичным кодом, может работать не так, как задумано при использовании Spark. См [. раздел AUTOTITLE](/ru/copilot/how-tos/manage-your-account/managing-copilot-policies-as-an-individual-subscriber#enabling-or-disabling-suggestions-matching-public-code). ## Введение С помощью GitHub Sparkможно описать то, что вы хотите на естественном языке, и получить полное веб-приложение с хранилищем данных, функциями ИИ и встроенными средствами проверки подлинности GitHub . Вы можете выполнять итерацию с помощью запросов, визуальных инструментов или кода, а затем развернуть с помощью щелчка в полностью управляемой среде выполнения. Spark легко интегрирован с GitHub для разработки spark с помощью синхронизированного пространства кода GitHub с Copilot для расширенного редактирования. Вы также можете создать репозиторий для совместной работы команды и использовать экосистему средств и интеграции GitHub. Этот урок проведёт вас через весь жизненный цикл создания и развертывания приложения с Spark его возможностями. ### Необходимые компоненты * Учетная GitHub запись с Copilot Pro+ лицензией Copilot Enterprise . ## Шаг 1. Создание веб-приложения В этом руководстве мы создадим простое приложение средства маркетинга, где: * Пользователь вводит описание продукта, который он хочет вывести на рынок. * Приложение создает маркетинговую копию и рекомендует визуальную стратегию и целевую аудиторию. 1. Перейти к . 2. В поле ввода введите описание приложения. Например: ```copilot copy Build an app called "AI-Powered Marketing Assistant." The app should allow users to input a brief description of a product or service. When the user submits their brief, send this information to a generative AI model with a prompt that asks the AI to return the following: - Persuasive and engaging marketing copy for the product or service. - A visual strategy for how to present the product/service (e.g., suggested imagery, colors, design motifs, or mood). - A recommendation for the ideal target audience. The app should display these three elements clearly and in an organized manner. The app should look modern, fresh and engaging. ``` > \[!TIP] > > * Будьте конкретными, и предоставьте как можно больше сведений о наилучших результатах. Вы можете попросить [Copilot Chat](https://github.com/copilot?ref_product=copilot\&ref_type=engagement\&ref_style=text) уточнить или предложить улучшения вашего первоначального запроса. > * В качестве альтернативы вставьте документ markdown в поле ввода, чтобы Spark получить больше контекста о том, что вы хотите создать. 3. По желанию загрузите изображение, чтобы предоставить Spark визуальный ориентир для вашего приложения. Макеты, наброски или скриншоты помогают Spark понять, что вы хотите построить. 4. Нажмите **** , чтобы создать своё приложение. > \[!NOTE] ``` Spark всегда будет генерировать приложения Typescript и React. ``` ## Шаг 2. Уточнение и расширение приложения После Spark завершения создания приложения можно протестировать его в окне предварительного просмотра. Здесь вы можете выполнить итерацию приложения с помощью естественного языка, визуальных элементов управления редактирования или кода. 1. Чтобы внести изменения в приложение с помощью **естественного языка**, на вкладке "Итератировать" на левой боковой панели введите инструкции в главном поле ввода, а затем отправьте. 2. При необходимости щелкните один из вариантов "Предложения" непосредственно над полем ввода на вкладке "Итерат" для разработки приложения. 3. ``` Spark Автоматически оповещает о обнаруженных ошибках. Чтобы устранить ошибки, нажмите кнопку **"Исправить все** над полем ввода" на вкладке "Итерат". ``` 4. По желанию нажмите ** «Код** », чтобы просмотреть и отредактировать базовый код. Панель редактирования кода содержит Copilot встроенные предложения. 5. Чтобы внести целевые изменения в определенный элемент приложения, щелкните значок\*\* целевого объекта в правом верхнем углу, а затем наведите указатель мыши \*\*и выберите элемент в области динамического просмотра. ## Шаг 3. Настройка стиля приложения Далее давайте изменим стиль вашего приложения с помощью Sparkвстроенных инструментов . Кроме того, можно напрямую изменить код. 1. Измените общий внешний вид приложения: * Щелкните вкладку **"Тема** ", чтобы настроить типографию, цвета, радиус границы, интервал и другие визуальные элементы. * Выберите из предварительно созданных тем, чтобы легко обновить общий стиль приложения. 2. Чтобы выбрать целевые визуальные изменения в определенном компоненте, щелкните **значок** целевого объекта, а затем выберите элемент приложения в области предварительного просмотра. Элементы управления стили, связанные с этим конкретным элементом, будут отображаться на левой боковой панели. 3. При необходимости измените стили в коде: * Нажмите **** , чтобы открыть редактор кода. * Измените CSS, Tailwind CSS или пользовательские переменные для точного элемента управления (например, заполнение, интервалы, шрифты, цвета). > \[!TIP] > Вы можете импортировать настраиваемые шрифты (например, Google Fonts) или добавить расширенные стили непосредственно в редакторе кода Spark. > Попросите [Copilot Chat](https://github.com/copilot?ref_product=copilot\&ref_type=engagement\&ref_style=text) пошаговые рекомендации, если вы не знакомы с синтаксисом стиля. 4. Нажмите на вкладку **Assets**, чтобы загрузить surface нужные ассеты в своём приложении. * Добавление изображений, логотипов, видео, документов или других ресурсов для персонализации приложения. * После загрузки Spark укажите, как вы хотите интегрировать эти ассеты в своё приложение во вкладке «Итератив». ## Шаг 4. Хранение данных и управление ими Если Spark обнаружит необходимость хранить данные в вашем приложении, оно автоматически настроит хранилище данных с помощью хранилища ключ-значения. Для нашего маркетингового приложения давайте добавим data storage, чтобы пользователи могли сохранять свои любимые маркетинговые тексты и легко access к ним позже: 1. Используйте следующую инструкцию во вкладке «Итератив» для руководства Spark: ```copilot copy Add a "Favorites" page where users can save and view their favorite marketing copy results. ``` 2. Взаимодействуйте с приложением после создания, чтобы проверить сохранение и получение избранного. 3. Перейдите на вкладку "Данные", чтобы просмотреть и изменить сохраненные значения. 4. Если вы явно **не** хотите Spark сохранять данные, попросите Spark «хранить данные локально» или «не сохранять данные». ## Шаг 5. Уточнение возможностей искусственного интеллекта Далее давайте повторим возможности ИИ, включённые в наше приложение, которые работают на GitHub Models. ``` Spark автоматически определяет, когда ИИ нужен для функций вашего приложения. Он автоматически создает запросы для каждой функции ИИ, интегрируется с лучшими моделями и управляет интеграцией API и выводом LLM от вашего имени. ``` 1. Перейдите на вкладку **"Запросы** ". 2. Ознакомьтесь с подсказками, Spark созданными для работы всех функций ИИ, используемых в вашем приложении. * В нашем маркетинговом приложении для нас сгенерировано три отдельных запроса Spark (генерация маркетинговых текстов, визуальная рекомендация стратегии и рекомендация целевой аудитории). 3. Щелкните каждый запрос, чтобы просмотреть и изменить его без необходимости перейти в код. Внесите корректировки, чтобы лучше соответствовать вашему варианту использования. 4. Проверьте приложение, чтобы просмотреть обновленные результаты. ## Шаг 6: Редактировать и отладить с помощью кода и Copilot Вы можете просматривать или редактировать код приложения напрямую в Spark или через синхронизированное GitHub кодовое пространство. > \[!NOTE] > \* > Spark использует стек с мнениями (**React**, **TypeScript**) для надежности. > > * Для достижения наилучших результатов следует **работать в Sparkрамках SDK** и основного фреймворка. > * Вы можете **добавить внешние библиотеки**, но совместимость не гарантируется. Необходимо тщательно протестировать. > * Прямое редактирование кода React **позволяет добавить контекст модели**, если следовать корректному синтаксису и Sparkфреймворку . 1. Редактировать код в Spark: \* **Нажмите «Код**». * Просматривайте файловое дерево и вносите правки, получая доступ к встроенным предложениям Copilot в редакторе. Изменения отражаются мгновенно в окне динамического предварительного просмотра. 2. Чтобы сделать более сложные изменения, выполните приведенные далее действия. * В правом верхнем углу нажмите ****, затем нажмите ** Open codespace** (полнофункциональный облачный IDE), чтобы запустить кодовое пространство в новой вкладке браузера. * Оказавшись в кодовом пространстве, нажмите **** для открытия Copilot и внесения более сложных изменений. * В окне запросов выберите **режим агента** , чтобы автоматически Copilot создавать, просматривать и устранять неполадки вашего кода. * Выберите **режим редактирования** , Copilot чтобы пересмотреть код приложения и предложить улучшения и исправления. * Выберите **режим Ask** , Copilot чтобы объяснить и помочь вам понять код или ошибки, которые вы видите в Spark. * Изменения, которые вы вносите в кодовое пространство, автоматически синхронизируются с Spark. ## Шаг 7. Развертывание и предоставление общего доступа к приложению ``` Spark Оснащён полностью интегрированной средой выполнения, позволяющей развернуть приложение одним кликом. ``` > \[!NOTE] > > * Когда вы запускаете искру, если решите сделать её видимой для других пользователей, обратите внимание, что данные в вашем приложении **общие между всеми пользователями** которые могут access вашим приложением. Убедитесь, что конфиденциальные данные не включены в spark перед обновлением параметров видимости. > * Вы также можете предоставить общий доступ к Spark только \*\*\*\* для чтения, чтобы другие пользователи могли просматривать содержимое приложения, но не могут изменять содержимое, удалять файлы или записи или создавать новые элементы. 1. В правом верхнем углу нажмите кнопку **"Опубликовать**". 2. По умолчанию spark будет частным и доступным только для вас. В разделе «Видимость» выберите — хотите ли вы, чтобы ваша искра оставалась приватной или делала её доступной для членов конкретной организации на GitHub, или для всех GitHub пользователей. ![Снимок экрана: меню публикации GitHub Spark. Опция видимости «All GitHub users» обведена оранжевым цветом.](/assets/images/help/copilot/spark-github-user-visibility.png) 3. В разделе «Data Access» выберите — предоставлять другим пользователям доступ только для чтения или Write Access к вашему приложению. Выберите **только для** чтения, чтобы другие пользователи могли просматривать свое приложение, не позволяя им создавать, изменять или удалять содержимое. Например, если вы создали приложение для семейного календаря и хотите, чтобы пользователи могли просматривать приложение, но не хотите, чтобы они могли создавать, изменять или удалять события, выберите **только** для чтения, чтобы пользователи не могли изменять хранилище данных Spark. 4. Нажмите кнопку **"Посетите сайт** ", чтобы перейти в ваше активное развернутое приложение. Скопируйте URL-адрес сайта, чтобы поделиться с другими пользователями. При публикации приложения Spark автоматически добавляется облачное хранилище и LLM-вывод для вашего приложения в интегрированной среде выполнения. URL-адрес для spark создается на основе имени spark. Вы можете отредактировать название приложения и Spark автоматически управлять перенаправлением старых URL на ваш последний URL. ## Шаг 8. Приглашение участников совместной работы с репозиторием Теперь, когда у вас есть функциональное, развернутое приложение, вы можете продолжать создавать и сотрудничать над ним так же, как и с любым другим GitHub проектом, создавая и связывая GitHub репозиторий с искрой. 1. В правом верхнем углу нажмите ****, затем ** нажмите Создать репозиторий**. 2. В открывшемся диалоговом окне нажмите кнопку **"Создать**". Под вашим личным аккаунтом GitHubсоздаётся новый, приватный репозиторий, с именем репозитория на основе имени вашей искры. Все изменения, внесенные в spark до создания репозитория, будут добавлены в репозиторий, чтобы с момента его создания вы записали все изменения и фиксации, внесенные в Spark. Между вашей искрой и репозиторием происходит двусторонняя синхронизация, поэтому изменения, внесённые в одну Spark или в основной ветке вашего репозитория, автоматически отражаются в обоих местах. Вы также можете создавать проблемы в своём репозитории и назначать их Copilot облачный агент , чтобы он мог составлять pull requests на исправления и улучшения. ## Следующие шаги Исследуйте больше идей, с которыми можно строить Spark: * **Быстро прототипируйте новые идеи**: если у вас есть конкретная идея для функции или приложения, загрузите макет, эскиз, скриншот или даже вставьте документацию Spark по разметке и попросите Spark реализовать вашу идею. * **Создавайте внутренние инструменты для себя и своей команды**: если у вас есть общий рабочий процесс или процесс, который сейчас хранится в документе или таблице, объясните свой рабочий процесс Spark и Spark превратите его в интерактивное веб-приложение. ## Дополнительные материалы * [автозаголовок](/ru/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark) * [автозаголовок](/ru/copilot/concepts/copilot-billing/about-billing-for-github-spark) * [автозаголовок](/ru/site-policy/github-terms/github-pre-release-license-terms)