Prefacio:
Cloud Studio es un entorno de desarrollo integrado (IDE) en la nube en línea que permite a los desarrolladores desarrollar, probar, depurar e implementar fácilmente aplicaciones en el navegador. Proporciona herramientas y recursos informáticos basados en la nube, como editores de código, compiladores, depuradores, sistemas de control de versiones y herramientas de gestión de proyectos, para que los desarrolladores puedan utilizar cualquier dispositivo para el desarrollo en cualquier lugar sin necesidad de un software de instalación local . CloudStudio también puede integrar múltiples plataformas informáticas en la nube (como AWS y Azure) y otras herramientas de desarrollo para ayudar a los desarrolladores a crear e implementar aplicaciones nativas de la nube de manera más conveniente.
Como un IDE en línea, Cloud Studio incluye funciones básicas de IDE como resaltado de código, finalización automática, integración de Git y terminal. También admite depuración en tiempo real, extensiones de complementos, etc., que pueden ayudar a los desarrolladores a completar rápidamente el desarrollo. , compilación y despliegue de diversas aplicaciones.
Sitio web oficial: https://cloudstudio.net/
1. Guía de operación
Para los principiantes, la documentación del producto puede ayudarnos a comprender mejor las funciones y usos del producto. Si no está familiarizado con el uso de CloudStudio, es posible que encuentre muchos problemas que lo lleven a perder el tiempo. Por lo tanto, antes de usar CloudStudio, le sugiero que eche un vistazo a la documentación del producto:
Además, la documentación del producto proporciona varios ejemplos y diagramas para el inicio de sesión y el registro, y el desarrollo de aplicaciones, lo cual es muy útil para los novatos, ya que puede reducir en gran medida los costos de aprendizaje y familiarizarse y dominar el producto más rápido.
Después de leer la documentación del producto, practiquemos:
2. Use Cloud Studio para compilar rápidamente React para completar el pedido de restauración de la página H5
1. Usa plantillas de espacio
Haga clic en la plantilla de espacio, seleccione todas las plantillas y luego deslícese hacia abajo:
Encuentra reaccionar:
Después de hacer clic, se ve así, solo espere unos segundos:
Después de ingresar al espacio, encontramos que está instalando algo, solo esperamos a que se instale:
2. Inicializar el proyecto
// 进入当前目录
cd ./ &&
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install，安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000
En solo unos minutos, nuestro proyecto se inicializa, para otros proyectos, como proyectos java, proyectos Node.js, etc. Siempre que haya un navegador, no es necesario preparar ningún entorno, no es necesario instalar ningún software, solo necesita poder conectarse a Internet y se puede inicializar un proyecto en unos minutos, lo cual es muy eficiente. para el aprendizaje de nuevas tecnologías.
3. Instalar dependencias
1. Instalar antd-móvil
$ yarn add antd-mobile@^5.32.0
# or
$ npm install --save antd-mobile@^5.32.0
2. Instalar menos:
(1) Instalar cada vez menos cargador:
yarn add -D less@^3.12.2 less-loader@^7.0.1
(2) Exponga el archivo de configuración del paquete web:
Configure en webpack.config.js, esta configuración necesita exponer el archivo de configuración de configuración de React, advertencia: esta operación es irreversible.
npm run eject
Después de ingresar 'y', el proyecto se deconstruirá automáticamente.
Después de completar el comando, aparecerá una carpeta de configuración en el directorio raíz del proyecto, que contiene algunos scripts relacionados con la configuración. También puede ver que hay muchos más valores de atributos en el paquete.json, como "dependencias".
Busque el archivo config/webpack.config.js y busque alrededor de la línea 60, que es el código relacionado con la configuración de css.
Copie el código sass y cámbielo a menos
// 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)$/;
Continúe buscando hacia abajo, la posición es alrededor de la línea 504 y se puede encontrar el siguiente código.
Al igual que la configuración anterior, siga la configuración de sass para configurar menos.
// 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' // 有改动
),
},
Esto completa la configuración de less en webpack.config.js, y el estilo less se puede usar en el proyecto.
(3) Instalar normalizar:
Normalize.css es una alternativa moderna a los restablecimientos de CSS que proporciona una sólida coherencia entre navegadores en el diseño de elementos HTML predeterminados. Normalize.css es una alternativa premium moderna, lista para HTML5, al restablecimiento tradicional de CSS.
yarn add -D normalize.css@^8.0.1
(4) Materiales necesarios para cargar el proyecto:
En el pasado, para cargar el código del servidor, era necesario usar el comando Scp o instalar el soporte del complemento Remote SSH. Cloud Studio puede admitir fácilmente operaciones de rutina como la carga y descarga de archivos de forma predeterminada, lo cual es consistente con la experiencia IDE local. :
- Puede arrastrar directamente el archivo al área de edición del IDE (el método utilizado en este artículo)
- Haga clic derecho en el área de edición de IDE "Cargar"
Simplemente arrastre la carpeta img al directorio src. (Haga clic para descargar el paquete comprimido img)
(5) Reemplace el archivo principal App.js:
El siguiente es el código comercial principal del sistema de pedidos, simplemente cópielo en src/App.js y reemplácelo directamente.
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;En el directorio src, cree un archivo index.less y copie los siguientes códigos menos relacionados en el archivo.
.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;
}Una vez completada la copia, ingrese yarn dev en la consola para iniciar el proyecto.
- Cloud Studio tiene un complemento de vista previa incorporado que puede mostrar aplicaciones web en tiempo real. Cuando el código cambia, la ventana de vista previa se actualizará automáticamente y puede desarrollar y depurar páginas web en tiempo real en Cloud Studio.
- Debido a que este proyecto es un proyecto móvil H5, debe abrir el botón "alternar dispositivo" para ver el estilo.
- Se proporciona un código QR para la depuración en el teléfono móvil.
Representaciones:
3. Instrucciones complementarias
1. Desarrollo de otros proyectos
Estimados amigos, como dijimos antes, CloudStudio no solo puede ayudarlo a crear rápidamente proyectos de reacción, sino que también es compatible con Java, node.js, Flutter y otros tipos de proyectos. Bienvenidos a probar y experimentar otros proyectos.
Puede consultar el desarrollo de la aplicación en la documentación del producto:
2. Horas de trabajo libres
Según la perspectiva de la experiencia de los usuarios antiguos y el costo de comenzar para los nuevos usuarios, el equipo de Cloud Studio en realidad proporciona 3000 minutos de espacio de trabajo gratuito por mes. El tiempo del mes actual se agota, y el tiempo no utilizado no se retendrá ni acumulará, se actualizará y borrará en el próximo mes y luego se otorgarán 3000 minutos de tiempo libre;
Por lo tanto, cuando no estemos usando el producto, debemos hacer clic en Detener, de lo contrario, se puede perder el tiempo libre:
Cuatro Resumen
Ventaja:
A algunos principiantes en programación les gusta poner cosas de programación en la unidad C predeterminada, lo que da como resultado la siguiente situación:
O algunos principiantes en programación siempre han instalado un entorno donde el software de programación no es bueno.
CloudStudio proporciona desarrollo en la nube , un entorno de desarrollo basado en la nube sin instalar ningún software. El desarrollo en la nube no ocupa la memoria de su propia computadora y puede programar a través de un navegador, lo cual es muy conveniente.
Compatibilidad con varios idiomas : CloudStudio admite varios lenguajes de programación, incluidos C, C++, C#, Java, Python, JavaScript, Go, R, Rust, etc., por lo que tiene una amplia gama de aplicabilidad.
Desarrollo de plantillas : cree y administre sus propios proyectos más fácilmente, haciendo que su trabajo sea más eficiente y rápido.
Proporciona soluciones a problemas comunes:
Algunos problemas comunes se pueden enumerar en la documentación y se proporcionan soluciones para facilitar a los usuarios la resolución de problemas.
Complementos y extensiones enriquecidos : Cloud Studio proporciona una gran cantidad de complementos y extensiones, que se pueden personalizar según las necesidades del usuario. Estos complementos y extensiones brindan varias funciones, como autocompletado de código, depuración, control de versiones, análisis de rendimiento, etc., para ayudar a los desarrolladores a mejorar la eficiencia de su trabajo.
Potente colaboración y uso compartido: Cloud Studio admite la colaboración en equipo y la edición simultánea por parte de varias personas. Varias personas pueden colaborar en tiempo real en el mismo proyecto para mejorar la eficiencia del desarrollo. Al mismo tiempo, Cloud Studio también ofrece funciones de uso compartido de archivos y control de versiones para facilitar el intercambio y la gestión de archivos entre los miembros del equipo.
Kit de implementación en la nube:DeployKit es un complemento de implementación de funciones en la nube que se ejecuta en Cloud Studio（云端 IDE） la nube, que admite la implementación con un solo clic de múltiples marcos para funciones en la nube y admite la implementación personalizada. Es conveniente ayudar a los desarrolladores a implementar rápidamente proyectos en servicios funcionales de múltiples proveedores de la nube, evitando la necesidad de que los desarrolladores comprendan profundamente los detalles de implementación de cada proveedor de la nube durante el proceso de implementación y permitiendo que los desarrolladores se centren en la implementación de la lógica del código comercial.
sugerencia:
1. Acerca de la documentación del producto
En general, la documentación no es perfecta:
①Agregar demostración en video: agregar una demostración en video puede ayudar a los usuarios a comprender mejor el uso y las funciones del producto.
②Mejorar la documentación de desarrollo de aplicaciones: actualmente solo están disponibles Java, Node.js y Flutter, y se puede agregar documentación en otros idiomas.
2. Cierre la página web, pero el proyecto aún se está ejecutando
El proyecto aún está en ejecución:
Cloud Studio proporciona 3000 minutos de espacio de trabajo gratuito al mes, pero algunos usuarios novatos se olvidan de detener el espacio de trabajo después de cerrar la página web, lo que resulta en una pérdida de espacio de trabajo gratuito.
Por lo tanto, se debe recordar a los usuarios que después de cerrar la página web, deben detener manualmente el espacio de trabajo.