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

简介

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

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

本教程将指导你使用 Spark 构建和部署应用，并探索其功能。

先决条件

• 一个拥有 Copilot Pro+ 的 GitHub 帐户。

步骤 1：创建 Web 应用

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

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

1. 导航到 https://github.com/spark。

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

   Text

   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 提供更多关于你期望构建的内容的上下文信息。

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

4. 单击“”**** 以构建应用。

   注意

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

步骤 2：优化和扩展应用

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

1. 要使用自然语言**** 更改应用，请在左侧边栏的“Iterate”选项卡下的主输入字段中输入说明，然后提交。
2. 也可以通过单击“Iterate”选项卡中输入字段正上方的某个“Suggestions”来开发应用。
3. Spark 会自动提醒检测到的错误。 要解决错误内容，可单击“Iterate”选项卡中输入字段上方的“Fix All”****。
4. 也可以选择单击“ Code”**** 以查看和编辑底层代码。 代码编辑面板内置了 Copilot 代码补全功能。
5. 要对应用的特定元素进行针对性更改，请单击右上角的目标图标****，然后在实时预览窗格中悬停鼠标并选择一个元素。

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

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

1. 更改应用的整体外观：

   • 单击“Theme”**** 选项卡，调整字体、颜色、边框半径、间距和其他视觉元素。
   • 从预生成的主题中进行选择，轻松更新应用的整体样式。

2. 要针对特定组件进行视觉编辑，请单击目标图标****，然后在预览窗格中选择应用的一个元素。 左侧边栏中将显示与该特定元素相关的样式控件。

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

   • 单击“”**** 以打开代码编辑器。

   • 修改 CSS、Tailwind CSS 或自定义变量以进行精细控制（例如，内边距、间距、字体、颜色）。

     提示

     可以导入自定义字体（如 Google Fonts）或直接在 Spark 代码编辑器中添加高级样式。 如果不熟悉样式语法，可以让 Copilot 对话助手 提供分步指导。

4. 单击“Assets”选项**** 卡，上传要在应用中显示的资产。

   • 添加图像、徽标、视频、文档或其他资源，为应用增添个性化元素。
   • 上传完成后，在“Iterate”选项卡中告知 Spark 你希望如何将这些资源整合到应用中。

步骤 4：存储和管理数据

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

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

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

   Text

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

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

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

4. 如果你确定不希望 Spark 保存数据，请告知其“在本地存储数据”或“不持久存储数据”。

步骤 5：优化 AI 功能

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

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

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

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

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

1. 在 Spark 中编辑代码：
   • 单击“ Code”****。
   • 导航文件树并进行编辑，编辑器中支持 Copilot 代码补全功能。 更改会即时反映在实时预览窗口中。
2. 若要进行更高级的编辑，请按以下操作：
   • ******** 在右上角，单击“”，然后单击“ Open codespace”（一个功能完备的云 IDE），在新浏览器选项卡中启动 codespace。
   • **** 进入 codespace 后，单击“”以打开 Copilot，进行更高级的更改。
     • 在提示框中，选择“Agent”**** 模式，使 Copilot 能够自主构建、评审和调试你的代码。
     • 选择“Edit”**** 模式，让 Copilot 评审应用代码并提出改进和修复建议。
     • 选择“Ask”**** 模式，让 Copilot 解释代码并帮助你理解代码，或 Spark 中显示的任何错误。
   • 在 codespace 中所做的更改会自动同步到 Spark。

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

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

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

2. 默认情况下，你的 spark 为私密状态，仅你自己可访问。 在“Visibility”下，选择是希望 spark 保持私密状态，还是向所有 GitHub 用户开放。

   

3. 单击“Visit site”****，前往已部署的实时应用。 复制站点 URL 以与他人分享。

   注意

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

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

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

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

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

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

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

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

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

后续步骤

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

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

其他阅读材料

• 负责任地使用 GitHub Spark
• 关于 GitHub Spark 的计费
• GitHub 预发行许可条款