使用 GitHub Spark 构建和部署 AI 支持的应用

注意

GitHub Spark 位于使用数据保护的公共预览版中，可能会更改。
使用 Spark 时，阻止与公共代码匹配的建议的 GitHub Copilot 设置可能无法按预期工作。请参阅“以单个订阅者身份管理 GitHub Copilot 策略”。

简介

借助 GitHub Spark，你可以用自然语言描述需求，并获得一个内置数据存储、AI 功能和 GitHub 身份验证功能的全栈 Web 应用。你可以使用提示、可视化工具或代码进行迭代，然后一键部署到完全托管的运行时环境。

Spark 与 GitHub 无缝集成，因此你可以通过同步的 GitHub codespace 开发 spark，并借助 Copilot 进行高级编辑。你还可以创建存储库用于团队协作，并利用 GitHub 的工具和集成生态系统。

本教程将指导你完成使用 Spark 构建和部署应用的整个生命周期，并探索其功能。

先决条件

一个帐户，其中包含 Copilot Pro+ 或 Copilot Enterprise 许可证。

步骤 1：创建 Web 应用

在本教程中，我们将创建一个简单的市场营销工具应用，在该应用中：

用户将输入自己要营销的产品的描述。
该应用会生成营销文案，并推荐视觉策略和目标受众。

导航到 https://GitHub.com/spark。

在输入字段中，输入你对应用的描述。例如：

Copilot prompt

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.

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.

提示

描述应具体，并提供尽可能多的详细信息以获得最佳结果。你可以让 Copilot 聊天助手优化初始提示或提出改进建议。
或者，可以将 Markdown 文档拖放到输入字段中，为 Spark 提供更多关于你期望构建的内容的上下文信息。

也可以选择上传图像，为 Spark 提供所需应用的视觉参考信息。模拟数据、草图或屏幕截图均可帮助 Spark 理解你想要构建的内容。
单击“”**** 以构建应用。

注意

Spark 始终会生成 Typescript 和 React 应用。

步骤 2：优化和扩展应用

当 Spark 完成应用生成后，可以在实时预览窗口中对其进行测试。在此处，可以使用自然语言、视觉编辑控件或代码对应用进行迭代和扩展。

要使用自然语言更改应用，请在左侧边栏的“Iterate”选项卡下的主输入字段中输入说明，然后提交。
您可以选择在“Iterate”选项卡中，单击输入字段正上方的某个“建议”来开发您的应用。
Spark} 会自动通知检测到的错误。要修复错误，请点击“Iterate”选项卡中输入栏上方的Fix All。
也可以选择单击“ Code”**** 以查看和编辑底层代码。代码编辑面板内置有 Copilot 内联建议。
要对应用的特定元素进行针对性更改，请单击右上角的目标图标****，然后在实时预览窗格中悬停鼠标并选择一个元素。

步骤 3：自定义应用的样式

接下来，使用 Spark 的内置工具更改应用的样式。或者也可以直接编辑代码。

更改应用的整体外观：
- 单击“Theme”**** 选项卡，调整字体、颜色、边框半径、间距和其他视觉元素。
- 从预生成的主题中进行选择，轻松更新应用的整体样式。
要针对特定组件进行视觉编辑，请单击目标图标****，然后在预览窗格中选择应用的一个元素。左侧边栏中将显示与该特定元素相关的样式控件。
也可以在代码中编辑样式：
- 单击“”**** 以打开代码编辑器。
- 修改 CSS、Tailwind CSS 或自定义变量以进行精细控制（例如，内边距、间距、字体、颜色）。
  
  提示
  
  可以导入自定义字体（如 Google Fonts）或直接在 Spark 代码编辑器中添加高级样式。如果不熟悉样式语法，可以让 Copilot 聊天助手提供分步指导。
单击Assets选项卡，上传您希望在应用中显示的资产。
- 添加图像、徽标、视频、文档或其他资源，为应用增添个性化元素。
- 上传完成后，在“Iterate”选项卡中告知 Spark 你希望如何将这些资源整合到应用中。

步骤 4：存储和管理数据

如果 Spark 检测到你的应用需要存储数据，它会自动使用键值存储为你设置数据存储功能。

现在为市场营销应用添加数据存储功能，以便用户可以保存其喜欢的营销文案，并在日后轻松访问：

在“Iterate”选项卡中使用以下说明指导 Spark：

Copilot prompt

Add a "Favorites" page where users can save and view their favorite marketing copy results.

Add a "Favorites" page where users can save and view their favorite marketing copy results.

应用生成完成后，与应用交互以测试收藏的保存和检索功能。
查看“Data”选项卡以查看和编辑存储的值。
如果你确定不希望 Spark 保存数据，请告知其“在本地存储数据”或“不持久存储数据”。

步骤 5：优化 AI 功能

接下来，迭代应用中包含的 AI 功能，这些功能由 GitHub Models 提供支持。

Spark 会自动检测应用功能何时需要 AI 支持。它会为每个 AI 功能自动生成提示，集成最适合的模型，并代表你管理 API 集成和大语言模型推理。

单击“Prompts”**** 选项卡。
请查看 Spark 生成的用于支持您应用中每个 AI 功能的提示。
- 在我们的市场营销应用案例中，Spark 生成了三个独立的提示（分别用于营销文案生成、视觉策略推荐和目标受众推荐）。
单击每个提示即可直接查看和编辑，无需进入代码层面。根据您的用例进行更好地调整。
测试应用以查看更新后的结果。

步骤 6：使用代码和 Copilot 进行编辑和调试

可以直接在 Spark 中，或通过同步的 codespace 查看和编辑应用代码。

注意

Spark 使用推荐的技术栈（React, TypeScript）以确保可靠性。

**

          **为获得最佳效果，建议在 Spark 的 SDK 和核心框架内进行开发。

可以添加外部库****，但无法保证兼容性，因此需进行全面测试。

只要遵循有效的语法和 Spark 的框架规范，可直接通过编辑 React 代码来添加模型上下文****。

在 Spark 中编辑代码：
- 单击“ 代码”****。
- 利用访问编辑器中 Copilot 内联建议的权限，导航文件树并进行任何编辑。更改会即时反映在实时预览窗口中。

若要进行更高级的编辑，请按以下操作：

******** 在右上角，单击“”，然后单击“ Open codespace”（一个功能完备的云 IDE），在新浏览器选项卡中启动 codespace。

     **
     **进入 codespace 后，单击“<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，进行更高级的更改。

在提示框中，选择“Agent”**** 模式，使 Copilot 能够自主构建、评审和调试你的代码。
选择“Edit”**** 模式，让 Copilot 评审应用代码并提出改进和修复建议。
选择“Ask”**** 模式，让 Copilot 解释代码并帮助你理解代码，或 Spark 中显示的任何错误。

在 codespace 中所做的更改会自动同步到 Spark。

Spark 附带完整集成的运行时环境，支持一键部署应用。

注意

部署 Spark 时，如果选择将其设置为对其他用户可见，请注意，你的应用中的数据将在所有可访问该应用的用户之间共享****。在更新可见性设置之前，请确保 spark 中不包含任何敏感数据。
你也可以选择将 Spark 设置为只读模式共享，这样其他用户可以查看你应用中的内容，但无法编辑内容、删除文件或记录，也不能创建新项****。

在右上角，单击“Publish”****。
默认情况下，你的 spark 为私密状态，仅你自己可访问。在“Visibility”下，选择是让你的 spark 保持专用，还是将其提供给上的特定组织的成员，或者提供给所有用户。
在“Data Access”选项下，选择你是希望授予其他用户对你应用的只读权限还是写权限。

选择只读可让其他人查看你的应用，但不能创建、编辑或删除内容****。

例如，如果你创建了一个家庭日历应用，并且希望用户能够查看该应用，但不希望他们创建、编辑或删除事件，那么选择只读即可，这样用户就无法修改你的 Spark 数据存储中的内容****。
单击“Visit site”****，前往已部署的实时应用。复制站点 URL 以与他人分享。

发布应用时，Spark 会自动提供基于云的存储和 LLM 推理功能，作为集成运行时的一部分供应用使用。

将基于 spark 的名称生成 spark 的 URL。可以编辑应用名称，Spark 会自动管理旧 URL 到最新 URL 的重定向。

步骤 8：通过存储库邀请协作者

现在已有一个功能完备且已部署的应用，可以通过创建存储库并将其与 spark 关联，继续构建应用和协作使用应用，与所有其他项目的处理方式一样。

******** 在右上角，单击“”，然后单击“ Create repository”。
在打开的对话框中，单击“Create”****。

你的个人帐户下将创建一个新的专用存储库，其名称基于你的 spark 名称。

在创建存储库前对 spark 所做的所有更改都会添加到存储库中，因此你将拥有自 spark 创建以来所有更改和提交的完整记录。

你的 spark 与存储库之间存在双向同步，因此在 Spark 或存储库主分支中所做的更改会自动在两处同步显示。

还可以在存储库中创建问题，并将其分配给 Copilot 编码智能体，使其能够起草用于修复和改进的拉取请求。

后续步骤

探索可使用 Spark 构建的更多创意：

快速制作新创意的原型****：如果有功能或应用的具体创意，可以上传原型图、草图或屏幕截图，甚至可以将 Markdown 文档粘贴到 Spark，并请求 Spark 实现你的创意。
为自己和团队构建内部工具****：如果你有当前依赖文档或电子表格的常规工作流或流程，可向 Spark 描述该工作流或流程，它能将其转化为交互式 Web 应用。

其他阅读材料

        [AUTOTITLE](/copilot/responsible-use-of-GitHub-copilot-features/responsible-use-of-GitHub-spark)

        [AUTOTITLE](/copilot/concepts/copilot-billing/about-billing-for-GitHub-spark)

        [AUTOTITLE](/free-pro-team@latest/site-policy/GitHub-terms/GitHub-pre-release-license-terms)