开发环境

本页面将引导您完成使用平台内 VS Code 工作区搭建 OSDK React 应用程序的开发流程。

开始

在按照步骤设置开发者控制台后，您可以在您的代码环境中开始开发。要使用 VS Code 工作区，请在左侧面板的代码仓库部分选择创建代码仓库。此操作将使用默认的 React 模板引导您的仓库。然后您可以选择在 VS Code 中打开以启动平台内工作区。

仓库模板将包含一个基本的 React 应用程序，该应用程序集成了授权和 Ontology SDK。

开发生命周期

一旦 VS Code 工作区启动，您应会看到左侧的代码编辑器和右侧的应用程序实时预览。您可以开始编辑代码，就像在本地环境中工作一样。

编辑

您现在可以开始搭建您的 React 应用程序。请确保在编写代码后编辑并测试代码，然后使用 git 命令或 VS Code 界面提交并推送更改，以便项目中的其他开发人员可见。在终端中，运行 npm run lint、npm run test 和 npm run build 以确保检查成功。

您还可以查看左侧面板中的 Ontology 标签，以查看为您的 OSDK 生成的文档和代码片段，并返回到开发者控制台。

部署

要部署 React 应用程序，您必须首先发布一个版本。通常使用 git tag 命令来完成，您可以设置版本号，然后将其推送到您的仓库：

Copied!
1
2
git tag <x.y.z>  # 创建标签 <x.y.z>
git push origin tag  # 推送标签到远程仓库

或者，您可以通过在代码仓库界面中选择屏幕右上角的 在代码仓库中打开 来发布版本。导航到 版本控制 选项卡，然后打开 标签和版本 部分以查看以前的版本并发布新版本。

一旦版本通过检查，您将能够在开发者控制台中查看您的应用程序。

内容安全策略

默认情况下，我们应用限制性内容安全策略（CSP）。这意味着对非Foundry URI的请求将失败，必须明确允许。

要检测CSP出错，请选择 <F12> 并检查控制台内的日志。如果您有CSP失败，您将看到类似于下面显示的出错信息：

您可以将临时CSP应用于您的VS Code工作区。出于安全原因，此CSP不会应用于该工作区的其他用户，并且将在工作区暂停或重新启动时过期。

在VS Code工作区内测试您的应用程序后，请确保为您的开发者控制台应用程序更新CSP。

开发技巧

待办事项应用程序教程

如果您是开发者控制台和OSDK的新手，我们建议您跟随我们的教程之一以起始。导航到注册中的 以AIP搭建 应用程序并安装我们的一些示例工作流。

渐进式Web应用程序（PWA）

为了优化编辑体验，您可以选择将您的工作区安装为渐进式Web应用程序（PWA）。PWA将接受一些常用快捷键，例如 Cmd+W（macOS）以关闭标签页。

Zen模式

为了获得几乎原生的VS Code体验，我们建议使用Zen模式。选择 视图 > 启用Zen模式 来启用。Zen模式将隐藏平台界面，使VS Code占据整个浏览器窗口。要退出Zen模式，将鼠标悬停在屏幕顶部中心的三个点 ... 上。

本地开发

您可以通过以下方式在您的机器上本地工作，而不是在平台内工作：

• 导航到代码仓库应用程序中的您的仓库，然后选择屏幕右上角的 本地工作 以克隆您的仓库并将 FOUNDRY_TOKEN 导出到您的本地环境。

请参考仓库中的 readme.md 文件以获取更多信息。