淘先锋技术网

首页 1 2 3 4 5 6 7

在这里插入图片描述

​ iOS开发上架主页
在强者的眼中,没有最好,只有更好。
移动开发领域优质创作者,阿里云专家博主

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。

背景

随着云计算技术的成熟和普及,越来越多的传统编程能力和资源已经以云服务的形式开放出来。从中间件、数据库等水平能力服务组件到人脸识别、鉴权服务等基本业务服务组件,都可以很容易地在云端获取。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 可能会出现的一些情况

二、 Cloud Studio 主要功能和应用场景

CloudStudio是一个基于浏览器的云端集成式开发环境,适用于多种应用场景,包括:

  1. 快速启动项目:使用CloudStudio的预置环境,可以直接创建对应类型的工作空间,快速启动项目进入开发状态,无需进行繁琐的环境配置。

  2. 实时调试网页:CloudStudio内置预览插件,可以实时显示网页应用。当您的代码发生改变之后,预览窗口会自动刷新,这样您就可以在CloudStudio内实时开发调试网页了。

  3. 远程访问云服务器:CloudStudio支持您连接自己的云服务器,这样就可以在编辑器中查看云服务器上的文件,进行在线编程和部署工作。

三、Cloud Studio 实验前期准备

3.1. 打开官网

打开官网 点击以下链接跳转到官网,并点击 “注册/登录”官网
在这里插入图片描述

3.2. 注册 Cloud Studio:

这里注册和登录 Cloud Studio 非常方便,提供了三种注册方式:

  1. 使用 CODING 账号授权注册/登录
  2. 使用微信授权注册/登录
  3. 使用 GitHub 授权注册/登录 (本文使用方式)

在这里插入图片描述
注册完成后就可以通过 CloudStudio 提供的模板进行项目构建了!!

四、构建Web3项目

这里我以博主之前开发的一个 web3 明信片项目为例,整个项目是 ts + react ,然后给大家进行产品演示,由于项目代码繁琐一点,就不具体到代码细节了,这是一个基于 Web3 技术的社交明信片项目,提供了一种新的收集和分享记忆的方式。项目使用了 Infura 作为节点服务,IPFS 进行数据的去中心存储以及使用 MetaMask 服务允许用户通过浏览器进行项目交互。并为设计者提供「创作者激励」。

项目效果如下:

在这里插入图片描述

4.1. 项目中技术栈

  • Hardhat 是一个可以帮助开发人员快速、高效地编写、测试和部署以太坊智能合约的开发框架。
  • Next.js 是一个基于React的服务器端渲染框架,它可以帮助开发人员构建高性能、可扩展的Web应用程序,并提供了一些开发工具和插件,方便开发人员进行快速开发和部署。
  • Metamask 是一款以太坊钱包浏览器扩展程序,它可以帮助用户管理以太坊账户和进行区块链交易,同时提供了一些安全性和隐私保护功能,使得用户在去中心化应用中的交互更加方便和安全。
  • IPFS 是一种去中心化的分布式文件系统,它可以帮助开发人员存储和访问各种类型的文件和数据,同时具有高度的可靠性、安全性和可扩展性,可以帮助开发人员构建更加可靠和安全的分布式应用程序。
  • TypeScript 是一种开源的编程语言,它是JavaScript的一个超集,可以帮助开发人员编写更加可靠、易于维护的代码,同时提供了一些类型检查和代码提示功能,方便开发人员进行快速开发和调试。

4.2. 通过gitee管理代码并在CloudStudio上初始化环境

现在本地将项目上传到 gitee 仓库,方便后续在 CloudStudio 上初始化

在这里插入图片描述
然后我们回到 CloudStudio 进行空间创建,为这个项目搭建一个可以运行的环境,这里我们不需要通过模板进行创建,因为我们的项目不是在云IDE上现场开发,所以这里我们选择新建工作空间,然后选择输入仓库地址,选择开发环境为 React + node 18

在这里插入图片描述

点击新建就可以初始化环境了,效果如下:

在这里插入图片描述

4.3 运行预览项目

项目成功获取到之后开始准备运行和预览项目,通过CloudStudio的内置终端,然后运行以下命令进行依赖安装:

依赖安装完后就可以开始启动了:

yarn start

右下角监控到有新的端口打开之后,就会弹出提示消息,然后可以通过打开内置预览,看到已经启动的项目

在这里插入图片描述

可以看到,和我们本地启动的是一模一样的,但是是不需要安装环境的,非常方便!
在这里插入图片描述

4.4 测试项目运行状况

启动虽然正常启动了,但是我们还是需要进行一些测试,看看新的环境中项目运行是否正常,这里我通过连接 metamask 进行登录测试
在这里插入图片描述

可以看到 connect 钱包是正常的,然后我们开始赠送一张明信片

在这里插入图片描述

这里会发现,这个环境是加载不出 ipfs 上面的图片的,所以运行不是那么完整
在这里插入图片描述
正常大概是这样:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
但是整体功能是没有问题的,可能是因为网络相关问题,整体的运行体验还是不错的!!!

五、其他功能演示

5.1. 多人协作

协作发发起协作,发起者点击“开始协作”按钮,就可以生成协作邀请信息,发起者点击“再次复制链接”按钮,将下述信息粘贴发给需要参与项目的人员。同时,项目进入协作计时,计时显示在右上角控制面板中。邀请信息内容具体如下:“k9sec 邀请您加入工作空间协作。点击链接:https://cloudstudio.net/share/xxxxxx Cloud Studio MetaWork,就可以进行多人协作了!!
在这里插入图片描述

在这里插入图片描述

5.2. 使用 Git 进行版本控制并发布项目到gitee

这里我在 readme 中加入一段描述,并且准备commitgitee仓库中
在这里插入图片描述
转到源代码管理模块,可以看到已经出现了我的修改,这里我们通过 commitsyncchange 就可以将修改同步了!非常的nice!
在这里插入图片描述
效果如下:
在这里插入图片描述

其他过多的功能就不一一介绍了,大家感兴趣的可以去官网浏览查看!!!

六、常见问题及注意事项

  • 在开发过程中,发现一个不太适合 web3 项目的点,就是 ipfs 是网络是加载不出来的,不知道后续有没有可能进行优化
  • 在进行多人协作的时候,有时候加入协作邀请方没有收到消息,不知道是网络问题还是什么原因,没有反馈,导致一直在那等待
  • 还有就是云主机工作空间会出现频繁的断线重新,不过这个通过查看文档找到了原因,这个发出来避免大家也有同样的情况,官网回答如下
    • 目前由于云主机工作空间的流量是由 Cloud Studio 服务器进行代理,访问路径为 本地机器 -> Cloud Studio 代理服务器 -> 云主机 , 会导致 Cloud Studio 由于网络环境的情况导致连接不稳定。目前 Cloud Studio 已经在优化访问路径为 本地机器 -> 云主机,以此来提高连接稳定性,敬请期待。

七、总结

在使用腾讯云 Cloud Studio 时从环境搭建到运行整体感觉上还是很丝滑的,感觉收获颇多。在实践遇见的一些问题,小助手也会积极解答,通过对几次的CSDN的培训以及官方文档的学习,对CloudStudio有了很大的认识,真的是一个很不错的云IDE产品,在后续的工作中,也会大量给公司推荐腾讯云的一些有效的方案,用于公司降本增效。

经过这次活动,我总结了CloudStudio的相关优点,方便大家在选择解决方案时参考:

  1. 支持多种语言环境,包括PythonJavaNode.js等。
  2. 支持创建工作空间,可以在其中进行在线编程、代码修改、实时调试等操作。
  3. 支持Git版本控制和连接云主机进行资源管理。
  4. 提供云端部署套件和协作套件,方便应用部署和团队协作。
  5. 支持自定义模板和在线预览调试功能。
  6. 支持在线安装VS Code插件以增强使用体验。
  7. 支持按量计费和资源包购买,适合中小型项目使用。

总体来说,在这次 CloudStudio 的实践案列下,还是学习感受到了这种开发方式带来的根本性变革,其实也是顺应时代的产物,从低级语言到高级语言,从自建服务器到云服务器,每个产品的诞生都是为了释放重复劳动,或许以后开发只需要编写部分核心业务代码就可以上线了,所有的标准化功能都可以一键组装,还是要学会站在巨人的肩上,感谢腾讯云提供丰富底层支撑,能让现在的开发者的开发方式越来越简单高效!!!

八、相关链接

在这里插入图片描述