演習 - ソース コードを Visual Studio Code で使用する

  • 15 分

このシナリオでは、組織のアカウント管理アプリを作成するよう求められています。 あなたは、キャンバス アプリを作成し、組織の法的要件に準拠するために、アプリのソースをテキスト形式で利用可能にすることを決めました。 会社の開発ポリシーでは、開発者が作成したすべてのアセットをソース管理リポジトリに保存することが求められています。 ソース コードは、可能な限りテキスト形式でリポジトリにコミットする必要があります。プロジェクト チームの環境で共同作業のプロセスを簡素化し、ソースを自動スキャンや差分に利用できるようにするためです。

要件

この演習を完了するには、データベースがインストールされた Microsoft Dataverse 環境が必要です。

目標

この演習の目標は、以下の方法を習得することです。

  • Visual Studio Code でキャンバス アプリケーションを編集する。

  • Visual Studio Code でキャンバス アプリケーションをパッケージ化する。

  • キャンバス アプリケーションを Power Apps Studio にアップロードする。

  • ローカル Git リポジトリとリモート Git リポジトリを作成し、初期化する。

  • ローカル リポジトリとリモート リポジトリを同期し、変更作業を行う。

前提条件

この演習を始める前に、このモジュールの前のラボが完了していることを確認してください。

演習 1: アプリケーションを編集する

この演習では、Visual Studio Code でアカウント マネージャー アプリケーションを編集します。

タスク: アプリを編集する

このタスクでは、Visual Studio Code でアプリケーションを編集します。

  1. Visual Studio Code を開きます。

  2. Learn lab account manager フォルダーが自動的に開かない場合は、ファイル > フォルダーを開くを選択します。 Learn lab account manager フォルダーを探して開きます。

  3. src フォルダー、Src フォルダーの順に展開し、次に BrowseScreen1.fx.yaml ファイルを選択します。

    BrowseScreen ファイルのスクリーンショット。

  4. LblAppName1 を探します。

  5. LblAppName1 のテキストの値を企業に変更し、サイズを 28 に設定します。

    テキスト値およびサイズ値のスクリーンショット。

  6. IconNewItem1 を探します。

  7. Navigate 式遷移を None から CoverRight に変更し、次の Trace() 式を追加します。

    ;Trace("New Item Selected")

    Navigate 式遷移と Trace 式のスクリーンショット。

  8. DetailScreen1.fx.yaml ファイルを選択します。

  9. LblAppName2 を探します。

  10. LblAppName2 のテキストの値を企業に変更し、サイズを 28 に設定します。

  11. EditScreen1.fx.yaml ファイルを選択します。

  12. LblAppName3 を探します。

  13. LblAppName3 のテキストの値を企業に変更し、サイズを 28 に設定します。

  14. ファイル > すべて保存を選択します。

演習 2: パッケージ化とアップロード

この演習では、アプリケーションをパッケージ化し、お使いの環境にアップロードします。

タスク: パッケージ化とアップロード

このタスクでは、アプリケーションをパッケージ化しアップロードします。

  1. ターミナルを開いて、次のコマンドを実行します。

    pac canvas pack --msapp "Account manager.msapp" --sources src

    パッケージ アプリケーション コマンドのスクリーンショット。

  2. 警告 PA2001: チェックサムが一致しませんという警告メッセージが表示される場合があります。 このメッセージは無視しても問題ありません。

  3. ブラウザーに切り替えて、Power Apps メーカー ポータル にアクセスし、適切な環境にいることを確認します。

  4. アプリを選択します。

  5. アカウント マネージャー アプリを選択し、編集を選択します。

  6. ファイル > 開く > 参照を選択します。

    ファイルを参照するボタンのスクリーンショット。

  7. Learn lab account manager フォルダーにある Account manager.msapp ファイルを選択し、開くを選択します。

    インポートするキャンバス アプリのスクリーンショット。

  8. アプリのプレビューを選択します。

    アプリのプレビュー ボタンのスクリーンショット。

  9. ラベル テキストには、Visual Studio Code で行った変更が表示されます。 プラス (+) アイコンを選択して、新しいアカウントを追加します。

    新しいアカウントを追加するボタンのスクリーンショット。

  10. ラベル テキストには、Visual Studio Code で行った変更が表示されます。 フォームを入力してから、保存を選択します。

    新しいアカウントを作成するウィンドウのスクリーンショット。

  11. 新しいアカウントを選択して開きます。

  12. ラベル テキストには、変更内容が表示されます。 アプリのプレビューを閉じます。

    アプリケーションのプレビューを閉じるボタンのスクリーンショット。

  13. ファイル > 保存を選択します。

  14. 公開を選択します。

  15. このバージョンを公開するを選択して、公開プロセスが完了するまで待ちます。

演習 3: GitHub (オプション)

この演習では、GitHub に新しいリポジトリを作成し、リポジトリを初期化して、変更作業を行います。

タスク 1: リモート リポジトリを初期化する

このタスクでは、リモート リポジトリを初期化します。

  1. GitHub にアクセスして、サインインします。 初めてサインインする場合は、サイン アップを選択し、表示されるメッセージに従って、サインアップ プロセスを完了します。

  2. プラス (+) ボタンを選択し、新しいリポジトリを選択します。

    GitHub の New repository ボタンのスクリーンショット。

  3. リポジトリ名に Contoto_Man と入力し、プライベートを選択して、リポジトリを作成を選択します。

    「新規リポジトリを作成」ウィンドウのスクリーンショット。「プライベート」オプションが選択されています。

  4. 後で使用するために、URL をコピーしてメモ帳に貼り付けます。

    リポジトリの URL をコピーするボタンのスクリーンショット。

タスク 2: ローカル リポジトリを初期化する

このタスクでは、ローカル リポジトリを初期化します。

  1. Visual Studio Code を開きます。

  2. Learn lab account manager フォルダーが自動的に開かない場合は、ファイル > フォルダーを開くを選択します。 Learn lab account manager フォルダーを探して開きます。

  3. メニューの表示を選択し、SCM (ソース管理マネージャー) を選択します。

  4. リポジトリの初期化を選択します。

    リポジトリの初期化ボタンのスクリーンショット。

  5. 変更オプションの上にカーソルを置いて、プラス (+) アイコンを選択し、すべての変更のステージングを実行します。

    すべての変更のステージングボタンのスクリーンショット。

  6. メッセージに最初のコミットと入力し、コミット (チェック ボックス ボタン) を選択します。

    最初のコミットで変更をコミットするボタンのスクリーンショット。

タスク 3: リモート リポジトリを追加して同期する

このタスクでは、リモート リポジトリを追加し、リポジトリを同期します。

  1. 省略記号 (...) ボタンをクリックし、リモート > リモートの追加を選択します。

    リモートの追加ボタンのスクリーンショット。

  2. 前にコピーしたリポジトリの URL を貼り付け、URL からリモートを追加するを選択します。 求められた場合は、サインインします。

    URL からリモートを追加するボタンのスクリーンショット。

  3. リモート名を発生元と入力し、Enter キーを押します。

    発生元として設定されたリモート名のスクリーンショット。

  4. 省略記号 (...) ボタンを選択して、プル、プッシュ > 同期を選択します。

    リポジトリを同期するボタンのスクリーンショット。

  5. OK を選択します。

  6. GitHub にアクセスして、Contoso_Man リポジトリを開きます。

  7. src フォルダーを開きます。

    リポジトリ フォルダーのスクリーンショット。

  8. フォルダーの内容を確認します。

タスク 4: 変更作業を行う

このタスクでは、変更作業を行います。

  1. Visual Studio Code に切り替えて、BrowseScreen1.fx.yaml ファイルを選択します。

  2. IconNewItem1 を探し、Navigate 式遷移を CoverRight から UnCover に変更します。

    ナビゲーション遷移タイプのスクリーンショット。

  3. ファイル > すべて保存を選択します。

  4. ソース管理 > すべての変更のステージングを選択します。

    すべての変更のステージング ボタンが選択されているソース管理のスクリーンショット。

  5. メッセージにUX ガイドラインに従って移行を変更すると入力し、コミット (チェック ボックス ボタン) を選択します。

    変更をコミットするボタンのスクリーンショット。

  6. 省略記号 (...) ボタンを選択して、プッシュを選択します。

  7. GitHub に戻り、Contoso_Man リポジトリを開きます。

  8. 選択してコミットを開きます。

    コミットを開くボタンのスクリーンショット。

  9. 変更を確認します。

    コミットされた変更を確認するスクリーンショット。