Bagikan melalui

Mulai menggunakan plugin Power Pages untuk GitHub Copilot CLI dan Claude Code (pratinjau)

Plugin Power Pages untuk GitHub Copilot CLI dan Claude Code menyediakan alur kerja yang dibantu AI untuk membuat, menyebarkan, dan mengelola aplikasi single-page (SPA) modern situs di Power Pages. Alih-alih membuat perancah proyek secara manual, menulis kode API boilerplate, dan mengonfigurasi izin, jelaskan apa yang Anda inginkan dalam bahasa alami, dan plugin menangani implementasi.

Plugin mendukung siklus hidup pengembangan situs penuh melalui keterampilan percakapan, dari perancah situs baru hingga menyebarkannya, menyiapkan model data Dataverse, dan mengonfigurasi autentikasi.

Penting

  • Fitur ini sedang dalam tahap pratinjau.
  • Fitur pratinjau tidak dibuat untuk penggunaan produksi dan mungkin memiliki fungsionalitas yang dibatasi. Fitur-fitur ini tersedia sebelum rilis resmi sehingga pelanggan bisa mendapatkan access lebih awal dan memberikan umpan balik.
  • Meninjau proposal agen sebelum menyetujui

Prasyarat

Sebelum memulai, verifikasi bahwa Anda memiliki perangkat lunak dan izin yang diperlukan.

Persyaratan perangkat lunak

Komponen Versi minimum Informasi selengkapnya
Node.js 18.0 atau yang lebih baru Unduh Node.js
Power Platform CLI (PAC CLI) 2.6.3 atau yang lebih baru (diperlukan untuk logika server) Menginstal PAC CLI
Azure CLI Latest Install Azure CLI
GitHub Copilot CLI atau Kode Claude Latest GitHub Copilot CLI atau Claude Code
ekstensi Visual Studio Code dan Power Platform Tools (Opsional) Latest Unduh Visual Studio Code dan Instal Alat Power Platform

Anda juga perlu:

  • Lingkungan Power Platform dengan Power Pages diaktifkan.
  • Sesi PAC CLI terautentikasi yang tersambung ke lingkungan target Anda. Jalankan pac auth create jika Anda belum tersambung.
  • Sesi Azure CLI masuk ke penyewa yang sama. Jalankan az login untuk mengautentikasi.

Verifikasi autentikasi:

Verifikasi bahwa Anda diautentikasi dengan menggunakan pac auth list perintah .

pac auth list           # Should show authenticated profile

Jika Anda tidak diautentikasi, jalankan perintah ini:

pac auth create --environment <Instance url>        # Authenticate to Power Platform

Petunjuk / Saran

Untuk mendapatkan URL instans, buka beranda Power Pages, pilih ikon Settings di sudut kanan atas, lalu pilih detail Sesi.

Menginstal plugin

Instal plugin Power Pages dari marketplace. Jika Anda menggunakan CLI GitHub Copilot, lihat dokumentasi ekstensi CLI Copilot untuk langkah-langkah penginstalan yang setara. Perintah berikut menggunakan sintaks Kode Claude.

Jalankan alat penginstal untuk menyiapkan semua plugin dengan pembaruan otomatis diaktifkan:

Windows (PowerShell):

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

macOS/Linux/Windows (cmd):

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

Penginstal secara otomatis:

  • Menginstal CLI pac jika belum diinstal.
  • Mendeteksi alat yang tersedia, seperti Claude Code dan GitHub Copilot CLI.
  • Mendaftarkan marketplace plugin dan menginstal semua plugin yang tercantum.
  • Mengaktifkan pembaruan otomatis sehingga plugin tetap terkini.

Setelah penginstalan, restart Claude Code atau GitHub Copilot CLI untuk mengakses kemampuan plugin sebagai perintah slash di sesi asisten Anda.

Menginstal dari marketplace

  1. Buka Kode Claude di terminal Anda.

  2. Tambahkan marketplace Microsoft:

    /plugin marketplace add microsoft/power-platform-skills

  3. Instalasi plugin Power Pages:

    /plugin install power-pages@power-platform-skills

Setelah Anda menginstal plugin, mulai ulang Claude Code atau GitHub Copilot CLI untuk mengakses fitur plugin sebagai perintah slash di sesi agen Anda.

Petunjuk / Saran

Untuk menerima pembaruan secara otomatis ke marketplace dan keterampilan, aktifkan pembaruan otomatis. /plugin Gunakan perintah, buka Marketplace, pilih marketplace, dan aktifkan pembaruan otomatis.

Gambaran umum keterampilan

Plugin ini menyediakan keterampilan yang mencakup siklus hidup penuh situs Power Pages. Panggil setiap keterampilan dengan cara percakapan, baik sebagai perintah garis miring atau dengan menjelaskan tindakan yang Anda ingin lakukan.

Keterampilan Command Apa fungsinya
Buat situs /create-site Merancang kerangka situs, menerapkan arahan desain Anda, dan membangun halaman dan komponen
Meluncurkan situs /deploy-site Membangun proyek dan mengunggahnya ke Power Pages dengan menggunakan PAC CLI
Mengaktifkan situs /activate-site Menyediakan rekaman situs web dan menetapkan URL publik
Menyiapkan model data /setup-datamodel Membuat tabel, kolom, dan hubungan Dataverse
Menambahkan data sampel (opsional) /add-sample-data Mengisi tabel Dataverse dengan rekaman pengujian realistis
Mengintegrasikan API Web /integrate-webapi Menghasilkan kode klien API yang diketik, layanan, dan izin tabel
Mengonfigurasikan autentikasi /setup-auth Menambahkan fungsionalitas masuk dan keluar dan access control berbasis peran
Membuat peran web /create-webroles Menghasilkan file YAML peran web untuk manajemen akses pengguna
Menambahkan logika server /add-server-logic Menghasilkan titik akhir JavaScript sisi server yang aman untuk validasi, panggilan API eksternal, manajemen rahasia, dan operasi data
Tambahkan aliran cloud /add-cloud-flow Mengintegrasikan alur cloud Power Automate yang ada ke situs Anda untuk alur kerja persetujuan, pemberitahuan, dan otomatisasi terjadwal
Mengintegrasikan backend /integrate-backend Menganalisis prototipe Anda, menentukan pendekatan yang tepat (API Web, Logika Server, atau alur cloud) untuk setiap fitur, dan mengatur urutan build lengkap
Tambahkan SEO /add-seo Menghasilkan robots.txt, sitemap.xml, dan tag meta

Alur kerja umum

Alur kerja end-to-end umum mengikuti urutan ini:

  1. /create-site : Rangka dasar, desain, dan membangun halaman
  2. /deploy-site : Unggah ke lingkungan Power Pages Anda
  3. /activate-site : Menyiapkan URL publik
  4. /setup-datamodel : Membuat tabel Dataverse
  5. /add-sample-data : Mengisi tabel dengan rekaman pengujian
  6. /integrate-webapi : Hasilkan kode klien API dan konfigurasikan izin
  7. /create-webroles : Tentukan peran akses
  8. /setup-auth : Menambahkan UI masuk, keluar, dan berbasis peran
  9. /add-server-logic : Menambahkan titik akhir sisi server yang aman
  10. /add-cloud-flow : Mengintegrasikan alur Power Automate yang ada
  11. /add-seo : Pengoptimalan mesin pencari
  12. /deploy-site : Dorong perubahan akhir langsung

Petunjuk / Saran

  • Anda tidak perlu mengikuti urutan yang tepat ini. Setiap keterampilan memeriksa prasyaratnya sendiri dan memberi tahu Anda jika ada sesuatu yang hilang. Misalnya, Anda dapat menjalankan /setup-auth sebelum /integrate-webapi jika situs Anda memerlukan autentikasi terlebih dahulu.
  • Jika Anda tidak yakin pendekatan mana yang akan digunakan untuk setiap fitur, jalankan /integrate-backend alih-alih langkah 4 hingga 10 satu per satu. Ini menganalisis prototipe Anda, menentukan apakah setiap fitur membutuhkan API Web, Logika Server, atau aliran cloud, dan mengatur keterampilan dalam urutan yang benar.

Membangun situs Power Pages Anda

Panduan langkah-demi-langkah ini mencakup siklus hidup penuh membangun dan meluncurkan situs Power Pages dengan plugin, mulai dari pengaturan awal (scaffolding) hingga penyebaran. Setiap langkah menjelaskan apa yang Anda katakan dan apa yang dilakukan plugin sebagai respons.

Langkah 1: Buat situs Anda

Jelaskan situs yang Anda inginkan dalam bahasa alami: untuk apa, halaman apa yang dibutuhkannya, dan preferensi desain apa pun seperti skema warna, gaya tata letak, atau font. Jalankan /create-site atau cukup jelaskan situs Anda dan plugin mengenali niatnya.

Jika Anda tidak menentukan kerangka kerja, plugin meminta Anda untuk memilih satu (React, Vue, Angular, atau Astro), maka:

  1. Menginisiasi proyek berdasarkan templat dan secara otomatis menerapkan nama situs, warna, dan token desain Anda.
  2. Menginstal dependensi, memulai server pengembangan, dan membuka pratinjau browser langsung.
  3. Membangun setiap halaman, komponen, dan rute yang Anda minta dengan gambar yang relevan.
  4. Membuat commit git pada tonggak penting sehingga Anda memiliki riwayat putar kembali bawaan.

Langkah 2: Sebarkan situs Anda

Jalankan /deploy-site untuk mengunggah situs Anda ke Power Pages. Plugin:

  1. Memverifikasi bahwa PAC CLI diinstal dan sesi autentikasi Anda aktif.
  2. Mengonfirmasi lingkungan target dengan Anda sebelum melanjutkan.
  3. Menjalankan build produksi dan mengunggah output yang dikompilasi.
  4. Membuat direktori artefak penyebaran jika belum ada.

Nota

Jika lingkungan Anda memblokir lampiran file tertentu, plugin mendeteksi masalah dan memberikan instruksi untuk mengatasinya.

Langkah 3: Aktifkan situs Anda

Jalankan /activate-site untuk membuat situs dapat diakses secara publik. Plugin:

  1. Menyarankan subdomain berdasarkan nama situs Anda dan memungkinkan Anda mengkustomisasinya.
  2. Menyediakan rekaman situs web melalui API Power Platform.
  3. Melakukan polling hingga situs ditayangkan dan menghasilkan URL publik.

Pada titik ini, Anda memiliki situs kerja di URL publik. Langkah-langkah yang tersisa menambahkan data, autentikasi, dan SEO. Lewati langkah apa pun yang tidak berlaku untuk situs Anda.

Langkah 4: Siapkan model data Anda

Jalankan /setup-datamodel untuk membuat tabel Dataverse yang dibutuhkan situs Anda. Jika Anda sudah memiliki diagram ER atau skema tertentu, berikan secara langsung alih-alih meminta agen menganalisis kode Anda.

Plugin ini menelurkan agen Arsitek Model Data yang:

  1. Menganalisis kode situs Anda untuk menentukan data apa yang diperlukan halaman dan komponen.
  2. Mengkueri lingkungan Dataverse Anda untuk tabel yang sudah ada untuk menghindari duplikat.
  3. Mengusulkan model data dengan tabel, kolom, jenis data, dan hubungan, yang divisualisasikan sebagai diagram ER.

Anda meninjau dan menyetujui proposal. Plugin tidak membuat apa pun sampai Anda mengonfirmasi. Setelah disetujui, plugin membuat tabel dan kolom melalui panggilan API dan menyimpan file manifes yang digunakan Langkah 5 dan 6.

Langkah 5: Tambahkan data sampel (Opsional)

Jalankan /add-sample-data untuk mengisi tabel Anda dengan rekaman pengujian. Langkah ini memerlukan model data dari Langkah 4.

Plugin melakukan tindakan berikut:

  1. Membaca manifest untuk memahami tabel, kolom, dan relasi Anda.
  2. Menghasilkan nilai yang sesuai secara kontekstual untuk setiap jenis kolom, seperti email realistis, tanggal yang masuk akal, dan jumlah mata uang yang diformat.
  3. Menyisipkan rekaman dalam urutan dependensi (tabel induk sebelum tabel anak) dan menyegarkan token autentikasi secara otomatis selama penyisipan massal.

Langkah 6: Integrasikan dengan Dataverse Web API

Jalankan /integrate-webapi untuk mengganti data tiruan dengan kueri Dataverse secara langsung. Langkah ini memerlukan model data dari Langkah 4.

Plugin melakukan tindakan berikut:

  1. Memindai basis kode Anda untuk komponen perangkat lunak yang menggunakan data tiruan, panggilan pengambilan data sementara, atau array yang dikodekan secara tetap. Ini memetakan komponen ini ke tabel Dataverse Anda.
  2. Menelurkan agen Integrasi API Web untuk setiap tabel yang menghasilkan:
    • Klien API terpadu dengan manajemen token anti-pemalsuan dan logika percobaan ulang.
    • Jenis entitas TypeScript dan pemeta domain.
    • Lapisan layanan CRUD.
    • Pola spesifik framework seperti React hooks, Vue composables, atau Angular services.
  3. Menciptakan agen Permissions Architect yang mengusulkan izin pada tabel dan pengaturan situs.

Anda meninjau dan menyetujui proposal perizinan. Plugin tidak membuat file konfigurasi apa pun sampai Anda mengonfirmasi.

Langkah 7: Membuat peran web

Jalankan /create-webroles untuk menentukan peran akses pengguna. Plugin:

  1. Memeriksa lingkungan Anda untuk peran web yang sudah ada guna menghindari duplikasi.
  2. Menghasilkan definisi peran dengan pengidentifikasi unik.
  3. Memberlakukan bahwa setiap situs memiliki paling banyak satu peran anonim dan satu peran yang diautentikasi.

Langkah 8: Menyiapkan autentikasi

Jalankan /setup-auth untuk menambahkan fungsionalitas masuk dan keluar. Plugin:

  1. Menghasilkan layanan autentikasi untuk alur Microsoft Entra ID dengan manajemen token anti-pemalsuan.
  2. Membuat komponen UI masuk/keluar yang terintegrasi dengan tata letak situs Anda.
  3. Menambahkan utilitas access control berbasis peran yang menampilkan atau menyembunyikan elemen UI berdasarkan peran web pengguna.
  4. Menggunakan pola framework secara konsisten (React hooks, Vue composables, atau Angular services).

Langkah 9: Menambahkan logika server

Jalankan /add-server-logic untuk menambahkan titik akhir sisi server yang aman ke situs Anda. Gunakan Logika Server saat situs Anda memerlukan logika yang tidak dapat berjalan di browser, seperti panggilan API eksternal, validasi sisi server, manajemen rahasia, atau operasi data lintas entitas.

Penting

Dukungan logika server memerlukan PAC CLI versi 2.6.3 atau yang lebih baru. Gunakan skrip penginstalan cepat untuk memperbarui ke versi terbaru.

Jelaskan apa yang Anda butuhkan dalam bahasa biasa, dan plugin:

  1. Menelurkan agen Arsitek Logika Server yang menganalisis kasus penggunaan Anda dan mengklasifikasikan kompleksitasnya.
  2. Mengusulkan desain titik akhir, konfigurasi keamanan, dan izin tabel yang diperlukan untuk tinjauan Anda.
  3. Setelah Anda menyetujui, menghasilkan titik akhir sisi server JavaScript di /_api/serverlogics/<name>.
  4. Membuat layanan sisi klien yang diketik untuk memanggil titik akhir dari komponen Anda.
  5. Memperbarui komponen Anda untuk memanggil layanan baru.
  6. Mengonfigurasi penetapan peran web dan izin tabel untuk titik akhir.

Anda meninjau dan menyetujui proposal. Tidak ada kode yang dihasilkan sampai Anda mengonfirmasi.

Kasus penggunaan umum:

Nota

Jalankan /add-server-logic sekali per kasus penggunaan. Misalnya, jika situs Anda memerlukan titik akhir validasi inventaris dan titik akhir pencarian global, jalankan keterampilan dua kali.

Langkah 10: Mengintegrasikan alur cloud

Jalankan /add-cloud-flow untuk mengintegrasikan alur cloud Power Automate yang ada ke situs Anda. Keterampilan ini menghubungkan situs Power Pages Anda ke alur yang sudah Anda buat di Power Automate. Ini tidak membuat alur cloud baru.

Plugin:

  1. Mendaftarkan alur cloud yang sudah ada dengan situs Anda.
  2. Menghasilkan kode sisi klien untuk memicu alur dari halaman Anda.
  3. Menangani status alur kerja asinkron dan pola panggilan balik.
  4. Menghubungkan pertukaran data antara halaman dan alur.

Gunakan /add-cloud-flow untuk alur kerja persetujuan, pemberitahuan email, pekerjaan terjadwal, dan otomatisasi berbasis peristiwa yang lebih baik ditangani oleh Power Automate daripada oleh titik akhir sisi server.

Alternatif: Gunakan /integrate-backend untuk merencanakan lapisan layanan lengkap

Jika Anda tidak yakin fitur mana yang memerlukan Api Web, Logika Server, atau alur cloud, jalankan /integrate-backend alih-alih menjalankan langkah 4 hingga 10 secara manual. Kemampuan ini bertindak sebagai orkestrator yang:

  1. Menganalisis prototipe Anda untuk mengidentifikasi semua fitur yang memerlukan lapisan layanan.
  2. Mengklasifikasikan setiap fitur ke dalam pendekatan yang tepat: API Web untuk CRUD standar, Logika Server untuk validasi sisi server dan API eksternal, atau alur cloud untuk alur kerja persetujuan dan otomatisasi.
  3. Mengusulkan rencana eksekusi berurutan dengan semua keterampilan, dependensi, dan konfigurasi.
  4. Setelah Anda menyetujui, mengatur keterampilan dalam urutan yang benar.

Rencana ini tetap, dapat dilanjutkan, dan dapat diedit. Hentikan setelah setiap langkah untuk meninjau kode yang dihasilkan atau menguji situs, dan lanjutkan dari tempat terakhir Anda dengan menjalankan /integrate-backend lagi.

Langkah 11: Tambahkan SEO

Jalankan /add-seo untuk mengoptimalkan situs Anda untuk mesin pencari. Plugin:

  1. Menemukan rute dari konfigurasi router kerangka kerja Anda.
  2. Menghasilkan arahan mesin pencari dan peta situs untuk semua rute yang ditemukan.
  3. Menambahkan tag meta: viewport, pengkodean karakter, deskripsi, Open Graph, Twitter Card, dan referensi ikon.

Langkah 12: Sebarkan situs akhir

Jika Anda melakukan langkah-langkah opsional, jalankan /deploy-site lagi untuk mendorong perubahan secara langsung. Plugin menjalankan build produksi dan mengunggah situs bersama dengan semua artefak penyebaran (izin tabel, pengaturan situs, peran web, file logika server) ke lingkungan Power Pages Anda.

Memverifikasi situs Anda

Setelah Anda menyelesaikan keterampilan, verifikasi situs Power Pages Anda berfungsi dengan benar.

  1. Buka Power Pages.
  2. Temukan situs Anda di daftar Situs aktif .
  3. Pratinjau situs Anda di desktop dengan menggunakan opsi Pratinjau .
  4. Uji fungsionalitas.

Tips dan praktik terbaik

Tips berikut membantu Anda mendapatkan hasil maksimal dari plugin dan agen pengkodian AI saat membangun situs Power Pages.

Periksa output terminal dari alat yang hilang pada saat pertama kali dijalankan

Plugin menyediakan kemampuan dan alur kerja, tetapi agen pengodean AI - GitHub Copilot CLI atau Claude Code - menjalankan perintah aktual di komputer Anda. Saat Anda menggunakan alat-alat ini untuk pertama kalinya, perhatikan output terminal dengan cermat. Agen pengodian AI menjalankan perintah dan skrip di belakang layar, dan beberapa perintah ini bergantung pada alat yang mungkin tidak diinstal pada komputer Anda. Jika langkah gagal, output terminal biasanya menunjukkan alat atau perintah mana yang tidak dapat ditemukannya.

Jika Anda melihat kesalahan seperti command not found atau is not recognized, instal alat yang hilang dan picu ulang alur kerja. Agen pengodean AI melanjutkan dari tempat terakhir setelah alat tersedia.

Meninjau proposal agen sebelum menyetujui

Agen Arsitek Model Data dan Arsitek Izin API Web menyajikan proposal sebelum membuat perubahan. Luangkan waktu untuk meninjau proposal ini dengan hati-hati.

  • Proposal model data: Periksa apakah nama tabel, jenis kolom, dan hubungan cocok dengan kebutuhan bisnis Anda. Jauh lebih mudah untuk menyesuaikan proposal daripada mengganti nama kolom setelah data sudah disisipkan.
  • Proposal izin: Verifikasi bahwa setiap peran memiliki tingkat akses yang benar (membuat, membaca, memperbarui, menghapus) untuk setiap tabel. Izin tabel yang terlalu permisif adalah risiko keamanan umum.

Tempelkan kesalahan langsung dengan konteks

Ketika terjadi kegagalan, apakah itu kesalahan pada build, kegagalan penyebaran, atau pengecualian runtime di browser, salinlah output kesalahan penuh. Tempelkan bersama dengan deskripsi singkat tentang apa yang Anda lakukan. Semakin banyak konteks yang Anda berikan, semakin cepat perbaikannya.

Contoh: Kesalahan build

I ran npm run build and got this error. Fix it.

error TS2339: Property 'jobTitle' does not exist on type 'JobPosting'.

  src/components/JobCard.tsx:24:31
    24   <Text>{posting.jobTitle}</Text>

Petunjuk / Saran

Sertakan nama file, perintah yang Anda jalankan, dan apa yang Anda harapkan terjadi. Plugin menggunakan konteks ini untuk menemukan masalah dan menerapkan perbaikan yang ditargetkan daripada menebak.

Bagikan kesalahan API Web dengan URL permintaan lengkap

Masalah umum setelah implementasi adalah error 403 dari Power Pages Web API ketika kolom tidak diizinkan untuk akses API. Saat Anda mengalami kesalahan ini, tempelkan URL API lengkap dan respons kesalahan JSON lengkap. Pesan kesalahan memberi tahu Anda tabel dan kolom mana yang perlu diperbaiki, dan plugin dapat memperbarui izin tabel YAML dan pengaturan situs untuk Anda.

Contoh: Kolom tidak diaktifkan untuk API Web (403)

I'm getting a 403 error when the documents page loads. Here's the API call and the response. Fix the issue so this API works.

URL:
https://my-site.powerappsportals.com/_api/crd50_documents?$select=crd50_documentid,crd50_name,crd50_documentcategory,crd50_filetype,crd50_filesize,crd50_updateddate,crd50_description,_crd50_propertyid_value

Response:
{
  "error": {
    "code": "90040101",
    "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
    "innererror": {
      "code": "90040101",
      "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
      "type": "AttributePermissionIsMissing"
    }
  }
}

Kesalahan ini (AttributePermissionIsMissing) berarti kolom _crd50_propertyid_value pencarian ada di tabel Dataverse tetapi tidak tercantum dalam konfigurasi izin tabel untuk API Web. Plugin mengatasi kesalahan ini dengan cara menambahkan kolom yang hilang ke YAML izin tabel di .powerpages-site/table-permissions/ dan menerapkan ulang.

Nota

Power Pages Web API mengharuskan setiap kolom yang dikembalikan oleh panggilan API untuk secara eksplisit tercantum dalam izin tabel. Properti pencarian (diawali dengan _ dan diakhiri dengan _value) mudah dilewatkan karena nama API mereka berbeda dari nama logis kolom di Dataverse. Saat Anda melihat AttributePermissionIsMissing, selalu pastikan untuk menambahkan kolom tersebut ke izin tabel. Jangan ubah kueri API.

Jadilah spesifik tentang apa yang Anda inginkan

Permintaan yang samar-samar menghasilkan hasil yang tidak jelas. Beri tahu plugin apa yang Anda butuhkan, termasuk preferensi tata letak, bidang data, dan perilaku.

Daripada Coba
Buat halaman untuk lowongan pekerjaan "Buat halaman daftar pekerjaan dengan bilah pencarian di bagian atas, chip filter untuk lokasi dan departemen, dan kisi kartu yang menunjukkan judul, perusahaan, rentang gaji, dan tanggal yang diposting untuk setiap pekerjaan"
"Perbaiki gaya" Tumpukan kartu pekerjaan berada secara vertikal di desktop. Buat tampilannya dalam kisi tiga kolom dengan celah 16px pada layar yang lebih lebar dari 768px"
"Tambahkan beberapa data" "Tambahkan 20 sampel posting pekerjaan di empat departemen (Teknik, Pemasaran, Penjualan, SDM) dengan judul realistis, rentang gaji antara $ 60k - $ 180k, dan tanggal yang diposting dalam 30 hari terakhir"
"Siapkan API" "Sambungkan komponen JobListings ke tabel cr_jobposting Dataverse. Ganti array hardcoded dengan panggilan API nyata yang mengambil data nama jabatan, departemen, gaji, dan tanggal posting"

Menggunakan cuplikan layar untuk masalah visual

Ketika situs tidak terlihat tepat di browser, ambil cuplikan layar dan tempelkan langsung ke percakapan atau berikan jalur file. Konteks visual membantu mengidentifikasi masalah tata letak, penspasian, dan gaya yang sulit dijelaskan dalam teks.

The header overlaps the hero section on mobile. Here's a screenshot:

[paste screenshot or provide path to screenshot file]

Fix the header so it doesn't overlap. It should be a fixed header with the content starting below it.

Iterasi dalam langkah-langkah kecil

Alih-alih menjelaskan seluruh situs dalam satu perintah, bangun secara bertahap. Mulailah dengan struktur dan tata letak, lalu tambahkan fitur satu per satu. Pendekatan ini memberi Anda kesempatan untuk meninjau dan membenahi kursus di setiap langkah.

Step 1: /create-site → Get the basic scaffold and layout right
Step 2: "Add a hero section to the home page with a search bar"
Step 3: "Add a job listings page with filter and sort"
Step 4: "Add a job detail page that shows full description"
Step 5: /setup-datamodel → Create tables now that you know the data shape
Step 6: /integrate-webapi → Wire up real data

Petunjuk / Saran

Setelah setiap langkah, periksa pratinjau browser. Jika ada yang tidak beres, perbaiki sebelum melanjutkan. Lebih mudah untuk memperbaiki masalah dalam satu komponen daripada mengurai masalah di seluruh situs.

Minta penjelasan sebelum menyetujui

Ketika Anda tidak yakin tentang perubahan yang diusulkan, terutama untuk izin, modifikasi model data, atau konfigurasi autentikasi, minta plugin untuk menjelaskan apa yang direncanakan dan mengapa sebelum menyetujui.

Before you create the table permissions, explain what access each role will have and why. I want to understand the security implications.

Menjalankan keterampilan secara independen untuk pulih dari masalah

Jika suatu keterampilan gagal di tengah jalan, Anda tidak perlu memulai kembali. Setiap kemampuan berjalan secara independen dan dapat melanjutkan dari titik terakhirnya. Misalnya, jika /integrate-webapi gagal pada tabel ketiga, Anda dapat menjalankannya kembali dan mendeteksi pekerjaan yang sudah selesai.

/integrate-webapi failed while processing the cr_applications table. Here's the error: [paste error]. Resume the integration from where it stopped.

Konten terkait

  • Last updated on