【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建一个web页面
一、前言
- 个人主页: ζ小菜鸡
- 大家好我是ζ小菜鸡，让我们一起来学习使用Cloud Studio快速构建一个web页面
- 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)
二、Cloud Studio 简介
1.Cloud Studio 是什么
Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线进行开发、测试和部署，使开发者可以快速且轻松地进行生产力工作，而不必担心复杂的配置和环境维护。
。
2.Cloud Studio 的优点
Cloud Studio 作为在线 IDE，包含代码高亮、自动补全、Git 集成、终端 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。支持远程访问云服务器，为腾讯云 SCF 行业用户提供开发-测试-部署完整闭环的云原生开发体验。以下从5个方面简单介绍一下Cloud Studio 的优点：
- 云端开发：Cloud Studio的开发环境全部托管在云端，因此不需要安装任何软件，也不必担心复杂的环境配置。开发者只需通过浏览器登录即可随时随地访问。
- 多语言支持： Cloud Studio支持多种编程语言，包括Python、Java、JavaScript等。开发者可以在同一个集成环境中编写不同语言的代码，实现更加高效的开发和测试。
- 自动化测试：Cloud Studio提供了一系列的自动化测试工具和框架，帮助开发者提高代码质量，减少发现缺陷的时间。这些工具包括代码复杂度分析、单元测试、集成测试等等。
- 集成部署：Cloud Studio确保了部署的连续性和自动化。当代码发生改动时，它能够自动检测并构建代码，并将新增的功能自动部署到云平台上，让开发过程变得更加高效和流畅。
- 多人协作：Cloud Studio支持多人协作，即使开发者分布在世界各地，也能够轻松地进行协作。开发者可以在同一个项目内交流，并共享代码和文档，以此建立起更好的协作关系。 总之，Cloud Studio是一种高效且强大的云端开发平台，它能够大大地提高开发人员的生产力，让他们更加专注于代码的编写和功能的实现，同时也大大降低了开发和部署的复杂性。
三、Cloud Studio 登录注册
【1】打开Cloud Studio官网: https://www.cloudstudio.net/?utm=csdn，点击注册，如下图所示：
【2】选择使用什么账户号注册（小菜鸡用的是微信），如下图所示：
【3】注册完成后出现以下界面说明登录成功，如图所示：
四、Cloud Studio 的初体验
【1】即使从来没有学习过 React，只需要打开对应的 React 框架模板，，即可开始初始化一个 React 的工作空间，如下图所示：
【2】在等待不到 10s 左右（与带宽网速差异有区别），云 IDE 就已经初始化完毕，如下图示所示：
【3】可以看到初始化左侧代码后，控制台会安装依赖及启动一个 React 简单的模板项目。
// 进入当前目录
cd ./ &&
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install，安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000
【4】到此，可以发现我们如果用一台新主机，只要有浏览器，就不需要准备任何环境，不需要安装任何软件，只需要能够联网，就能在几分种内初始化一个 React 项目（如下图所示），这对新技术的学习是非常高效的。
【5】使用Cloud Studio创建项目
创建项目的本质是创建或者选择一个目录作为项目，在 Cloud Studio 中创建项目的方式有很多种：
方式一：选择一个已有的目录作为项目
方式二：通过文件菜单选择一个目录作为项目
方式三：通过命令行终端选择一个目录作为项目
1.新建一个终端，如下图示所示：
2.使用 cloudstudio 命令打开一个目录作为项目，如下图所示：
方式四：从代码仓库中克隆项目
【6】小试牛刀
Cloud Studio 目前支持 Python、Java、Go、C/C++ 及 Node.js 语言。该步骤以命令行及界面两种方式分别运行 Python、Go 及 C++ 语言程序示例，您可按需选择对应语言进行操作，小菜鸡分别使用Python和Node.js进行操作。
Python
- 创建一个目录 DEMO，并在 Cloud Studio 打开 DEMO 目录。
- 在 DEMO 目录下创建简单示例文件 main.py。如下图所示：
- 使用以下任意一种方式运行该程序：
Node.js
- 创建一个目录 DEMO，并在 Cloud Studio 打开 DEMO 目录。
- 在 DEMO 目录下创建简单示例文件 main.js。如下图所示：
- 使用以下任意一种方式运行该程序：
五、使用 Cloud Studio 开发一个简版的web页面
horoscope项目是基于Flask开发的应用程序用户可以查看十二星座的整体页面，以及某一星座的具体的星座页面的介绍。
1.手动启动项目
【1】项目的导入
【2】项目运行
第一步：打开app.py主程序
第二步：右击–选择Run Python File in Terminal
第三步：第三步点击”打开浏览器”
这里需要注意：如果运行不出来需要在终端中输入这两行代码即可
第四步：在浏览器中输入路由，访问视图函数
第五步：显示项目效果星座首页
第六步：点击任意一个星座，跳转到星座详情页
2.自动启动项目
【1】项目的导入
【2】生成并配置preview.yml文件
该文件的格式说明如下：
# .vscode/preview.yml
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
apps:
- port: 9000 # 应用的端口
run: pip install -i https://mirrors.tencent.com/pypi/simple/ -r ./requirements.txt && bash /usr/bin/start-vnc-session.sh && python app.py # 应用的启动命令
root: ./app # 应用的启动目录
name: horoscope # 应用名称
description: horoscope项目是基于Flask开发的应用程序用户可以查看十二星座的整体页面，以及某一星座的具体的星座页面的介绍。 # 应用描述
autoOpen: true # 打开工作空间时是否自动开启预览（优先级高于根级 autoOpen）
【3】添加配置文件，“requirements.txt”，这里我们选Flask 2.0.1版本。
配置完成后，我们再次启动项目，就能自动进入预览了，哈哈。
六、上传代码仓库
填写README.md文件
# 项目说明
本项目来源于《腾讯云 Cloud Studio 实战训练营》的参赛作品，该作品在腾讯云 Cloud Studio 中运行无误。
1：项目的导入
2：项目运行
第一步：打开app.py主程序
第二步：右击--选择Run Python File in Terminal
第三步：第三步点击”打开浏览器”
这里需要注意：如果运行不出来需要在终端中输入这两行代码即可
第四步：在浏览器中输入路由，访问视图函数
第五步：显示项目效果星座首页
第六步：点击任意一个星座，跳转到星座详情页
左边功能菜单区找到“源代码管理”
使用 git init 进行仓库初始化，执行以下命令：
git init
输入需要提交的message信息，再点击"Commit"进行仓库提交
项目代码地址：https://gitcode.net/weixin_45191386/star_project.git
七、开发空间
查看正在使用的开发空间，可以看到我们使用的模板是基于 Python创建的模板，还可以在“近期删除”的空间，进行回滚。
如果觉得“标准版本”不符合要求，还可以进行配置升级，不过，修改需要下次重启后才能生效。
停止该项目。
删除该项目，即可销毁这个工作空间。
八、总结
- 本次实验主要是引导大家如何使用 Cloud Studio 进行云编程，并且动手使用云 IDE Cloud Studio 快速搭建，并开发还原一个移动端 React H5 的简版点餐系统页面。
- 在一台新的机器设备上，从 0 到 1 体验云 IDE 给我们带来的优势，不需要装各种环境，简单易用，开箱即可上手。
- 一站式云端开发环境：Cloud Studio 提供了完整的云端开发环境，包括代码编辑器、运行环境、调试工具等，让开发者能够在一个平台上完成所有的开发任务。
- 丰富的云端资源：通过 Cloud Studio,开发者可以快速创建和管理云服务器、数据库、存储等资源，无需关心底层的硬件和运维细节。
- 总的来说，Cloud Studio 是腾讯云为开发者提供的一款强大而易用的云端开发工具。通过 Cloud Studio ,开发者可以更加高效地进行云端开发和部署，加速企业的数字化转型进程。
- 小菜鸡在操作体验的过程时，首次忘记存档，重启页面时，造成了代码的丢失，如果能实时自动存档就好了。
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原，到此就结束了，感谢大家阅读，如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)