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

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

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

  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 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的相关优点，方便大家在选择解决方案时参考：

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

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

八、相关链接

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

在这里插入图片描述

相关文章：

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

​ iOS开发上架主页 在强者的眼中，没有最好，只有更好。 移动开发领域优质创作者，阿里云专家博主 文章目录 背景一、 前言二、 Cloud Studio 主要功能和应用场景三、Cloud Studio 实验前期准备3.1. 打开官网3.2. 注册 Cloud Studio&#xff1a…...

编程日记 2023/8/11 13:48:51

湖南麒麟系统非正常关机导致VNC启动失败原因分析

1、故障描述 掉电后，启动vncserver无法启动，或启动后连接vncserver黑屏 2、影响范围 非正常关机流程的机器 3、故障处理过程 第一次开机后vncserver服务无法正常启动，使用restart手动也无法拉起。按照现场人员提醒使用reboot命令重启机器…...

编程日记 2023/8/11 13:47:49

机器学习---监督学习和非监督学习

根据训练期间接受的监督数量和监督类型，可以将机器学习分为以下四种类型：监督学习、非监督学习、半监督学习和强化学习。 监督学习 在监督学习中，提供给算法的包含所需解决方案的训练数据，成为标签或标记。 简单地说，…...

编程日记 2023/8/11 13:46:48

【OS】请问，一个需要运行内存10GB的游戏，可以运行在32位物理内存为64GB的电脑上吗？

答案： 可以 解释 操作系统虽然是32位，限制了电脑的虚拟内存最大值为 4GB。如果，电脑开启了虚拟内存，则该款10GB运存的游戏是不可能开启的。期望开启这款游戏的做法是，在这个物理内存为64GB的电脑上关闭虚拟内存机制&…...

编程日记 2023/8/11 13:45:47

C语言 冒泡排序

目录 一、原理 二、代码演示 三、代码优化 一、原理 假设： int arr[] { 9,8,7,6,5,4,3,2,1,0 }; 将 arr 内的元素进行升序排列，得到一个新的数组 int arr[] { 0，1，2，3，4，5，…...

编程日记 2023/8/11 13:44:46

docker相关命令总结（停止、重启、重加载配置文件）

常用命令 # 配置 Docker 守护进程的行为和参数 vi /etc/docker/daemon.json# 停止docker服务 sudo systemctl stop docker# 启动 Docker 服务： sudo systemctl start docker# 重新加载systemd守护程序的配置文件，不会重启服务（配置文件&…...

编程日记 2023/8/11 13:43:45

Linux 命令大全（下）

Linux 命令大全（上） 本文目录 6. 网络通讯 常用命令6.1 ssh 命令 – 安全的远程连接服务器6.1.1 含义6.1.2 语法格式6.1.3 常用参数6.1.4 参考示例 6.2 netstat 命令 – 显示网络状态6.2.1 含义6.2.2 语法格式6.2.3 常用参数6.2.4 参考示例 6.3 dhclient…...

编程日记 2023/8/11 13:42:43

Babylon.js着色器简明简称【Shader】

推荐：用 NSDT设计器 快速搭建可编程3D场景 为了生成 BabylonJS 场景，需要用 Javascript 编写代码，BabylonJS 引擎会处理该代码并将结果显示在屏幕上。 场景可以通过改变网格、灯光或摄像机位置来改变。 为了及时显示可能的变化，屏…...

编程日记 2023/8/11 13:41:41

深入理解Linux内核--信号

信号的作用 信号(signal)是很短的消息，可以被发送到一个进程或一组进程。 使用信号的两个主要目的是： 1.让进程知道已经发生了一个特定的事件。 2.强迫进程执行它自己代码中的信号处理程序。​​​​ POSIX标准还引入了一类新的信号，叫做…...

编程日记 2023/8/11 13:40:40

转圈打印矩阵

转圈打印矩阵 【题目】 给定一个整型矩阵 matrix，请按照转圈的方式打印它。 例如： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 打印结果为：1，2，3，4，8，12，16，1…...

编程日记 2023/8/11 13:39:38

Elasticsearch 与 OpenSearch：揭开性能差距

作者：George Kobar, Ugo Sangiorgi 对于任何依赖快速、准确搜索数据的组织来说，强大、快速且高效的搜索引擎是至关重要的元素。 对于开发人员和架构师来说，选择正确的搜索平台可以极大地影响你的组织提供快速且相关结果的能力。 在我们全面的…...

编程日记 2023/8/11 13:38:37

100个Java工具类之41：系统工具类Apache之SystemUtils

系统工具类Apache之 org.apache.commons.lang3.SystemUtils 根据Apache SystemUtils源码中介绍，SystemUtils是java.lang.System的帮助程序。当因安全限制无法读取系统属性时，则会返回null。下面是为大家整理的几个主要用法。 一、获取主机名 String ho…...

编程日记 2023/8/11 13:37:36

maven Jar包反向install到本地仓库

maven Jar包反向install到本地仓库 需求实现 需求 项目打包时报错，缺少一个jar包。 但是在maven仓库都找不到此jar包，其他人提供了这个jar包。 需要把这个jar包install到本地仓库，使项目能正常打包运行。 实现 使用git bash命令执行以下脚…...

编程日记 2023/8/11 13:36:33

.NET6使用SqlSugar操作数据库

1.//首先引入SqlSugarCore包 2.//新建SqlsugarSetup类 public static class SqlsugarSetup{public static void AddSqlsugarSetup(this IServiceCollection services, IConfiguration configuration,string dbName "ConnectString"){SqlSugarScope sqlSugar new Sq…...

编程日记 2023/8/11 13:35:31

MySQL8是什么-MySQL8知识详解

从今天起，开始更新MySQL8的教程，今天更新MySQL8的第一篇文章，主要讲了MySQL8是什么、MySQL数据库的概念、MySQL的优势和MySQL的发展历史。 1、MySQL8是什么 MySQL 8是一个开源的关系型数据库管理系统。它是MySQL数据库的最新版本&#xff0c…...

编程日记 2023/8/11 13:34:29

Spring Gateway+Security+OAuth2+RBAC 实现SSO统一认证平台

背景：新项目准备用SSO来整合之前多个项目的登录和权限，同时引入网关来做后续的服务限流之类的操作，所以搭建了下面这个系统雏形。 关键词：Spring Gateway, Spring Security, JWT, OAuth2, Nacos, Redis, Danymic datasource, Jav…...

编程日记 2023/8/11 13:33:27

flutter开发实战-TextPainter计算文本内容的宽度

flutter开发实战-TextPainter计算文本内容的宽度 最近开发过程中根据Text文本的大小判断是否需要进行显示跑马灯效果，获取文本的大小，需要TextPainter来获取Size 一、TextPainter TextPainter主要用于实现文本的绘制。TextPainter类可以将TextSpan渲染…...

编程日记 2023/8/11 13:32:25

竞赛项目 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…...

编程日记 2023/8/11 13:31:23

MySQL相关的SQL语句、数据库、数据表、字段、类型

文章目录 前言MySQL整数类型MySQL字符串类型MySQL小数类型MySQL时间类型常用的基本SQL语句 前言 1、SQL语句不区分大小写。 MySQL整数类型 序号数据类型数据范围1TINYINT-128~1272SMALLINT-32768~327673MEDIUMINT-223~223-14INT-231~231-15BIGINT-263~263-1 MySQL字符串类型 …...

编程日记 2023/8/11 13:30:22

微信个人小程序申请 (AppID 和 AppSecret)

1. 登录微信公众平台 https://mp.weixin.qq.com/cgi-bin/loginpage?url%2Fcgi-bin%2Fhome%3Ft%3Dhome%2Findex%26lang%3Dzh_CN%26token%3D47421820 2. 右上角立即注册 3. 注册类型选择小程序 4. 账号信息 5. 邮箱激活 6. 小程序发布流程 7. 小程序信息 (前往填写) 8. 获取小程…...

编程日记 2023/8/11 13:29:21

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2025/9/14 9:38:27

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/9/16 18:47:23

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/8/15 2:04:44

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/9/2 19:56:38

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/9/13 17:45:05

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/9/3 19:19:44