随着云计算技术的成熟和普及,越来越多的传统编程能力和资源已经以云服务的形式开放出来。从中间件、数据库等水平能力服务组件到人脸识别、鉴权服务等基本业务服务组件,都可以很容易地在云端获取。Cloud Studio
云端 IDE(Web IDE/在线 IDE/Cloud IDE)
是腾讯云自主研发的在线编程平台,它可以不再受限于本地设备,而是通过云端服务来编写、运行和调试代码。这种服务模式不再只是云端的软件开发环境,而是提供了包括基础设施服务的 Development-environment-as-a-Service
的服务模式。这就意味着,我们可以无需在本地维护和设置项目,直接在浏览器上进行开发,实现真正的零门槛开发。
大家有没有遇到过需要在不同设备上开发项目时,需要重复安装各种应用程序和插件的烦恼呢?现在,有了 Cloud Studio
,这些问题都将不复存在!Cloud Studio
是一款基于浏览器的集成式开发环境,让开发者可以随时随地、轻松高效地进行开发。
通过使用 Cloud Studio
,可以实现代码高亮、自动补全、终端等在线编程 IDE
的基础功能,还可以轻松集成 Git、实时调试、插件扩展等强大的功能。这些功能的存在,不仅可以帮助我们快速完成各种应用的开发、编译与部署工作,还能够提高我们的开发效率和开发体验。
最狠的是 Cloud Studio
不仅提供了一个永不间断的云端工作站,而且还可以在多个设备上进行同步,让我们的开发流程更加丝滑和高效!!!!这必须冲!!
在篇博文中,我将带大家沉浸式体验 CloudStudio
开发带来的快感,通过Web3 明信片项目案例一步一步深入产品细节!
在整个过程中,我们将学习到
Cloud Studio
在项目中的作用Cloud Studio
进行项目环境初始化Cloud Studio
项目如何链接到 gitee
作为项目的管理仓库Cloud Studio
可能会出现的一些情况CloudStudio
是一个基于浏览器的云端集成式开发环境,适用于多种应用场景,包括:
CloudStudio
的预置环境,可以直接创建对应类型的工作空间,快速启动项目进入开发状态,无需进行繁琐的环境配置。
CloudStudio
内置预览插件,可以实时显示网页应用。当您的代码发生改变之后,预览窗口会自动刷新,这样您就可以在CloudStudio内实时开发调试网页了。
CloudStudio
支持您连接自己的云服务器,这样就可以在编辑器中查看云服务器上的文件,进行在线编程和部署工作。
打开官网 点击以下链接跳转到官网,并点击 “注册/登录”。官网
这里注册和登录 Cloud Studio
非常方便,提供了三种注册方式:
CODING
账号授权注册/登录GitHub
授权注册/登录 (本文使用方式)
注册完成后就可以通过 CloudStudio
提供的模板进行项目构建了!!
这里我以博主之前开发的一个 web3
明信片项目为例,整个项目是 ts + react
,然后给大家进行产品演示,由于项目代码繁琐一点,就不具体到代码细节了,这是一个基于 Web3
技术的社交明信片项目,提供了一种新的收集和分享记忆的方式。项目使用了 Infura
作为节点服务,IPFS
进行数据的去中心存储以及使用 MetaMask
服务允许用户通过浏览器进行项目交互。并为设计者提供「创作者激励」。
项目效果如下:
Hardhat
是一个可以帮助开发人员快速、高效地编写、测试和部署以太坊智能合约的开发框架。Next.js
是一个基于React的服务器端渲染框架,它可以帮助开发人员构建高性能、可扩展的Web应用程序,并提供了一些开发工具和插件,方便开发人员进行快速开发和部署。Metamask
是一款以太坊钱包浏览器扩展程序,它可以帮助用户管理以太坊账户和进行区块链交易,同时提供了一些安全性和隐私保护功能,使得用户在去中心化应用中的交互更加方便和安全。IPFS
是一种去中心化的分布式文件系统,它可以帮助开发人员存储和访问各种类型的文件和数据,同时具有高度的可靠性、安全性和可扩展性,可以帮助开发人员构建更加可靠和安全的分布式应用程序。TypeScript
是一种开源的编程语言,它是JavaScript的一个超集,可以帮助开发人员编写更加可靠、易于维护的代码,同时提供了一些类型检查和代码提示功能,方便开发人员进行快速开发和调试。现在本地将项目上传到 gitee
仓库,方便后续在 CloudStudio
上初始化
然后我们回到 CloudStudio
进行空间创建,为这个项目搭建一个可以运行的环境,这里我们不需要通过模板进行创建,因为我们的项目不是在云IDE上现场开发,所以这里我们选择新建工作空间,然后选择输入仓库地址,选择开发环境为 React + node 18
点击新建就可以初始化环境了,效果如下:
项目成功获取到之后开始准备运行和预览项目,通过CloudStudio的内置终端,然后运行以下命令进行依赖安装:
yarn install
依赖安装完后就可以开始启动了:
yarn start
右下角监控到有新的端口打开之后,就会弹出提示消息,然后可以通过打开内置预览,看到已经启动的项目
可以看到,和我们本地启动的是一模一样的,但是是不需要安装环境的,非常方便!
启动虽然正常启动了,但是我们还是需要进行一些测试,看看新的环境中项目运行是否正常,这里我通过连接 metamask
进行登录测试
可以看到 connect
钱包是正常的,然后我们开始赠送一张明信片
这里会发现,这个环境是加载不出 ipfs
上面的图片的,所以运行不是那么完整
正常大概是这样:
但是整体功能是没有问题的,可能是因为网络相关问题,整体的运行体验还是不错的!!!
协作发发起协作,发起者点击“开始协作”按钮,就可以生成协作邀请信息,发起者点击“再次复制链接”按钮,将下述信息粘贴发给需要参与项目的人员。同时,项目进入协作计时,计时显示在右上角控制面板中。邀请信息内容具体如下:“k9sec 邀请您加入工作空间协作。点击链接:https://cloudstudio.net/share/xxxxxx
Cloud Studio MetaWork,就可以进行多人协作了!!
这里我在 readme
中加入一段描述,并且准备commit
到gitee
仓库中
转到源代码管理模块,可以看到已经出现了我的修改,这里我们通过 commit
和 syncchange
就可以将修改同步了!非常的nice!
效果如下:
其他过多的功能就不一一介绍了,大家感兴趣的可以去官网浏览查看!!!
web3
项目的点,就是 ipfs
是网络是加载不出来的,不知道后续有没有可能进行优化Cloud Studio
服务器进行代理,访问路径为 本地机器 -> Cloud Studio 代理服务器 -> 云主机 , 会导致 Cloud Studio
由于网络环境的情况导致连接不稳定。目前 Cloud Studio
已经在优化访问路径为 本地机器 -> 云主机,以此来提高连接稳定性,敬请期待。在使用腾讯云 Cloud Studio
时从环境搭建到运行整体感觉上还是很丝滑的,感觉收获颇多。在实践遇见的一些问题,小助手也会积极解答,通过对几次的CSDN
的培训以及官方文档的学习,对CloudStudio
有了很大的认识,真的是一个很不错的云IDE
产品,在后续的工作中,也会大量给公司推荐腾讯云的一些有效的方案,用于公司降本增效。
经过这次活动,我总结了CloudStudio
的相关优点,方便大家在选择解决方案时参考:
Python
、Java
、Node.js
等。Git
版本控制和连接云主机进行资源管理。VS Code
插件以增强使用体验。总体来说,在这次 CloudStudio
的实践案列下,还是学习感受到了这种开发方式带来的根本性变革,其实也是顺应时代的产物,从低级语言到高级语言,从自建服务器到云服务器,每个产品的诞生都是为了释放重复劳动,或许以后开发只需要编写部分核心业务代码就可以上线了,所有的标准化功能都可以一键组装,还是要学会站在巨人的肩上,感谢腾讯云提供丰富底层支撑,能让现在的开发者的开发方式越来越简单高效!!!