実装 (フロントエンド)
フロントエンド側の各種機能を実装
-
画面 (Vue.js) 作成: アプリの各機能を実装
以下プロンプトを使用して、Vue.js を使用して、フロントエンドの画面を作成します。
プロンプト サンプル
# 画面作成のタスク 以下の使用技術を使って、作成対象画面の画面を作成してください。 単独でも動作するようなサンプルデータも追加してください。 深呼吸をして、一歩ずつ取り組んでください。 ## 使用技術： - HTML5 - Vue.js v3 ## 作成対象画面： - ホーム画面 - 設信稼俲状況画面生成結果 サンプル
結果 1
-
画面 (Vue.js) 作成: 環境構築 & オフライン動作確認
以下プロンプトを使用して、Vue.js を使用して、フロントエンドの画面がオフラインで動作できる環境の手順を作成し、ローカル環境で動作確認を行います。
プロンプト サンプル
# 初期ローカル実行の手順書作成のタスク 作成した画面をオフラインのローカル環境で動かすための詳細な手順書を作成してください生成結果 サンプル
結果 1
ローカル実行
プロンプトで生成された手順書を参考に、ローカル環境で動作確認を行います。
動作確認の操作デモ動画
動作確認デモ
-
Azure Functions で API 実装
以下プロンプトを使用して、Azure Functions を使用して、API を実装します。
プロンプト サンプル
# サーバー側のAPI作成のタスク Vue.jsから呼び出すサーバー側のAPIをAzure Functionsにホストするアプリケーションを作成します。 以下の使用技術を使って、レストランロジックのAPI未繊にそったコードを作成してください。 ## 使用技術 - Azure Functions v4 - CH 13 - NET 8 - Python 3.11 - Node.js v20 ## 設価務め状況画のAPI装： - DBへの保存ロシックはここではしません。APIを呼び出したらサンプルデータを返します - サンプルデータは、先に作成したレストランデータを使います - データの項目年にAPIにもパフメーターを設定して、フィルタリングが出来るようにします生成結果 サンプル
結果 1
-
画面 と API 融合
以下プロンプトを使用して、Vue.js で作成した画面と Azure Functions で作成した API を融合します。
プロンプト サンプル
# 画面の更新のタスク 先ほど作成した稼働状況画面を以下の設備稼働状況画面の更新の条件で更新してください。 ## 設備稼働状況画の更新の条件 - 設備働状況のサーバーAPIを呼び出す - Azure Functions のURLは後で書き換えるため、ここでは作成したサンプルデータを用いる生成結果 サンプル
結果 1
-
API と DB 融合
以下プロンプトを使用して、Azure Functions で作成した API と Azure Cosmos DB を融合します。
プロンプト サンプル
# サーバー側のAPIのコード更新のタスク サーバー側のAPIのコードに、DBへの検索をするコードを追加します。以下の設備稼働状況のサーバーAPI実装の更新に沿ってコードを作成してください。 ## 設備稼働状況のサーバーAPI実装の更新 - Azure Cosmos Database からデータを検索します。 - Azure Cosmos Database には、先に作成したサンプルデータは、格納済みであるとします - Azure Cosmos Database への接続情報は、後で設定できるようにします。 - 項目毎にAPIにもパラメーターを設定して、DB検索時にフィルタリングが出来るようにします生成結果 サンプル
結果 1
-
レポーティング用のクエリ文字列作成
以下プロンプトを使用して、レポーティング用のクエリ文字列を作成します。
プロンプト サンプル
# サンプルのクエリ作成のタスク Azure Cosmos Database に対して、以下の処理をするクエリを、SQL文で作成してください。 ## クエリ： メンテナンス中のある設備はどれですか?生成結果 サンプル
結果 1
-
Microsoft Azure コンポーネント選定
以下プロンプトを使用して、Microsoft Azure のコンポーネントを選定します。
プロンプト サンプル
# 最適なクラウドのコンポーネント選定理由作成のタスク アプリケーションアーキテクチャの中の全てのコンボーネントをMicrosoft Azure で動かします。 コストを安く抑えるためにServerlessをなるべく使いたいです。かつスケールアウトできるサービスを選択したいです。 それぞれのコンポーネントに最適なMicrosoftAzureのサービスは何ですか？ その理由も教えてください。生成結果 サンプル
結果 1
-
デプロイ
以下プロンプトを使用して、Microsoft Azure のコンポーネントを選定します。
プロンプト サンプル
# デプロイ用のコード作成のタスク それぞれのMicrosoft Azureのサービス作成をするAzure CLIのコードを作成してください。CI/CDでは使用サービスを参考にしてください。 アプリケーションの名前は「FactoryManagement」にします。数名のプリフィツクスとしてください。 詳細な手順害も作成してください。 ## 使用サービス - GitHub生成結果 サンプル
結果 1
まとめ
このページでは、フロントエンド側の各種機能の実装について説明しました。以下に要点をまとめます。
- 画面 (Vue.js) 作成:
- HTML5 と Vue.js v3 を使用して、ホーム画面と設備稼働状況画面を作成しました。
- 単独でも動作するようにサンプルデータを追加しました。
- 画面 (Vue.js) 作成: 環境構築 & オフライン動作確認:
- 作成した画面をオフラインのローカル環境で動かすための詳細な手順書を作成し、ローカル環境で動作確認を行いました。
- Azure Functions で API 実装:
- Azure Functions を使用して、Vue.js から呼び出すサーバー側の API を実装しました。
- サンプルデータを返す API を作成し、フィルタリング機能を追加しました。
- 画面 と API 融合:
- Vue.js で作成した画面と Azure Functions で作成した API を融合し、設備稼働状況画面を更新しました。
- API と DB 融合:
- Azure Functions で作成した API と Azure Cosmos DB を融合し、DB からデータを検索する機能を追加しました。
- レポーティング用のクエリ文字列作成:
- Azure Cosmos Database に対して、メンテナンス中の設備を検索するクエリを SQL 文で作成しました。
- Microsoft Azure コンポーネント選定:
- アプリケーションアーキテクチャの全てのコンポーネントを Microsoft Azure で動かすための最適なサービスを選定し、その理由を説明しました。
- デプロイ:
- Microsoft Azure のサービス作成をする Azure CLI のコードを作成し、詳細な手順書を作成しました。
Microsoft Copilot を活用することで、これらのフロントエンド機能を効率的に実装することができました。次のステップに進む前に、生成されたコードと手順書を確認し、必要に応じて修正を行いましょう。