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 atau konektor Power Platform 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.

Pilih cara membuat halaman generatif Anda

Halaman generatif mendukung dua pengalaman penulisan. Keduanya menghasilkan jenis halaman yang sama. Perbedaannya terletak pada tempat Anda membuat konten dan model AI yang digunakan untuk menghasilkan konten tersebut.

Direkomendasikan: Alat pembuatan kode AI

Gunakan alat pembuatan kode AI seperti GitHub Copilot CLI untuk membuat dan mengedit halaman generatif dari lingkungan pengembangan lokal Anda. Pendekatan ini direkomendasikan karena manfaat berikut:

• Akses ke model AI terbaru. Karena teknologi AI disediakan melalui alat yang Anda instal, Anda selalu memiliki akses ke model terdepan terbaru dan paling canggih.
• Tersedia di seluruh dunia di cloud publik – tidak terbatas pada wilayah tertentu.
• Alur kerja yang mengutamakan kode. Bekerja dengan TypeScript dan React langsung di IDE pilihan Anda, dengan npm install dan dukungan IntelliSense untuk kode yang dihasilkan.
• Buat lebih banyak dalam satu eksekusi. Satu permintaan bahasa alami dapat menghasilkan beberapa halaman, membuat tabel Dataverse pendukung, dan menempatkan semuanya di aplikasi dan solusi yang tepat.

Informasi selengkapnya: Membuat dan mengedit halaman generatif dengan alat pembuatan kode AI

Penulisan dalam browser di Power Apps

Buat halaman generatif langsung di browser di make.powerapps.com menggunakan pengalaman antarmuka pengguna percakapan. Pengalaman ini paling cocok untuk pembuat aplikasi yang lebih suka tetap menggunakan perancang Power Apps dan tidak memerlukan lingkungan pengembangan lokal. Tersedia di Amerika Serikat, Inggris Raya, Australia, dan Singapura.

Sisa artikel ini menjelaskan pengalaman dalam browser.

Prasyarat

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

Siapkan sumber data konektor (pratinjau)

Important

Dukungan untuk konektor masih dalam pratinjau. Fitur pratinjau tidak dimaksudkan untuk digunakan dalam produksi dan fungsinya mungkin terbatas.

Dukungan konektor memungkinkan halaman generatif menggunakan data di luar Dataverse melalui ekosistem konektor Power Platform. Fitur ini mendukung semua konektor Power Platform.

Sebelum Anda menambahkan sumber data yang didukung konektor ke halaman generatif:

1. Buat koneksi untuk konektor dan autentikasi.
2. Buka Solusi lalu buka Solusi Default.
3. Buat referensi koneksi yang menggunakan koneksi. Referensi koneksi secara otomatis tersedia di bawah Tambahkan data> dalam pengalaman pembuatan halaman generatif.

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>Generatif halaman.

   Dialog terbuka. Untuk membuat halaman baru, pilih Jelaskan halaman. Pengalaman halaman generatif halaman penuh terbuka.

   Note

   Dialog yang sama juga mencantumkan halaman generatif yang ada di lingkungan Anda yang dapat Anda tambahkan ke aplikasi ini. Secara default daftar difilter ke halaman Diterbitkan ; alihkan filter ke Semua jika Anda tidak melihat halaman yang Anda cari.

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.

   Tip

   Tidak yakin harus mulai dari mana? Katalog Aplikasi Cerdas menyertakan Katalog Prompt dengan templat perintah bawaan dan gambar referensi untuk pola halaman umum (galeri, papan Kanban, dasbor, dan lainnya) yang dapat Anda gunakan sebagai titik awal.

5. Tambahkan sumber data dan gambar yang sesuai:

   • Untuk menggunakan data Dataverse, pilih Tambahkan data>Tambahkan tabel. Anda dapat menautkan hingga enam tabel Dataverse. Dalam cuplikan layar berikut, tabel akun ditambahkan.
   • Untuk menggunakan data dari konektor Power Platform (pratinjau), pertama-tama siapkan sumber data konektor. Lalu pilih TambahkanKonektordata>, pilih referensi koneksi, dan pilih data konektor yang harus digunakan halaman. Di perintah Anda, jelaskan bagaimana Anda ingin halaman menggunakan data yang dipilih.

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.

   Note

   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.

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

   Note

   GPT-4.1 saat ini adalah satu-satunya model yang tersedia dalam pengalaman pembuat Power Apps untuk halaman generatif.

   Tip

   Ingin menggunakan model AI terbaru? Anda dapat melakukannya dengan membuat dan mengedit halaman generatif dengan alat pembuatan kode AI, yang memberi Anda akses ke model frontier yang lebih baru.

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 .

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.

   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.

   Note

   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.

Important

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.

Menyematkan halaman generatif dalam formulir

Anda dapat menambahkan halaman generatif ke formulir aplikasi berbasis model sehingga muncul di dalam bagian atau tab. Pertama, buat dan terbitkan halaman generatif yang dirancang untuk formulir dan siapkan untuk menerima recordId parameter input.

Untuk menambahkan halaman ke formulir:

1. Buka formulir di perancang formulir.
2. Di panel kiri, pilih Komponen, lalu perluas Tampilan.
3. Pilih Halaman generatif.
4. Pilih halaman generatif yang ingin Anda sematkan.
5. Secara opsional, berikan nilai untuk input statis tambahan yang diterima halaman.
6. Simpan dan publikasikan formulir.

Saat pengguna membuka rekaman, formulir secara otomatis meneruskan ID rekaman saat ini ke halaman generatif sebagai recordId input. Anda tidak perlu mengonfigurasi nilai statis untuk recordId.

Masuk 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

Gunakan salah satu dari tiga pendekatan ini 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:

Important

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.

Note

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 perintah 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.

Note

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

Keterbatasan

Ini adalah batasan halaman generatif saat ini:

• Anda dapat menautkan hingga enam tabel Dataverse ke satu halaman.
• Sumber data yang didukung adalah tabel Dataverse dan (pratinjau) konektor Power Platform.
• Perintah Anda dapat memiliki maksimal 50.000 karakter.
• Saat Anda membuat halaman generatif di Power Apps (make.powerapps.com), hanya bahasa Inggris AS yang merupakan bahasa pemicu yang didukung.
• 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
  • Customer
  • Tanggal dan Waktu
  • Hanya Tanggal
  • Bilangan Desimal
  • Angka Titik Mengambang
  • Gambar
  • Pencarian
  • Teks multibaris
  • Status
  • Alasan Status
  • Teks
  • Bilangan Bulat
  • Ya/Tidak
  • Pengidentifikasi Unik

Tanya jawab umum

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?

Yes. 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

Artikel terkait

• Membuat dan mengedit halaman generatif dengan alat pembuatan kode AI
• Tanya Jawab Umum tentang halaman generatif di aplikasi yang diarahkan model
• Intelligent Apps Catalog (templat perintah untuk halaman generatif)
• Ketentuan hukum