Article directory
I. Introduction
An IDE (Integrated Development Environment) is a software tool designed to provide developers with an integrated development platform that includes various tools and functions for writing, debugging, and deploying applications . IDEs usually provide code editors, compilers, debuggers, version control, build tools, etc., which can help us develop software more efficiently.
A traditional IDE is usually software that is installed on a local computer, the developer 需要在自己的设备上安装和配置对应的IDE, and manually manages project files and dependencies. The benefits of traditional IDEs include allowing developers to write, debug and run code directly in the local development environment, with higher customization and flexibility.
However, recently Tencent Cloud launched the Cloud Studio tool, which can be used out of the box without downloading the required IDE. Therefore, this article mainly introduces and builds a project to let you know about it, and try to use such an excellent one. tool.
2. Cloud Studio Function Introduction
Tencent Cloud's Cloud Studio is a web-based integrated development environment (IDE), which provides us with a series of functions and features to facilitate developers to develop, collaborate and deploy on the cloud. First, let's list the main functions and features of Cloud Studio:
-
Rich language support: Cloud Studio
支持多种编程语言, including Java, Python, Node.js, Golang, etc., can meet the needs of our different projects. -
Powerful code editor: Cloud Studio
内置了强大的代码编辑器supports code highlighting, smart prompts, code refactoring, shortcut keys and other functions, providing us with a smooth coding experience. -
Integrated debugging tool: Cloud Studio
提供了集成的调试工具, which allows us to quickly locate and solve problems in the code through breakpoint debugging, variable viewing, stack trace and other functions. -
Cloud development environment: The most important point is
Cloud Studio 是基于云端的开发环境that we don't need to install development tools and configure the development environment locally, and we can write, run and debug code only through the browser. -
Flexible collaboration capabilities: With Cloud Studio
支持多人协同开发, multiple developers can edit the same project at the same time and view each other's modifications in real time, which facilitates teamwork and code review. -
One-click deployment to Tencent Cloud: Cloud Studio
提供了一键部署到腾讯云的功能, we can directly deploy code to services such as servers, containers, or function computing on the cloud, simplifying the deployment process. -
Integrate Tencent cloud services:
Cloud Studio 集成了丰富的腾讯云服务, including object storage COS, cloud database CDB, cloud function SCF, etc., which can easily call and manage these services and improve development efficiency. -
Safe and reliable: Cloud Studio
提供了安全的开发环境encrypts data during transmission and controls permissions for each user to ensure code and data security.
3. Experiment introduction
We often encounter remote office scenarios. Next, we plan to use the cloud IDE Cloud Studio to quickly build, and develop and restore a simplified version of the mobile React H5 ordering system page, from 0 to 1 to experience the advantages brought to us by the cloud IDE , no need to install various environments, easy to use, you can get started right out of the box.
After clicking to enter the prototype, click on the ordering page at the bottom
4. Practical guidance
Open the official website
Click the link below to jump to the official website, and click "Register/Login".
Sign up for Cloud Studio
It is very convenient to register and log in to Cloud Studio here, and three registration methods are provided:
Authorize registration/login with CODING account (used in this article)
Authorize registration/login with WeChat
Authorize registration/login with GitHub
Remark:
CODING provides a one-stop R&D management platform and cloud-native development tools, making software R&D as simple and efficient as industrial production, and helping enterprises improve R&D management efficiency.
Because our company happens to use CODING as the code management platform, so here select "CODING DevOps" to log in.
Enter the corresponding team domain name prefix and click Login to jump to the CODING platform for relevant authorization.
Find the corresponding login method and log in.
After the authorization is successful, you can jump to the homepage of Cloud Studio, and you can see that Cloud Studio provides a lot of templates (framework templates, cloud-native templates, site building templates), all of which are pre-installed environments. Out-of-the-box templates can be quickly built environment for code development, and Cloud Studio also provides 3,000 minutes of free working space per month to all new and old users.
Even if you have never learned React, you only need to open the corresponding React framework template to start initializing a React workspace. After waiting for less than 10s (different from the difference in bandwidth and network speed), the cloud IDE has been initialized.
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
At this point, we can find that if we use a new host, as long as there is a browser, we don’t need to prepare any environment or 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. Technology learning is very efficient
5. Develop a simplified version of the ordering system
The purpose is to develop a React H5 page. For rapid development, UI component libraries are usually used. Here we use the antd-mobile UI library. antd-mobile is the React implementation of Ant Design's mobile specification.
Install antd-mobile
antd-mobile supports on-demand loading based on Tree Shaking, and most build tools (such as webpack 4+ and rollup) support Tree Shaking, so in most cases you can have a smaller package size without additional configuration .
$ yarn add antd-mobile@^5.32.0
# or
$ npm install --save antd-mobile@^5.32.0
Install Less
Usually when we develop React projects, we may use Less and Sass for style development. By default, React integrates Sass, so it is very unfriendly to friends who are used to writing Less, so we need to configure Less in the React project.
(1). Install less and less-loader:
yarn add -D less@^3.12.2 less-loader@^7.0.1
Note here that if you install a higher version without a version, the project will fail to start.
(2). Expose the webpack configuration file:
configure in webpack.config.js, this configuration needs to expose the config configuration file of React, warning: this operation is irreversible
After entering 'y', the project will automatically deconstruct.
After completing the command, a config folder will appear in the root directory of the project, which contains some configuration-related scripts. You can also see that there are many more attribute values in package.json, such as "dependencies".
Find the config/webpack.config.js file and find around line 70, which is the code related to setting css.
Copy the sass code and change it to less
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 新增加 Less 代码
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;
Continue to search sass down, the location is around line 475, and the following code can be found.
Like the previous configuration, follow the configuration of sass to configure less.
This completes the configuration of less in webpack.config.js, and the less style can be used in the project.
(3). Install normalize
Normalize.css is a modern alternative to CSS resets that provides a strong cross-browser consistency in styling default HTML elements. Normalize.css is a modern, HTML5-ready, premium alternative to the traditional CSS reset.
yarn add -D normalize.css@^8.0.1
(3).Materials required for uploading the project:
In the past, to upload the server code, you need to use the Scp command or install the Remote SSH plug-in support. Cloud Studio can easily support routine operations such as file upload and download by default, which is consistent with the local IDE experience:
You can directly drag the file to the IDE editing area (the method used in this article)
right-click the IDE editing area and
click "Upload" to directly drag the img folder to the src directory. (Click to download the img compressed package)
(4). Replace the App.js main file
The following is the main business code of the ordering system, just copy it to src/App.js and replace it directly.
import './App.css';
import React, {
useState } from 'react'
import {
NavBar, Toast, Swiper, SideBar, TabBar, Badge } from 'antd-mobile'
import {
AppOutline,
ExclamationShieldOutline,
UnorderedListOutline,
UserOutline,
} from 'antd-mobile-icons'
import BannerImg from './img/banner.png'
import HotImg from './img/hot.png'
import Food1Img from './img/food1.png'
import Food2Img from './img/food2.png'
import CartImg from './img/cart.png'
import './index.less'
import "normalize.css"
function App() {
const [activeKey, setActiveKey] = useState('1')
const tabbars = [
{
key: 'home',
title: '点餐',
icon: <AppOutline />,
},
{
key: 'todo',
title: '购物车',
icon: <UnorderedListOutline />,
badge: '5',
},
{
key: 'sale',
title: '餐牌预告',
icon: <ExclamationShieldOutline />,
},
{
key: '我的',
title: '我的',
icon: <UserOutline />,
badge: Badge.dot,
},
]
const back = () =>
Toast.show({
content: '欢迎进入点餐系统',
duration: 1000,
})
const items = ['', '', '', ''].map((color, index) => (
<Swiper.Item key={
index}>
<img style={
{
width: '100%'
}} src={
BannerImg }></img>
</Swiper.Item>
))
const tabs = [
{
key: '1', title: '热销' },
{
key: '2', title: '套餐' },
{
key: '3', title: '米饭' },
{
key: '4', title: '烧菜' },
{
key: '5', title: '汤' },
{
key: '6', title: '主食' },
{
key: '7', title: '饮料' },
]
const productName = [
'小炒黄牛肉',
'芹菜肉丝炒香干',
'番茄炒鸡蛋',
'鸡汤',
'酸菜鱼',
'水煮肉片',
'土豆炒肉片',
'孜然肉片',
'宫保鸡丁',
'麻辣豆腐',
'香椿炒鸡蛋',
'豆角炒肉'
]
const productList = productName.map((item, key) => {
return {
name: item,
img: key % 2 === 1 ? Food1Img : Food2Img
}
})
return (
<div className="App">
<NavBar onBack={
back} style={
{
background: '#F0F0F0',
fontWeight: 'bold'
}}>点餐</NavBar>
<div className='head-card'>
<Swiper
style={
{
'--border-radius': '8px',
}}
autoplay
defaultIndex={
1}
>
{
items}
</Swiper>
</div>
<div className='product-box'>
<SideBar activeKey={
activeKey} onChange={
setActiveKey}>
{
tabs.map(item => (
<SideBar.Item key={
item.key} title={
item.key === '1' ? <div>
<div className='flex-center'>
<img style={
{
display: 'block',
width: '16px',
marginRight: '5px'
}} src={
HotImg }></img>
<div>{
item.title }</div>
</div>
</div> : item.title
} />
))}
</SideBar>
<div className='product-right'>
<div className='product-title'>热销</div>
<div className='product-list'>
{
productList.map((item, key) => {
return (
<div className='product-item'>
<div className='product-item-left'>
<img style={
{
display: 'block',
width: '76px',
marginRight: '5px'
}} src={
item.img }></img>
<div className='product-item-left-info'>
<div>
<div className='product-item-left-info-name'>{
item.name }</div>
<div className='product-item-left-info-number'>月售{
key + 1}0 赞{
key * 5}</div>
</div>
<div className='product-item-left-info-price'>¥10</div>
</div>
</div>
<div className="cart">
<img style={
{
display: 'block',
width: '30px',
marginRight: '5px'
}} src={
CartImg } onClick = {
() =>
Toast.show({
content: '添加购物车成功'
}) }></img>
</div>
</div>
)
})
}
</div>
</div>
</div>
<TabBar>
{
tabbars.map(item => (
<TabBar.Item
key={
item.key}
icon={
item.icon}
title={
item.title}
badge={
item.badge}
/>
))}
</TabBar>
</div>
);
}
export default App;
In the src directory, create an index.less file, and copy the following less-related codes into the file.
.head-card {
padding: 10px 20px;
box-sizing: border-box;
}
.flex-center {
display: flex;
align-items: center;
}
.product-box {
display: flex;
align-items: center;
width: 100%;
height: calc(100vh - 45px - 130px - 50px);
}
.product-right {
flex: 1;
height: 100%;
}
.product-title {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #000000;
text-align: left;
padding-bottom: 10px;
}
.product-list {
height: calc(100% - 24px);
overflow-y: auto;
}
.product-item {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 10px;
box-sizing: border-box;
margin-bottom: 10px;
&-left {
display: flex;
&-info {
padding-left: 3px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
&-name {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #000000;
text-align: left;
}
&-number {
padding-top: 3px;
font-family: PingFangSC-Regular;
font-size: 11px;
color: #787878;
text-align: left;
}
&-price {
font-family: PingFangSC-Regular;
font-size: 18px;
color: #FF1800;
text-align: left;
}
}
}
}
.cart {
position: absolute;
right: 10px;
bottom: 0;
}
After the copy is complete, enter yarn dev in the console to start the project.
- Cloud Studio has a built-in preview plug-in that can display web applications in real time. When the code changes, the preview window will automatically refresh, and you can develop and debug web pages in real time in Cloud Studio
- Because this project is a mobile H5 project, you need to open the "toggle device" button to view the style.
- A QR code is provided for debugging on the mobile phone.
Copy the address bar of the built-in Chrome browser window and share it with other members of the team, eliminating the cumbersome configuration of nginx deployment.
6. Release warehouse
# 项目说明
这是一个用 IDE [Cloud Studio](https://www.cloudstudio.net/?utm=csdn) 快速搭建，并开发还原一个移动端 React H5 的简版点餐系统页面，从 0 到 1 体验云 IDE 给我们带来的优势，不需要装各种环境，简单易用，开箱即可上手。
## 相关技术栈
React + less + webpack
## 项目运行
yarn install
yarn start
Find "Source Code Management" in the function menu area on the left
Use git init for warehouse initialization.
Enter the message information to be submitted, and then click "Commit" to submit the warehouse.
Because the code is now hosted on Coding, demonstrate how to publish to the Coding warehouse, click "Publish Branch" -> select "Publish to CODING"
Choose the second one, and then choose the project we created ourselves
You can log in to the Coding platform to view the warehouse code.
7. Development space
Looking at the development space in use, we can see that the template we use is based on the template created by create-react-app scaffolding, and it 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.
At the same time, everyone is welcome to explore more functions of Cloud Studio and empower your work!
