# 使用 GitHub Spark 生成和部署 AI 驱动的应用了解如何使用 GitHub Spark自然语言生成和部署智能 Web 应用。 > \[!NOTE] > > * GitHub Spark 位于使用[数据保护](https://gh.io/dpa)的公共预览版中，可能会更改。 > * 使用 Spark 时，阻止匹配公共代码建议的 GitHub Copilot 设置可能无法按预期工作。请参阅“[以个人订阅者身份管理 GitHub Copilot 策略](/zh/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 构建和部署应用程序并探索其功能的完整生命周期。 ### 先决条件 * 拥有 Copilot Pro+ 或 Copilot Enterprise 许可证的 GitHub 帐户。 ## 步骤 1：创建 Web 应用在本教程中，我们将创建一个简单的市场营销工具应用，在该应用中： * 用户将输入自己要营销的产品的描述。 * 该应用会生成营销文案，并推荐视觉策略和目标受众。 1. 导航到 2. 在输入字段中，输入你对应用的描述。例如： ```copilot copy 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. ``` > \[!TIP] > > * 描述应具体，并提供尽可能多的详细信息以获得最佳结果。可以要求 [副驾驶聊天](https://github.com/copilot?ref_product=copilot\&ref_type=engagement\&ref_style=text) 优化或建议对初始提示的改进。 > * 或者，将 Markdown 文档拖放到输入字段中，以便为 Spark 希望生成的内容提供更多上下文。 3. （可选）上传图像以提供 Spark 应用的视觉参考。模拟、草图或屏幕截图都可以帮助 Spark 了解您要构建的内容。 4. 单击 **** 以生成应用。 > \[!NOTE] ``` Spark 将始终生成 Typescript 和 React 应用。 ``` ## 步骤 2：优化和扩展应用生成应用 Spark 后，可以在实时预览窗口中对其进行测试。在此处，可以使用自然语言、视觉编辑控件或代码对应用进行迭代和扩展。 1. 要使用**自然语言**更改应用，请在左侧边栏的“Iterate”选项卡下的主输入字段中输入说明，然后提交。 2. 您可以选择在“Iterate”选项卡中，单击输入字段正上方的某个“建议”来开发您的应用。 3. ``` Spark 会自动提醒你所检测到的错误。要修复错误，请点击“Iterate”选项卡中输入栏上方的**Fix All**。 ``` 4. （可选）单击 **“代码”** 以查看和编辑基础代码。代码编辑面板内置了 Copilot 内联建议。 5. 要对应用的特定元素进行针对性更改，请单击右上角的目标图标\*\*\*\*，然后在实时预览窗格中悬停鼠标并选择一个元素。 ## 步骤 3：自定义应用的样式接下来，让我们使用 Spark“内置工具”更改应用的样式。或者也可以直接编辑代码。 1. 更改应用的整体外观： * 单击“Theme”\*\*\*\* 选项卡，调整字体、颜色、边框半径、间距和其他视觉元素。 * 从预生成的主题中进行选择，轻松更新应用的整体样式。 2. 要针对特定组件进行视觉编辑，请单击目标图标\*\*\*\*，然后在预览窗格中选择应用的一个元素。左侧边栏中将显示与该特定元素相关的样式控件。 3. 也可以在代码中编辑样式： * 单击 **** 以打开代码编辑器。 * 修改 CSS、Tailwind CSS 或自定义变量以进行精细控制（例如，内边距、间距、字体、颜色）。 > \[!TIP] > 可以导入自定义字体（如 Google Fonts）或直接在 Spark 代码编辑器中添加高级样式。 > 如果您不熟悉样式语法，请向 [副驾驶聊天](https://github.com/copilot?ref_product=copilot\&ref_type=engagement\&ref_style=text) 请求分步指导。 4. 单击**Assets**选项卡上传要展示在应用中的资产。 * 添加图像、徽标、视频、文档或其他资源，为应用增添个性化元素。 * 上传后，请在“迭代”选项卡中指示 Spark 你希望如何将这些资产合并到应用中。 ## 步骤 4：存储和管理数据如果 Spark 检测到需要在应用中存储数据，它将使用键值存储自动为你设置数据存储。对于我们的营销应用程序，我们来添加数据存储功能，以便用户可以保存自己喜欢的营销文案，并在稍后轻松访问它们。 1. 使用“迭代”选项卡中的以下说明来指导 Spark： ```copilot copy Add a "Favorites" page where users can save and view their favorite marketing copy results. ``` 2. 应用生成完成后，与应用交互以测试收藏的保存和检索功能。 3. 查看“Data”选项卡以查看和编辑存储的值。 4. 如果显式**不想**Spark保存数据，请要求Spark“在本地存储数据”或“不保存数据”。 ## 步骤 5：优化 AI 功能接下来，让我们改进应用中包含的 AI 能力，这些功能由 GitHub Models 提供支持。 ``` Spark 自动检测应用中的功能何时需要 AI。它会为每个 AI 功能自动生成提示，集成最适合的模型，并代表你管理 API 集成和大语言模型推理。 ``` 1. 单击“Prompts”\*\*\*\* 选项卡。 2. 查看生成的提示 Spark，这些提示为应用中使用的每项 AI 功能提供支持。 * 对于我们的营销应用，Spark为我们生成了三个单独的提示（营销文案生成、视觉策略建议和目标受众建议）。 3. 单击每个提示即可直接查看和编辑，无需进入代码层面。根据您的用例进行更好地调整。 4. 测试应用以查看更新后的结果。 ## 步骤 6：使用代码和 Copilot 进行编辑和调试您可以直接在 Spark 或通过同步的 GitHub 代码空间查看或编辑应用的代码。 > \[!NOTE] > \* > Spark使用自带约定的技术栈（**React**，**TypeScript**）以确保可靠性。 > > * 为获得最佳效果，应在 SDK 和核心框架内进行工作。 > * 可以添加外部库\*\*\*\*，但无法保证兼容性，因此需进行全面测试。 > * 直接编辑 React 代码 **可以添加模型上下文**，只要遵循有效的语法和 Spark's 框架。 1. 若要在Spark中编辑代码： * 单击 **“代码**”。 * 利用访问编辑器中 Copilot 内联建议的权限，导航文件树并进行任何编辑。更改会即时反映在实时预览窗口中。 2. 若要进行更高级的编辑，请按以下操作： * 在右上角，单击，然后单击\*\*\*\*\*\*“打开代码空间\*\*”（功能齐全的云 IDE），在新浏览器选项卡中启动代码空间。 * 进入代码空间后，点击 **** 以打开 Copilot 来进行更高级的更改。 * 在提示框中，选择 **“代理** ”模式以启用 Copilot 自主生成、查看和排查代码问题。 * 选择 **“编辑** ”模式以查看 Copilot 应用的代码，并建议改进和修复。 * 选择**询问**模式Copilot，以解释代码，并帮助你了解代码或Spark中看到的任何错误。 * 在 codespace 中所做的更改会自动同步到 Spark。 ## 步骤 7：部署并分享你的应用 ``` Spark 附带一个完全集成的运行时环境，允许你一键部署应用。 ``` > \[!NOTE] > > * 部署 Spark 时，如果选择使其对其他用户可见，请注意，应用中的数据会共享给所有可以访问你的应用的用户。在更新可见性设置之前，请确保 spark 中不包含任何敏感数据。 > * 你也可以选择将 Spark 设置为只读模式共享，这样其他用户可以查看你应用中的内容，但无法编辑内容、删除文件或记录，也不能创建新项\*\*\*\*。 1. 在右上角，单击“Publish”\*\*\*\*。 2. 默认情况下，你的 spark 为私密状态，仅你自己可访问。在“可见性”选项下，选择您希望 Spark 保持私密状态，还是仅对特定组织的成员可见 GitHub，或对所有用户都开放 GitHub。 ![GitHub Spark 发布菜单的屏幕截图。用橙色框出“所有 GitHub 用户”可见性选项。](/assets/images/help/copilot/spark-github-user-visibility.png) 3. 在“数据访问”下，选择是要给予其他用户只读权限还是写入权限。选择只读可让其他人查看你的应用，但不能创建、编辑或删除内容\*\*\*\*。例如，如果你创建了一个家庭日历应用，并且希望用户能够查看该应用，但不希望他们创建、编辑或删除事件，那么选择只读即可，这样用户就无法修改你的 Spark 数据存储中的内容\*\*\*\*。 4. 单击“Visit site”\*\*\*\*，前往已部署的实时应用。复制站点 URL 以与他人分享。发布应用时， Spark 会自动包括基于云的存储和 LLM 推理，以便应用程序用作集成运行时的一部分。将基于 spark 的名称生成 spark 的 URL。可以编辑应用的名称，并 Spark 自动管理旧 URL 到最新 URL 的重新路由。 ## 步骤 8：通过存储库邀请协作者现在你已有可正常运行的已部署应用，可像其他任何 GitHub 项目一样继续构建和协作，方法是创建 GitHub 存储库并将其链接到你的 spark。 1. 在右上角，单击 ****，然后单击“ ** 创建存储库**”。 2. 在打开的对话框中，单击“Create”\*\*\*\*。将在您的个人帐户 GitHub 下创建一个新的私有仓库，仓库名称基于您 spark 的名称。在创建存储库前对 spark 所做的所有更改都会添加到存储库中，因此你将拥有自 spark 创建以来所有更改和提交的完整记录。你的 spark 与存储库之间双向同步，因此在 Spark 或存储库主分支中所做的更改会自动在两处体现。还可以在存储库中创建问题，并将其分配给Copilot云代理，以便它可以起草拉取请求，进行修补和改进。 ## 后续步骤探索可以与Spark一起构建的更多想法： * **快速构建新创意**：如果你有功能或应用的特定想法，请上传模拟、草图、屏幕截图，甚至将 Markdown 文档粘贴到 Spark 其中并要求 Spark 构建想法。 * **为自己和团队构建内部工具**：如果你有当前位于文档或电子表格中的常见工作流或流程，请解释工作流或流程， Spark 并将其 Spark 转换为交互式 Web 应用。 ## 其他阅读材料 * [负责任地使用 GitHub Spark](/zh/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark) * [GitHub Spark 计费](/zh/copilot/concepts/copilot-billing/about-billing-for-github-spark) * [GitHub 预发行许可条款](/zh/site-policy/github-terms/github-pre-release-license-terms)