إنشَاء تَطبِيق محسّن للأجهِزَة المَحمُولة يستخدم تصميمَات سريعة الاستجَابة

مكتمل

فِي هَذا التمرِين، ستَقوم بإنشَاء تَطبِيقٍ بشَاشةٍ واحدةٍ مُحسَّنٍ للأجهزةِ المحمولةِ باستخدَام Microsoft Power Apps وبيَانَات من Contoso Coffee Machines. تُسَاعد هَذهِ المُهمةُ العَمليةُ عَلى تَسهيل فَهمِ طَريقَةِ استخدَامِ حَاويَاتٍ للتخطيطِ التِلقَائي ومُرَاقبةِ طَريقَةِ تَصرفِ التَصميمِ سريعِ الاستِجَابةِ عَبر الأجهِزة.

ستبدأ من الصفحة الرئيسية لـ Power Apps. اتبع الخطوات التَالية:

1. قم بتَنزِيل مِلفَّات App in a Day واستَخرِجهَا. افتَح مِلف Excel المُسمَّى Machine-Order-Data.xlsx.

2. انتقِل إلى make.powerapps.com. حدّد إنشَاء>ابدَأ بلوحةٍ فارغةٍ>مُستجيب. إذا ظَهرَت نَافِذةٌ مُنبثقةٌ للتَرحِيب، فحدّد تخطّي.

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

   

4. فِي لوحَةِ الإعدَادَات المُنبَثقة، حدّد عَلامَة التَبوِيب عَرض، ثمّ قُم بالتمريرِ لأسفَل للتأكّد مِن أنّ خيَار التَوسِيع للمُلاءَمة عَلى وضع إيقَاف التَشغِيل. (يؤدّي هَذا إلى تَبديل قفل نسبة العرض إلى الارتفاع إلى إيقَاف.)

5. أغلق النَافذة المِنبثقة الإعدَادَات.

6. قُم بإنشَاء شَاشَة جَديدَة عَن طَريقِ تَحدِيد + شَاشَة جَدِيدة فِي جُزءِ طَريقةِ عَرض الشَجرة. حدّد تَخطِيط الشَريطِ الجَانبِي لشَاشتِك الجَديدَة. قُم بتَسمِيته Catalog Screen من خِلال النَقر المُزدَوج عَلى اسمِ الشَاشَة (Screen2)، ثمَّ اكتُب "Catalog Screen".

7. قم بإنشَاء شَاشةٍ جَديدةٍ أخرَى؛ بالنسبةِ لهَذه الشَاشة، استَخدِم قَالب النجَاح. قم بتسمية الشَاشة الجديدة "Success Screen".

8. احذِف Screen1 بالنَّقرِ فوق الشّاشةِ فِي طَريقةِ عرضٍ للشّجرةِ، وتَحديدِ علامةٍ للحَذفِ عَلى يمينِ الشّاشةِ، ثم تَحديد حَذف.

9. بعدَ هَذا، حدّد حَاويَة لشَريط الجَانبي لـ Catalog Screen. (سَتحتَاج إلى تَوسيعِ عِدّةِ طَبقَاتٍ من حَاويَاتٍ للعثورِ عَلى حَاويةٍ للشّريطِ الجَانبي.) أضِف مَعرضًا عَموديًّا عن طَريقِ تَحديد + إدرَاج ثمَّ المَعرَض الرَأسِي مَع تَحدِيد SidebarContainer1.

10. يجبُ فتحُ جزءِ تَحدِيد مَصدَر البيَانَات تلقَائيًا. إذا لم يحدُث هَذا، فحدّد الزر إضَافَة بيَانَات مِن شَريطِ الأوامرِ مَع تَحديدِ عُنصرٍ لتحكُّمِ المَعرضِ الخَاصِّ بك فِي جُزء طَريقة عرض الشّجرة.

11. ثمّ ابحَث عَن وحدّد OneDrive for Business وقُم بإنشَاء الاتصَال. (يمكنك استخدَام حقل إدخَال البحث لتضييق نطَاق البحث.)

12. تظهر لوحة اختيَار ملف Excel عَلى الجَانب الأيمن من شَاشتك. حدّد مِلف Machine-Order-Data.xlsx، ثمّ حدّد جدول الأجهزة. قم بتوصيل الجدول عَن طريق تحديد Connect فِي أسفل اللوحة. يَجب أن تَرى إشعَارًا فِي الجُزءِ العُلوي من الشّاشة؛ يُمكنك الضغط عَلى X للخُروجِ منه.

13. قد تَحتَاج إلى تَحديثِ البَيَانَاتِ التي يُتمّ عَرضُهَا فِي مَعرضِ الصُّورِ الخَاصِّ بك. إذا كَان مَعرضُ الصُّورِ الخَاصُّ بك يُشبه الصُّورةَ أدنَاه، فَاتبع الخُطواتِ التَالية. إذا تَمّ عَرضُ الحُقول الصّحيحةِ، فيُمكنك المُتَابعةُ مُباشرةً إلى الخُطوةِ الرّقم 17 أدنَاه.

    

14. قم بتوسيع المعرض، ثم حدد حقل العنوان. فِي شَريط المُعَادلة، قُم بتَغيير الخَاصّية Text لتَسمية نَص العُنوان إلى ThisItem.'Machine Name'.

15. بعدَ هَذا، حدّد حقل التَرجمَة. فِي شَريط المُعَادلة، قُم بتَغيير الخَاصّية Text لتَسمية نَص العُنوان الفَرعِي إلى ThisItem.Price.

16. ثمّ حدّد حَقل الصُورَة. فِي شَريط المُعَادلة، قُم بتَغيير الخَاصّية Image لخَاصّية Image لعنصرِ التَّحكُّم فِي الصُّورة إلى ThisItem.Photo.

17. فِي طَريقةِ عرضِ الشّجرة، حَدّد القَائِمة المُنسدلة بجِوار حَاويةِ الشّريط الجَانبي لطَيّ مُحتويَاتِهَا.

18. حدد الحَاوية الرأسية الموجودة عَلى الجَانب الأيمن مِن شَاشتك، والتي تسمى MainContainer2.

    

19. حدد أيقونة علامة الجمعَ (إضَافة) (أو الزر "إدرَاج" مِن شريط الأوامر) لإدرَاج تحرير النَمُوذَج. حدد جدول Machines كمصدر للبيَانَات.

20. فِي لوحة الخصَائص عَلى اليمين، حدد خيَار تحرير الحقول ضمِن مصدر البيَانَات.

21. فِي لوحة الحقول، حدد إضَافة حقل وأضف الحقول التَالية بتحديد المربع بجوار اسم كل حقل بهَذا الترتيب: الصورة ومعرف الجهَاز واسم الجهَاز واللون والوصف والميزة والسعر ونوع الجهَاز ومعرف نوع الجهَاز ومتوسط الأكواب/الأسبوع ومتوسط الإسبريسو/الأسبوع. ثم حدد الزر إضَافَة فِي الأسفل.

22. أغلق لوحة الحقول.

23. لاحِظ أنه تَم إدرَاجُ حُقولٍ فِي النَّموذجِ بالتَّرتيبِ الذي حَدّدتَهَا به.

24. بينمَا لا تزَال Form1 محددة، فِي القَائمة المِنسدلة الخَاصية فِي الجزء العلوي الأيسر من الشَاشة (فوق عنوان طريقة عرض الشجرة)، حدد خَاصية Item، وفِي المعَادلة (fx) حقل الإدخَال: Gallery1.Selected. (إذا لم يتم تسمية معرض الصور الخَاص بك باسم Gallery1، فاستخدم اسم معرض الصور الفعلي الخَاص بك.)

25. أخيرًا، مَع تحديد النموذج الخَاص بك، قم بتعيين الخَاصية Fill إلى: Color.LightSteelBlue.

26. بَعد هَذا، سوف تضيف إلى حَاوية العنوان لدينَا. حدّد عنصر التحكّم HeaderContainer2 (خِلال هَذا التمرين، استخدِم اسم عُنصر التّحكُّم فِي العُنوان الفِعلي إذا كَان مُختلفًا) واستَخدِم أيقونة علامة الجَمع (+) لإدرَاج عُنصر تَحكم تسميَة النصّ. اضبِط خَصَائص التّسمية النّصية باستِخدَام إسقَاطِ الخَاصّية لأسفَل وشَريطِ المُعَادلة كمَا يَلي:

    Text:‏ "Contoso Coffee Catalog"

    Size: التغيير مِن 13 إلى 20

    Height: التغيير مِن 40 إلى Parent.Height

    Width: التغيير مِن 150 إلى 200

27. باستِخدَام القَائمة المنسدلة محَاذاة فِي شريط الأوامر (عَلى يسَار الزر اللون؛ وبدلا مِن هَذا، يمكنك البحث عَن تحديد محَاذاة النص فِي لوحة الخصَائص عَلى اليمين)، قم بتغيير محَاذاة مِن "محَاذاة إلى اليسَار" إلى ضبط.

28. بَعد هَذا، حَدّد حَاويةَ العُنوان خَارج التّسمية النّصية لإلغَاء تَحديد عُنصرِ التّحكُّم فِي تَسميةِ النّص. قم بإدرَاج عنصر التحكم الصورة فِي HeaderContainer2، واضبط الخصَائص كمَا يلي:

    Image: User().Image

    Height: Parent.Height

29. يمكنك إنشَاء رمز اتصَال عَن طريق إدرَاج أيقونة Globe فِي HeaderContainer2. اضبط الخصَائص كمَا يلي:

    Height: 20

    Width: 20

    اللون: If(Connection.Connected, Color.Green, Color.LightSteelBlue)

30. بَعد هَذا، يمكنك محَاذاة عنَاصر حَاوية العنوان إلى اليمين. للقيَام بهَذا، حدّد HeaderContainer2 فِي طَريقَة عَرضِ الشَجرة وابحَث فِي لوحَة الخصَائِص عَلى اليَمين. ابحَث عَن خيَار الضَبط (الأفقِي). الخَيَار الثَالث هُو الانتهَاء (الذي يمكنُك رؤيتُه إذا قمتَ بالتَمرِير فوقَ الأيقُونة). حدده.

31. أخيرًا، يمكنك إضَافَة بعض ألوان الخلفِية إلى حَاوية العنوان. اضبِط الخَاصِية Fill عَلى: Color.LightSteelBlue.

32. حدّد MainContainer2، حيث يوجد النَمُوذَج لديك. قم بإدرَاج عنصر التحكم الزر بالخصَائص التَالية:

    Text: "حفظ"

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

33. حدد النموذج دَاخل MainContainer2، واضبط الخَاصية OnSuccess عَلى: Navigate('Success Screen').

34. مِن لوحة طريقة عرض الشجرة، حدد Success Screen.

35. حدد الأيقونة التحقق وهي (iconCheck1)، وقم بتحديث الخَاصية OnSelect إلى:

    Back()

36. أدخِل الوضع إصدَار أوَّلي. اضبط الشَاشة عَلى iPhone 12 عَن طريق تحديد القَائمة المِنسدلة الهَاتف. لاحِظ كيفَ يتمّ ضبطُ التَخطِيط عَبر الأجهزةِ والاتجَاهَات.

37. احفِظ تَطبيقَك إذا كنتَ تريدُ استِخدَامه أو قُم بإعَادة زيَارتِه لاحقًا.

قمتَ الآن بإنشَاء تَطبِيقٍ سَريعِ الاستِجَابة يمكنُ استِخدَامه عَبر الأنظِمة الأسَاسيَّة.