Cloud Studio&Flutter を使用してフルプラットフォームのブログウェブサイトの構築を完了する

記事ディレクトリ

Cloud Studio&Flutter を使用してフルプラットフォームのブログウェブサイトの構築を完了する
序文
1.クラウドスタジオ
2. 応用シナリオ
3. ログインと登録
4. ワークスペースの作成と利用
5. バージョン管理に Git を使用する
6. Flutter ブログ Web サイトの開発
7. テンプレートをカスタマイズする
要約する

序文

この記事では、Cloud Studio と Flutter を使用して、独自のブログプラットフォームの構築を完了します。そして、このプロジェクトは誰もが使用できるテンプレートとして使用されます。

まずは効果を見てみましょう

画像-20230722171710033

画像-20230722171433211

画像-20230722171455257

画像-20230722171626502

1.クラウドスタジオ

Cloud Studio は、開発者に常時接続のクラウドベースのワークステーションを提供する、ブラウザベースの統合開発環境 (IDE) です。CloudStudio を使用する場合、ユーザーは CloudStudio をインストールする必要がなく
、ブラウザを開いて、いつでもどこでもオンラインでプログラミングできます。

画像-20230722101025410

また、多くのテンプレートと環境が提供されているのを見ましたが、私が以前 Flutter に取り組んでいたのは誰もが知っているので、最初は Flutter テンプレートを試してみました。最初はあまり得意ではないかもしれませんが、慣れてくるとしばらくの間、私は彼の利点を発見するつもりです。

オンライン IDE として、Cloud Studio には、コードのハイライト表示、オートコンプリート、Git 統合、ターミナルなどの基本的な IDE 機能が含まれており、リアルタイムデバッグ、プラグイン拡張機能などもサポートしているため、開発者は開発を迅速に完了できます。、さまざまなアプリケーションのコンパイル、展開。Cloud Studio を使用してこのブログサイトを Gitee にプッシュしたので、誰でもアクセスできるようになりました。

画像-20230722171523826

画像-20230722101417744

2. 応用シナリオ

Cloud Studio オンラインプログラミングツールは、次のシナリオに適しています。

2.1 クイックスタートプロジェクト

Cloud Studio のプリセット環境を使用すると、面倒な環境設定を行わずに、対応するタイプのワークスペースを直接作成し、プロジェクトを迅速に開始して開発状態に入ることができます。

以下は私が恐れているワークスペースですが、次回使用するときは、該当するワークスペースに入ってコードを書き続けることができ、非常に便利です。

画像-20230722101646773

2.2 Web ページをリアルタイムでデバッグする

Cloud Studio には、Web アプリケーションをリアルタイムで表示できるプレビュープラグインが組み込まれています。コードが変更されると、プレビューウィンドウが自動的に更新されるため、Cloud Studio でリアルタイムでウェブページの開発とデバッグを行うことができます。

以下は私が最初に作成したテンプレートプロジェクトです。非常に便利であることがわかります。

画像-20230722101839929

2.3 クラウドサーバーへのリモートアクセス

Cloud Studio は、独自のクラウドサーバーへの接続をサポートしているため、エディターでクラウドサーバー上のファイルを表示し、オンラインプログラミングとデプロイメントを実行できます。

独自のクラウドサーバーをお持ちであれば、ここでの構成を通じて簡単に開発を開始できます。

画像-20230722102019485

3. ログインと登録

Cloud Studio オンラインプログラミングプラットフォームは、CODING (新しいウィンドウが開きます)アカウント、GitHub アカウント、および WeChat ログインの使用をサポートしています。ログイン (新しいウィンドウが開きます)インターフェイスで対応するアカウントを入力して、Web IDE にログインできます。 WeChat ログインを使用します。

画像-20230722105245727

4. ワークスペースの作成と利用

ワークスペースは、独立したストレージ、コンピューティングリソース、開発環境を含む仮想コンピューティングユニットです。Cloud Studio はワークスペースごとに構成されており、この記事ではワークスペースの作成方法を紹介します。

4.1 ワークスペースを作成する

Cloud Studio クラウド IDE に入ると、2 つの方法でワークスペースを作成できます。1つ目の方法: テンプレートをクリックしてワークスペースを直接作成します。2つ目の方法: [新しいワークスペース] をクリックしてワークスペース作成ページに入ります。

4.1.1 ワークスペース情報を入力します。

1 つ目の方法は、テンプレートをクリックしてワークスペースを作成することです。これにより、ワークスペース名が自動的に生成され、テンプレートのプリセット環境とサンプルコードが実行されます。ここではFlutterを使用しています。

画像-20230722102325999

2 番目の方法では、ワークスペースの作成を選択し、次にプリセット環境を選択し、ワークスペース名と説明を入力して、オペレーティング環境とコードソースを選択します。

画像-20230722102355274

画像-20230722102503146

ワークスペース名: ワークスペースの一意の識別子。文字、数字、アンダースコア (_)、ダッシュ (-)、およびドット (.) のみで構成でき、スペースやその他の文字を含めることはできません。
説明: このワークスペースの機能の説明。
動作環境: ワークスペースでコードが実行される環境。Ubuntu、Python、Java、Node.js などのプリセット環境を選択できます。また、独自のクラウドサーバーに接続することも選択できます。
コードソース: ワークスペース内のコードソース。ここでは「空」を選択します。つまり、コードは追加されません。

[作成]ボタンをクリックするとワークスペースの作成が完了します。コードが Git リポジトリから取得されるワークスペースを作成することもでき、コードはワークスペースに自動的に複製されます。

4.2 ワークスペースの使用

Cloud Studio クラウド IDE のワークスペースに独自のプロジェクトコードを保存し、必要なソフトウェア環境をインストールして、プロジェクトを実行またはコンパイルすることができます。この記事では、ワークスペースの使用方法を紹介します。

知らせ：

数量制限: 現在、各ユーザーは最大 10 個のワークスペースを作成でき、同時に実行できるワークスペースは 1 つだけです。別のワークスペースを開く必要がある場合は、現在実行中のワークスペースを最初に閉じる必要があります。
時間制限：各ユーザーはワークスペースを月に合計1,000分まで無料で使用でき、時間を超えると料金が差し引かれます（クラウドホストに接続されているワークスペースにはそのような制限はありません）。

4.2.1 ワークスペースインターフェイスの概要

ワークスペースは主な作業領域であり、主に上部のメニューバー、左側の操作パネル、右側のコード編集領域、下部のステータスバーで構成されます。

自分の習慣に従ってインターフェースの外観と好みを設定し、必要なプラグインをインストールできます。

設定とプラグインは各ワークスペースで互いに分離されていることに注意してください。つまり、異なるワークスペースに対して異なる設定を設定し、異なるプラグインをインストールすることができます。ほとんどの場合、vscode をローカルで使用する場合と同じです。

これらの操作はターミナルから実行できます。メニューバー – ターミナル – 新しいターミナルをクリックすると、下部にパネルが開きます。[ターミナル] をクリックしてターミナルに切り替えます。

4.2.2 ワークスペースの管理

Cloud Studio クラウド IDE のワークスペースリストページでは、ワークスペースを実行、停止、削除、復元できます。

走る

対応するワークスペースカードをクリックすると、新しいページでスペースが開いて実行され、ワークスペースカードに「実行中」のステータスが表示されます。

画像-20230722104005628

画像-20230722104024539

ストップ

「実行中」状態のワークスペースの場合は、カード右側の[停止]をクリックしてワークスペースの実行を停止します。

画像-20230722104046944

消去

ワークスペースカード右下の[削除]をクリックして削除することで、起動していないワークスペースを削除できます。

画像-20230722102839981

回復

誤って削除することを防ぐため、削除されたワークスペースは以下の「削除されたワークスペース」リストに表示され、24 時間保持されます。その前に、いつでも [復元] をクリックしてワークスペースを復元できます。24 時間以上復元されなかったワークスペースは永久に破棄されます。

画像-20230722105827791

5. バージョン管理に Git を使用する

Cloud Studio クラウド IDE のワークスペースは、コードウェアハウスからの作成をサポートしていますが、その前に、ワークスペースの SSH キーを、対応するコードホスティングプラットフォームの個人公開キーリストに追加する必要があります。

5.1 Cloud Studio ビューの SSH 公開キー

ここでは個人のアバターをクリックし、システム設定を開きます。そこに SSH 公開キーがあり、そのキーをコピーして Gitee に追加します。

画像-20230722103109295

5.2 Gitee は SSH 公開キーを追加します

以下の図では、SSH 公開キーを追加し、タイトルと公開キーを補足します

画像-20230722103350506

5.3 Gitee に新しい倉庫を作成する

画像-20230722103659738

クラウド IDE のワークスペースで、ターミナルを開きます。

5.4 Cloud Studio の電子メールとパスワードの設定

git config --global user.name "坚果"    

git config --global user.email "[email protected]"

5.5 Cloud Studio のコード送信

次に、ウェアハウスを初期化し、変更を送信し、コミット情報を追加して、プッシュします。

git init
git remote add origin [email protected]:jianguo888/flutter_bloc_super.git
git add .
git commit -s -m '初始化'
git push origin master

画像-20230722103645747

6. Flutter ブログ Web サイトの開発

FlutterGoogle のモバイル UI フレームワークである Flutter は、最近iOS、Android、Webなどの複数のプラットフォーム上で高品質のネイティブユーザーインターフェイスを迅速に構築できる Flutter V3.10.6 をリリースしました。Flutter既存のコードを操作できます。これは世界中でますますFlutter多くの開発者や組織によって使用されており、Flutter完全に無料でオープンソースです。現在、Web アプリケーション開発Cloud Studio 云端 IDEをサポートしています。Flutterそのため、今日では、Web、macOS アプリ、Android、iOS アプリで実行される Flutter を使用してレスポンシブなブログテーマを作成します。

6.1 プロジェクトの作成

クラウドIDEを開いた後、Flutterプロジェクトを作成します。Flutter 3.0.1

作成が完了したら、コードを記述します。

まずクラウド IDE を開き、プロジェクトの作成を選択します。

画像-20230722080603157

次に、ここでプロジェクトに名前を付けます

画像-20230722080817888

プロジェクトがロードされるまで待ちます

次に、次のコマンド行を実行します

cd ./ && flutter pub get && flutter run -d web-server --web-port 9000  --web-hostname 0.0.0.0 && echo success

画像-20230722081123084

内蔵ブラウザまたはブラウザを開くことを選択できます

ここではブラウザを呼び出すことを選択しました。プロジェクトが正常に実行されていることがわかります。

画像-20230722081236621

画像-20230722080920406

現時点では、環境に問題がないことを意味します。私たちは後で仕事をすることができます

6.2. ポートパネルを開いてリアルタイムでプレビューおよびデバッグする

右端のボタンをクリックすると、プレビューページが表示されます。

これらの赤いテキストが表示されると、To hot restart changes while running, press "r" or "R".プロジェクトがコンパイルされたことを意味します。

画像-20230722104822701

画像-20230722104758236

コードを変更して再コンパイルする

ターミナルをクリックし、rキーを再コンパイルし、プレビューページの更新ボタンを押して、リアルタイムの変更効果を確認します。

画像-20230722171601098

現在、Flutter Webアプリはホットアップデートをサポートしていないため、ページを手動で更新する必要があります。
コードプレビューページは、プロジェクトがコンパイルされた後にのみ表示できます。それ以外の場合は、常に読み込みインターフェイスで停止します。
読み込みインターフェイスでスタックした場合は、プレビューインターフェイスを更新してみてください。

6.3 Web版の公開

移行の完了後、できるだけ早くプレビューとして公開してください。

参考記事： https:
//dart.cn/null-safety/migration-guide

注意深い人は、Android には android フォルダーがあり、iOS には ios フォルダーがあることに気づくかもしれませんが、現在のディレクトリ構造には Web フォルダーがありません。

6.3.1. Webフォルダーの作成

次のコマンドを入力して Web ファイルを作成します

flutter create .

次に、下図に示すように、一連の Web 関連ファイルが作成され、ディレクトリ構造には追加の Web フォルダーも含まれます。

画像-20210927103240783

6.3.2. Web バージョンのパッケージ化

Android フォンで使用したい場合は apk をパッケージ化する必要があり、iPhone で使用したい場合は ipa からパッケージ化する必要があることはわかっています。同じ理由で、Web 関連もパッケージ化する必要があります。ブラウザで使用する場合はコードを使用します。

flutter build web --web-renderer html

flutter build web 

flutter build web --web-renderer canvaskit

これにより、リソースを含むアプリケーションが生成され、ファイルがプロジェクトの/build/webディレクトリに配置されます。

一般的なアプリケーションのリリースバージョンは次の構造になっています。

コンテンツコピー

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

Web サーバーを起動し (たとえば、python -m SimpleHTTPServer 8000、またはdhttpdパッケージを使用)、/build/web ディレクトリを開きます。ブラウザでlocalhost:8000(Python で以前に起動したサーバー)にアクセスして、アプリケーションのリリースバージョンを確認します。

テストの結果、上記 3 つの方法で Web バージョンをパッケージ化できます。1 つ目はモバイル端末用のパッケージ化方法、2 つ目は一般的なパッケージ化方法、3 つ目は PC 端末用のパッケージ化方法です。

では、パッケージ化して実行する場合、これら 3 つの方法の違いは何でしょうか?

flutter build web --web-renderer html は開く速度が最も速く、互換性も優れています (つまり、Chrome、Safari およびその他のブラウザと互換性があります)。

画像-20210927103940311

Flutter ビルド Web は平均的な起動速度と優れた互換性を備えています

画像-20210927104021552

flutter build web --web-renderer Canvaskit は開く速度が最も遅く、互換性が良好です

6.3.3 結論

最初の梱包方法を使用することをお勧めします

flutter build web --web-renderer html

6.4 よくある質問

ピット 1:index.html を見つけたので、ブラウザで空白を開きます

これは正常です。フロントエンド Web の html css js とは異なり、index.html をクリックするとアクセスできます。フラッターで直接アクセスすることはできません。アクセスするには、tomcat などのコンテナに配置する必要があります。。

ピット 2: nginx プロキシが使用されていますが、ブラウザで開くとまだ空白です

これは、ファイルパスの参照が間違っているためです。解決策は 2 つあります。
方法 1:
エディターでindex.html を開き、ソースファイルを確認して、

方法 2:
エディターでindex.html を開くと、ソースファイルが表示され、をサーバーのパスに変更します。例:

次にnginxプロキシ

  #flutter
    server {
    
    
       listen       251 ;
       server_name  flutterblog;
       location / {
    
    
           root   /root/study/flutter/web/;
           index  index.html index.htm;
        #    proxy_pass   http://127.0.0.1:12345;
        #    access_log  /usr/local/nginx/logs/go.101.log ;

       }
    }

花を振りかける

7. テンプレートをカスタマイズする

カスタムテンプレートは、Cloud Studio クラウド IDE によって起動されるチーム指向のテンプレート機能です。この機能は、現在のプロジェクトをカスタムテンプレートとして使用することをサポートしており、Git リポジトリ内のプロジェクト、共通プロジェクト、サンプルプロジェクトなどをカバーでき、標準化されたコード開発環境に対するチームの主要な要求を大幅に改善します。

7.1 カスタムテンプレート関数の概要

現在のカスタムテンプレートによって実装される主な機能は、カスタムテンプレートの作成、公開、共有、管理の 4 つです。

7.2 カスタムテンプレートの作成

現在のプロジェクト IDE を使用している場合、カスタムテンプレートを作成できます。

ここでは、Flutter ブログサイトをテンプレートとして公開します。

(1) 機能バーの [ファイル] をクリックし、ドロップダウンオプションから [カスタムテンプレートの発行] を選択します。

画像-20230722104258246

(2) 右側のレイアウトウィンドウに新しいタブページが自動的に開きます。ここで、お気に入りのアイコンとラベルを選択し、テンプレートの説明を入力できます。

画像-20230722104153254

完了をクリックします

画像-20230722104237142

7.3 カスタムテンプレートの公開

カスタムテンプレート情報を正常に入力したら、カスタムテンプレートを公開できます。

(1) [完了] をクリックしてカスタムテンプレートを公開します。

(2) 共有する前に「再公開」をクリックすると、リリース情報を変更して再度共有できます。共有リンクは変更されず、元のテンプレートに従って作成された IDE インスタンスは影響を受けません。

画像-20230722104348214

画像-20230722105143739

7.4 カスタムテンプレートの共有

テンプレートが正常に公開されたら、次の 2 つの方法でカスタムテンプレートを共有できます。

(1) 共有ページにアクセスし、カスタムテンプレートリンクをコピーして、パートナーと共有します。

Nut (個人) が「Flutter Blog」テンプレートを共有しました https://cloudstudio.net/templates/r9IAX1JuTF2

(2) Markdown バッジを埋め込んで共有し、テンプレートバッジを README ファイルまたはブログに埋め込むと、パートナーはバッジをクリックしてテンプレートを取得できます。

この時点で、プロセス全体が完了しました。

要約する

今回の体験プロセスを通じて、いくつかのメリットをまとめてみました。

Web IDE/オンライン IDE/クラウド IDE として、Cloud Studio にはローカル IDE に比べて次の利点があります。

インストール不要、クロスプラットフォーム: ブラウザさえあれば使用可能、共通環境がプリセットされており、手動インストール不要、Web ページのプレビュー作成、オンライン開発、デバッグをサポート。
フル機能: ダウンロードしてインストールする必要がなく、いつでもどこでも開発とコーディングが可能で、ローカル IDE に匹敵するスムーズなコーディングエクスペリエンスが得られます。
複数の環境: Node.js、Java、Python などの共通環境が組み込まれており、リソース管理のためにクラウドサーバーに接続することもできます。
VS Code プラグインとの互換性: デフォルトの構成ではニーズを満たせない場合は、VS Code プラグインをオンラインでインストールしてエクスペリエンスを向上させることができます。
永続性と高速読み込み: 開くときに書き込め、いつでも保存でき、電源切れや未保存を心配する必要がなく、インスピレーションのすべてを無駄にすることがありません。

私の経験から言えば、一言で言えば、中小規模のプロジェクトを開発したり、オンラインでコードを変更したり、デプロイのためにクラウドサーバーに接続したりするには、Cloud Studio が最適です。ワンクリックで開く、完全な永続性、プリセット環境と組み込みの開発ツール、チーム間でのシームレスなコピーと共有を実現し、開発を簡素化します。