記事ディレクトリ
序文
親愛なる皆さん、Cloud Studio 実践トレーニング キャンプへようこそ!
Cloud Studio は、インストールを必要としないクラウド ワークステーションを提供するブラウザベースの統合開発環境 (IDE) です。ユーザーはいつでもどこでもブラウザを開いてオンラインでプログラミングできます。
Cloud Studio を使用すると、開発者はさまざまなアプリケーションの開発、コンパイル、デプロイメントを迅速に完了できます。個人プロジェクトであっても、チームコラボレーションであっても、便利な開発環境とツールを提供できます。同時に、クラウドベースのワークステーションであるため、ユーザーはローカル環境の構成やリソースの制限を気にする必要がなく、いつでも IDE にアクセスして開発を行うことができます。
今日は実際にプロジェクトを操作しながらCloud Studioの魅力とスムーズさを体感していただきます〜
ステップ
開発環境の構成
Cloud Studio アカウントにログイン (登録) します。
Cloud Studio の公式 Web サイトを開き、クリックしてすぐに使用します ( https://cloud.tencent.com/product/cloudstudio
)。次にログインします。
アカウントをお持ちでない場合は、まず登録してください。これらはすべて Goose Factory のものです。誰もが該当するアカウントを持っていると思いますので、ここでは詳しく説明しません。
Cloud Studio コンソールに入ります。
ログインに成功すると、Cloud Studio コンソールに入ることができます。インターフェイスは次のとおりです:
ここには多くのスペース テンプレートとアプリケーションが組み込まれており、ニーズに応じて選択できます。
現在のデモンストレーションでは、新しいワークスペースを作成することを選択します。
新しいワークスペースを作成し、パラメーターを構成します。
スペース名:
スペースの説明:
作業カテゴリ:
コード ソース:
ウェアハウス サービス プロバイダーの選択:
開発環境:
バージョン:
仕様構成:
パラメータがたくさんあるように見えますが、実際には、ほとんどのパラメータはデフォルト値をそのまま使用できます。
スペース名とスペースの説明 (オプション) を入力し、コードに関連付けられたウェアハウスを選択して構成を完了してください (そうでない場合は、空を選択することもできます)。
ここで入力した内容は次のとおりです。
[新規] をクリックして少し待つと、Cloud Studio が対応するプロジェクト スペースを作成します。
ワークスペースが正常に作成されました。
プロジェクトが正常に作成されたら、IDE の編集インターフェイスに入りますが、このインターフェイスに不思議な親近感を抱いている人も多いと思いますが、はい、vscode のインターフェイスと同じであり、ショートカット キーも基本的に同じです。
ここでは、ローカルでコードを書くのと同じように、完全に没頭できます。
この時点で環境がセットアップされ、プロジェクトが正式に開始されます。
自動販売機プロジェクト建設
このプロジェクトはエンターテイメントと学習を目的とした単なるデモです。このプロジェクトは主に Python フラスコを使用して Web サイトを構築し、Python を使用して対応する操作のために mysql に接続します。実際の操作手順と対応するコード記事について説明します。必要な場合は見逃してください~プロジェクト ファイル
ディレクトリ 構造は次のとおりです:
|-- workspace
|-- README.md
|-- app.py
|-- directoryList.md
|-- static
| |-- axios.min。 js
|-- templates
|--index.html
ここで、app .py はサーバー側ファイル、index.html はフロントエンド ページ ファイル、axios.min.js は HTML が依存する js ファイルです ( URL から直接アクセスすることもできます: https://cdn.jsdelivr.net /npm/axios/dist/axios.min.js
ただし、ネットワーク伝送の問題によるアクセス不能を防ぐためにプロジェクトにダウンロードしました)プロジェクトはこれです。
フロントエンドページの構築
Python flask フレームワークを使用して構築されているため、簡単に呼び出せるように、プロジェクトの下に templates フォルダーを作成し、対応するテンプレート html ファイルをその中に置く必要があります。
実行後の Index.html ページの表示効果は次のとおりです。
主な機能は 3 つの部分に分かれています。
1. 飲料リスト表示領域とショッピング カートに追加ボタン (バックエンド インターフェイスが必要: すべての飲料インターフェイスのクエリ データベース)
2. ショッピングカート表示エリア（バックエンドインターフェース：決済操作が必要）
3. 決済結果表示エリア
したがって、ページのソース コードも非常にシンプルです。
<!DOCTYPE html>
<html>
<head>
<title>饮料自动售货机</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f2f2f2;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
margin-top: 0;
}
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 3px;
}
.button:hover {
opacity: 0.8;
}
.goods-list,
.cart,
.checkout-result {
margin-bottom: 20px;
}
.goods-list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.goods-list-item:last-child {
border-bottom: none;
}
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.cart-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<h2>饮料列表</h2>
<div class="goods-list" id="goods-list"></div>
<hr>
<h2>购物车</h2>
<div class="cart" id="cart"></div>
<button class="button" onclick="checkout()">结算</button>
<hr>
<h2>结算结果</h2>
<div class="checkout-result" id="checkout-result"></div>
</div>
<script src="{
{ url_for('static', filename='axios.min.js') }}"></script>
<script>
const cart = {
};
// 发起 HTTP 请求获取商品数据
axios.get("/goods")
.then(response => {
const goodsData = response.data;
// 渲染商品列表
const goodsListDiv = document.getElementById('goods-list');
for (const drink in goodsData) {
const price = goodsData[drink];
const drinkDiv = document.createElement('div');
const drinkText = document.createTextNode(drink + ": " + price + " 元");
drinkDiv.appendChild(drinkText);
const addButton = document.createElement('button');
addButton.textContent = "加入购物车";
addButton.addEventListener('click', function() {
addToCart(drink);
});
drinkDiv.appendChild(addButton);
goodsListDiv.appendChild(drinkDiv);
}
})
.catch(error => {
console.error(error);
});
// 添加到购物车的逻辑
function addToCart(drink) {
if (cart.hasOwnProperty(drink)) {
cart[drink]++;
} else {
cart[drink] = 1;
}
renderCart();
}
// 渲染购物车
function renderCart() {
const cartDiv = document.getElementById('cart');
cartDiv.innerHTML = '';
for (const drink in cart) {
const quantity = cart[drink];
const itemDiv = document.createElement('div');
const itemText = document.createTextNode(drink + ": " + quantity + " 杯");
itemDiv.appendChild(itemText);
cartDiv.appendChild(itemDiv);
}
}
// 结算函数
function checkout() {
axios.post('/checkout', {
cart:cart})
.then(response => {
const resultDiv = document.getElementById('checkout-result');
const total_price = response.data.total_price;
// 构造结果文本节点
const resultText = document.createTextNode(`您本次总消费金额为：${
total_price}元。`);
// 清空结果容器并添加结果文本节点
resultDiv.innerHTML = '';
resultDiv.appendChild(resultText);
})
.catch(error => {
console.error(error);
});
}
</script>
</body>
</html>
サーバーインターフェース構築
サーバー インターフェイスの作成には Python フラスコ フレームワークが使用されるため、対応するパッケージをインポートする必要があります。
from flask import Flask, jsonify, request, render_template
主に flask パッケージ内の関連モジュールを使用して、HTML と flask を操作します。
フロントエンド ページを整理する過程で、フロントエンドが呼び出す必要があるインターフェイスは次のとおりであることがわかりました。
1. すべての飲料インターフェースをクエリする
ここでは、クエリ結果がフロントエンド ページに返されます。
2. ショッピングカート決済インターフェース
フロントエンドから返されたショッピングカート内の商品に応じて価格が累積され、最終的な決済金額がフロントエンドに返されます。
バックエンドコード:
from flask import Flask, jsonify, request, render_template
app = Flask(__name__)
# 饮料及其价格
goods = {
"可乐": 3.0,
"雪碧": 2.5,
"橙汁": 4.0,
"苹果汁": 3.5
}
@app.route('/')
def index():
return render_template('index.html',goods=goods)
@app.route('/goods', methods=['GET'])
def get_goods():
return jsonify(goods)
@app.route('/checkout', methods=['POST'])
def checkout():
cart = request.json.get('cart')
total_price = calculate_total_price(cart)
# 处理其他相关逻辑...
return jsonify({
'message': '结算成功', 'total_price': total_price})
def calculate_total_price(cart):
total_price = 0
# print(cart)
for drink, count in cart.items():
if drink in goods:
total_price += goods[drink] * count
return total_price
if __name__ == '__main__':
app.run()
この時点で app.py を実行すると、正常に実行でき、実行後に指定されたアドレスにアクセスすると、ページが正常に表示され、機能も正常に動作していることがわかります。
この時点で、html と Python の flask インターフェイスは正常に接続されています。
でも、どうやってそこで止めればいいのでしょうか? 用心深い友人が、飲み物のリストが書き留められていることを発見しました。これは非常に不便ではありませんか? 実際のビジネスではあまり意味がないので、次はデータベースに接続する Python について説明します。
データベース（mysql）に接続します
データベーステーブルを作成します。
mysql でドリンクテーブルを作成し、対応するドリンクと価格を保存します。フィールドは非常に単純で、名前と価格だけです。
作成が成功したら、テーブルにデータを追加します。
pymysql パッケージを使用してデータベースに接続します。
import pymysql
# MySQL数据库连接配置
db_config = {
'host': '127.0.0.1',
'user': 'root',
'password': 'Fatb6XNFXsY6MM',
'database': 'drink',
'port':3306
}
def query_data():
goods={
}
# 建立MySQL数据库连接
conn = pymysql.connect(**db_config)
cursor = conn.cursor()
query = f"SELECT * FROM drink"
# 执行查询并获取结果
cursor.execute(query)
result = cursor.fetchall()
data=[]
if len(result) > 0:
columns = [desc[0] for desc in cursor.description]
table_data = [{
columns[i]: row[i] for i in range(len(columns))} for row in result]
data.extend(table_data)
# 提交事务并关闭连接
conn.commit()
cursor.close()
conn.close()
# 将查询出来的结果转化为字典格式，方便兼容之前的代码
for i in data:
goods[i['name']]=i['price']
return goods
注:
1. データベース関連の構成を独自の mysql 接続の構成に変更する必要があります。(Cloud Studio では、mysql データベースに接続したい場合、mysql サービスを直接構築することはできません。クラウド サーバーのデータベースに接続する必要があります。クラウド サーバーにデータベースを作成する方法については、後で詳しく説明します) .) 2. この場合、単純に
データベースのデータをクエリしてみます。データベースへのその他の追加、削除、変更は含まれませんが、原則は同じです。クエリ ステートメントで直接、対応する調整を行うだけです。
プロジェクトを実行する
app.py を直接実行して、プロジェクトを正常に実行します。以下の実行効果図を参照してください。
次に、クリックしてブラウザを開き、ブラウザ内のプロジェクトにアクセスします。
エフェクトのプレビュー
データベース内の飲み物と価格を変更して、ページが有効になるかどうかを確認してみましょう。
現在のデータベースのデータは次のとおりです。
リンゴ ジュースとその後のすべての飲み物を削除し、価格 10.00 元のザクロ ジュースを追加し、スプライトの価格を 3.00 に変更します。変更された効果:
次に、プロジェクトを再実行して、ページが有効になるかどうかを確認します。
ご覧のとおり、ページは有効になり、計算された決済結果は問題ありません。
注: ここでデータベースを変更した後、ページを有効にするためにサービスを再起動する必要があります。これは、サーバーに書き込まれた製品は、サーバー スクリプトの開始時に取得され、その後取得されなくなるためです。データベースへのアクセス頻度、使用回数 (これは私の勝手な想像です、笑)。
ページを更新するたびに取得する必要がある場合は、メイン ルートの下にクエリ データ ロジックを配置できます。
遭遇した落とし穴
データベースに接続できません
ローカルでコードを実行したところ、mysql がローカルにインストールされていたためスムーズに動作しましたが、Cloud Studio を使用してプロジェクトを作成したときに、mysql が作成できないことがわかり、混乱しました。 connect クラウドサーバーのMySQLがインストールされています 幸いなことに私はcentosクラウドサービスを持っています Pagodaと一緒にインストールされており、操作は比較的フールプルーフです。
操作記録は次のとおりです。
1. Pagoda パネルでデータベース メニューを見つけ、[データベースの追加] をクリックします。
2. データベースを追加するときは、データベース名、ユーザー名、パスワードを追加し、アクセス権を選択し、[送信] をクリックします。正常に作成されました。
ここで注意してください: ここでのアクセス許可は、独自の要件に従って設定する必要があります。そうしないと、アクセスできない可能性があります。
3. クラウド サーバーのデータベースに接続します。
ローカル データベース接続ツールを使用して、作成したクラウド サービスの mysql データベースに接続し、正常に接続できるかどうかを確認します。
入力する場合、ホストはサーバーの IP、ポート、ユーザー名、パスワードを設定したときと同じように入力し、[接続のテスト] をクリックする必要があります。成功した場合は、接続が完了したことを意味します。注: ここに接続できない場合
は、次の手順に従って確認してください:
1. サーバーでポートが開いていますか?
2. サーバーのファイアウォールでポートが許可されていますか?
3. サーバーのセキュリティ ポリシーでポートが許可されていますか?
ポートは正常に許可されているため、接続できるはずです。
次に、対応する構成をコードに変更します。
要約と分析
Cloud Studio の全体的な使用は非常にスムーズで、コンパイル速度が速く、操作もスムーズなので、ローカル コンパイラを使用しているのかクラウド IDE を使用しているのかを忘れてしまうほどです。
クラウドスタジオの利点:
-
クロスプラットフォームでアクセス可能: CloudStudio は、
デスクトップ、ラップトップ、モバイル デバイスなど、インターネットに接続されている任意のデバイスのブラウザを介してアクセスできます。これにより、複数のデバイスからプロジェクトに簡単にアクセスして管理できるようになります。 -
インストールと構成は不要:
CloudStudio では、開発ツールや依存関係をインストールして構成する必要はありません。すべてがクラウドで行われるため、ログインしてコーディングを開始するだけで、時間とリソースが節約されます。 -
コラボレーションと共有: CloudStudio を
使用すると、複数のユーザーがプロジェクトを同時に編集および共有できるため、チーム メンバー間のコミュニケーションとコラボレーションがより簡単かつ効率的になります。他の人をプロジェクトに招待したり、一緒に作業したり、リアルタイムでコミュニケーションしたりすることができます。 -
弾力性とスケーラビリティ: クラウド インフラストラクチャを使用することで、CloudStudio は
ニーズに基づいて弾力的に拡張できます。大規模なプロジェクトに取り組んでいる場合でも、より多くのコンピューティング リソースが必要な場合でも、ニーズに適応できます。 -
自動保存とバージョン管理: CloudStudio は
作業内容を自動的に保存し、基本的なバージョン管理機能を提供します。予期せぬ事態 (停電やネットワーク障害など) が発生した場合でも、コードは失われず、履歴バージョンを簡単に復元して追跡できます。
特定のコード記述に関しては、パフォーマンスはローカル IDE のパフォーマンスに劣りません。
- コードの強調表示: 読みやすさを向上させるために、コード内のキーワードを異なる色で表示します。
- オートコンプリート: 入力されたキーワードに基づいてコード スニペットが自動的に表示され、コードの作成時間とエラーが削減されます。
- Git 統合: Git バージョン管理システムとの統合をサポートし、コード管理と共同開発を促進します。
- ターミナル: IDE でコマンドやスクリプトを直接実行するためのターミナル機能を提供します。
- リアルタイム デバッグ: コードのリアルタイム デバッグをサポートし、開発者がエラーを見つけて修正できるようにします。
- プラグイン拡張: プラグインをインストールすることで IDE の機能を拡張し、さまざまな開発ニーズに対応できます。
クラウドスタジオのデメリット:
1. ローカル ファイル システムへのアクセスの欠如: オンライン IDE はコンピュータのローカル ファイル システムに直接アクセスできず、コンピュータ上にあるファイルを開いたり保存したりすることは簡単ではなく、アップロードとダウンロードを通じて操作する必要があります。
2. 複数のファイル転送に関する問題: 複数のファイルをオンライン IDE に同時にアップロードする必要がある場合、各ファイルを 1 つずつ選択してアップロードする必要があり、これはローカル IDE よりも面倒になる可能性があります。
3. クラウド IDE の IP を正確に取得できません。たとえば、セキュリティ上の理由から、一部のサービスはアクセスする前に IP をホワイトリストに追加する必要があります。クラウド IDE の IP を明確に取得できないため、ホワイトリストに追加できません。
公式がそれに対応する改善を行って、エクスペリエンスをますます向上させることを願っています。
プロジェクト関連リソース
この時点で、プロジェクトの目標は無事に達成されました。花を広げましょう~
関連するプロジェクト リソースのリンクがここに添付されているので、必要な友達はすぐに入手できます。
プロジェクトコーディングアドレス
コーディングウェアハウスのアドレス: https://dashixiong6668.coding.net/public/auto_seller/auto_seller/git/files