実装 (フロントエンド) - v2

フロントエンド側の各種機能を実装

• 画面 (Vue.js) 作成: アプリの各機能を実装

  以下プロンプトを使用して、Vue.js を使用して、フロントエンドの画面を作成します。

  プロンプト サンプル

  # プログラミング実装を開始してください。
  
  # 画面作成のタスク
  以下の使用技術を使って、作成対象画面の画面を作成してください。
  単独でも動作するようなサンプルデータも追加してください。
  深呼吸をして、一歩ずつ取り組んでください。
  
  ## 使用技術：
  - HTML5
  - Vue.js v3
    
  ## 作成対象画面：
  - ホーム画面
  - 設信稼俲状況画面
  
  

• 画面 (Vue.js) 作成: 環境構築 & オフライン動作確認

  以下プロンプトを使用して、Vue.js を使用して、フロントエンドの画面がオフラインで動作できる環境の手順を作成し、ローカル環境で動作確認を行います。

  プロンプト サンプル

  # 初期ローカル実行の手順書作成のタスク
  作成した画面をオフラインのローカル環境で動かすための詳細な手順書を作成してください
  

  ローカル実行

  次のステップに進める前に、プロンプトで生成された手順書を参考に、先にローカル環境で動作確認を行うことをお勧めします。

  動作確認の操作デモ動画

  動作確認デモ

  

• 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にもパフメーターを設定して、フィルタリングが出来るようにします
  
  

• 画面 と API 融合

  以下プロンプトを使用して、Vue.js で作成した画面と Azure Functions で作成した API を融合します。

  プロンプト サンプル

  # プログラミング実装を開始してください。
    
  # 画面の更新のタスク
  先ほど作成した稼働状況画面を以下の設備稼働状況画面の更新の条件で更新してください。
    
  ## 設備稼働状況画の更新の条件
  - 設備働状況のサーバーAPIを呼び出す
  - Azure Functions のURLは後で書き換えるため、ここでは作成したサンプルデータを用いる
  
  

• API と DB 融合

  以下プロンプトを使用して、Azure Functions で作成した API と Azure Cosmos DB を融合します。

  プロンプト サンプル

  # プログラミング実装を開始してください。
    
  # サーバー側のAPIのコード更新のタスク
  サーバー側のAPIのコードに、DBへの検索をするコードを追加します。以下の設備稼働状況のサーバーAPI実装の更新に沿ってコードを作成してください。
    
  ## 設備稼働状況のサーバーAPI実装の更新
  - Azure Cosmos Database からデータを検索します。
  - Azure Cosmos Database には、先に作成したサンプルデータは、格納済みであるとします
  - Azure Cosmos Database への接続情報は、後で設定できるようにします。
  - 項目毎にAPIにもパラメーターを設定して、DB検索時にフィルタリングが出来るようにします
  
  

• レポーティング用のクエリ文字列作成

  以下プロンプトを使用して、レポーティング用のクエリ文字列を作成します。

  プロンプト サンプル

  # サンプルのクエリ作成のタスク
  Azure Cosmos Database に対して、以下の処理をするクエリを、SQL文で作成してください。
    
  ## クエリ：
  メンテナンス中のある設備はどれですか?
  

• Microsoft Azure コンポーネント選定

  以下プロンプトを使用して、Microsoft Azure のコンポーネントを選定します。

  プロンプト サンプル

  # プログラミング実装を開始してください。
    
  # 最適なクラウドのコンポーネント選定理由作成のタスク
  アプリケーションアーキテクチャの中の全てのコンボーネントをMicrosoft Azure で動かします。
  コストを安く抑えるためにServerlessをなるべく使いたいです。かつスケールアウトできるサービスを選択したいです。
  それぞれのコンポーネントに最適なMicrosoftAzureのサービスは何ですか？
  その理由も教えてください。
  

• デプロイ

  以下プロンプトを使用して、Microsoft Azure のコンポーネントを選定します。

  プロンプト サンプル

  # デプロイ用のコード作成のタスク
  それぞれのMicrosoft Azureのサービス作成をするAzure CLIのコードを作成してください。CI/CDでは使用サービスを参考にしてください。
  アプリケーションの名前は「FactoryManagement」にします。数名のプリフィツクスとしてください。
  詳細な手順害も作成してください。
  
  ## 使用サービス
  - GitHub