序文
- 最近では、Tencent Cloud が開催するイベントに参加して、製品
腾讯云 Cloud Studio 实战训练营について詳しく学ぶ機会もありました。腾讯云 Cloud Studio - Tencent Cloud Cloud Studio の登場はやや革新的で、これを開発に使用すると、従来の開発ツールを使用するコストが削減されます。
- たとえば、開発ツールをダウンロードするには、基本的な開発環境の構成に加えて、ダウンロード、インストール、およびローカル ストレージの占有にかかるコストが必要です。
腾讯云 Cloud Studio製品の優位性をより深く理解するための実践事例として活用してみましょう！
【Tencent Cloud Studio 実践トレーニングキャンプ】Cloud Studio をベースに React を構築して注文 H5 ページを完成させる
1. Cloud Studio の概要
1.1 クラウドスタジオとは
Cloud Studioこれは、開発者に常時接続のクラウド ワークステーションを提供するブラウザベースの統合開発環境 (IDE) です。ユーザーはCloud Studioを利用する際にインストールする必要がなく、ブラウザを開いていつでもどこでもオンラインでプログラミングが可能です。
オンライン IDE として、Cloud Studio には、コードのハイライト表示、オートコンプリート、Git 統合、ターミナルなどの基本的な IDE 機能が含まれており、リアルタイム デバッグ、プラグイン拡張機能などもサポートしているため、開発者は開発を迅速に完了できます。 、さまざまなアプリケーションのコンパイル、展開。
さらに、Cloud Studio は他の開発者とのコラボレーションもサポートしており、コードやプロジェクトの簡単な共有、リアルタイムの共同編集が可能になります。
現在、古いユーザーのエクスペリエンスと新規ユーザーの開始コストの観点に基づいて、Cloud Studio チームは実際に毎月 3,000 分の無料ワークスペース時間を提供しているため、その自由時間を使って真剣に体験することができます。
1.2 関連リンク
- Cloud Studio公式サイトアドレス： https: //www.cloudstudio.net/
- Cloud Studio ドキュメントのアドレス: https://cloudstudio.net/docs/
1.3 ログインと登録
(1) Cloud Studio の公式 Web サイトを開き、[登録] をクリックします: https://www.cloudstudio.net/
次に、自分の状況に応じてアカウントを選択し、登録してログインします。
登録・ログイン後、このページに行くのが一般的ですが、Cloud Studioには多くの開発環境やテンプレートが用意されていることがわかりますので、使い方を見ていきましょう！
2. 実践的な演習
この記事では、クラウド IDE Cloud Studio を使用して、モバイル React H5 注文システム ページの簡易バージョンを 0 から 1 まで迅速に構築、開発、復元し、クラウド IDE によってもたらされる利点を体験することを目的としています。インストールする必要はありません。さまざまな環境で使いやすく、箱から出してすぐに使用できます。
2.1 ワークスペースの初期化
Cloud Studio のホームページにアクセスすると、Cloud Studio が多数のテンプレート (フレームワーク テンプレート、クラウドネイティブ テンプレート、ウェブサイト構築テンプレート) を提供しており、それらはすべてプリインストールされた環境であることがわかります。コード開発用の環境を迅速に構築できると同時に、Cloud Studio はすべての新旧ユーザーに毎月 3,000 分の無料作業スペースも提供します。
この時点で、React テンプレートの作成を選択し、クラウド IDE の初期化が完了するまで待ちます。
React を学習したことがない場合でも、対応する React フレームワーク テンプレートを開くだけで React ワークスペースの初期化を開始でき、10 秒未満の待ち時間 (帯域幅やネットワーク速度の違いとは異なります) でクラウド IDE が初期化されます。
初期化が完了するのを待った後、右側にリアルタイム プレビューのプレビュー インターフェイスが表示され、下のコンソールに次のコマンドを入力します。
// 进入当前目录
cd ./ &&
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install，安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000
これでReactプロジェクトの初期化作業が完了しましたが、新しいホストであればブラウザさえあれば環境の準備もソフトウェアのインストールも必要なく初期化が完了します。インターネットに接続できれば数分以内に完了するため、新しい技術の学習に非常に効率的です。
2.2 注文システムページの簡易版を開発する
主な目的は、React H5 ページを開発することです。迅速な開発には、通常、UI コンポーネント ライブラリが使用されます。ここでは、antd-mobile UI ライブラリを使用します。antd-mobile は、Ant Design のモバイル仕様の React 実装です。
1.antdモバイルをインストールする
antd-mobile は、ツリー シェーキングに基づくオンデマンド読み込みをサポートしており、ほとんどのビルド ツール (webpack 4+ やロールアップなど) はツリー シェーキングをサポートしているため、ほとんどの場合、追加の構成を行わずにパッケージ サイズを小さくできます。
yarn add antd-mobile@^5.32.0
# 或者
npm install --save antd-mobile@^5.32.0
ターミナルにコードを入力してインストールします。
インストールが完了すると、package.jsonに表示されます。
2. インストールするローダーの数を減らす
通常、React プロジェクトを開発するとき、スタイル開発に Less と Sass を使用することがありますが、React はデフォルトで Sass を統合しているため、Less を書き慣れている友人には非常に不親切なので、React プロジェクトで Less を設定する必要があります。
yarn add -D less@^3.12.2 less-loader@^7.0.1
ここで、バージョンを指定せずに上位バージョンをインストールするとプロジェクトの起動に失敗するため、インストールする前にバージョンをマークする必要があることに注意してください。
これでインストールは完了です。次のステップに進みます。
3. Webpack 構成ファイルを公開する
webpack.config.js で構成します。この構成では React の構成構成ファイルを公開する必要があります。警告: この操作は元に戻せません
npm run eject
「y」を入力すると、プロジェクトが自動的に分解されます。
コマンドを完了すると、プロジェクトのルート ディレクトリに config フォルダーが表示され、config/webpack.config.js ファイルを見つけて、Ctrl + F を押してキーワード「style files」を見つけます。
cssの設定に関するコードです。
上図の70行目から73行目のコードを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)$/;
検索ボックスに「sassRegex」と入力し続けて、次のコードを見つけます。
ここは前の設定と同じで、sass の設定に従い、より少ない設定を行います。
// 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' // 有改动
),
},
これで webpack.config.js でのlessの設定が完了し、プロジェクトでlessスタイルを使用できるようになります。
4. 正規化をインストールする
Normalize.css は、CSS リセットの最新の代替手段であり、デフォルトの HTML 要素のスタイル設定において、ブラウザー間での強力な一貫性を提供します。Normalize.css は、従来の CSS リセットに代わる最新の HTML5 対応のプレミアムな代替手段です。
5. プロジェクトに必要な素材をアップロードする
以前は、サーバー コードをアップロードするには、Scp コマンドを使用するか、リモート SSH プラグイン サポートをインストールする必要がありました。Cloud Studio では、デフォルトでファイルのアップロードやダウンロードなどの日常的な操作を簡単にサポートでき、ローカル IDE エクスペリエンスと一致します。 :
- ファイルをIDE編集領域に直接ドラッグできます。
- IDE編集エリアを右クリックして「アップロード」
img フォルダーを src ディレクトリにドラッグするだけです。
画像のダウンロード方法：画像
6. App.js メインファイルを置き換えます
以下は注文システムの主要なビジネス コードです。これを src/App.js にコピーして直接置き換えます。
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;
次に、src ディレクトリにindex.less ファイルを作成し、次のあまり関連しないコードをそのファイルにコピーします。
.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;
}
7. プロジェクトを開始する
上記の操作が完了したら、コンソールに入力してyarn startプロジェクトを開始します。
Cloud Studio には、ウェブ アプリケーションをリアルタイムで表示できるプレビュー プラグインが組み込まれています。コードが変更されると、プレビュー ウィンドウが自動的に更新され、Cloud Studio でウェブページをリアルタイムで開発およびデバッグできます。
組み込みの Chrome ブラウザ ウィンドウのアドレス バーをコピーしてチームの他のメンバーと共有すると、nginx デプロイの面倒な構成が不要になります。
このようにして、プロジェクトが完了した場合でも、いくつかのライブラリをインストールするだけですぐにプロジェクトを構築できます。
3. ウェアハウスに公開する
プロジェクトが完了したら、すぐに git ウェアハウスにリリースできます。まず、README.md ファイルに記入する必要があります。
# 项目说明
这是一个用 IDE [Cloud Studio](https://www.cloudstudio.net/?utm=csdn) 快速搭建，并开发还原一个移动端 React H5 的简版点餐系统页面，从 0 到 1 体验云 IDE 给我们带来的优势，不需要装各种环境，简单易用，开箱即可上手。
## 相关技术栈
React + less + webpack
## 项目运行
yarn install
yarn start
左側の機能メニュー領域で「ソースコード管理」を見つけて、git initウェアハウスの初期化に使用します。
次に、送信する必要があるメッセージ情報を入力し、「コミット」をクリックしてウェアハウスを送信します。
関連付けられたアカウントがないことを示すメッセージが表示された場合は、設定に移動してアカウントを関連付けます。
ログイン時にコーディングを使用する場合は、コーディングウェアハウスに直接プッシュすることもできますが、もちろんgithubにプッシュすることもできます。送信するには、対応するアカウントをバインドする必要があります。
ここでコーディング プラットフォームにログインして、ウェアハウス コードを表示できます。
4. 開発スペース管理
コンソールでは、使用するすべてのワークスペースを管理でき、右側のボタンでアップグレード構成、設定、削除、開始/停止操作を実行できます。
要約する
Cloud Studio を実践的な演習で使用した後、Cloud Studio についての理解が深まったので、Cloud Studio の利点と最適化の提案について簡単に説明します。
Cloud Studio の利点は明らかであり、大きく分けて次の点に分けることができます。
- 開発コストを節約します。これにより、ユーザーは IDE のインストールコストを削減し、オンラインコードの開発、コンパイル、運用、保管のためのワンストップサービスを提供できます。
- 利便性。Cloud Studio は、開発者に常時接続のクラウドベースのワークステーションを提供する、ブラウザベースの統合開発環境 (IDE) です。ユーザーはCloud Studioを利用する際にインストールする必要がなく、ブラウザを開いていつでもどこでもオンラインでプログラミングが可能です。
- クラウド開発。Cloud Studio はローカルにインストールする必要がなく、サポートされているブラウザを使用するだけで、簡単にログインしてコーディング開発を開始でき、どこでもコーディングを実現できます。同時に、開発プロセスの構成を加速し、構成を使用してクラウド開発環境を定義し、開発効率を向上させ、クラウド上でより柔軟な開発リソースを確保します。
- さまざまなプレハブ環境が利用可能です。Node.js、Java、Python などの組み込みの共通環境は、直接開発状態に入ります。
- メタワーク開発のコラボレーション。コードのコラボレーション、マルチカーソルの強調表示と追跡を通じて、コラボレーションは明確かつ秩序立ったものになります。コード コラボレーション、マルチカーソル コラボレーション、リアルタイム プレビュー、ターミナル コラボレーションが含まれますが、これらに限定されません。
- 多数のテンプレートが利用可能です。使ってみて実感するのは、Cloud Studio には多数のテンプレートが用意されており、テンプレート ライブラリからいくつかの機能を直接取り出して、必要に応じて変更してすぐに使用できることです。書き込みコードで使用できます。両手で操作します。
Cloud Studio の最適化に関する提案
- ドキュメントは包括的かつ詳細です。プログラミング言語のドキュメントの紹介をさらに追加したいと考えています。現在、ドキュメントに含まれる主流のプログラミング言語の操作ドキュメントはわずかです。Cloud Studio を使い始めたばかりのユーザーにとっては、プログラミング言語の詳細なドキュメントを見たほうが早いでしょう。 Cloud Studio を使ってみましょう。
- より多くのプログラミング言語とフレームワークを提供します。現在ウェブサイトでサポートされているプログラミング言語とフレームワークは、すべてのユーザーのニーズを満たすことができません。プラットフォームの適用性と拡張性を向上させるために、より多くのプログラミング言語とフレームワークをサポートすることを検討してください。
- より優れた安定性を提供します。現時点では、Webサイトのパフォーマンスや安定性には改善の余地があり、フリーズやクラッシュなどの問題が発生する場合があります。ユーザー エクスペリエンスを向上させるために、プラットフォームのパフォーマンスと安定性の最適化を検討することをお勧めします。