[Tencent Cloud Studio Practical Training Camp] Use Cloud Studio to quickly build a web page
I. Introduction
- Personal homepage : ζ Xiaocaiji
- Hello everyone, I am Xiaocaiji, let us learn to use Cloud Studio to quickly build a web page
- If the article is helpful to you, welcome to follow, like, and bookmark (one-click three links)
2. Introduction to Cloud Studio
1. What is Cloud Studio
Cloud Studio is a browser-based integrated development environment (IDE) that provides developers with an always-on cloud-based workstation. Users do not need to install Cloud Studio when using Cloud Studio, and can develop, test and deploy online anytime, anywhere by opening a browser, so that developers can quickly and easily perform productivity work without worrying about complicated configuration and environment maintenance.
.
2. Advantages of Cloud Studio
As an online IDE, Cloud Studio includes code highlighting, auto-completion, Git integration, basic terminal IDE functions, and supports real-time debugging, plug-in extensions, etc., which can help developers quickly complete the development, compilation, and deployment of various applications. It supports remote access to cloud servers and provides Tencent Cloud SCF industry users with a complete closed-loop cloud native development experience of development-test-deployment. The following briefly introduces the advantages of Cloud Studio from 5 aspects:
- Cloud development: The development environment of Cloud Studio is all hosted on the cloud, so there is no need to install any software, and there is no need to worry about complex environment configurations. Developers only need to log in through a browser to access anytime, anywhere.
- Multi-language support: Cloud Studio supports multiple programming languages, including Python, Java, JavaScript, etc. Developers can write codes in different languages in the same integrated environment to achieve more efficient development and testing.
- Automated testing: Cloud Studio provides a series of automated testing tools and frameworks to help developers improve code quality and reduce the time to find defects. These tools include code complexity analysis, unit testing, integration testing, and more.
- Integrated deployment: Cloud Studio ensures continuity and automation of deployment. When the code changes, it can automatically detect and build the code, and automatically deploy the new functions to the cloud platform, making the development process more efficient and smooth.
- Multi-person collaboration: Cloud Studio supports multi-person collaboration, even if developers are distributed all over the world, they can collaborate easily. Developers can communicate within the same project and share code and documents to establish a better collaborative relationship. In short, Cloud Studio is an efficient and powerful cloud development platform, which can greatly improve the productivity of developers, allowing them to focus more on code writing and function realization, while greatly reducing the complexity of development and deployment.
3. Cloud Studio login and registration
【1】Open Cloud Studio official website: https://www.cloudstudio.net/?utm=csdn , click Register, as shown in the following figure:
【2】Choose which account number to use to register (Xiaocaiji uses WeChat), as shown in the figure below:
【3】After the registration is completed, the following interface will appear to indicate that the login is successful, as shown in the figure:
4. The first experience of Cloud Studio
[1] Even if you have never learned React, you only need to open the corresponding React framework template to start initializing a React workspace, as shown in the following figure:
[2] After waiting for less than 10s (different from the difference in bandwidth and network speed), the cloud IDE has been initialized, as shown in the following figure:
[3] You can see that after initializing the code on the left, the console will install dependencies and start a simple React template project.
// 进入当前目录
cd ./ &&
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install，安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000
[4] At this point, we can find that if we use a new host, as long as we have a browser, we don’t need to prepare any environment, and we don’t need to install any software. We only need to be able to connect to the Internet, and we can initialize a React project within a few minutes ( As shown in the figure below), this is very efficient for learning new technologies.
[5] Use Cloud Studio to create a project
The essence of creating a project is to create or select a directory as a project. There are many ways to create a project in Cloud Studio:
Method 1: Select an existing directory as the project
Method 2: Select a directory as a project through the file menu
Method 3: Select a directory as a project through the command line terminal
1. Create a new terminal, as shown in the following figure:
2. Use the cloudstudio command to open a directory as a project, as shown in the following figure:
Method 4: Clone the project from the code warehouse
【6】Small test
Cloud Studio currently supports Python, Java, Go, C/C++ and Node.js languages. This step runs Python, Go, and C++ language program examples in two ways: the command line and the interface. You can choose the corresponding language to operate according to your needs. Xiaocaiji uses Python and Node.js to operate respectively.
Python
- Create a directory DEMO, and open the DEMO directory in Cloud Studio.
- Create a simple example file main.py in the DEMO directory. As shown below:
- Run the program in any of the following ways:
Node.js
- Create a directory DEMO, and open the DEMO directory in Cloud Studio.
- Create a simple sample file main.js in the DEMO directory. As shown below:
- Run the program in any of the following ways:
5. Use Cloud Studio to develop a simplified web page
The horoscope project is an application developed based on Flask. Users can view the overall page of the twelve constellations, as well as the introduction of the specific constellation page of a certain constellation.
1. Start the project manually
【1】Import of project
[2]
The first step of project operation: open the app.py main program
Step 2: Right click – select Run Python File in Terminal
Step 3: Step 3 Click "Open Browser"
Note here: If you can’t run it, you need to enter these two lines of code in the terminal
Step 4: Enter the route in the browser and access the view function
Step 5: Display the project effect constellation home page
Step 6: Click on any constellation to jump to the constellation details page
2. Automatically start the project
【1】Import of project
[2] Generate and configure the preview.yml file
The format of the file is described as follows:
# .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] Add a configuration file, "requirements.txt", here we choose Flask 2.0.1 version.
After the configuration is complete, we start the project again, and we can automatically enter the preview, haha.
6. Upload the code warehouse
Fill out the README.md file
# 项目说明
本项目来源于《腾讯云 Cloud Studio 实战训练营》的参赛作品，该作品在腾讯云 Cloud Studio 中运行无误。
1：项目的导入
2：项目运行
第一步：打开app.py主程序
第二步：右击--选择Run Python File in Terminal
第三步：第三步点击”打开浏览器”
这里需要注意：如果运行不出来需要在终端中输入这两行代码即可
第四步：在浏览器中输入路由，访问视图函数
第五步：显示项目效果星座首页
第六步：点击任意一个星座，跳转到星座详情页
Find "Source Code Management" in the function menu area on the left
Use git init to initialize the warehouse, execute the following command:
git init
Enter the message information that needs to be submitted, and then click "Commit" to submit the warehouse
Project code address : https://gitcode.net/weixin_45191386/star_project.git
7. Development space
Looking at the development space in use, we can see that the templates we use are templates created based on Python, and can also be rolled back in the "recently deleted" space.
If you feel that the "standard version" does not meet the requirements, you can also upgrade the configuration, but the modification will take effect after the next restart.
Stop the project.
Deleting the project destroys the workspace.
8. Summary
- This experiment is mainly to guide you how to use Cloud Studio for cloud programming, and use the cloud IDE Cloud Studio to quickly build, and develop and restore a simplified version of the mobile React H5 ordering system page.
- On a new machine, we can experience the advantages brought by the cloud IDE from 0 to 1. There is no need to install various environments, it is easy to use, and you can get started right out of the box.
- One-stop cloud development environment: Cloud Studio provides a complete cloud development environment, including code editors, runtime environments, debugging tools, etc., allowing developers to complete all development tasks on one platform.
- Abundant cloud resources: Through Cloud Studio, developers can quickly create and manage resources such as cloud servers, databases, and storage without caring about the underlying hardware and operation and maintenance details.
- In general, Cloud Studio is a powerful and easy-to-use cloud development tool provided by Tencent Cloud for developers. Through Cloud Studio, developers can develop and deploy on the cloud more efficiently, accelerating the digital transformation process of enterprises.
- Xiaocaiji forgot to archive for the first time during the operation experience process. When the page was restarted, the code was lost. It would be great if it could be automatically archived in real time.
[Tencent Cloud Studio Practical Training Camp] Use Cloud Studio to quickly build React to complete the ordering H5 page restoration, this is the end, thank you for reading, if the article is helpful to you, welcome to follow, like, bookmark (one key three even)