{"meta":{"title":"Создание и развертывание приложений на базе искусственного интеллекта с помощью GitHub Spark","intro":"Узнайте, как создать и развернуть интеллектуальное веб-приложение на естественном языке с помощью GitHub Spark.","product":"GitHub Copilot","breadcrumbs":[{"href":"/ru/copilot","title":"GitHub Copilot"},{"href":"/ru/copilot/tutorials","title":"Учебники"},{"href":"/ru/copilot/tutorials/spark","title":"Spark"},{"href":"/ru/copilot/tutorials/spark/build-apps-with-spark","title":"Сборка и развертывание приложений"}],"documentType":"article"},"body":"# Создание и развертывание приложений на базе искусственного интеллекта с помощью GitHub Spark\n\nУзнайте, как создать и развернуть интеллектуальное веб-приложение на естественном языке с помощью GitHub Spark.\n\n> \\[!NOTE]\n>\n> * GitHub Spark находится в Общедоступная предварительная версия с [защитой данных](https://gh.io/dpa) и может быть изменен.\n> * Настройка 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).\n\n## Введение\n\nС помощью GitHub Sparkможно описать то, что вы хотите на естественном языке, и получить полное веб-приложение с хранилищем данных, функциями ИИ и встроенными средствами проверки подлинности GitHub . Вы можете выполнять итерацию с помощью запросов, визуальных инструментов или кода, а затем развернуть с помощью щелчка в полностью управляемой среде выполнения.\n\nSpark легко интегрирован с GitHub для разработки spark с помощью синхронизированного пространства кода GitHub с Copilot для расширенного редактирования. Вы также можете создать репозиторий для совместной работы команды и использовать экосистему средств и интеграции GitHub.\n\nЭтот урок проведёт вас через весь жизненный цикл создания и развертывания приложения с Spark его возможностями.\n\n### Необходимые компоненты\n\n* Учетная GitHub запись с Copilot Pro+ лицензией Copilot Enterprise .\n\n## Шаг 1. Создание веб-приложения\n\nВ этом руководстве мы создадим простое приложение средства маркетинга, где:\n\n* Пользователь вводит описание продукта, который он хочет вывести на рынок.\n* Приложение создает маркетинговую копию и рекомендует визуальную стратегию и целевую аудиторию.\n\n1. Перейти к <https://github.com/spark>.\n\n2. В поле ввода введите описание приложения. Например:\n\n   ```copilot copy\n   Build an app called \"AI-Powered Marketing Assistant.\"\n\n   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:\n      - Persuasive and engaging marketing copy for the product or service.\n      - A visual strategy for how to present the product/service (e.g., suggested imagery, colors, design motifs, or mood).\n      - A recommendation for the ideal target audience.\n   The app should display these three elements clearly and in an organized manner.  The app should look modern, fresh and engaging.\n   ```\n\n   > \\[!TIP]\n   >\n   > * Будьте конкретными, и предоставьте как можно больше сведений о наилучших результатах. Вы можете попросить [Copilot Chat](https://github.com/copilot?ref_product=copilot\\&ref_type=engagement\\&ref_style=text) уточнить или предложить улучшения вашего первоначального запроса.\n   > * В качестве альтернативы вставьте документ markdown в поле ввода, чтобы Spark получить больше контекста о том, что вы хотите создать.\n\n3. По желанию загрузите изображение, чтобы предоставить Spark визуальный ориентир для вашего приложения. Макеты, наброски или скриншоты помогают Spark понять, что вы хотите построить.\n\n4. Нажмите **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-paper-airplane\" aria-label=\"Submit prompt\" role=\"img\"><path d=\"M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z\"></path></svg>** , чтобы создать своё приложение.\n\n   > \\[!NOTE]\n\n   ```\n          Spark всегда будет генерировать приложения Typescript и React.\n   ```\n\n## Шаг 2. Уточнение и расширение приложения\n\nПосле Spark завершения создания приложения можно протестировать его в окне предварительного просмотра. Здесь вы можете выполнить итерацию приложения с помощью естественного языка, визуальных элементов управления редактирования или кода.\n\n1. Чтобы внести изменения в приложение с помощью **естественного языка**, на вкладке \"Итератировать\" на левой боковой панели введите инструкции в главном поле ввода, а затем отправьте.\n2. При необходимости щелкните один из вариантов \"Предложения\" непосредственно над полем ввода на вкладке \"Итерат\" для разработки приложения.\n3. ```\n          Spark Автоматически оповещает о обнаруженных ошибках. Чтобы устранить ошибки, нажмите кнопку **\"Исправить все** над полем ввода\" на вкладке \"Итерат\".\n   ```\n4. По желанию нажмите **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-code\" aria-label=\"code\" role=\"img\"><path d=\"m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z\"></path></svg> «Код** », чтобы просмотреть и отредактировать базовый код. Панель редактирования кода содержит Copilot встроенные предложения.\n5. Чтобы внести целевые изменения в определенный элемент приложения, щелкните значок\\*\\* целевого объекта в правом верхнем углу, а затем наведите указатель мыши \\*\\*и выберите элемент в области динамического просмотра.\n\n## Шаг 3. Настройка стиля приложения\n\nДалее давайте изменим стиль вашего приложения с помощью Sparkвстроенных инструментов . Кроме того, можно напрямую изменить код.\n\n1. Измените общий внешний вид приложения:\n   * Щелкните вкладку **\"Тема** \", чтобы настроить типографию, цвета, радиус границы, интервал и другие визуальные элементы.\n   * Выберите из предварительно созданных тем, чтобы легко обновить общий стиль приложения.\n\n2. Чтобы выбрать целевые визуальные изменения в определенном компоненте, щелкните **значок** целевого объекта, а затем выберите элемент приложения в области предварительного просмотра. Элементы управления стили, связанные с этим конкретным элементом, будут отображаться на левой боковой панели.\n\n3. При необходимости измените стили в коде:\n   * Нажмите **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-code\" aria-label=\"Code\" role=\"img\"><path d=\"m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z\"></path></svg>** , чтобы открыть редактор кода.\n   * Измените CSS, Tailwind CSS или пользовательские переменные для точного элемента управления (например, заполнение, интервалы, шрифты, цвета).\n\n     > \\[!TIP]\n     > Вы можете импортировать настраиваемые шрифты (например, Google Fonts) или добавить расширенные стили непосредственно в редакторе кода Spark.\n     > Попросите [Copilot Chat](https://github.com/copilot?ref_product=copilot\\&ref_type=engagement\\&ref_style=text) пошаговые рекомендации, если вы не знакомы с синтаксисом стиля.\n\n4. Нажмите на вкладку **Assets**, чтобы загрузить surface нужные ассеты в своём приложении.\n   * Добавление изображений, логотипов, видео, документов или других ресурсов для персонализации приложения.\n   * После загрузки Spark укажите, как вы хотите интегрировать эти ассеты в своё приложение во вкладке «Итератив».\n\n## Шаг 4. Хранение данных и управление ими\n\nЕсли Spark обнаружит необходимость хранить данные в вашем приложении, оно автоматически настроит хранилище данных с помощью хранилища ключ-значения.\n\nДля нашего маркетингового приложения давайте добавим data storage, чтобы пользователи могли сохранять свои любимые маркетинговые тексты и легко access к ним позже:\n\n1. Используйте следующую инструкцию во вкладке «Итератив» для руководства Spark:\n\n   ```copilot copy\n   Add a \"Favorites\" page where users can save and view their favorite marketing copy results.\n   ```\n\n2. Взаимодействуйте с приложением после создания, чтобы проверить сохранение и получение избранного.\n\n3. Перейдите на вкладку \"Данные\", чтобы просмотреть и изменить сохраненные значения.\n\n4. Если вы явно **не** хотите Spark сохранять данные, попросите Spark «хранить данные локально» или «не сохранять данные».\n\n## Шаг 5. Уточнение возможностей искусственного интеллекта\n\nДалее давайте повторим возможности ИИ, включённые в наше приложение, которые работают на GitHub Models.\n\n```\n          Spark автоматически определяет, когда ИИ нужен для функций вашего приложения. Он автоматически создает запросы для каждой функции ИИ, интегрируется с лучшими моделями и управляет интеграцией API и выводом LLM от вашего имени.\n```\n\n1. Перейдите на вкладку **\"Запросы** \".\n2. Ознакомьтесь с подсказками, Spark созданными для работы всех функций ИИ, используемых в вашем приложении.\n   * В нашем маркетинговом приложении для нас сгенерировано три отдельных запроса Spark (генерация маркетинговых текстов, визуальная рекомендация стратегии и рекомендация целевой аудитории).\n3. Щелкните каждый запрос, чтобы просмотреть и изменить его без необходимости перейти в код. Внесите корректировки, чтобы лучше соответствовать вашему варианту использования.\n4. Проверьте приложение, чтобы просмотреть обновленные результаты.\n\n## Шаг 6: Редактировать и отладить с помощью кода и Copilot\n\nВы можете просматривать или редактировать код приложения напрямую в Spark или через синхронизированное GitHub кодовое пространство.\n\n> \\[!NOTE]\n> \\*\n> Spark использует стек с мнениями (**React**, **TypeScript**) для надежности.\n>\n> * Для достижения наилучших результатов следует **работать в Sparkрамках SDK** и основного фреймворка.\n> * Вы можете **добавить внешние библиотеки**, но совместимость не гарантируется. Необходимо тщательно протестировать.\n> * Прямое редактирование кода React **позволяет добавить контекст модели**, если следовать корректному синтаксису и Sparkфреймворку .\n\n1. Редактировать код в Spark:\n   \\*\n   **Нажмите<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-code\" aria-label=\"Code\" role=\"img\"><path d=\"m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z\"></path></svg> «Код**».\n   * Просматривайте файловое дерево и вносите правки, получая доступ к встроенным предложениям Copilot в редакторе. Изменения отражаются мгновенно в окне динамического предварительного просмотра.\n2. Чтобы сделать более сложные изменения, выполните приведенные далее действия.\n   * В правом верхнем углу нажмите **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-kebab-horizontal\" aria-label=\"More actions\" role=\"img\"><path d=\"M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"></path></svg>**, затем нажмите **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-codespaces\" aria-label=\"Open codespace\" role=\"img\"><path d=\"M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z\"></path><path d=\"M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z\"></path></svg> Open codespace** (полнофункциональный облачный IDE), чтобы запустить кодовое пространство в новой вкладке браузера.\n   * Оказавшись в кодовом пространстве, нажмите **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-copilot\" aria-label=\"copilot\" role=\"img\"><path d=\"M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z\"></path><path d=\"M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z\"></path></svg>** для открытия Copilot и внесения более сложных изменений.\n     * В окне запросов выберите **режим агента** , чтобы автоматически Copilot создавать, просматривать и устранять неполадки вашего кода.\n     * Выберите **режим редактирования** , Copilot чтобы пересмотреть код приложения и предложить улучшения и исправления.\n     * Выберите **режим Ask** , Copilot чтобы объяснить и помочь вам понять код или ошибки, которые вы видите в Spark.\n   * Изменения, которые вы вносите в кодовое пространство, автоматически синхронизируются с Spark.\n\n## Шаг 7. Развертывание и предоставление общего доступа к приложению\n\n```\n          Spark Оснащён полностью интегрированной средой выполнения, позволяющей развернуть приложение одним кликом.\n```\n\n> \\[!NOTE]\n>\n> * Когда вы запускаете искру, если решите сделать её видимой для других пользователей, обратите внимание, что данные в вашем приложении **общие между всеми пользователями** которые могут access вашим приложением. Убедитесь, что конфиденциальные данные не включены в spark перед обновлением параметров видимости.\n> * Вы также можете предоставить общий доступ к Spark только \\*\\*\\*\\* для чтения, чтобы другие пользователи могли просматривать содержимое приложения, но не могут изменять содержимое, удалять файлы или записи или создавать новые элементы.\n\n1. В правом верхнем углу нажмите кнопку **\"Опубликовать**\".\n\n2. По умолчанию spark будет частным и доступным только для вас. В разделе «Видимость» выберите — хотите ли вы, чтобы ваша искра оставалась приватной или делала её доступной для членов конкретной организации на GitHub, или для всех GitHub пользователей.\n\n   ![Снимок экрана: меню публикации GitHub Spark. Опция видимости «All GitHub users» обведена оранжевым цветом.](/assets/images/help/copilot/spark-github-user-visibility.png)\n\n3. В разделе «Data Access» выберите — предоставлять другим пользователям доступ только для чтения или Write Access к вашему приложению.\n\n   Выберите **только для** чтения, чтобы другие пользователи могли просматривать свое приложение, не позволяя им создавать, изменять или удалять содержимое.\n\n   Например, если вы создали приложение для семейного календаря и хотите, чтобы пользователи могли просматривать приложение, но не хотите, чтобы они могли создавать, изменять или удалять события, выберите **только** для чтения, чтобы пользователи не могли изменять хранилище данных Spark.\n\n4. Нажмите кнопку **\"Посетите сайт** \", чтобы перейти в ваше активное развернутое приложение. Скопируйте URL-адрес сайта, чтобы поделиться с другими пользователями.\n\n   При публикации приложения Spark автоматически добавляется облачное хранилище и LLM-вывод для вашего приложения в интегрированной среде выполнения.\n\n   URL-адрес для spark создается на основе имени spark. Вы можете отредактировать название приложения и Spark автоматически управлять перенаправлением старых URL на ваш последний URL.\n\n## Шаг 8. Приглашение участников совместной работы с репозиторием\n\nТеперь, когда у вас есть функциональное, развернутое приложение, вы можете продолжать создавать и сотрудничать над ним так же, как и с любым другим GitHub проектом, создавая и связывая GitHub репозиторий с искрой.\n\n1. В правом верхнем углу нажмите **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-kebab-horizontal\" aria-label=\"More actions\" role=\"img\"><path d=\"M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"></path></svg>**, затем **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-repo-push\" aria-label=\"repo-push\" role=\"img\"><path d=\"M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0V1.5h-8a1 1 0 0 0-1 1v6.708A2.493 2.493 0 0 1 4.5 9h2.25a.75.75 0 0 1 0 1.5H4.5a1 1 0 0 0 0 2h4.75a.75.75 0 0 1 0 1.5H4.5A2.5 2.5 0 0 1 2 11.5Zm12.23 7.79h-.001l-1.224-1.224v6.184a.75.75 0 0 1-1.5 0V9.066L10.28 10.29a.75.75 0 0 1-1.06-1.061l2.505-2.504a.75.75 0 0 1 1.06 0L15.29 9.23a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018Z\"></path></svg> нажмите Создать репозиторий**.\n2. В открывшемся диалоговом окне нажмите кнопку **\"Создать**\".\n\nПод вашим личным аккаунтом GitHubсоздаётся новый, приватный репозиторий, с именем репозитория на основе имени вашей искры.\n\nВсе изменения, внесенные в spark до создания репозитория, будут добавлены в репозиторий, чтобы с момента его создания вы записали все изменения и фиксации, внесенные в Spark.\n\nМежду вашей искрой и репозиторием происходит двусторонняя синхронизация, поэтому изменения, внесённые в одну Spark или в основной ветке вашего репозитория, автоматически отражаются в обоих местах.\n\nВы также можете создавать проблемы в своём репозитории и назначать их Copilot облачный агент , чтобы он мог составлять pull requests на исправления и улучшения.\n\n## Следующие шаги\n\nИсследуйте больше идей, с которыми можно строить Spark:\n\n* **Быстро прототипируйте новые идеи**: если у вас есть конкретная идея для функции или приложения, загрузите макет, эскиз, скриншот или даже вставьте документацию Spark по разметке и попросите Spark реализовать вашу идею.\n* **Создавайте внутренние инструменты для себя и своей команды**: если у вас есть общий рабочий процесс или процесс, который сейчас хранится в документе или таблице, объясните свой рабочий процесс Spark и Spark превратите его в интерактивное веб-приложение.\n\n## Дополнительные материалы\n\n* [автозаголовок](/ru/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark)\n* [автозаголовок](/ru/copilot/concepts/copilot-billing/about-billing-for-github-spark)\n* [автозаголовок](/ru/site-policy/github-terms/github-pre-release-license-terms)"}