使用 GitHub Spark 生成和部署 AI 驱动的应用

注意

GitHub Spark 位于使用数据保护的公共预览版中，可能会更改。

          GitHub Copilot阻止与公共代码匹配的建议的设置在使用Spark时可能无法按预期工作。 请参阅“[AUTOTITLE](/copilot/how-tos/manage-your-account/managing-copilot-policies-as-an-individual-subscriber#enabling-or-disabling-suggestions-matching-public-code)”。

简介

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

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

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

先决条件

        GitHub帐户，具有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**。

（可选）单击 “代码” 以查看和编辑基础代码。代码编辑面板内置 Copilot 内联建议。
要对应用的特定元素进行针对性更改，请单击右上角的目标图标****，然后在实时预览窗格中悬停鼠标并选择一个元素。

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

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

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

步骤 4：存储和管理数据

如果 Spark 检测到需要在应用中存储数据，它将使用键值存储自动为你设置数据存储。

对于我们的营销应用程序，我们来添加数据存储功能，以便用户可以保存自己喜欢的营销文案，并在稍后轻松访问它们。

使用“迭代”选项卡中的以下说明来指导 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保存数据，请要求Spark“在本地存储数据”或“不保存数据”。

步骤 5：优化 AI 功能

接下来，让我们改进应用中包含的 AI 能力，这些功能由 GitHub Models 提供支持。

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

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

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

您可以直接在 Spark 或通过同步的 GitHub 代码空间查看或编辑应用的代码。

注意

* Spark使用自带约定的技术栈（React，TypeScript）以确保可靠性。

为获得最佳效果，应在 SDK 和核心框架内进行工作。
可以添加外部库****，但无法保证兼容性，因此需进行全面测试。
直接编辑 React 代码 可以添加模型上下文，只要遵循有效的语法和 Spark's 框架。

若要在Spark中编辑代码：
- 单击 “代码”。
- 在文件树中导航并进行编辑，同时可以在编辑器中查看Copilot内联建议。更改会即时反映在实时预览窗口中。
若要进行更高级的编辑，请按以下操作：
- 在右上角，单击，然后单击******“打开代码空间**”（功能齐全的云 IDE），在新浏览器选项卡中启动代码空间。
- 进入代码空间后，点击以打开 Copilot 来进行更高级的更改。
  - 在提示框中，选择 “代理 ”模式以启用 Copilot 自主生成、查看和排查代码问题。
  - 选择 “编辑 ”模式以查看 Copilot 应用的代码，并建议改进和修复。
  - 选择询问模式Copilot，以解释代码，并帮助你了解代码或Spark中看到的任何错误。
- 在 codespace 中所做的更改会自动同步到 Spark。

          Spark 附带一个完全集成的运行时环境，允许你一键部署应用。

注意

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

在右上角，单击“Publish”****。
默认情况下，你的 spark 为私密状态，仅你自己可访问。在“可见性”选项下，选择您希望 Spark 保持私密状态，还是仅对特定组织的成员可见 GitHub，或对所有用户都开放 GitHub。
在“数据访问”下，选择是要给予其他用户只读权限还是写入权限。

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

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

发布应用时， Spark 会自动包括基于云的存储和 LLM 推理，以便应用程序用作集成运行时的一部分。

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

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

现在，你有了一个功能齐全且已部署的应用，你可以通过创建存储库并将其链接到GitHub Spark，就像处理任何其他GitHub项目一样继续构建你的应用并进行协作。

在右上角，单击，然后单击“ 创建存储库”。
在打开的对话框中，单击“Create”****。

将在您的个人帐户 GitHub 下创建一个新的私有仓库，仓库名称基于您 spark 的名称。

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

Spark 与存储库之间存在双向同步，因此对存储库的任一分支Spark或主分支所做的更改都会自动反映在两个位置。

还可以在存储库中创建问题，并将其分配给Copilot云代理，以便它可以起草拉取请求，进行修补和改进。

后续步骤

探索可以与Spark一起构建的更多想法： * 快速构建新创意：如果你有功能或应用的特定想法，请上传模拟、草图、屏幕截图，甚至将 Markdown 文档粘贴到 Spark 其中并要求 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)