تمرين - عرض في MR وعرض في ثلاثي الأبعاد

مكتمل

Easy-Sales هو تطبيق واقع مختلط موجه للمبيعات تم إنشاؤه لتحسين تجربة التسوق. يمكن ل مندوبي المبيعات الذين يستخدمون هذا التطبيق فحص وقياس محيط العميل لتحديد المنتجات الممكنة في المساحة. كما يمكن أن تساعد العملاء على تصور المنتج من خلال الحقيقة المختلطة.

سننفذ ميزات View in 3D وميزات View in MR في Power Apps لتصور المنتجات بدقة.

إضافة كائنات ثلاثية الأبعاد إلى قائمة SharePoint

يتم تخزين النماذج والصور ثلاثية الأبعاد المطلوبة للتطبيق في قائمة SharePoint. لنبدأ بإضافة الموارد المطلوبة إلى هذه القائمة.

1. في قائمة SharePoint التي تم إنشاؤها المسماة Easy Sales، حدد + Add column ثم حدد إظهار/إخفاء الأعمدة.

   

2. تأكد من تحديد المرفقات، ثم اضغط على تطبيق في الأعلى.

   

3. حدد عنصرا في القائمة، ثم حدد إضافة مرفقات. حدد النموذج ثلاثي الأبعاد (ملف.glb) أو صورة ( ملف.jpg) في مجلد Power Apps المخصص. اتبع نفس الإجراء لكافة العناصر الموجودة في القائمة.

   

4. حدد القائمة المنسدلة بجوار العمود المرفقات، ثم حدد إظهار المرفقات أولا. نريد أن يتم وضع ذلك أولا لسهولة الوصول.

   

إنشاء صفحة التفاصيل وإضافة المكون View in 3D

تتضمن صفحة التفاصيل جميع التفاصيل والمعلومات المتعلقة بالمنتج المحدد. فهو يمنحك فهما لبعض ميزات المنتج. يجب توصيل صفحة المنتج التي قمت بتصميمها في القسم السابق وصفحة التفاصيل التي تم إنشاؤها في هذا القسم. هنا، يمكنك أيضا استخدام مكون View in 3D من Power Apps لإضافة محتوى ثلاثي الأبعاد إلى تطبيق اللوحة. ستتمكن من تدوير الكائنات ثلاثية الأبعاد وتكبيرها للحصول على طريقة عرض أفضل.

1. إنشاء صفحتين جديدتين وإعادة تسميتها Product_detailsCarpet_details.

   

2. حدد أيقونة > في عنصر تحكم المعرض المضمن في صفحة منتجات وصفحة Carpets. ثم قم بتكوين الخاصية OnSelect عن طريق إضافة الأسطر التالية في علامة التبويب Functions على التوالي.

   Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})
   

   Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})
   

   

3. لنبدأ في إنشاء صفحة Product_details عن طريق إضافة بعض التسميات، مثل Priceوأبعاد ووزن لونالمواد. يمكنك تحرير النص داخل التسمية، وإدراج النص المطلوب ضمن الخاصية Text لتلك Label. أعد تسمية تسميات وفقا لذلك.

   لقطة شاشة

   ملاحظه

   يمكنك تخصيص النسق والخط ولوحة الألوان لتطبيقك لتحسين تجربة المستخدم ومظهره.

4. قم بإدراج تسمية أخرى تسمى اسم المنتج لعرض اسم المنتج في الأعلى ومحاذاة Center ذلك. قم بتكوين الخاصية Text للتسمية عن طريق إضافة السطر التالي:

   content.'{Name}'
   

   

5. حدد القائمة المنسدلة Media، ثم حدد صورة لإدراج صورة في شاشة Product_details. تكوين خاصية صورة بالطريقة التالية:

   content.ImageLink
   

   

6. سنتداخل مع مكون View in 3D على مكون Image. يمكن عرض المنتجات التي لا تحتوي على نماذج ثلاثية الأبعاد مرفقة بها من خلال مكون Image. لإضافة مكون View in 3D، حدد القائمة المنسدلة Media ثم حدد View in 3D.

   

   ملاحظه

   يتم تضمين شكل افتراضي في المكون. يمكنك تغيير هذا الشكل إلى شكل آخر عن طريق تغيير الخاصية Source.

7. ضع المكون فوق مكون الصورة، كما هو موضح في الصورة، وقم بتكوين الخاصية Source لمكون View in 3D كما يلي لتوصيل النماذج ثلاثية الأبعاد من قائمة SharePoint.

   First(Gallery_products.Selected.Attachments).Value
   

   

8. سنقوم بتغيير الخاصية Visible لكل من صورة ومكونات View in 3D لعرض المنتجات بسهولة استنادا إلى نوع ملف المخزن في عمود المرفقات. قم بتكوين الخاصية Visible لمكونات صورة و"طريقة عرض في ثلاثية الأبعاد" كما يلي:

   • صورة :

     If(Gallery_products.Selected.FileType = "Image", true, false)
     

     

   • عرض في 3D :

     If(Gallery_products.Selected.FileType = "Model", true, false)
     

     

9. أضف تسميات فارغة بجانب Priceوأبعاد Weightو Colorو و تسميات المواد كما هو موضح في الصورة لعرض معلومات المنتج تحت هذه العناوين. تكوين خاصية نص لهذه التسميات كما يلي:

   • سعر :

     content.Price
     

     

   • أبعاد :

     content.Dimensions
     

     

   • وزن :

     content.Weight
     

     

   • لون :

     content.Color
     

     

   • المواد :

     content.PrimaryMaterial
     

     

10. سنضيف أيقونة Back للانتقال إلى الشاشة السابقة. لإضافة أيقونة back، قم بتوسيع القائمة المنسدلة Icons وحدد أيقونة Back. ضع أيقونة Back بشكل صحيح وقم بتكوين الخاصية OnSelect عن طريق إضافة ما يلي:

    Navigate('Products',ScreenTransition.Cover)
    

    

    اتبع نفس الإجراء Carpet_details. تخصيص وظيفة التنقل وفقا لذلك.

    بقشيش

    لحفظ تقدمك، حدد علامة التبويب File في الأعلى وحدد الخيار Save. يمكنك أيضا استخدام Ctrl+S لحفظ تقدمك.

    ملاحظه

    تجنب تضمين مكون View in 3D في صفحة Carpet_details. لا نستخدم نماذج ثلاثية الأبعاد لفئة Carpet.

عرض في مكون MR

View in MR هي ميزة واقع مختلط توفرها Power Apps تمكن المستخدمين من وضع الكائنات ثلاثية الأبعاد الصور أو في بيئة العالم الحقيقي الخاصة بهم. يتم تخزين النماذج والصور ثلاثية الأبعاد المطلوبة للتطبيق في قائمة SharePoint. لنبدأ بإضافة الموارد الضرورية في قائمة SharePoint.

1. أضف مكون View in MR إلى شاشة Product_details. افتح علامة التبويب Insert، ثم قم بتوسيع القائمة المنسدلة Mixed Reality، ثم حدد المكون View in MR.

   

2. في علامة التبويب خصائص لمكون View in MR، حدد حقل Source وأدخل للوصول إلى النماذج ثلاثية الأبعاد المخزنة في قائمة SharePoint:

   First(Gallery_products.Selected.Attachments).Value
   

   

   ملاحظه

   لا نقوم بتضمين ميزة View in MR لفئة Carpets. بدلا من ذلك، سنقوم بتقدير سعر للسجاد اعتمادا على المنطقة المحسوبة في جلسة Measure in MR.

خاصية فريدة أخرى يوفرها مكون View in MR هي تحجيم الكائن. يمكنك تحرير أحجام النماذج ثلاثية الأبعاد خارجيا عن طريق تغيير عرض الكائنوارتفاع الكائن وخصائص عمق الكائن .

• تعيين الخصائص التالية في جزء الخاصية كما هو موضح في الصورة:

  • عرض الكائن = 1.5
  • ارتفاع الكائن = 1
  • عمق الكائن = 1
  • وحدة القياس = عدادات

  يتم تعيين هذه القيم وفقا للنماذج ثلاثية الأبعاد المضمنة في هذا التطبيق.

  

  ملاحظه

  يمكنك أيضا تخصيص القيم التي تم تمريرها إلى عرض الكائنارتفاع الكائنو وعمق الكائن وفقا لاحتياجاتك. يتم أخذ القيم التي تم تمريرها في الوحدات المحددة في وحدة القياس . اختر وحدة قياس مناسبة من القائمة المنسدلة وأدخل القيم لاحقا.

  بقشيش

  لحفظ تقدمك، حدد علامة التبويب File في الأعلى وحدد الخيار Save. يمكنك أيضا استخدام Ctrl+S لحفظ تقدمك.

سيؤدي تنفيذ الخطوات المذكورة أعلاه إلى إنتاج تطبيق مع صفحة تفاصيل تحتوي على معلومات مفصلة عن المنتج. سيتضمن التطبيق أيضا مكون View in 3D، مما يسمح لك بتضمين محتوى ثلاثي الأبعاد. يمكنك أيضا وضع نماذج ثلاثية الأبعاد في بيئة العالم الحقيقي عبر مكون View in MR. الآن بعد أن تعلمت كيفية تنفيذ هذه الميزات، يمكنك دمجها في تطبيقاتك المستقبلية.