مجموعة من أمثلة التعليمات البرمجية سهلة الفهم لمكونات Lightning Web Components. توضح كل وصفة كيفية ترميز مهمة محددة في أقل عدد ممكن من أسطر التعليمات البرمجية مع اتباع أفضل الممارسات. ينقلك رابط "عرض المصدر" مباشرةً إلى الكود الموجود على GitHub. من "Hello World" إلى الوصول إلى البيانات ومكتبات الطرف الثالث، هناك وصفة لذلك!
تعرف على المزيد حول هذا التطبيق من خلال إكمال البداية السريعة: استكشف مشروع LWC Recipes Sample App Trailhead أو من خلال مشاهدة مقطع الفيديو التقديمي القصير هذا.
تم تصميم نموذج التطبيق هذا ليتم تشغيله على منصة Salesforce. إذا كنت ترغب في تجربة Lightning Web Components على أي نظام أساسي، فيرجى زيارة https://lwc.dev وتجربة نموذج تطبيق Lightning Web Components الخاص بنا LWC Recipes OSS.
تثبيت التطبيق باستخدام Scratch Org: هذا هو خيار التثبيت الموصى به. استخدم هذا الخيار إذا كنت مطورًا وترغب في تجربة التطبيق والكود.
تثبيت التطبيق باستخدام حزمة غير مقفلة: يتيح هذا الخيار لأي شخص تجربة نموذج التطبيق دون تثبيت بيئة تطوير محلية.
تثبيت التطبيق باستخدام مؤسسة إصدار المطور أو Trailhead Playground: مفيد عند التعامل مع شارات Trailhead أو إذا كنت تريد نشر التطبيق في بيئة أكثر استدامة من مؤسسة Scratch.
تعليمات التثبيت الاختيارية
جولات الكود
قم بإعداد بيئتك. اتبع الخطوات الموجودة في البداية السريعة: مشروع Lightning Web Components Trailhead. تتضمن الخطوات ما يلي:
قم بتمكين Dev Hub في Trailhead Playground
تثبيت Salesforce CLI
قم بتثبيت كود Visual Studio
قم بتثبيت ملحقات Visual Studio Code Salesforce، بما في ذلك ملحق Lightning Web Components
إذا لم تكن قد قمت بذلك بالفعل، فقم بتفويض مؤسسة المركز الخاصة بك وقم بتزويدها باسم مستعار ( myhuborg في الأمر أدناه):
sf org login web -d -a myhuborg
استنساخ مستودع وصفات lwc:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
قم بإنشاء مؤسسة مؤقتة وقم بتزويدها باسم مستعار ( وصفات lwc في الأمر أدناه):
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
ادفع التطبيق إلى مؤسستك المؤقتة:
sf project deploy start
قم بتعيين إذن الوصفات للمستخدم الافتراضي:
sf org assign permset -n recipes
استيراد بيانات العينة:
sf data tree import -p ./data/data-plan.json
افتح مؤسسة الصفر:
sf org open
في الإعداد ، ضمن السمات والعلامة التجارية ، قم بتنشيط سمة Recipes Lite أو Recipes Blue .
في مشغل التطبيقات، انقر فوق "عرض الكل" ثم حدد تطبيق LWC .
اتبع هذه المجموعة من التعليمات إذا كنت تريد نشر التطبيق في بيئة أكثر استدامة من مؤسسة Scratch أو إذا كنت لا ترغب في تثبيت أدوات التطوير المحلية. يمكنك استخدام مؤسسات لا تتبع المصدر مثل مؤسسة إصدار المطور المجانية أو Trailhead Playground.
تأكد من البدء من بيئة جديدة تمامًا لتجنب التعارض مع أي عمل سابق قد تكون قمت به.
قم بتسجيل الدخول إلى مؤسستك
انقر فوق هذا الرابط لتثبيت حزمة الوصفات غير المؤمنة في مؤسستك.
حدد التثبيت لجميع المستخدمين
استيراد بيانات الحساب وجهات الاتصال:
انقر هنا للوصول إلى ملف Accounts-Contacts.csv . انقر بزر الماوس الأيمن على نافذة المتصفح واحفظ الملف باسم Accounts-Contacts.csv .
في برنامج الإعداد ، اكتب استيراد البيانات في مربع البحث السريع ثم انقر فوق معالج استيراد البيانات .
انقر فوق تشغيل المعالج .
انقر فوق الحسابات وجهات الاتصال ، ثم انقر فوق إضافة سجلات جديدة .
اسحب ملف Accounts-Contacts.csv الذي قمت بحفظه للتو إلى منطقة التحميل.
انقر فوق التالي ، ثم التالي ، ثم ابدأ الاستيراد .
إذا كنت تحاول البدء السريع على Trailhead، فهذه الخطوة مطلوبة، ولكن بخلاف ذلك، قم بتخطي:
انتقل إلى الإعداد > المستخدمون > مجموعات الأذونات .
انقر فوق وصفات .
انقر فوق إدارة الواجبات .
تحقق من المستخدم الخاص بك وانقر فوق "إضافة مهام" .
في الإعداد ، ضمن السمات والعلامة التجارية ، قم بتنشيط سمة Recipes Lite أو Recipes Blue .
في مشغل التطبيقات، انقر فوق "عرض الكل" ثم حدد تطبيق LWC Recipes .
اتبع هذه المجموعة من التعليمات إذا كنت تريد نشر التطبيق في بيئة أكثر استدامة من مؤسسة Scratch. يتضمن ذلك المؤسسات التي لا يتم تتبع المصدر مثل مؤسسة إصدار المطور المجانية أو Trailhead Playground.
تأكد من البدء من بيئة جديدة تمامًا لتجنب التعارض مع العمل السابق الذي ربما تكون قد قمت به.
استنساخ هذا المستودع:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
قم بتخويل مؤسسة Trailhead Playground أو Developer وتزويدها باسم مستعار ( mydevorg في الأمر أدناه):
sf org login web -s -a mydevorg
قم بتشغيل هذا الأمر في المحطة لنشر التطبيق.
sf project deploy start -d force-app
قم بتعيين إذن recipes
للمستخدم الافتراضي.
sf org assign permset -n recipes
استيراد بعض بيانات العينة.
sf data tree import -p ./data/data-plan.json
إذا لم تكن مؤسستك مفتوحة بالفعل، فافتحها الآن:
sf org open -o mydevorg
في الإعداد ، ضمن السمات والعلامة التجارية ، قم بتنشيط سمة Recipes Lite أو Recipes Blue .
في مشغل التطبيقات، حدد تطبيق LWC .
يحتوي هذا المستودع على العديد من الملفات ذات الصلة إذا كنت تريد دمج أدوات تطوير الويب الحديثة في عمليات تطوير Salesforce أو في عمليات التكامل المستمر/النشر المستمر.
Prettier هو منسق تعليمات برمجية يستخدم لضمان التنسيق المتسق عبر قاعدة التعليمات البرمجية الخاصة بك. لاستخدام Prettier مع Visual Studio Code، قم بتثبيت هذا الملحق من Visual Studio Code Marketplace. يتم توفير ملفات .prettierignore و.prettierrc كجزء من هذا المستودع للتحكم في سلوك منسق Prettier.
تحذير يتطلب الإصدار الحالي من البرنامج المساعد Apex Prettier تثبيت Java 11 أو أعلى.
ESLint هي أداة فحص جافا سكريبت شائعة تستخدم لتحديد الأخطاء الأسلوبية والبنيات الخاطئة. لاستخدام ESLint مع Visual Studio Code، قم بتثبيت هذا الملحق من Visual Studio Code Marketplace. يتم توفير ملف .eslintignore كجزء من هذا المستودع لاستبعاد ملفات محددة من عملية الفحص في سياق تطوير Lightning Web Components.
يأتي هذا المستودع أيضًا مزودًا بملف package.json الذي يجعل من السهل إعداد خطاف الالتزام المسبق الذي يفرض تنسيق التعليمات البرمجية وفحصها عن طريق تشغيل Prettier وESLint في كل مرة تقوم فيها git commit
.
لإعداد خطاف التنسيق والفحص المسبق:
قم بتثبيت Node.js إذا لم تكن قد قمت بذلك بالفعل
قم بتشغيل npm install
في المجلد الجذر لمشروعك لتثبيت وحدتي ESLint وPrettier (ملاحظة: يجب على مستخدمي Mac التحقق من تثبيت أدوات سطر أوامر Xcode قبل تشغيل هذا الأمر.)
سيتم الآن تشغيل Prettier وESLint تلقائيًا في كل مرة تقوم فيها بإجراء تغييرات. سوف يفشل الالتزام إذا تم اكتشاف أخطاء الفحص. يمكنك أيضًا تشغيل التنسيق والفحص من سطر الأوامر باستخدام الأوامر التالية (راجع package.json للحصول على القائمة الكاملة):
npm run lint npm run prettier
تعد Code Tours عبارة عن إرشادات إرشادية ستساعدك على فهم كود التطبيق بشكل أفضل. لتتمكن من تشغيلها، قم بتثبيت ملحق CodeTour VSCode.