lwc recipes

Resep Komponen Web Lightning

Kumpulan contoh kode yang mudah dicerna untuk Komponen Web Lightning. Setiap resep menunjukkan cara membuat kode tugas tertentu dalam baris kode sesedikit mungkin sambil mengikuti praktik terbaik. Tautan "Lihat Sumber" membawa Anda langsung ke kode di GitHub. Dari "Hello World" hingga akses data dan perpustakaan pihak ketiga, ada resepnya!

Pelajari lebih lanjut tentang aplikasi ini dengan menyelesaikan Mulai Cepat: Jelajahi proyek Trailhead Aplikasi Sampel Resep LWC atau dengan menonton video presentasi singkat ini.

Aplikasi sampel ini dirancang untuk berjalan di Platform Salesforce. Jika Anda ingin merasakan Lightning Web Components di platform apa pun, silakan kunjungi https://lwc.dev, dan coba aplikasi contoh Lightning Web Components kami, LWC Recipes OSS.

Daftar isi

• Menginstal aplikasi menggunakan Scratch Org: Ini adalah opsi instalasi yang disarankan. Gunakan opsi ini jika Anda seorang pengembang yang ingin merasakan aplikasi dan kodenya.

• Menginstal aplikasi menggunakan Paket Tidak Terkunci: Opsi ini memungkinkan siapa saja untuk merasakan aplikasi sampel tanpa menginstal lingkungan pengembangan lokal.

• Memasang aplikasi menggunakan Organisasi Edisi Pengembang atau Trailhead Playground: Berguna saat menangani Lencana Trailhead atau jika Anda ingin aplikasi diterapkan ke lingkungan yang lebih permanen daripada organisasi Scratch.

• Petunjuk pemasangan opsional

• Tur kode

Menginstal aplikasi menggunakan Scratch Org

1. Siapkan lingkungan Anda. Ikuti langkah-langkah dalam proyek Mulai Cepat: Lightning Web Components Trailhead. Langkah-langkahnya meliputi:

• Aktifkan Dev Hub di Trailhead Playground Anda

• Instal Salesforce CLI

• Instal Kode Visual Studio

• Instal ekstensi Visual Studio Code Salesforce, termasuk ekstensi Lightning Web Components

2. Jika Anda belum melakukannya, otorisasikan organisasi hub Anda dan berikan alias ( myhuborg pada perintah di bawah):

   sf org login web -d -a myhuborg

3. Kloning repositori lwc-recipes:

   git clone https://github.com/trailheadapps/lwc-recipes
   cd lwc-recipes

4. Buat organisasi awal dan berikan alias ( lwc-recipes pada perintah di bawah):

   sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes

5. Dorong aplikasi ke organisasi awal Anda:

   sf project deploy start

6. Tetapkan izin resep yang disetel ke pengguna default:

   sf org assign permset -n recipes

7. Impor data sampel:

   sf data tree import -p ./data/data-plan.json

8. Buka organisasi awal:

   sf org open

9. Di Pengaturan , di bawah Tema dan Pencitraan Merek , aktifkan tema Recipes Lite atau Recipes Blue .

10. Di Peluncur Aplikasi, klik Lihat Semua lalu pilih aplikasi LWC .

Menginstal aplikasi menggunakan Paket Tidak Terkunci

Ikuti rangkaian petunjuk ini jika Anda ingin menerapkan aplikasi ke lingkungan yang lebih permanen daripada organisasi Scratch atau jika Anda tidak ingin menginstal alat pengembangan lokal. Anda dapat menggunakan organisasi yang tidak dilacak sumbernya seperti Organisasi Edisi Pengembang gratis atau Trailhead Playground.

Pastikan untuk memulai dari lingkungan baru untuk menghindari konflik dengan pekerjaan sebelumnya yang mungkin pernah Anda lakukan.

1. Masuk ke organisasi Anda

2. Klik tautan ini untuk menginstal paket Resep yang tidak terkunci di organisasi Anda.

3. Pilih Instal untuk Semua Pengguna

4. Impor data Akun dan Kontak:

• Klik di sini untuk mengakses file Accounts-Contacts.csv . Klik kanan pada jendela browser dan simpan file sebagai Accounts-Contacts.csv .

• Di Penyiapan , ketik Impor Data di kotak Temukan Cepat dan klik Panduan Impor Data .

• Klik Luncurkan Wizard .

• Klik Akun dan Kontak , lalu klik Tambahkan Catatan Baru .

• Seret file Accounts-Contacts.csv yang baru saja Anda simpan ke area unggah.

• Klik Berikutnya , Berikutnya , dan Mulai Impor .

5. Jika Anda mencoba Mulai Cepat di Trailhead, langkah ini diperlukan, namun jika tidak, lewati:

• Buka Pengaturan > Pengguna > Kumpulan Izin .

• Klik resep .

• Klik Kelola Tugas .

• Periksa pengguna Anda dan klik Tambahkan Tugas .

6. Di Pengaturan , di bawah Tema dan Pencitraan Merek , aktifkan tema Recipes Lite atau Recipes Blue .

7. Di Peluncur Aplikasi, klik Lihat Semua lalu pilih aplikasi Resep LWC .

Menginstal Aplikasi menggunakan Organisasi Edisi Pengembang atau Trailhead Playground

Ikuti rangkaian petunjuk ini jika Anda ingin menerapkan aplikasi ke lingkungan yang lebih permanen daripada organisasi Scratch. Ini termasuk organisasi yang tidak dilacak sumbernya seperti Organisasi Edisi Pengembang gratis atau Trailhead Playground.

Pastikan untuk memulai dari lingkungan baru untuk menghindari konflik dengan pekerjaan sebelumnya yang mungkin telah Anda lakukan.

1. Kloning repositori ini:

   git clone https://github.com/trailheadapps/lwc-recipes
   cd lwc-recipes

2. Otorisasi Trailhead Playground atau organisasi Pengembang Anda dan berikan alias ( mydevorg pada perintah di bawah):

   sf org login web -s -a mydevorg

3. Jalankan perintah ini di terminal untuk menyebarkan aplikasi.

   sf project deploy start -d force-app

4. Tetapkan izin recipes yang disetel ke pengguna default.

   sf org assign permset -n recipes

5. Impor beberapa data sampel.

   sf data tree import -p ./data/data-plan.json

6. Jika organisasi Anda belum terbuka, buka sekarang:

   sf org open -o mydevorg

7. Di Pengaturan , di bawah Tema dan Pencitraan Merek , aktifkan tema Recipes Lite atau Recipes Blue .

8. Di Peluncur Aplikasi, pilih aplikasi LWC .

Petunjuk Instalasi Opsional

Repositori ini berisi beberapa file yang relevan jika Anda ingin mengintegrasikan alat pengembangan web modern ke dalam proses pengembangan Salesforce Anda atau ke dalam proses integrasi berkelanjutan/penerapan berkelanjutan.

Pemformatan kode

Prettier adalah pemformat kode yang digunakan untuk memastikan pemformatan yang konsisten di seluruh basis kode Anda. Untuk menggunakan Prettier dengan Visual Studio Code, instal ekstensi ini dari Visual Studio Code Marketplace. File .prettierignore dan .prettierrc disediakan sebagai bagian dari repositori ini untuk mengontrol perilaku pemformat Prettier.

Peringatan Versi plugin Apex Prettier saat ini mengharuskan Anda menginstal Java 11 atau lebih tinggi.

Lapisan kode

ESLint adalah alat linting JavaScript populer yang digunakan untuk mengidentifikasi kesalahan gaya dan konstruksi yang salah. Untuk menggunakan ESLint dengan Visual Studio Code, instal ekstensi ini dari Visual Studio Code Marketplace. File .eslintigore disediakan sebagai bagian dari repositori ini untuk mengecualikan file tertentu dari proses linting dalam konteks pengembangan Lightning Web Components.

Kait pra-komitmen

Repositori ini juga dilengkapi dengan file package.json yang memudahkan pengaturan pre-commit hook yang menerapkan pemformatan kode dan linting dengan menjalankan Prettier dan ESLint setiap kali Anda git commit perubahan.

Untuk menyiapkan pemformatan dan linting hook pra-komit:

1. Instal Node.js jika Anda belum melakukannya

2. Jalankan npm install di folder root proyek Anda untuk menginstal modul ESLint dan Prettier (Catatan: Pengguna Mac harus memverifikasi bahwa alat baris perintah Xcode telah diinstal sebelum menjalankan perintah ini.)

Prettier dan ESLint sekarang akan berjalan secara otomatis setiap kali Anda melakukan perubahan. Komit akan gagal jika kesalahan linting terdeteksi. Anda juga dapat menjalankan pemformatan dan linting dari baris perintah menggunakan perintah berikut (lihat package.json untuk daftar lengkapnya):

npm run lint
npm run prettier

Tur Kode

Tur Kode adalah panduan yang akan membantu Anda memahami kode aplikasi dengan lebih baik. Untuk dapat menjalankannya, instal ekstensi CodeTour VSCode.