Cipta dan edit halaman generatif dengan alat penjanaan kod AI

Artikel ini menerangkan cara menggunakan alat penjanaan kod AI, seperti GitHub Copilot CLI, untuk mencipta dan mengedit halaman generatif bagi aplikasi berasaskan model dalam Power Apps. Dengan menggunakan pendekatan ini, anda boleh mengintegrasikan keupayaan penjanaan kod lanjutan terus ke dalam aliran kerja pembangunan anda untuk mencipta halaman generatif baru atau mengulangi halaman sedia ada menggunakan arahan bahasa semula jadi. Halaman boleh menggunakan jadual Microsoft Dataverse, penyambung Power Platform (pratonton), dan API tersuai Dataverse (pratonton).

Tip

Pendekatan ini adalah laluan yang disyorkan untuk membina halaman generatif. Ia memberi anda akses kepada model AI terkini, berfungsi di seluruh dunia pada awan awam, dan membolehkan anda membina beberapa halaman dengan jadual Dataverse yang menyokong, sumber data penyambung Power Platform (pratonton), atau API tersuai Dataverse (pratonton) dalam satu larian.

Menggunakan alat penjanaan kod AI dengan halaman generatif melengkapi pengalaman berasaskan UI dalam Power Apps (make.powerapps.com). Pendekatan kod dahulu ini sesuai untuk mana-mana pembuat atau pembangun yang ingin mengakses model AI terkini atau lebih suka bekerja dengan alat pembangunan tempatan dan aliran kerja berasaskan CLI.

Nota

Untuk merancang, membina, atau mengedit keseluruhan aplikasi berasaskan model dan bukannya halaman generatif individu, gunakan kemahiran pembina aplikasi model. Untuk maklumat lanjut, lihat Bina dan edit aplikasi berasaskan model dengan alat penjanaan kod AI.

Perkara yang boleh anda lakukan dengan alat penjanaan kod

  • Cipta satu atau lebih halaman generatif dalam satu larian daripada keperluan bahasa biasa
  • Cipta jadual Microsoft Dataverse sokongan yang diperlukan oleh halaman anda atau gunakan semula jadual sedia ada, termasuk data sampel untuk jadual baharu
  • (Pratonton) Sambungkan ke data di luar Dataverse menggunakan penyambung Power Platform
  • (Pratonton) Panggil logik perniagaan sisi pelayan dengan menggunakan API tersuai Dataverse
  • Letakkan artifak ke dalam apl dan penyelesaian baharu atau sedia ada, termasuk mencipta apl atau penyelesaian dengan cepat
  • Kemas kini halaman generatif sedia ada dengan meminta perubahan atau penambahbaikan melalui alat AI anda
  • Gunakan secara langsung ke persekitaran Power Apps anda menggunakan arahan PAC CLI
  • Bekerja secara tempatan dengan IDE pilihan anda dan alat pembangunan, dengan npm install dan sokongan IntelliSense untuk kod yang dijana

Cara ciri ini berfungsi

  1. Anda menerangkan perkara yang anda mahu bina dalam bahasa semula jadi, contohnya, "Cipta papan pemuka halaman generatif yang menunjukkan akaun teratas mengikut hasil."
  2. Ejen perancang menganalisis permintaan anda dan mencadangkan rancangan. Pelan ini mungkin merangkumi satu atau lebih halaman, jadual Dataverse, sumber data yang disokong penyambung, atau API tersuai yang diperlukan oleh halaman, serta aplikasi dan penyelesaian di mana artifak itu berada. Perancang kemudian mewakilkan kepada ejen khusus untuk membina apa yang diterangkan oleh rancangan itu. Sebagai contoh, pembangun jadual dan pembangun halaman.
  3. Anda menyemak dan melaraskan pelan sebelum membina. Anda boleh menukar bilangan halaman, menukar atau menambah sumber data, menyasarkan aplikasi yang berbeza, atau meletakkan artifak dalam penyelesaian yang berbeza.
  4. Ejen menjana kod TypeScript dan React sedia pengeluaran untuk halaman atau halaman anda, bersama-sama dengan fail sokongan untuk pembangunan tempatan.
  5. Alat ini menggunakan artifak ke persekitaran anda menggunakan arahan PAC CLI halaman generatif dan secara pilihan menjalankan langkah pengesahan dalam penyemak imbas yang menjalankan halaman dengan ujian yang dijana.
  6. Halaman generatif anda muncul dalam apl dipacu model anda.

Prasyarat

Sebelum anda memulakan, pastikan anda mempunyai perisian dan kebenaran yang diperlukan yang diterangkan di sini.

Keperluan perisian

Komponen Versi minimum Maklumat lanjut
Node.js 18.0 atau lebih baru Muat turun Node.js
Platform Kuasa CLI (PAC CLI) Terkini Pasang PAC CLI
GitHub Copilot CLI, Kod Claude atau alat penjanaan kod lain Terkini GitHub Copilot CLI atau Kod Claude

Keperluan tambahan

  • Persekitaran Power Platform dengan aplikasi dipacu model untuk menggunakan halaman.
  • Sesi PAC CLI yang disahkan disambungkan ke persekitaran sasaran anda.
  • Untuk halaman yang disokong penyambung (pratonton), sambungan Power Platform yang disahkan sedia ada untuk setiap penyambung yang anda ingin gunakan. Ejen boleh mencipta rujukan sambungan jika diperlukan.
  • Untuk halaman yang memanggil API tersuai Dataverse (pratonton), API tersuai yang disokong sedia ada dalam persekitaran sasaran. Untuk melaksanakan logik sisi pelayan dan mendedahkannya ke halaman generatif, cipta plug-in Dataverse, kemudian cipta API tersuai menggunakan Alat Pendaftaran Plug-in dan kaitkan dengan jenis plug-in tersebut. Untuk butiran konfigurasi, lihat Cipta dan gunakan API tersuai.
  • Untuk mengeksport telemetri halaman generatif ke Azure Application Insights (pratonton), pentadbir mesti menyediakan eksport data Application Insights untuk persekitaran di pusat pentadbiran Power Platform. Persekitaran mesti memenuhi keperluan untuk eksport data Application Insights.

Penting

Sokongan Connector, sokongan API tersuai, dan telemetri Application Insights untuk halaman generatif adalah ciri pratonton. Ciri pratonton tidak dimaksudkan untuk kegunaan pengeluaran dan mungkin mempunyai fungsi terhad. API tersuai dijalankan dalam konteks pengguna yang log masuk dan tertakluk kepada keselamatan Dataverse.

Nota

Keupayaan ini tersedia di seluruh dunia dalam awan awam.

Pasang pemalam

Jalankan pemasang untuk menyediakan semua pemalam Power Platform sama ada dalam PowerShell atau tetingkap arahan Windows.

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

Pemasang secara automatik:

  • Mengesan alat yang tersedia (GitHub Copilot CLI, Claude Code)
  • Mendaftarkan pasaran pemalam dan memasang semua pemalam
  • Mendayakan kemas kini automatik supaya pemalam kekal terkini

Selepas pemasangan, mulakan semula alat AI anda jika perlu.

Pasang hanya pemalam halaman generatif

Untuk memasang hanya pemalam halaman generatif untuk GitHub Copilot CLI atau Claude Code:

  1. Tambah pemalam pasaran Kemahiran Power Platform: /plugin marketplace add microsoft/power-platform-skills
  2. Pasang pemalam Power Apps: /plugin install model-apps@power-platform-skills

Nota

Untuk Claude Code, anda boleh memasang pemalam dengan skop yang berbeza, seperti global, tempatan atau pengguna. Bergantung pada skop, anda perlu berada dalam direktori yang betul untuk Claude Code menggunakan pemalam. Pergi ke Extend Claude dengan kemahiran.

Setelah dipasang, anda boleh menggunakan pemalam sama ada:

  • Menjalankan arahan /genpage secara eksplisit.
  • Menerangkan halaman yang anda mahu buat. Alat ini secara automatik mengesan dan menggunakan pemalam.

Tip

Hidupkan kemas kini automatik untuk menerima kemas kini kepada pasaran dan kemahiran secara automatik. Gunakan /plugin perintah, navigasi ke Marketplaces, pilih pasaran dan hidupkan kemas kini automatik.

Menggunakan alat penjanaan kod AI yang lain

Untuk alat penjanaan kod AI yang lain, pastikan alat anda mempunyai akses kepada sumber halaman generatif daripada repositori Power Platform GitHub. Folder pemalam apl model termasuk dokumentasi komponen, kod sampel, rujukan arahan PAC CLI dan arahan aliran kerja yang diperlukan untuk mencipta kod yang mematuhi keperluan halaman generatif, termasuk cara mencipta halaman yang menyokong berbilang bahasa dan wilayah. Rujuk readme repositori untuk mendapatkan maklumat tentang mengakses dan menggunakan sumber ini dengan alat pilihan anda.

Gambaran keseluruhan kemahiran

Pemalam Power Apps menyediakan kemahiran ini untuk bekerja dengan halaman generatif.

Kemahiran Perintah Description
Halaman generatif /genpage Cipta kod untuk halaman generatif (untuk penciptaan atau penyuntingan senario)

Kemahiran ini membolehkan anda menerangkan perkara yang anda mahu bina dan mempunyai alat AI menjana kod TypeScript dan React yang lengkap untuk halaman generatif anda, kemudian menggunakannya terus ke persekitaran Power Apps anda.

Cipta halaman generatif baharu

Ikuti aliran kerja ini apabila membina halaman atau set halaman baharu dari awal.

  1. Mulakan perbualan dengan alat AI anda. Terangkan perkara yang anda mahu buat. Jadilah sespesifik atau terbuka seperti yang anda mahukan — semakin kabur permintaan, semakin banyak ejen mengisi dirinya sendiri. Anda juga boleh melampirkan imej atau bahan lain untuk membimbing visual, tema dan reka letak. Contohnya:

    • "Buat papan pemuka halaman generatif yang menunjukkan 10 akaun teratas kami mengikut hasil menggunakan jadual Akaun"
    • "Bina dua halaman untuk mengurus pendaftaran sukarelawan saya — satu untuk menyemak imbas syif terbuka dan satu untuk mengesahkan pendaftaran — menggunakan data sampel"
    • "Buat halaman generatif untuk memaparkan laporan kejadian pada peta menggunakan jadual Insiden"
    • "Cipta halaman yang memaparkan dokumen dari Project files SharePoint list."
    • "Cipta halaman semakan pesanan dengan butang Lulus yang memanggil ApproveOrder API tersuai."

  2. Pilih buat atau edit jika diminta. Jika ejen perancang tidak pasti sama ada anda mahukan halaman baharu atau mengemas kini halaman sedia ada, ia bertanya. Untuk mengikuti aliran kerja ini, pilih untuk mencipta halaman baharu. Untuk penyuntingan, pergi ke Edit halaman generatif sedia ada.

  3. Jawab soalan tentang apa yang perlu dibina. Perancang mungkin bertanya jenis halaman yang anda mahu, berikan beberapa contoh, dan menerima penerangan tersuai, seperti data yang digunakan, susun atur, maklumat yang hendak dipaparkan, interaksi, dan sebagainya. Spesifik tentang keperluan perniagaan dan keperluan data, kenal pasti keperluan mudah alih lebih awal dan sebutkan sebarang komponen UI atau pilihan reka letak. Perancang juga mungkin bertanya soalan penjelasan seperti sama ada untuk menggunakan jadual Dataverse, penyambung Power Platform, API tersuai, atau data sampel yang dikodkan secara tetap, dan sama ada untuk menambah halaman ke aplikasi sedia ada atau mencipta aplikasi baru.

  4. Semak dan laraskan rancangan. Perancang membentangkan pelan yang merangkumi halaman atau beberapa halaman yang ingin dibina, jadual Dataverse, sumber data yang disokong penyambung, atau API tersuai untuk digunakan, aplikasi untuk menghoskan halaman (baru atau sedia ada), dan penyelesaian di mana artifak berada. Iterasi dengan ejen untuk melaraskan apa sahaja yang anda mahu ubah - contohnya, bilangan halaman, jadual atau API tersuai yang digunakan, aplikasi sasaran, atau penyelesaian sasaran. Sahkan pelan apabila ia sepadan dengan niat anda.

  5. Biarkan ejen membina dan menggunakan. Ejen khusus akan menjana halaman atau halaman, jadual sokongan, pengikatan API penyambung atau tersuai, dan kod, kemudian disebarkan ke persekitaran anda.

  6. Sahkan secara pilihan dalam penyemak imbas. Selepas binaan, ejen mungkin menawarkan untuk menjalankan langkah pengesahan dalam penyemak imbas yang menjalankan ujian Playwright yang dijana secara automatik terhadap halaman untuk mengesahkan ia dimuatkan dan berfungsi dengan betul. Gunakan ini untuk menangkap isu yang jelas sebelum menguji secara manual.

  7. Uji dan lelang. Buka apl dipacu model anda dalam Power Apps dan navigasi ke halaman baharu. Jika anda perlu membuat perubahan, kembali ke alat AI anda dan terangkan kemas kini dalam bahasa semula jadi.

Nota

Anda boleh menukar nama atau kedudukan halaman generatif dalam peta laman pada bila-bila masa daripada pereka bentuk aplikasi dipacu model.

Gunakan data penyambung (pratonton)

Sokongan penyambung membolehkan halaman generatif menggunakan data di luar Dataverse melalui ekosistem penyambung Power Platform. Semua penyambung Power Platform disokong.

Untuk menggunakan data penyambung, terangkan perkhidmatan dan data yang anda mahu halaman itu gunakan dalam prompt anda. Sebagai contoh, minta ejen untuk mencipta halaman yang memaparkan dokumen dari senarai SharePoint list. Semasa perancangan, ejen:

  1. Menyenaraikan sambungan dan rujukan sambungan yang tersedia dalam persekitaran yang dipilih.
  2. Meminta anda memilih sambungan. Jika sambungan tidak mempunyai rujukan sambungan, ejen akan mencipta satu.
  3. Meminta anda memilih data penyambung, seperti set data dan jadual atau operasi penyambung.
  4. Menambah pengikatan penyambung ke halaman dan memasukkannya apabila halaman disebarkan.

Semak sumber data penyambung dalam pelan sebelum anda meluluskan pembinaan. Uji halaman yang dijana dengan identiti dan kebenaran yang akan digunakan oleh pengguna anda.

Gunakan API tersuai (pratonton)

Gunakan tindakan atau fungsi API tersuai Dataverse apabila halaman anda perlu menjalankan logik perniagaan sisi pelayan secara eksplisit, seperti meluluskan pesanan, mengira semula harga, atau mengesahkan transaksi.

Untuk menggunakan API tersuai, terangkan operasi dan bila halaman harus memanggilnya dalam prompt anda. Sebagai contoh, minta ejen menambah butang Approve yang memanggil ApproveOrder API tersuai untuk pesanan semasa. Semasa perancangan, ejen:

  1. Menyenaraikan API tersuai yang disokong yang tersedia dalam persekitaran yang dipilih.
  2. Meminta anda memilih API tersuai yang perlu dipanggil oleh halaman tersebut.
  3. Menggunakan sifat permintaan dan respons API tersuai apabila ia menjana halaman.
  4. Menambah pengikatan API tersuai ke halaman dan memasukkannya apabila halaman disebarkan.

Semak API tersuai dan inputnya dalam pelan sebelum anda meluluskan binaan. Uji halaman yang dijana dengan identiti dan kebenaran yang digunakan oleh pengguna anda.

Pantau halaman generatif dengan Application Insights (pratonton)

Power Apps boleh mengeksport telemetri operasi secara automatik untuk halaman generatif ke Azure Application Insights. Keupayaan ini berfungsi sama untuk halaman yang dicipta dengan alat penjanaan kod AI dan halaman yang dicipta dalam Power Apps (make.powerapps.com).

Seorang pentadbir mesti terlebih dahulu mengkonfigurasi eksport data Application Insights untuk persekitaran di pusat pentadbir Power Platform. Selepas eksport dikonfigurasikan, Power Apps secara automatik melaporkan telemetri yang disokong daripada halaman generatif yang diterbitkan. Kod prompt dan halaman yang dijana anda tidak perlu memulakan Application Insights JavaScript SDK, menyertakan connection string, atau menambah panggilan telemetri.

Telemetri yang dieksport secara automatik termasuk:

  • Halaman yang telah selesai dimuatkan dalam pageViews jadual.
  • Ralat rendering halaman yang tidak dikendalikan dan penolakan janji dalam exceptions jadual.
  • Operasi yang disokong dataApi dalam dependencies jadual.
  • Navigasi dimulakan dari halaman generatif dalam pageViews jadual.

Telemetri Application Insights untuk halaman generatif adalah ciri pratonton. Ketersediaan mungkin berbeza mengikut persekitaran semasa ciri ini dilancarkan.

Untuk arahan persediaan, pergi ke Eksport data ke Application Insights. Untuk panduan skema telemetri aplikasi berasaskan model dan panduan pertanyaan, pergi ke acara Telemetri untuk aplikasi berasaskan model.

Edit halaman generatif sedia ada

Gunakan aliran kerja ini untuk mengemas kini halaman yang sudah wujud dalam persekitaran anda.

  1. Dapatkan semula halaman sedia ada. Dalam alat penjanaan kod AI anda, minta untuk mendapatkan semula halaman generatif sedia ada dengan memberikan ID halaman (GUID) atau nama halaman dalam peta laman dan apl yang dimasukinya. Contohnya, "Saya mahu mengemas kini halaman generatif Pengangkatan Haiwan Peliharaan daripada apl Demo."

  2. Terangkan kemas kini anda. Beritahu alat AI perubahan yang ingin anda buat. Contohnya:

    • "Tambah penapis untuk menunjukkan rekod aktif sahaja"
    • "Tukar reka letak untuk memaparkan kad dalam grid dan bukannya senarai"
    • "Tambah carta yang menunjukkan arah aliran penggunaan dari semasa ke semasa"
    • "Kemas kini borang untuk memasukkan medan tersuai baharu untuk perangai haiwan peliharaan"

  3. Semak, terbitkan, uji dan lelang. Alat AI menjana kod TypeScript yang dikemas kini berdasarkan perubahan yang anda minta. Ikuti proses semakan, penerbitan dan ujian yang sama yang diterangkan dalam bahagian "Cipta halaman generatif baharu". Teruskan lelaran dengan arahan bahasa semula jadi sehingga halaman memenuhi keperluan anda.

Fail pembangunan tempatan

Apabila alat AI menjana halaman, ia juga menulis dua fail sokongan ke ruang kerja tempatan anda untuk memudahkan semakan dan lelaran pada kod:

  • package.json — mengisytiharkan masa jalan dan kebergantungan pembangunan yang disusun oleh halaman yang dijana. Jalankan npm install selepas penjanaan untuk memasang kebergantungan ini.
  • genpage.d.ts — pengisytiharan TypeScript ambien untuk objek yang tidak dipasang melalui npm, seperti dataApi dan pageInput.

Dengan kedua-dua fail di tempatnya dan npm install lengkap, IntelliSense editor anda, seperti dalam Kod VS, berfungsi terhadap kod yang dijana, jadi anda boleh menyemak atau mengedit halaman dengan tangan tanpa melihat coretan merah untuk jenis yang tidak diselesaikan.

Sediakan halaman untuk menerima parameter input

Halaman generatif boleh menerima parameter recordIdinput , entityName, dan data, membolehkan mereka menerima data kontekstual apabila dinavigasi daripada halaman atau kod lain. Apabila anda mengarahkan alat AI untuk mengkonfigurasi parameter input, ia menjana kod permulaan yang sesuai supaya halaman membaca dan menggunakan nilai tersebut apabila ia dimuatkan.

Terangkan parameter yang anda mahukan dalam gesaan anda:

  • "Sediakan halaman untuk menerima Akaun recordId dan entityName. Apabila halaman dimuatkan, gunakan parameter ini untuk mengambil dan memaparkan butiran akaun yang sepadan."
  • "Konfigurasikan halaman ini untuk menerima parameter data yang mengandungi objek penapis tersuai. Gunakannya untuk menapis rekod yang dipaparkan apabila halaman dimuatkan."

Untuk menavigasi ke halaman dan menghantar parameter ini, lihat Navigasi ke dan dari halaman generatif menggunakan API Klien.

Penyetempatan

Apabila anda mencipta halaman generatif menggunakan kemahiran Power Apps, penyesuaian dikendalikan secara automatik. Ejen mengesan semua bahasa yang didayakan dalam persekitaran anda dan menjana kod supaya halaman berfungsi dengan semua bahasa tersebut. Halaman ini menghormati pilihan bahasa pilihan dan pemformatan serantau setiap pengguna untuk tarikh, nombor dan mata wang.

Jika anda ingin menyasarkan set bahasa yang berbeza daripada bahasa yang didayakan dalam persekitaran anda, anda boleh meminta ejen untuk menyesuaikan diri, contohnya:

"Kemas kini halaman ini untuk menyokong bahasa Inggeris, Perancis dan Sepanyol sahaja."

Nota

Entri peta laman untuk halaman generatif tidak disetempatkan secara lalai. Untuk menyetempatkan entri peta laman, kemas kini entri tersebut secara berasingan dalam pereka bentuk aplikasi.

Untuk maklumat lanjut, pergi ke arahan penyetempatan dalam repositori Kemahiran Power Platform.

Penyelesaian masalah

Halaman gagal dimuatkan dalam Power Apps

Jika anda menavigasi ke halaman generatif anda dan melihat mesej ralat atau skrin kosong:

  1. Buka alat pembangun penyemak imbas (F12 dalam kebanyakan penyemak imbas).

  2. Pilih tab Konsol .

  3. Salin mesej ralat lengkap, termasuk jejak tindanan.

  4. Kembali ke alat penjanaan kod AI anda dan tampal ralat dengan konteks:

    "Saya mendapat ralat ini apabila membuka halaman: [tampal ralat di sini]. Tolong selesaikan isu itu."

    Alat AI menganalisis ralat, mengenal pasti punca dan menjana pembetulan.

  5. Semak pembetulan dan minta alat untuk menerbitkan semula halaman.

Kembali kepada versi kerja

Jika perubahan terkini memecahkan halaman anda atau memburukkan lagi isu, anda boleh meminta alat AI untuk melancarkan kembali kepada versi kerja sebelumnya:

"Perubahan baru-baru ini memecahkan halaman. Sila kembali kepada versi kerja terakhir."

Alat AI kemudian:

  1. Mengenal pasti perubahan yang dibuat
  2. Memulihkan kod kerja sebelumnya
  3. Menggunakan semula versi stabil

Amalan terbaik

  • Mulakan dengan mudah. Mulakan dengan versi asas halaman anda dan lelaran untuk menambah kerumitan.
  • Uji dengan kerap. Gunakan dan uji halaman anda selepas setiap perubahan ketara.
  • Jadilah spesifik. Berikan keperluan terperinci untuk mendapatkan hasil awal yang lebih baik.
  • Gunakan corak sedia ada. Rujuk halaman atau corak UI yang serupa apabila menerangkan keperluan anda.
  • Sahkan kod yang dijana. Sentiasa semak kod yang dijana untuk memastikan ia memenuhi piawaian dan keperluan pematuhan organisasi anda.

Penting

Walaupun alat penjanaan kod AI berusaha sedaya upaya untuk menjana kod yang lengkap dan sedia pengeluaran dengan amalan terbaik kebolehcapaian dan keselamatan, anda akhirnya bertanggungjawab untuk mengesahkan kod tersebut. Pastikan kod yang dijana memenuhi piawaian, dasar dan keperluan pematuhan organisasi anda.

Batasan

Had untuk halaman generatif yang dicipta dengan alat penjanaan kod AI adalah sama seperti halaman generatif yang dicipta dalam portal pembuat Power Apps:

  • Sumber data yang disokong ialah jadual Dataverse dan penyambung Power Platform (pratonton).
  • Tindakan dan fungsi API tersuai disokong dalam pratonton. API tersuai yang menggunakan jenis pengikatan EntityCollection atau parameter Entity tidak disokong.
  • Kerjasama tidak disokong—pastikan hanya satu pembuat yang mengusahakan halaman generatif pada satu masa.
  • Hanya jenis data ini disokong: Pilihan, Mata Wang, Pelanggan, Tarikh dan Masa, Tarikh Sahaja, Nombor Perpuluhan, Nombor Titik Apungan, Imej, Carian, Teks Berbilang Baris, Status, Sebab Status, Teks, Nombor Bulat, Ya/Tidak, Pengecam Unik.

Kandungan berkaitan

  • Last updated on