次の方法で共有

クイック スタート: 最初のコード アプリを作成する (プレビュー)

注

プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能は、お客様が早期にアクセスしてフィードバックを提供できるように、公式リリースの前に利用できます。

このクイック スタートでは、コード アプリをビルドし、ローカルで実行してから発行します。 これらの手順では、サンプル コード アプリをダウンロードし、PAC CLI を使用して Power Platform 環境をターゲットにしてアプリを発行する方法について説明します。 次に、Power Platform でホストされているアプリを実行する前に、アプリを発行します。

[前提条件]

注

一般的なコード アプリの前提条件:前提条件を参照してください

PowerAppsCodeApps リポジトリを複製する

このリポジトリには、Power Platform SDK が既に含まれている TypeScript アプリの開始が含まれています。 後で、この基本アプリを使用せずに最初から開始できるガイダンスを追加します。

git clone https://github.com/microsoft/PowerAppsCodeApps.git
cd PowerAppsCodeApps

HelloWorld サンプルを開く

Visual Studio Code を使用して HelloWorld サンプルを開きます。

cd samples\HelloWorld
code .

このアプリ プロジェクトは Vite を使用して作成され、次の 2 つの重要な追加点があります。

  • package.json には、アプリが Power Platform コネクタに接続するのに役立つ Power Apps SDK への参照があります。
  • PowerProvider.tsx には、アプリを実行する準備ができていることを Power Apps ホストに通信するためにアプリが使用する initialize() 関数が含まれています。

PAC CLI を認証し、開発環境をポイントする

Visual Studio Code で、新しいターミナル ウィンドウを開き、 pac auth create コマンドを使用して認証プロファイルを作成します。

pac auth create --environment {environment id}

Power Platform のすべてのアプリ、フロー、エージェントは、環境に公開されます。 PAC CLI の認証コマンドでは、Microsoft Entra ID で認証するように指示され、Power Platform に接続を追加し、発行したコードアプリが指定された環境で動作することを確認します。

依存関係のインストール

ターミナル ウィンドウで、次のコマンドを実行します。

npm install
pac code init --displayName 'Hello World'
  • npm installpackage.json ファイルにある依存ライブラリをインストールします。
  • pac code init 現在のディレクトリ内のコード アプリを初期化します。

ローカルで実行する

ターミナル ウィンドウで、次のコマンドを実行します。

npm run dev | pac code run
  • npm run devpackage.jsonのキー値を使用して、dev ファイルで構成されたスクリプトを実行します。 この場合、スクリプトは "concurrently \"vite\" \"pac code run\""。
  • PACコードの実行 アプリでローカルに読み込まれる接続を管理するためのローカルサーバーを起動します。

Power Apps をビルドしてデプロイする

ターミナル ウィンドウで、次のコマンドを実行します。

npm run build | pac code push
  • npm run buildpackage.jsonのキー値を使用して、build ファイルで構成されたスクリプトを実行します。 この場合、スクリプトは "tsc -b && vite build"。
  • pac コード プッシュ コード アプリの新しいバージョンを発行します。

成功した場合、このコマンドはアプリを実行するための Power Apps URL を返す必要があります。

必要に応じて、 Power Apps を開いてアプリを表示できます。 そこから、再生、共有、または詳細を確認できます。

おめでとうございます! 最初のコード アプリを正常にプッシュしました!

トラブルシューティング

"アプリのフェッチ中" の読み込み画面でスタックした場合、または "アプリがタイムアウトしました" というエラー画面が表示される場合は、再確認してください。

  • npm run build を実行したこと
  • に問題はありません。 PowerProvider.tsx
  • Last updated on