التَمرِين - استخدم Power Apps CLI

مكتمل

فِي هذا التَمرِين، ستقوم بتثبيت Power Platform CLI وإنشَاء أول مكون Power Apps Component Framework (‏PCF).

المَهمة 1: تثبيت CLI

1. قُم بتثبيت Npm (يأتي مع Node.js) أوNode.js(يأتي مع npm). نوصي باستخدَام الإصدَار 10.15.3 مِن LTS (دعم طويل الأمد) أو إصدَار أعلى.

2. ثبّت Visual Studio Code.

3. ثبّت ملحق Power Platform Tools.

4. ابدأ تَشغيل Visual Studio Code.

5. حدد Terminal ثم حدد New Terminal.

   

6. قم بتَشغيل الأمر pac لمعرفة الأوامر المتوفرة:

   pac

   

7. يمكنُك إدخَال pac ثُمَّ مَعرفةِ الخيَارَات التي يوفرُهَا. عَلى سَبيل المِثَال، قم بتَجربةِ:

   pac admin

8. انتقل إلى Power Apps Maker Portal وتأكَّد مِن تحديد بيئة التطوير.

9. فِي الزَاوية العلوية اليمنى مِن الشَاشة، حدد أيقونة الإعدَادَات واختر تفاصيل الجلسة.

   

10. فِي مربع حوار تفاصيل جلسة عمل Power Apps حدد قيمة Instance url وانسخهَا للاستخدَام لاحقًا فِي التدريب.

    

11. ارجع إلى محطة Visual Studio Codeالطرفية، واكتب الأمر التَالي لإنشَاء اتصَال مِن CLI وقم بتسجيل الدخول إلى بيئة الاختبار الخَاصة بك عندمَا يُطلب منك ذلك.

    pac auth create --name Lab --url <Your Instance URL>

12. اكتب الأمر who التَالي الذي يعرض البيئة ومعلومَات المستخدم. وهذا مفيد للتأكد مِن أنك فِي البيئة الصحيحة.

    pac org who

المَهمة 2: إنشَاء مكون PCF

1. قم بتَشغيل الأمر أدنَاه لإنشَاء مجلد جديد باسم labPCF دَاخل مجلد المستخدم الخَاص بك.

   md labPCF

2. قم بتغيير الدليل إلى المجلد الذي قمت بإنشَائه.

   cd labPCF

3. قم بتَشغيل الأمر أدنَاه لتهيئة مشروع المكون.

   pac pcf init --namespace lab --name FirstControl --template field

4. اكتب الأمر التَالي، ثم اضغط عَلى Enter. يؤدي هذا إلى سحب أي تبعيَات مِن مستودع npm.

   npm install

5. افتح المجلد مِن خلال Visual Studio Code.

   code -a .

6. استكشف الملفات التي تم إنشَاؤهَا.

7. افتَح index.ts فِي مجلد FirstControl.

8. الصق المتغيرَين التَاليَين دَاخل التصدير.

   private label: HTMLInputElement;

   private _container: HTMLDivElement;

   

9. الصق مَا يلي دَاخل الدَالة init() لإنشَاء عنَاصر تحكم HTML وتعيين قيمة التسمية.

   this.label = document.createElement("input");
   this.label.setAttribute("type", "label");
   this.label.value = "My First PCF";
   this._container = document.createElement("div");
   this._container.appendChild(this.label);
   container.appendChild(this._container);
   

10. حفظ الملف.

11. انتقل إلى المحطة وأدخل الأمر التَالي ثم أدخل. سيؤدي هذا إلى بدء ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫أدَاة الاختبار بأحدث التعليمَات البرمجية.

    npm start

12. يُعدُّ مُفعِّل الاختبَار مُفيدًا فِي وقتٍ مُبكرٍ مِن المَشروع لتصور عُنصر التَحكُّم الخَاص بك من دُون نَشرهِ فِي بيئةٍ. يمكنك تعديل قيم الخَاصية لتغيير حجم منطقة التحكم. بعد الانتهَاء مِن استكشَاف مجموعة أدوات الاختبار، عد مرة أخرى إلى الوحدة الطرفية واضغط عَلى Ctrl-C لإنهَاء تنفيذ مجموعة أدوات الاختبار.

13. إذا طُلبَ مِنك ذَلك، فاكتُب Y و[ENTER].

14. قم بتَشغيل الأمر التَالي لسرد الحلول فِي بيئتك.

    pac solution list

15. هذه هي الحلول الحَالية الموجودة فِي البيئة الخَاصة بك. الخطوة التَالية ستضيف واحدًا للمكون.

16. اكتب الأمر push التَالي لدفع عنصر التحكم الخَاص بنَا إلى البيئة.

    pac pcf push --publisher-prefix lab

17. قُم بتَشغِيل الأمرَ pac solution list مرةً أخرَى. من المفترض أن تشَاهد الحل PowerAppsTools_lab solution. هذه هي الطريقة التي يتم بهَا تثبيت المكون الخَاص بك فِي بيئة التطوير لاختبار الوحدة قبل حزمهَا حتى يختبرهَا المستخدم أو إنتَاجهَا أو تضمينهَا كجُزء مِن حل آخر.

المهمة 3: استخدَام المُكوِّن فِي تَطبِيق (اختيَاري)

1. انتقل إلى مركز مسؤولي Microsoft Power Platform.

2. حدد البيئَات من القَائمة اليسرى.

3. حدد البيئة التي تستخدمهَا للمختبر.

4. حدد الإعدَادَات.

5. قم بتوسيع منطقة المنتج واختر الميزَات.

6. على الجَانب الأيسر، قم بتمكين ميزة ‏‫السمَاح بنشر تطبيقَات اللوحة مِن خلال مكونَات الكود‬.

   

7. انتقل إلى Power Apps maker portal وتأكَّد مِن وجودك فِي البيئة الصحيحة.

8. حدد الحلول.

9. حدد هذا لفتح حل PowerAppsTools_lab.

10. من المفترض أن تشَاهد المكون مدرجًا.

11. حدد + جديد | تطبيق | تطبيق اللوحة.

12. حدد الهَاتف للتنسيق، وقم بإدخَال First PCF لاسم التطبيق وحدد إنشَاء.

13. فِي الجُزء الأيسر، حدد إضَافة (+)، ثم حدد الحصول عَلى مكونَات أخرى.

14. اختر علامة التبويب التعليمَات البرمجية.

15. حدد المكون الخَاص بك.

    

16. حدد استيرَاد.

17. على شريط الأدوات الأيمن، حدد + وقم بتوسيع مكونَات الكود.

18. حدد FirstControl. يجب أن تشَاهد الآن ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫أدَاة التحكم مع ظهور النص My First PCF عَلى اللوحة.

    

19. حدد حفظ لحفظ التطبيق.

لقد قمت الآن ببنَاء المكون الأول PCF الخَاص بك واستخدمته فِي تطبيق اللوحة.