前言
OpenAPI 开发者门户是一个中心枢纽,提供 OpenAPI 搜索、文档、在线调试、SDK 获取、CodeSample、调用出错诊断、调用统计等功能。门户建立了用户学习和集成OpenAPI的完整路径,能够显著降低用户学习和集成OpenAPI的成本。
IDE 插件则是用于扩展和定制 IDE 功能的软件组件。它们可以添加新的工具、功能或集成第三方服务,来提高开发人员的生产力。比如 VS Code 这样的集成开发环境,通过插件系统支持丰富的扩展。插件可以用于语言支持、调试、主题定制、代码片段、自动补全等各种用途。
那么将 OpenAPI 门户和 IDE 通过插件系统相结合,会产生什么化学反应呢?答案就是更加沉浸式的 API 集成体验:
- 提高开发效率:集成开发环境(IDE)插件可以使开发人员在其常用开发工具中直接访问和试用 OpenAPI 服务,无需切换到其他平台或文档;除此之外,利用代码自动补全、语法校验等 IDE 插件能力,能够为开发者快速提供阿里云 OpenAPI 的 SDK Code Snippets 以及接入 AI 问答等能力,将阿里云 OpenAPI 集成的学习和集成在 IDE 中闭环,让门户变成开发者提效工具。
- 简化调试过程:插件可以提供调试平台和 SDK 代码示例,帮助开发人员更轻松地调试他们的应用程序与 OpenAPI 服务的集成;
- 增强用户体验:通过在开发人员熟悉的环境中提供对 OpenAPI 的访问,可以改善他们的工作流程,从而提高满意度并降低学习成本。
插件功能一览
- 阿里云产品订阅:
- 插件提供了一键订阅阿里云产品的功能,支持选择产品不同版本 API,并给予推荐版本提示,无需配置文件,可以通过快捷键 ctrl+cmd+k 搜索和订阅阿里云产品;
- 支持全量展示云产品及其分类的树视图,用户可以直接点击对应云产品进行订阅操作。
- API 搜索:
- 支持搜索已订阅的 API,也可以通过快捷键 ctrl+cmd+l 搜索并查看已订阅的 API 文档或插入代码段。
- API 文档预览:
- 点击 API 可以打开一个新的标签页,并显示对应的 API 文档,文档包括接口说明、请求参数、响应参数和错误码。
- API 调试:
- 联动阿里云 CLI 和 VSCode CLI 插件身份配置,配置 AK 后可支持 API 调试;
- 支持参数表单填写的方式调试阿里云 API,并查看结果;
- 调用返回结果可以直接在编辑器中快速打开。
- SDK 代码示例:
- 支持通过参数表单填写的方式获得不同语言的 SDK 代码示例,并支持在编辑器中快速打开对应的 SDK 代码或另存为新文件;
- 支持语言选择记忆,无需每次都要切换语言。
- Code Snippets:
- 支持代码片段功能,帮助用户快速编写 SDK 代码;
- 支持快速搜索 API ,来插入 API 调用代码段能力;
- 支持与 Linter 联动,快速修复未导入的依赖包(TypeScript)。
- profiles 管理:
- 管理你的阿里云 profiles。
- 敏感信息检测:
- 支持检测代码中的敏感信息,防止敏感信息泄漏风险。
IDE 插件带来的体验提升
为什么要把 OpenAPI 门户放到 IDE 里,归根结底就是为了给开发者提供更加便利、舒适、高效的 API 学习和开发环境,提升阿里云 OpenAPI 的学习和集成开发体验。VS Code 作为近年来最受欢迎的 IDE,在开发者体验上已经打好了坚硬的基石,那么 IDE 插件到底能为用户的 API 学习与集成之路带来什么体验提升呢?
📖 工作台拓展 - 便捷的文档查阅
通过工作台拓展(Workbench Extensions)插件在侧边栏增加了一个可交互的树视图(TreeView),并通过 Webview API创建一个自定义的用户界面(Webview)来实现自定义内容渲染。这样,我们就可以把 API 文档、API 调试、SDK 代码示例等通过 Webview 的方式嵌入到 VS Code 中,方便开发者一边比对文档,一边进行 API 的集成开发,开发者再也不用浏览器窗口和 IDE 来回切换了。
API 文档查阅
Profiles 管理
新增和切换阿里云 profiles。
📋 配置文件零感知的云产品订阅能力
利用云产品订阅机制结合 VSCode 的数据存储,能够做到用户零配置使用插件,这是因为将配置文件存储在了 VSCode 的全局域中,用户通过视图交互来进行配置管理,对配置文件零感知。
快捷操作
快速搜索
利用视图交互、快捷键、快速选择等能力,用户就可以直接在 IDE 中快速搜索云产品和 API,非常方便。开发者可以很容易的通过操作栏的图标或者快捷键进行快速选择。以插件快速搜索云产品及选择对应版本进行订阅的操作为例:
快速搜索云产品ctrl+cmd+k
快速搜索 API 并预览 API 说明ctrl+cmd+l
🚀 API 调试 & SDK 代码示例与 Editor 的无缝衔接
在网页版门户中,用户可能需要对 API 调试结果进行处理,需要将调试结果复制到编辑器中,再进行查看或者处理,生成的 SDK 示例代码也是需要进行跨平台的复制。
在 IDE 插件中,API 调试和 SDK 代码示例的能力是在 Webview 中呈现的,通过 Webview 和 VS Code 的消息机制,能将这些能力与编辑器代码区无缝衔接起来。
可以通过在 Webview 中点击「在 IDE 中打开」按钮,就能在编辑器中快速打开一个 Editor 标签页,然后用户就可以进行编辑等后续操作。同理,我们就可以完成调试表单的通信来完成 API 试用以及 SDK 代码示例生成等等功能。
🔨 编程式语言特性:CodeSnippets & 快速修复
编程式语言特性可能是用户在使用 IDE 版本的 OpenAPI 门户时,感受到的最明显的体验升级。利用这个能力,我们可以给用户提供不同 API 的代码片段,帮助用户快速编写 SDK 代码。
CodeSnippets
快速修复
VSCode 提供了 CodeActionsProviderAPI,用于向编辑器注册 Code Actions Provider。Code Actions 是 IDE 提供的一种功能,允许开发者通过特定的上下文菜单或者快捷键执行代码修正、重构、格式化等操作。通过这个 API 我们能够实现一些例如快速修复等能力。
如果你安装了当前语言的 Linter,插件就可以拿到当前代码文档的全部诊断信息,比如用户在使用了 SDK 后,未导入依赖,这时,Linter 插件就会报错,你可以使用「快速修复」导入依赖。
📄 文档增强
能够在编写 SDK 代码时,通过代码文档看到 OpenAPI 的描述信息以及更多相关示例链接,来获得更多代码示例参考。
⚠️ 敏感信息检测
总结
从 OpenAPI 用户旅程来看,Alibaba Cloud API Toolkit 已经完成了搜寻 OpenAPI;通过文档、调试、SDK 代码示例来学习和试用 API;在编辑器中辅助开发者集成 API 的能力。阿里云 OpenAPI 插件,目前的功能形态目前更适合有一定经验的开发者作为提效工具进行使用,结合了 IDE 的相关代码能力是网页版无法提供的,如果今后能够结合 AI 能力,在问答、搜索、诊断上有进一步优化,会对搜寻 API 、学习 API 和 API 问题排查这三个部分有一个更大的体验提升。
OpenAPI 开发者门户插件一览表
👏 欢迎大家安装体验!
API 插件:IDE 内快速查阅阿里云产品的 API
📌 VS Code:Alibaba Cloud API Toolkit
📌 JetBrains:Alibaba Cloud Developer Toolkit
CLI 插件:快速而高效地编写 CLI 语句
📌 VS Code: Alibaba Cloud CLI Tools