使用 GitHub Spark 构建和部署 AI 驱动的应用

简介

使用 GitHub Spark，您可以用自然语言描述需求，生成包含数据存储、AI 功能和 GitHub 身份验证的全栈 Web 应用。您可以通过提示、可视化工具或代码进行迭代，然后一键部署到完整托管的运行时环境。

Spark 与 GitHub 无缝集成，您可以通过同步的 GitHub codespace 并使用 Copilot 进行高级编辑来开发 Spark。您还可以创建仓库进行团队协作，并利用 GitHub 的工具和集成生态系统。

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

先决条件

• 拥有 Copilot Pro+ 或 Copilot Enterprise 许可证的 GitHub 账户。

步骤 1：创建您的 Web 应用

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

• 用户输入他们想要营销的产品描述。
• 应用生成营销文案，并推荐视觉策略和目标受众。

1. 访问 https://github.com/spark。

2. 在输入框中，输入您应用的描述。例如

   Copilot 提示

   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 Chat 优化或改进您的初始提示。
   • 或者，将 Markdown 文档拖入输入框，为 Spark 提供更多关于您期望构建内容的上下文。

3. 您还可以上传图片，为 Spark 提供应用的视觉参考。模型图、草图或截图都能帮助 Spark 理解您的构建意图。

4. 点击 来构建您的应用。

   注意

   Spark 始终生成 TypeScript 和 React 应用。

步骤 2：完善并扩展您的应用

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

1. 要使用自然语言更改应用，请在左侧侧栏的 “Iterate” 选项卡下，在主输入框中输入指令，然后提交。
2. 您也可以点击位于 “Iterate” 选项卡中输入框上方的 “Suggestions” 之一来开发您的应用。
3. Spark 会自动提示检测到的错误。要修复错误，请点击 “Iterate” 选项卡中输入框上方的 “Fix All”。
4. 您可以点击 查看并编辑底层代码。代码编辑面板内置了 Copilot 的行内建议。
5. 要针对特定元素进行更改，请点击右上角的 target 图标，然后在实时预览窗格中悬停并选中该元素。

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

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

1. 更改应用的整体外观

   • 点击 “Theme” 选项卡，调整排版、颜色、圆角、间距等视觉元素。
   • 从预生成的主题中选择，轻松更新应用的整体风格。

2. 若要针对特定组件进行视觉编辑，请点击 target 图标，然后在预览窗格中选中应用的相应元素。与该元素相关的样式控制会显示在左侧侧栏。

3. 您也可以在代码中编辑样式

   • 点击 打开代码编辑器。

   • 修改 CSS、Tailwind CSS 或自定义变量，以实现细粒度控制（如内边距、间距、字体、颜色）。

     提示

     您可以导入自定义字体（如 Google Fonts），或在 Spark 代码编辑器中直接添加高级样式。如果不熟悉样式语法，可向 Copilot Chat 请求分步指导。

4. 点击 “Assets” 选项卡，上传您想在应用中展示的资源。

   • 添加图片、徽标、视频、文档或其他资源，以个性化您的应用。
   • 上传后，在 “Iterate” 选项卡中指示 Spark 您希望如何将这些资源整合到应用中。

步骤 4：存储和管理数据

如果 Spark 检测到应用需要存储数据，它会自动使用键值存储为您搭建数据存储。

对于我们的营销应用，让我们添加数据存储，以便用户保存喜欢的营销文案，并以后轻松访问。

1. 在 “Iterate” 选项卡中使用以下指令来指导 Spark

   Copilot 提示

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

2. 应用生成完成后，交互使用它以测试保存和检索收藏功能。

3. 查看 “Data” 选项卡，查看和编辑已存储的数值。

4. 如果您明确不希望 Spark 保存数据，请让 Spark “本地存储数据” 或 “不持久化数据”。

步骤 5：细化 AI 能力

接下来，让我们迭代应用中由 GitHub 模型提供动力的 AI 能力。

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

1. 点击 “Prompts” 选项卡。
2. 查看 Spark 为驱动您应用中各 AI 功能生成的提示。
   • 以我们的营销应用为例，Spark 为我们生成了三个独立的提示（营销文案生成、视觉策略推荐和目标受众推荐）。
3. 点击每个提示即可查看和编辑，无需进入代码。根据您的使用场景进行调整。
4. 测试应用，以查看更新后的结果。

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

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

1. 在 Spark 中编辑代码
   • 点击 。
   • 浏览文件树并进行编辑，编辑器中可使用 Copilot 的行内建议。更改会立即反映在实时预览窗口中。
2. 进行更高级的编辑
   • 在右上角，点击 “More actions”，然后点击 “Open codespace”（完整功能的云端 IDE），在新标签页打开代码空间。
   • 进入代码空间后，点击 Copilot 打开它，以进行更高级的更改。
     • 在提示框中，选择 “Agent” 模式，使 Copilot 能自动构建、审查并排查代码问题。
     • 选择 “Edit” 模式，让 Copilot 审查您的应用代码并提供改进和修复建议。
     • 选择 “Ask” 模式，让 Copilot 解释并帮助您理解代码或在 Spark 中看到的任何错误。
   • 您在代码空间所做的更改会自动同步到 Spark。

步骤 7：部署并分享您的应用

Spark 配备了完整集成的运行时环境，可让您一键部署应用。

1. 在右上角，点击 “Publish”。

2. 默认情况下，您的 Spark 为私有，仅您自己可访问。在 “Visibility” 中，选择保持私有，或向特定 GitHub 组织成员，或全部 GitHub 用户公开。

   

3. 在 “Data Access” 中，选择授予其他用户只读或写入权限。

   选择只读，让其他人仅能查看您的应用，而不能创建、编辑或删除内容。

   例如，若您创建了一个家庭日历应用，希望用户只能查看而不能创建、编辑或删除事件，请选择只读，这样用户便无法修改 Spark 的数据存储。

4. 点击 “Visit site” 前往实时部署的应用。复制站点 URL 与他人分享。

   发布应用时，Spark 会自动为您的应用在集成运行时中提供基于云的存储和 LLM 推理。

   Spark 的 URL 根据 Spark 名称生成。您可以编辑应用名称，Spark 会自动将旧 URL 重定向到最新 URL。

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

现在您拥有一个功能完整、已部署的应用，可像对待其他 GitHub 项目一样，通过创建并关联 GitHub 仓库继续构建和协作。

1. 在右上角，点击 “More actions”，然后点击 “Create repository”。
2. 在弹出的对话框中，点击 “Create”。

在您的个人 GitHub 账户下创建一个新的私有仓库，仓库名称源自您的 Spark 名称。

在创建仓库之前对 Spark 所做的所有更改都会添加到仓库中，您可以完整记录自 Spark 创建以来的所有更改和提交。

Spark 与仓库之间实现双向同步，无论在 Spark 还是仓库的主分支进行的更改，都会自动在两者中同步。

您也可以在仓库中创建议题并指派给 Copilot 云代理，以便它起草用于修复和改进的拉取请求。

后续步骤

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

• 快速原型新想法：如果您有具体的功能或应用想法，上传模型图、草图、屏幕截图，甚至粘贴 Markdown 文档到 Spark，并让 Spark 构建您的想法。
• 为您和团队构建内部工具：如果您有常用的工作流或流程目前保存在文档或电子表格中，向 Spark 说明该工作流或流程，Spark 可将其转化为交互式 Web 应用。

延伸阅读

• 负责任地使用 GitHub Spark
• GitHub Spark 计费
• GitHub 预发布许可条款