0️⃣Preface
Tencent Cloud Cloud Studio is an online development tool (cloud IDE), which can help users reduce the cost of installing the IDE and provide one-stop online code development, compilation, operation and storage services.
1️⃣Introduction
1. Project 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, we can experience the advantages brought by the cloud IDE. There is no need to install various environments. It is simple and easy to use, and you can get started right out of the box.
2. Product introduction
Cloud Studio is a "browser"-based integrated development environment (IDE) that provides developers with a stable cloud workstation. When using Cloud Studio, there is no need to install it. You can quickly start and develop projects by opening the browser. The underlying resources can be automatically elastically scaled, which greatly saves costs. Low-code development saves time and effort.
-
The web-based code editor includes basic IDE functions such as code highlighting, auto-completion, Git integration, and terminal, and supports real-time debugging, plug-in extensions, etc., to improve development, compilation, and deployment efficiency;
-
Supports remote access to cloud servers, providing Tencent Cloud SCF industry users with a complete closed-loop cloud-native development experience of development-test-deployment;
2️⃣Practical training
Click the link below to jump to the official website, and click "Register/Login".
1. Register Cloud Studio
Here Cloud Studio provides three registration methods:
- Authorize registration/login with CODING account
- Register/login with WeChat authorization
- Register/login with GitHub authorization
This article chooses the first method (CODING is used as a code management platform to facilitate publishing projects to warehouses)
2. Create a workspace
You can see on the homepage that Cloud Studio provides many templates (framework templates, cloud-native templates, and website building templates), all of which are pre-installed. The out-of-the-box templates can quickly build an environment for code development. At the same time, Cloud Studio also provides 3000 minutes of free workspace for all new and old users every month.
We directly click "React" to automatically initialize a React workspace, and wait for less than 10s (different from the difference in bandwidth and network speed), and the cloud IDE has been initialized.
3. Configure the working environment
Install antd-mobile :
yarn add antd-mobile@^5.32.0
Install less :
yarn add -D less@^3.12.2 less-loader@^7.0.1
Expose the webpack configuration file :
npm run eject
After entering 'y', the project will automatically deconstruct.
Then find the config/webpack.config.js file and set the css related code (add Less code)
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;
Continue to search for sass down, follow the configuration of sass, and 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' // 有改动
),
},
Install normalize :
yarn add -D normalize.css@^8.0.1
4. Replace the code material
Materials required for uploading projects:
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"
So we directly drag the img folder to the src directory.
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.
3️⃣Release warehouse
After filling in the README.md file, find "Source Code Management" in the function menu area on the left, use git init to initialize the warehouse, enter the message information to be submitted, and then click "Commit" to submit the warehouse.
You can log in to the Coding platform to view the warehouse code:
4️⃣Summary
Today we simulated on a new machine and experienced the advantages brought by Cloud Studio 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.
You are also welcome to explore more functions of Cloud Studio and empower your work!
