Git Product home page Git Product logo

serverless-devs-vscode-plugin's Introduction


npm version npm download node.js version license issues discussions

Serverless 应用全生命周期管理工具

中文English

Serverless Devs 是一个开源开放的 Serverless 开发者平台,致力于为开发者提供强大的工具链体系。通过该平台,开发者不仅可以一键体验多云 Serverless 产品,极速部署 Serverless 项目,还可以在 Serverless 应用全生命周期进行项目的管理,并且非常简单快速的将 Serverless Devs 与其他工具/平台进行结合,进一步提升研发、运维效能。

图片alt

更多关于 Serverless Devs 的介绍可以参考项目介绍文档

快速上手

❶ 安装 Node.js(>=14.14.0) 与 NPM 包管理工具;
❷ 安装 Serverless Devs 开发者工具;

$ npm install @serverless-devs/s -g

❸ 在命令行中执行命令s,并按回车,开启你的 Serverless 之旅;

更多详细信息可以参考Serverless Devs 安装文档快速入门指南

帮助文档

如果您想为 Serverless Devs 贡献 Package(包括组件和应用),您可以参考 Package开发文档

Serverless Devs 天然支持 Yaml 模式与 Cli 模式,关于两者的区别和试用场景,可以参考文档 Yaml 模式 Cli 模式对比;关于Exit Code 定义Yaml 文件优先级规范密钥使用顺序与规范通过环境变量设置密钥更多关于项目设计的一些细节可以参考开发者工具设计文档

相关资源

目前 Serverless Devs 项目已经支持的 FaaS 平台/产品:

尽管以上 FaaS 平台/产品已经有人贡献或在持续维护中,但是我们仍然非常欢迎大家可以参与贡献/维护,除此之外,其他的 FaaS 平台/产品(例如 Google Cloud Platform Functions、Azure Functions等),我们也非常期望社区的小伙伴们可以参与开发和贡献。

🚀 除此之外 Serverless Devs 项目还拥有很多优秀的组件和应用,可以参考Awesome

项目期望

  • Serverless Devs 希望可以为 Serverless 开发者们提供一款可以无厂商锁定的,可以在 Serverless 应用全生命周期发挥作用的 Serverless 开发者工具;
  • Serverless Registry 希望可以为 Serverless 生态提供一套完整的包管理规范,与 Python 中的 pypi, Nodejs 中的 npm 等类似,将以此来开放和分享 Serverless Package,建设 Serverless 生态;
  • Serverless Developer Meetup 希望可以打造最符合 Serverless 开发者的社区活动,通过这个活动,我们希望更多人可以一起和我们交流、学习 Serverless 相关的产品;

项目贡献

我们非常希望您可以和我们一起贡献这个项目。贡献内容包括不限于代码的维护、应用/组件的贡献、文档的完善等,更多详情可以参考 🏆 贡献指南

与此同时,我们也非常感谢所有 👬 参与贡献的小伙伴,为 Serverless Devs 项目贡献的努力和汗水。

规范与许可

Serverless Devs 遵循 Apache-2.0 license 开源许可。

位于node_modules和外部目录中的所有文件都是本软件使用的外部维护库,具有自己的许可证;我们建议您阅读它们,因为它们的条款可能与Apache-2.0 license的条款不同。

Serverless Devs adopts CNCF Code of Conduct. This open governance applies to all repos under kubevela org.

交流社区





Serverless Devs 是 CNCF Sandbox 项目,可以在 CNCF Cloud Native Landscape 中查看。

您如果有关于错误的反馈或者未来的期待,您可以在 IssuesDiscussions 中进行反馈和交流。如果您想要加入我们的讨论组或者了解 Serverless Devs 的最新动态,您可以通过以下渠道进行:

关注微信公众号:serverless 联系微信小助手:xiaojiangwh 加入钉钉交流群:33947367


Serverless Devs 开发者工具遵循 Serverless Devs Model,更多模型/规范信息可以参考 Serverless Registry ModelServerless User Model 以及 Serverless Package Model

隐私说明:为了给开发者提供可优化的使用体验,Serverless Devs会采集部分客户端的错误信息以帮助社区优化工具,当然这些错误信息都是被脱敏后的错误信息,如果您仍然存在疑虑或者不想使用这个功能,您可以通过命令s set analysis disable关闭该功能。

serverless-devs-vscode-plugin's People

Contributors

xsahxl avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

xsahxl

serverless-devs-vscode-plugin's Issues

VSCode插件UI和功能设计

基于之前的版本:Serverless-Devs/Serverless-Devs#444 进行进一步打磨。

区域划分

从我的角度,我将VSCode,我们可以利用的区域划分成了5个:

image

  • 区域1�:整体标题/功能区域
  • 区域2: 组件功能区域
  • 区域3: 代码编辑区域/Webview功能区域
  • 区域4:系统功能区域
  • 区域5: 状态区域

阶段划分

  • 引导阶段:在安装完成之后/创建应用
  • 应用创建阶段:创建应用的过程
  • 功能实用阶段:调试/部署等逻辑

整体目标

  • 规范标准的 Serverless Devs 工具链在IDE层面的加成
  • 提供高效可用的代码应用全生命周期管理能力

功能设计

区域1

区域1的整体设计相对固定,始终展示:

image

  1. Serverless Devs 标题
  2. 相关功能
    • 创建应用
      • 创建模板应用
      • 通过Registry创建
    • 系统设置
      • 账号管理
      • 组件管理
      • 更多设置
      • 问题反馈

区域2

区域2的整体设计,更为灵活。

image

主要分为:

  • 创建应用之前

创建应用之前,这里显示的是相关的引导

这里面的开发必读中的5个链接,最好可以配置文件的形式存放在代码仓库中,便于之后的扩展和更新。

在当前页面:

  • 超链接:主要颜色,可以进行微调,别于背景颜色融合太厉害

  • 所有的链接点开之后,均在右侧的窗口显示(区域3)

  • 创建应用之后

创建应用之后,这里显示的是代码相关的内容,主要从两个维度进行显示:

  1. 文件树
  2. Serverless 应用纬度

文件树中,如果遇到的符合Serverless Devs 规范的Yaml,右键的时候,要:

  1. 读取所有组件Command信息,并进行合并,对外进行展示,例如
    image

Serverless 应用纬度中,环境/标记/服务右侧的按钮:

  • 编辑:编辑对应的Yaml文档
  • 更多(右键同样显示下面内容):
    • 聚合后的命令
    • 快捷命令配置
    • 组件项目首页【如果是service层增加这部分】

用户选择了快捷命令配置之后,在区域3的位置,弹出窗口,让用户自定义添加快捷按钮:

image

这一部分的配置,可以缓存到.s目录,伴随项目加载

区域3

整的编辑页面,主视觉点。

  1. 代码编辑 / 保持原有样式
  2. s.yaml 编辑,增加联想输入

    如果是s.yaml编辑,将会在区域4,增加按钮,进行校验和可视化编辑:
    image

  3. 如果是文档类的帮助信息,在区域4,增加浏览器打开按钮:image
  4. 如果是引导类,参考最后的UI设计

区域4

默认内容:

image

依次表示的是:

  • Serverless Devs首页
  • Serverless Registry 首页
  • Serverless Github repo
  • 钉钉群/社区
  • Serverless Github repo issues

如果因为页面不同,有页面层配置,优先使用页面配置

区域5

这一部分是状态显示,主要分为几个状态:

  1. 静默状态,在刚开始的时候,没打开应用的时候,这里显示:Welcome to Serverless Devs
  2. 打开了应用,在此时这里显示应用名称
  3. 在进行操作的时候,这里可以动态显示日志/或者相关命令的状态等

部分细节

创建应用

创建模板应用:

  1. 类似于下面的方法进行选择
    image

  2. 选择好要创建的应用,在区域3,复用应用中心现在的创建应用的高级配置表单,进行参数填写
    image

通过Registry创建:

接口参考文档: http://www.devsapp.cn/application.html

  1. 直接在区域3,显示现在的Registry信息:
    image

这里只需要显示:

  1. 推荐应用【对应registry的专题】
  2. 全部应用【对应registry的应用】

每个应用所展示的元素,可以参考registry,每个卡片可以是:

image

点击查看,可以跳转到应用详情页面【直接打开registry即可,或者跳转到对应页面】

系统设置

目前的ui都是白色底色,可以改成深色,对应文字,icon颜色也对应变浅即可

账号管理
image
添加授权信息:
image

组件管理
image

更多设置
image

问题反馈:直接跳到serverless devs repo的issues即可

关于新建应用页面的设计

从侧边栏点击新建之后能够进入下面的页面,它用于代替s init xx这个命令。
BE5BACC1-BBDA-4BE2-8CF6-0A1308C967EF
但是有个问题是,如果后面开发者们持续地贡献应用到registry上,应用多了,这个展示不下怎么办。vscode插件的开发有没有办法实现按需加载?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.