当前位置：首页 > news >正文

【腾讯云 Cloud Studio 实战训练营】通过云IDE构建Web3项目

news 2025/6/21 23:54:22

在这里插入图片描述

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

文章目录

- 背景
- 一、前言
- 二、 Cloud Studio 主要功能和应用场景
- 三、Cloud Studio 实验前期准备
- - 3.1. 打开官网
  - 3.2. 注册 Cloud Studio：
- 四、构建Web3项目
- - 4.1. 项目中技术栈
  - 4.2. 通过gitee管理代码并在CloudStudio上初始化环境
  - 4.3 运行预览项目
  - 4.4 测试项目运行状况
- 五、其他功能演示
- - 5.1. 多人协作
  - 5.2. 使用 Git 进行版本控制并发布项目到gitee
- 六、常见问题及注意事项
- 七、总结
- 八、相关链接

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是一个基于浏览器的云端集成式开发环境，适用于多种应用场景，包括：

快速启动项目：使用CloudStudio的预置环境，可以直接创建对应类型的工作空间，快速启动项目进入开发状态，无需进行繁琐的环境配置。
实时调试网页：CloudStudio内置预览插件，可以实时显示网页应用。当您的代码发生改变之后，预览窗口会自动刷新，这样您就可以在CloudStudio内实时开发调试网页了。
远程访问云服务器：CloudStudio支持您连接自己的云服务器，这样就可以在编辑器中查看云服务器上的文件，进行在线编程和部署工作。

三、Cloud Studio 实验前期准备

3.1. 打开官网

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

3.2. 注册 Cloud Studio：

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

使用 CODING 账号授权注册/登录
使用微信授权注册/登录
使用 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 install

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

yarn start

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

在这里插入图片描述

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

4.4 测试项目运行状况

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

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

在这里插入图片描述

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

在这里插入图片描述

但是整体功能是没有问题的，可能是因为网络相关问题，整体的运行体验还是不错的！！！

五、其他功能演示

5.1. 多人协作

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

在这里插入图片描述

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

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

八、相关链接

Cloud Studio产品体验地址
Cloud Studio产品文档
活动详情介绍
活动报名页面

在这里插入图片描述

文章目录

背景

一、 前言

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

三、Cloud Studio 实验前期准备

3.1. 打开官网

3.2. 注册 Cloud Studio：

四、构建Web3项目

4.1. 项目中技术栈

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

4.3 运行预览项目

4.4 测试项目运行状况

五、其他功能演示

5.1. 多人协作

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

六、常见问题及注意事项

七、总结

八、相关链接

相关文章：

一、前言