Membuat halaman menggunakan bahasa alami

Gunakan bahasa alami untuk membuat halaman generatif yang dibuat menggunakan AI. Halaman generatif adalah pengalaman berbasis AI yang dirancang untuk menyederhanakan, mempercepat, dan meningkatkan proses desain aplikasi Anda dalam aplikasi yang diarahkan model. Dengan berinteraksi dengan agen aplikasi, Anda membuat halaman yang berfungsi penuh di aplikasi berbasis model dengan menjelaskan apa yang Anda butuhkan dalam bahasa alami dan menentukan tabel Microsoft Dataverse mana yang akan direferensikan. Anda bahkan dapat melampirkan gambar seperti apa tampilan halaman tersebut.

Setelah Anda menjelaskan halaman, sistem kemudian memproses persyaratan dan spesifikasi Anda dan secara cerdas menghasilkan kode React yang mencakup pengalaman pengguna front-end dengan memilih komponen yang tepat dan menentukan tata letak terbaik, dan logika bisnis yang sesuai. Melalui pengalaman percakapan yang interaktif, Anda dapat menyempurnakan desain halaman secara real time, menyesuaikan elemen, tata letak, dan fungsionalitas agar sesuai dengan visi Anda.

Pendekatan pengembangan

Anda dapat membuat halaman generatif menggunakan dua pendekatan:

  • Power Apps (make.powerapps.com): Seperti yang dijelaskan dalam artikel ini, pembuat dapat membuat dan melakukan iterasi pada halaman generatif langsung di browser dengan menggunakan pengalaman UI percakapan. Tersedia di Amerika Serikat, Inggris Raya, Australia, dan Singapura.
  • Alat pembuatan kode AI: Pengembang yang lebih suka bekerja dengan alat pengembangan lokal dan akses langsung ke kode TypeScript dan React dapat menggunakan alat eksternal seperti Claude Code untuk mengembangkan halaman generatif secara lokal dengan pendekatan code-first dan penyebaran berbasis CLI. Tersedia di seluruh dunia di cloud publik. Informasi selengkapnya: Membuat dan mengedit halaman generatif dengan alat pembuatan kode AI

Prasyarat

  • Lingkungan Power Platform harus terletak di salah satu wilayah berikut: Amerika Serikat, Inggris Raya, Australia, atau Singapura.

Buat halaman generatif di aplikasi yang diarahkan model

  1. Masuk ke Power Apps.

  2. Buat aplikasi yang diarahkan model untuk pengeditan.

  3. Di perancang aplikasi, pilih Tambahkan halaman>Jelaskan halaman.

    Pengalaman halaman generatif halaman penuh terbuka.

  4. Dalam kotak teks, ketik deskripsi tipe halaman yang ingin Anda buat. Sertakan persyaratan fungsional dan secara opsional spesifikasi UX apa pun. Misalnya, Anda dapat memasukkan Buat halaman yang menampilkan rekaman akun sebagai galeri kartu menggunakan tampilan dan nuansa modern. Masukkan nama, entityimage di bagian atas, dan situs web, email, nomor telepon. Buat galeri dapat digulir dengan menggunakan data dari tabel akun. Jika Anda ingin halaman mendukung beberapa bahasa, ikuti panduan di Melokalkan halaman generatif.

  5. Tambahkan tabel dan gambar yang sesuai dengan memilih Tambahkan data>Tambahkan tabel. Anda dapat menautkan hingga enam tabel Dataverse. Dalam tangkapan layar, tabel akun ditambahkan. Menambahkan tabel ke halaman generatif

  6. Secara opsional unggah satu atau beberapa gambar untuk memandu UI halaman yang Anda buat dengan memilih Tambahkangambar Lampirkan>. Ini bisa berupa sketsa serbet kasar atau gambar beresolusi lebih tinggi. Gambar dapat mewakili struktur atau tata letak seluruh halaman yang ingin Anda buat atau dapat berupa visual untuk bagian atau komponen tertentu yang ingin Anda mimik.

    Catatan

    Jika Anda ingin halaman yang dihasilkan menampilkan gambar tertentu, alih-alih melampirkan gambar ke perintah, Anda dapat (1) menyertakan gambar dalam tabel Datatable yang dirujuk dan meminta agen mengambil gambar dari sana, (2) menghosting gambar secara publik dan memberi agen URL, atau (3) menambahkan gambar sebagai sumber daya web dan memberi agen URL untuk sumber daya web.

  7. Anda dapat secara opsional mengaktifkan atau menonaktifkan alat Sertakan gambar (pratinjau) untuk memungkinkan agen menggunakan gambar dari pustaka terpadu yang sudah terjamin keamanannya dengan 25.000 gambar stok guna mendukung kasus penggunaan seperti gambar default/gambar pengganti, latar belakang dekoratif, blok konten statis, dan status kosong atau kesalahan yang lebih kaya. Sertakan alat gambar untuk menambahkan gambar dari pustaka gambar stok

  8. Secara opsional pilih model AI yang ingin Anda gunakan untuk menghasilkan halaman. Pilih model AI yang ingin Anda gunakan untuk menghasilkan halaman Anda

    Catatan

    GPT-4.1 saat ini adalah satu-satunya model yang tersedia untuk halaman generatif.

  9. Setelah selesai mendeskripsikan halaman, pilih Buat halaman.

Agen memulai proses build multistep yang dapat Anda amati secara real time:

  • Streaming pemikiran: Agen pertama menguraikan interpretasinya atas prompt Anda, mencantumkan persyaratan, asumsi, dan menjalankan rencana.
  • Generasi Kode: Selanjutnya, ia menulis kode dasar untuk halaman Anda berdasarkan rencana.
  • Transpilasi: Kode yang dihasilkan kemudian ditranspilasi untuk memastikan kompatibilitas dan penyajian yang tepat.
  • Penyajian akhir: Akhirnya, pengalaman pengguna yang selesai ditampilkan.

Jika pengalaman pengguna tidak ditampilkan di akhir proses ini, Anda dapat melihatnya dengan memilih tab Pratinjau .

Pengalaman pengguna halaman yang dihasilkan

Lihat kode yang dihasilkan, iterasi, dan publikasikan

Setelah membuat halaman, Anda memiliki beberapa opsi untuk memperbaiki dan menyelesaikannya:

  1. Menampilkan dan mengedit kode yang dihasilkan Pilih tab Kode untuk melihat kode yang dihasilkan oleh agen aplikasi. Lihat kode halaman generatif dan ulangi desain

    Anda dapat menyempurnakan output dengan dua cara:

    • Mengobrol secara berulang dengan agen aplikasi untuk memperbaiki kesalahan, menyesuaikan tata letak, atau menambahkan fungsionalitas.
    • Edit kode secara manual dengan memilih Edit pada tab Kode. Setelah melakukan beberapa pengeditan, Anda dapat memilih Simpan untuk menerapkan perubahan Anda sebagai iterasi baru, atau Batal untuk membuang perubahan Anda.

    Pelajari tentang metode objek dataApi yang digunakan untuk operasi data

  2. Membandingkan iterasi Setelah menyelesaikan dua atau beberapa iterasi dengan agen, Anda dapat memilih Bandingkan pada tab Kode untuk melihat kode berbeda antara perulangan saat ini dan sebelumnya.

    Catatan

    Kemampuan ini saat ini hanya tersedia dimulai dengan iterasi kedua dalam sesi saat ini.

  3. Melampirkan cuplikan layar untuk referensi cepat Dalam pengalaman obrolan, pilih Lampirkan> layar untuk menyertakan cuplikan layar pratinjau saat ini dengan interaksi Anda berikutnya dengan agen aplikasi. Cuplikan layar berguna untuk membantu menyesuaikan visual halaman. Anda dapat melampirkan gambar lain secara alternatif untuk membantu menyempurnakan visual seluruh halaman atau bagian tertentu dari halaman.

  4. Periksa masalah aksesibilitas (baru) Setelah setiap perulangan pembuatan kode, asisten Aksesibilitas di bagian bawah layar memindai kode yang dihasilkan yang menilainya sehubungan dengan aksesibilitas. Anda dapat melihat pembaruan status tingkat tinggi langsung di layar dan dapat memilih untuk membuka hasil terperinci di panel. Pilih Perbaikan otomatis untuk meneruskan pelanggaran apa pun langsung ke agen untuk mencoba mengatasinya secara otomatis.

  5. Simpan dan terbitkan Di bilah perintah, pilih Simpan untuk menghindari kehilangan kemajuan di halaman Anda. Saat Anda puas dengan halaman Anda, pilih Simpan dan Terbitkan untuk menerbitkan semua perubahan yang tertunda untuk aplikasi, termasuk halaman generatif apa pun.

Penting

Meskipun agen melakukan upaya terbaik untuk menghasilkan kode lengkap dan siap produksi, termasuk pertimbangan untuk aksesibilitas dan praktik terbaik keamanan, Anda pada akhirnya bertanggung jawab untuk memvalidasi kode. Pastikan kode yang dihasilkan memenuhi persyaratan standar dan kepatuhan organisasi Anda.

Tugas umum dengan halaman generatif

Bagian ini mencakup skenario dan tugas umum saat bekerja dengan halaman generatif di aplikasi berbasis model Anda.

Menyiapkan halaman untuk menerima parameter input

Halaman generatif dapat menerima parameter recordId, entityName, dan data, yang memungkinkan halaman tersebut menerima data kontekstual ketika diakses. Untuk mengonfigurasi halaman untuk menerima parameter, jelaskan apa yang harus diterima halaman dalam perintah Anda dan agen menghubungkan kode inisialisasi secara otomatis. Contohnya:

Set up the page to accept an account recordId. When the page loads, use these to fetch and display the corresponding account details.

Configure this page to accept a data parameter containing a custom filter object. Use it to filter the displayed records when the page loads.

Menavigasi ke halaman generatif

Anda dapat menavigasi ke halaman generatif secara terprogram menggunakan Xrm.Navigation.navigateTo, meneruskan parameter input jika halaman target disiapkan untuk menerimanya. Untuk contoh dan detail API lengkap, lihat Menavigasi ke dan dari halaman generatif menggunakan API Klien.

Menggunakan gambar tertentu dalam halaman

Ada tiga pendekatan untuk menggunakan gambar tertentu di halaman generatif Anda.

Menyimpan gambar dalam tabel Dataverse

Sertakan gambar dalam tabel Dataverse yang direferensikan oleh halaman generatif Anda, dan instruksikan agen untuk mengambil gambar dari sana. Saat membuat halaman Anda, beri tahu agen cara mendapatkan gambar yang tepat dari tabel Anda.

Build a product catalog page showing products from the Product table. Display the product image from the ProductImage column, along with the name, description, and price.

Gambar host secara eksternal dan referensi dengan URL

Simpan gambar Anda di server eksternal atau jaringan pengiriman konten (CDN) dan berikan agen URL ke gambarnya.

Display the company logo using this URL: https://example.com/images/logo.png at the top of the page.

Menambahkan gambar sebagai sumber daya web

Unggah gambar sebagai sumber daya web dalam solusi Anda dan referensikan dengan URL sumber daya webnya:

  1. Tambahkan gambar sebagai sumber daya web dalam solusi Anda.
  2. Perhatikan nama sumber daya web (misalnya, new_/images/banner.png).
  3. Referensikan dalam perintah atau kode Anda menggunakan format URL sumber daya web yang dijelaskan di sini:
Use the banner image from web resource new_/images/banner.png as the page header background.

Menambahkan halaman generatif ke solusi

Halaman generatif bersifat mengenali solusi dan dapat ditambahkan ke solusi (melalui aplikasi) untuk mempermudah perpindahan antarlingkungan. Untuk menambahkan halaman generatif ke solusi, lakukan hal berikut:

Penting

Jika halaman generatif Anda dibuat selama fase pratinjau, Anda harus memuat halaman generatif di perancang aplikasi berbasis model untuk memulai migrasi satu kali ke model data yang mendukung solusi baru. Saat halaman dimuat di perancang, Anda mengamati pesan kemajuan "Memutakhirkan halaman Anda". Jangan tutup jendela hingga migrasi selesai.

  1. Menambahkan aplikasi yang berisi halaman generatif Anda ke solusi
    • Di Power Apps, pilih Solutions di panel navigasi kiri, dan buka solusi yang diinginkan.
    • Pilih Tambahkan > Aplikasi lama > Aplikasi yang diarahkan model.
    • Pilih aplikasi yang berisi halaman generatif.
  2. Ekspor solusi (sebagai terkelola atau tidak terkelola)
    • Pastikan peta situs aplikasi disertakan dalam solusi. Jika tidak, itu harus diminta selama pemeriksaan dependensi.
    • Halaman generatif (ditampilkan sebagai UX Agent Project baris) juga diminta berdasarkan dependensinya pada peta situs.

Catatan

Periksa item ini jika tidak ada halaman generatif yang diminta selama pemeriksaan dependensi:

  • Halaman yang dibuat selama pratinjau hanya akan muncul jika telah dimigrasikan. Muat di perancang untuk memicu migrasi.
  • Jika peta situs disertakan dalam solusi dan halaman generatif Anda telah dimigrasikan, coba buat perubahan kecil pada peta situs, seperti menyusun ulang atau mengganti nama halaman, menerbitkan ulang aplikasi, lalu coba ekspor lagi.

Setelah ekspor, Anda dapat mengimpor aplikasi dan halaman generatif ke lingkungan lain. Ketika dibuka di perancang di lingkungan target, hanya prompt pertama dan kode yang dipublikasikan yang akan tersedia. Percakapan lengkap agen tidak ikut berpindah bersama halaman.

Lokalisasi halaman yang dihasilkan secara generatif

Untuk melokalisasi halaman generatif, pastikan perintah Anda mencakup item berikut:

  • Tentukan bahasa Anda. Beritahukan kepada agen bahasa mana yang Anda ingin halaman ini dukung, sebaiknya nama bahasa dan LCID.
  • Minta teks yang diterjemahkan. Minta agen untuk membuat kamus terjemahan untuk semua label dan teks yang terlihat pengguna di halaman untuk setiap bahasa.
  • Aktifkan dukungan RTL. Jika lingkungan Anda menyertakan bahasa RTL seperti Arab atau Ibrani, minta agen untuk menerapkan dukungan tata letak kanan-ke-kiri yang sesuai.
  • Gunakan pemformatan regional. Minta agen untuk memformat tanggal, angka, dan mata uang menggunakan preferensi setiap pengguna dari pengaturan pengguna Dataverse mereka, daripada menggunakan format hardcoded atau kode lokal.

Untuk panduan implementasi terperinci dan pola kode, buka instruksi pelokalan di repositori Keterampilan Power Platform.

Catatan

Entri peta situs untuk halaman generatif tidak dilokalkan secara default. Pelokalan peta situs perlu ditangani secara terpisah di perancang aplikasi.

Pembatasan

Ini adalah batasan halaman generatif saat ini:

  • Halaman Anda hanya dapat terhubung ke tabel Dataverse (hingga 6 untuk satu halaman). Tidak ada sumber data lain yang dapat digunakan.
  • Perintah Anda dapat memiliki maksimal 50.000 karakter.
  • Saat Anda membuat halaman generatif di Power Apps (make.powerapps.com), hanya Bahasa Inggris yang didukung sebagai bahasa pemicu.
  • Kolaborasi tidak didukung. Pastikan hanya satu pembuat yang mengerjakan halaman generatif pada satu waktu untuk menghindari konflik yang tidak diinginkan.
  • Hanya tipe data ini yang didukung:
    • Pilihan
    • Mata uang
    • yang terhormat
    • Tanggal dan Waktu
    • Hanya Tanggal
    • Angka Desimal
    • Angka Titik Mengambang
    • Image
    • Pencarian
    • Teks multibaris
    • Status
    • Alasan Status
    • SMS
    • Bilangan Cacah
    • Ya/Tidak
    • Pengidentifikasi Unik

Tanya jawab

Dapatkah saya mulai mendesain aplikasi saya di Perancang Rencana dan kemudian menggunakan halaman generatif?

Ya, meskipun saat ini tidak ada integrasi langsung antara paket dan halaman generatif, Anda dapat menggunakan paket untuk menentukan tabel dan aplikasi Anda, lalu beralih ke perancang aplikasi berbasis model untuk membuat halaman generatif yang diinginkan.

Apakah ada biaya atau kredit tambahan yang diperlukan untuk menggunakan halaman generatif?

Tidak, pengalaman pembuat itu untuk halaman generatif (dan paket) yang tidak memerlukan kredit pesan ataupun AI tambahan.

Jenis gambar apa yang paling cocok untuk memandu pembuatan UI?

Itu tergantung pada tujuan Anda. Jika Anda tahu persis bagaimana Anda ingin halaman akhir terlihat, sketsa yang jelas dan terperinci atau wireframe (apakah gambar tangan atau digital) paling efektif. Jika Anda hanya memiliki konsep umum dan ingin agen mengisi detailnya, sketsa papan tulis cepat atau bahkan gambar serbet dapat bekerja dengan baik.

Dapatkah saya menggunakan halaman generatif dengan aplikasi kanvas atau jenis aplikasi lainnya?

Tidak, halaman generatif saat ini hanya didukung di aplikasi yang diarahkan model.

Apakah ada cara untuk menggunakan kembali atau mengkloning halaman generatif di seluruh lingkungan?

Ya, halaman generatif adalah elemen berfokus solusi yang dapat dipindahkan di seluruh lingkungan. Hanya versi kode terakhir yang diterbitkan dan prompt pertama yang dipertahankan dengan solusi; riwayat revisi penuh tetap berada di lingkungan asli.

Bisakah saya mengedit kode yang dihasilkan secara manual?

Ya. Anda dapat mengedit kode yang dihasilkan secara manual dengan memilih Edit pada tab Kode . Perubahan Anda disimpan sebagai iterasi baru. Pilih Batal untuk membatalkan pengeditan jika Anda memilih untuk tidak menyimpannya.

Apakah kode yang dihasilkan oleh halaman generatif dijamin siap produksi dan sesuai dengan standar organisasi saya?

Tidak. Meskipun agen melakukan upaya terbaik untuk menghasilkan kode yang berkualitas tinggi dan siap untuk produksi dengan mempertimbangkan praktik terbaik untuk aksesibilitas dan keamanan, Anda bertanggung jawab untuk memvalidasi output. Selalu tinjau kode yang dihasilkan untuk memastikannya selaras dengan standar, kebijakan, dan persyaratan kepatuhan organisasi Anda.

Bagaimana cara memberikan umpan balik tentang fitur ini?

Cara terbaik untuk memberikan umpan balik tentang halaman generatif adalah dengan menggunakan tombol jempol ke atas/bawah dalam pengalaman obrolan yang tersedia setelah setiap iterasi. Kami juga sangat menyarankan Anda untuk memilih Ya di Bagikan sampel konten yang relevan dan file log tambahan sehingga kami dapat men-debug atau mencoba membuat ulang masalah apa pun yang Anda temui dengan fitur tersebut.

Bagaimana jika saya tidak melihat halaman generatif diaktifkan di lingkungan saya?

Konfirmasikan bahwa lingkungan Anda berada di salah satu wilayah yang didukung untuk pengalaman studio pembuat Power Apps: Amerika Serikat, Inggris Raya, Australia, atau Singapura. Jika wilayah Anda tidak tercantum, Anda masih dapat membuat dan mengedit halaman generatif menggunakan alat pembuatan kode AI, yang tersedia di seluruh dunia di cloud publik. Informasi selengkapnya: Membuat dan mengedit halaman generatif dengan alat pembuatan kode AI

  • Last updated on