Power Appsで新しく「Code Apps」というWebアプリを作れる機能がプレビューになったので、実際にアプリを作ってみた。
Code Apps（プレビュー）
Code Appsは、Reactなどのコードで作成したフルコードのWebアプリをPower Platform上にホストし、Power Platformの認証・コネクタ・管理機能と統合して配布できる新しいアプリ形態。
Power Apps Component FrameworkがPower Appsのキャンバスやモデル駆動上で動く部品を作るのに対し、Code AppsはWebアプリそのものを構築できる。
今回はこのCode Appsを作り、Power Apps上で動くWebアプリを作ってみた。
事前準備
事前準備は以下の3つ。
- Power Platform CLIの最新バージョンをインストール
- アプリをアップロードする環境でCode Appsを有効にする
- アプリをアップロードする環境のGUIDをメモ
最新バージョンのPower Platform CLIをインストール
まずは最新バージョンのPower Platform CLI（PAC）を開発環境にインストールする。
※古いバージョンだと[pac code]コマンドが使えない。
※古いバージョンだと[pac code]コマンドが使えない。
アプリをアップロードする環境でCode Appsを有効にする
続いてPower Platform側でCode Appsを有効にする。
Power Platform管理センターから、該当の環境の[設定]を押し、
[機能]から、
[Power Apps コード アプリ]を有効にして、保存。
アプリをアップロードする環境のGUIDをメモ
最後にアプリをアップロードする環境のGUIDをメモする。
以上で事前準備は完了。
構築
サンプルアプリを起動する
最初に公式リファレンスの手順で、Microsoftが用意してくれているサンプルアプリをローカルで起動してみる。
まずはGitHubからサンプルプロジェクトをcloneする。 ※URLは記事執筆時点のものです。
git clone https://github.com/microsoft/PowerAppsCodeApps.git
続いて必要なパッケージをnpm installでインストール。
pac authコマンドでアップロードする環境への認証プロファイルを作成。ここで事前準備でメモした環境のGUIDを使用。
pac auth create --environment 【環境GUID】
以下のメッセージが出れば成功。
続いてpac code initで初期化。「Hello World」の部分はアプリ名を設定する。
pac code init --displayName '【アプリ名】'
そしたら、以下のコマンドでローカル起動。
npm run dev | pac code run
無事起動したら、localhostの3000にアクセスすると、
Webアプリが動く！
Azure OpenAI（AOAI）とのチャットアプリを作ってみる。
せっかくなので、サンプルアプリを改造し、チャットアプリを作ってみる。
再度アプリを立ち上げると、こんな感じでAzure OpenAIと会話できるWebアプリが起動。SSEにも対応させたので、キャンバスではできなかったこんな感じの会話も可能。
アプリをPower Platformにアップロード
最後に作ったアプリをPower Appsにあげてみる。
pac code pushコマンドで、アプリを環境にプッシュ。
npm run build | pac code push
するとアプリ一覧に作ったアプリが表示される！
起動すると、Power Appsの画面で自分が作ったWebアプリを操作できる。
ということで、非常に楽しみな新機能「Code Apps」、社内アプリかつユーザーが有償ライセンスを持っている場合は、Azure WebAppsではなく、こちらで作成するのが一般的になりそう。
コードはこちら。テストは一切していないので、あくまでデモとして
![]()
![]()
React component App.tsx for a Power Apps Code App that enables conversational interactions with Azure OpenAI.
React component App.tsx for a Power Apps Code App that enables conversational interactions with Azure OpenAI. - App.tsx
gist.github.com
コメント