I. Introduction
1.1 Related Links
Official website address: Cloud Studio
Official document address: Introduction to Cloud Studio (Cloud IDE) | Cloud Studio
1.2 Introduction to Cloud Studio (Cloud IDE)
- Cloud Studio is a browser-based integrated development environment (IDE). Users do not need to install Cloud Studio when using it. Users can program online anytime, anywhere by opening a browser, which brings great convenience to developers.
- As an online IDE, Cloud Studio includes basic IDE functions such as code highlighting, auto-completion, Git integration, and terminal. It also supports real-time debugging, plug-in extensions, etc., which can help developers quickly complete the development, compilation, and deployment of various applications .
1.3 Experiment introduction
We often encounter remote office scenarios. Next, we 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. There is no need to install various environments, it is easy to use, and you can get started right out of the box.
The final effect is as follows:
Second, preparation before development
2.1 Open the official website
Click the link below to jump to the official website, and click "Register/Login".
2.2 Register Cloud Studio:
It is very convenient to register and log in to Cloud Studio here, and three registration methods are provided:
- Use the CODING account to authorize registration/login (the method used in this article)
- Register/login with WeChat authorization
- Register/login with GitHub authorization
I chose WeChat, click the WeChat button, and scan the pop-up QR code to authorize login.
After the authorization is successful, you can jump to the homepage of Cloud Studio. You can see that Cloud Studio provides many templates (framework templates, cloud-native templates, and website templates), all of which are out-of-the-box templates. At the same time, Cloud Studio also supports all old and new Users are given 3,000 minutes of free workspace time per month.
This project uses the React framework. You can directly click on the React template to start initializing a React workspace. After a while, the initialization will be completed and a React project file will be obtained.
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 or install any software. We only need to be able to connect to the Internet, and we can initialize a React project in a few minutes. This is very simple convenient.
3. Develop a simplified version of the ordering system
The main purpose is to develop a React H5 page. For rapid development, a UI component library is often used. Here we use the antd-mobile UI library. antd-mobile is the React implementation of Ant Design's mobile specification.
3.1 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
3.2 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.
Install less and less-loader:
yarn add -D less@^3.12.2 less-loader@^7.0.1Note here that if you install a higher version without a version, the project will fail to start.
3.3 Exposing webpack configuration files
Configure in webpack.config.js, this configuration needs to expose React's config configuration file, warning: this operation is irreversible.
npm run eject
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, click "Ctrl+F" on the keyboard, and search for "style files" in the input box.
Add the following two lines of code here:
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;
Then go ahead and type "sassRegex" in the search box
Follow the configuration of sass to configure less.
// less
{
test: lessRegex, // 有改动
exclude: lessModuleRegex, // 有改动
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader' // 有改动
),
sideEffects: true,
},
{
test: lessModuleRegex, // 有改动
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader' // 有改动
),
},
This completes the configuration of less in webpack.config.js, and the less style can be used in the project.
3.4 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
In the past, to upload server code, you needed 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 on the IDE editing area "Upload"
Just drag the img folder to the src directory. (Click to download the img compressed package)
3.5 Replace App.js main file
v>
<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 start 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 (marked in yellow in the figure below) to view the style.
- A QR code is provided for debugging on the mobile phone (marked in green in the figure below).
- Click the red mark in the figure below to open the page in the browser, copy the address and share it with others to view the page (no configuration required).
3.6 Publish warehouse
Before posting, fill out the README.md file.
# 项目说明
这是一个用 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.
Click the "Initialize Warehouse" button in the figure above or use "git init" to initialize the warehouse.
git initEnter the message information to be submitted, and then click "Commit" to submit the warehouse.
Enter the github email address and username
Here you can choose to host the code to GitHub or CODING, I choose GitHub
Or click the settings icon here to add an associated account
Click the "Publish Branch" button, the associated account will appear, select the account name you want to upload
At this point, the project has been uploaded to GitHub.
Four, development space
On the workspace list page of Cloud Studio cloud IDE, you can run, stop, delete and restore the workspace.
4.1 run
Click the corresponding workspace card, and the space will be opened and run on a new page, and the status of "Running" will be displayed on the workspace card.
4.2 stop
For a workspace in the "Running" state, click [Stop] on the right side of the card to stop running the workspace.
4.3 Delete
You can delete a workspace that is not running by clicking [Delete] in the lower right corner of the workspace card to delete it.
In order to prevent accidental deletion, the deleted workspace will be displayed in the "Deleted Workspace" list below and kept for 24 hours. Before that, you can click [Restore] at any time to restore your workspace, and the workspace that has not been restored for more than 24 hours will be destroyed forever.
Five, summary
5.1 Summary of Features
1. Cloud development: Cloud Studio is a browser-based integrated development environment (IDE), which provides developers with an uninterrupted cloud workstation that can be used as long as there is a browser. Cloud Studio also supports you to connect to your own cloud server, so that you can view files on the cloud server in the editor, and perform online programming and deployment.
2. Preset environment: Using the preconfigured environment of Cloud Studio, you can directly create the corresponding type of workspace, quickly start the project and enter the development state, without cumbersome environment configuration.
3. Debug web pages in real time: Cloud Studio has a built-in preview plug-in that can display web page applications in real time. When your code is changed, the preview window will be automatically refreshed, so that you can develop and debug web pages in real time in Cloud Studio.
4. Multiple templates: Developers can create a template file corresponding to the language system with one click, and develop directly. The operation is simple and saves time and effort.
5. Plug-in extension: If the default configuration cannot meet the needs, you can install the VS Code plug-in online to enhance the user experience.
5.2 Optimization suggestions
1. Provide more detailed documentation: The help documentation of the current website is relatively brief, and the various possibilities are not very comprehensive.
2. It is recommended that multiple space templates can be opened at the same time: currently opening a space template requires closing another running template.
3. Provide more optimized performance and stability: At present, there is still room for further improvement in the performance and stability of the website, and sometimes there may be some problems such as freezes and crashes. In order to improve the user experience, it is recommended to consider optimizing the performance and stability of the platform.
4. The currently supported languages are limited, and more languages can be integrated.