تَمرين - إضَافَة وظَائف متقدمة عَلى جَانب العميل

مكتمل

الغرض مِن هذَا المعمل العملي هو توضيح كيفِية إضَافَة كود JavaScript إلى صفحة لعرض البيَانَات مِن Microsoft Dataverse كمخطط باستِخدَام مكتبة مخططَات خَارجية معَ البيَانَات المستردة مِن Dataverse باستِخدَام واجهة API لويب المدَاخل.

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

الأهدَاف التعليمية

الهدف مِن هذه التمَارين هو مسَاعدتك عَلى تعلم كيفِية:

• قم بإعدَاد إعدَادَات الموقع وأذونَات الجدول لتمكين طلبات واجهة API ويب المدَاخل.

• أضف التعليمَات البرمجية المضمِنة إلى صفحة ويب المحتوى لاستردَاد البيَانَات وتحويلهَا باستِخدَام واجهة API ويب المدَاخل.

• استخدم مكتبة JavaScript خَارجية لرسم البيَانَات المحولة.

المتطلبات الأسَاسية

بالنسبة لهذَا التَمرين، تأكد مِن إعدَاد المعلمَات التَالِية فِي بيئتك:

• موقع ويب Power Pages متوفر. إذَا لم يكن لديك موقع ويب Power Pages متَاح، فَاتبع الإرشَادَات الموجودة فِي وثَائق إنشَاء موقع باستِخدَام Power Pages لإنشَاء موقع ويب.

• الوُصُول إلى الصفحة الرئيسية لمِنشئ Power Pages.

‏‫الخطوات عالية المستوى

لإنهَاء التَمرين، أكمل المهَام التَالِية:

1. إنشَاء إعدَادَات الموقع وأذونَات الجدول التي تسمح بطلبات قرَاءة واجهة API ويب المدَاخل لجدول الحسَابات.

2. إنشَاء صفحة محتوى وأضف كود JavaScript الذي يقوم باستردَاد البيَانَات وتحويلهَا.

3. إضَافَة مكتبة مخططَات إلى الصفحة ورمز JavaScript باستِخدَام المكتبة لإنشَاء رسم بيَاني بالبيَانَات المستردة.

الخطوات المفصَّلة

اتبع الخطوات التفصيلية لإكمَال هذَا التَمرين المعملي.

تمكين طلبات واجهة API ويب المدَاخل

سيوضح لك هذَا القسم كيفِية تمكين طلبات واجهة API ويب المدَاخل لجدول الحسَابات.

إنشَاء إعدَادَات الموقع

لإنشَاء إعدَادَات الموقع، اتبع هذه الخطوات.

1. سجّل الدخول إلى الصفحة الرئيسية لـ Power Pages.

2. حدد البيئة الصحيحة فِي الزَاوية العلوية اليمِنى.

3. حدد قَائمة عَلامة الحضذف (...)، ثم حدد Power Pages Management.

   سيُفتح تَطبِيق Power Pages Management فِي علامة تبويب جَدِيد‎ة.

   

4. حدد إعدَادَات المَوقِع.

5. حدد إضَافة جَدِيد‎، ثم أدخل المعلومَات التَالِية:

   • الاسم - Webapi/account/enabled

   • الموقع الإلكتروني - حدد موقع الويب الخَاص بك

   • القيمة - صحيح.

6. حدد حفظ.

   

7. حدد إضَافة جَدِيد‎، ثم أدخل المعلومَات التَالِية:

   • الاسم - Webapi/account/fields

   • الموقع الإلكتروني - حدد موقع الويب الخَاص بك

   • القيمة - name,numberofemployees,revenue

8. حدد حفظ وإغلاق.

إنشَاء أذونَات الجدول

لإنشَاء أذونَات الجدول، اتبع هذه الخطوات.

1. التبديل إلى صفحة Power Pages الرئيسية.

2. حدد تحرير لموقع الويب الهدف لفتح استوديو تصميم Power Pages.

3. حدد مسَاحة عمل الأمَان، ثمَّ حدد أذونَات الجدَاول.

   

4. حدد إضَافة إذن جَدِيد‎، ثم املأ المعلومَات التَالِية:

   • الاسم - الحسَاب

   • الجدول - الحسَاب (الحسَاب)

   • نَوع الوُصُول - عمومي

   • الإذن لـ - القرَاءة

5. حدد إضَافَة الأدوار، ثم أضف المستخدمين المجهولين والمستخدمين المصَادق عليهم.

6. حدد حفظ.

   

اختبر واجهة API (API)

لاختبار واجهة API، افتح عنوان URL التَالِي: https://yourwebsite.powerappsportals.com/_api/accounts?$select=name,numberofemployees,revenue

يجب أن يشبه الإخرَاج الخَاص بك الصورة التَالِية.

قم بإنشَاء صفحة محتوى واستردَاد البيَانَات

لإنشَاء صفحة محتوى وإضَافَة كود JavaScript يقوم باستردَاد البيَانَات وتحويلهَا، اتبع الخطوَات التَالِية:

1. فِي design studio، حدد مسَاحة عمل الصفحَات، ثم حدد إضَافة الصفحة.

2. أدخل المخطط اعتباره اسم الصفحة.

3. تأكيد اختيَار الخيَار إضَافَة الصفحة إلى التنقل الرئيسي.

4. حدد تخطيط البدء مِن فَارغ.

5. حدد إضَافَة.

6. حدد تحرير الكود.

   

7. فِي مربع الحوار المِنبثق، حدد فتح Visual Studio Code.

8. فِي محرر Visual Studio Code، حدد مِلَف Chart.en-US.customjs.js.

9. قم بإلحَاق النص التَالِي:

   function makeChart(rawData) {
     // transform raw data into plotting array
     var rData = rawData.value.map(({
       name,
       revenue,
       numberofemployees
     }) => ({
       "x": numberofemployees,
       "y": revenue,
       "z": (!revenue) ? 1 : numberofemployees / revenue,
       "name": name
     }));
     console.log(rData);
   }
   // retrieve accounts data using portals Web API
   $(document).ready(function() {
     $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
   });
   

10. اضغط عَلى اختصَار لوحة المفَاتيح Ctrl إضَافة S (⌘ إضَافة S on Mac) لحفظ المِلَف.

    

11. أغلق علامة التبويب Visual Studio Code. حدد مزَامِنة عند المطَالبة بمزَامِنة التغييرَات.

12. حدد إصدَار أولي > سطح المكتب.

13. عندمَا يتم عرض الصفحة، اضغط عَلى مفتَاح F12 لعرض أدوات مطور المتصفح.

14. تحقق مِن أن إخرَاج وحدة التحكم يحتوي عَلى نفس البيَانَات التي تم استردَادهَا سَابقَا، باستثنَاء أنهَا تظهر الآن عَلى أنهَا محولة.

    

15. تم إعدَاد بنية البيَانَات الآن للتخطيط. قم بتعيين التسميَات المِنَاسبة لنقَاط البيَانَات:

    • الاسم - اسم الشركة

    • x - عَدَدُ المُوظَّفِين

    • y - إيرَادَات الشركة بالآلاف

    • z - الإيرَادَات لكل موظف (محسوبة)

إضَافَة وظَائف مكتبة خَارجية

يستخدم هذَا التَمرين مكتبة Highcharts.js (مجَانية للاستخدَام الشخصي أو غير الربحي) لإنشَاء مخطط فقَاعي بنَاءً عَلى البيَانَات.

1. قم بالتبديل إلى استوديو التصميم.

2. حدد تذييل الصفحة، ثم حدد تحرير التعليمة البرمجية.

3. فِي مربع الحوار المِنبثق، حدد فتح Visual Studio Code.

   

4. قم بإلحَاق التعليمَات البرمجية التَالِية فِي نهَاية المِلَف.

     <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://code.highcharts.com/highcharts-more.js"></script>
   

5. اضغط عَلى اختصَار لوحة المفَاتيح Ctrl إضَافة S (⌘ إضَافة S on Mac) لحفظ المِلَف.

6. أغلق علامة التبويب Visual Studio Code.

7. حدد تحرير التعليمَات البرمجية عَلى شريط الأدوات لفتح Visual Studio Code للصفحة.

8. حدد مِلَف Chart.en-US.customjs.js.

9. عدّل المِلَف لتغيير وظيفة makeChart عَلى النحو التَالِي:

   function makeChart(data) {
     console.log(data);
     var rData = data.value.map(({
       name,
       revenue,
       numberofemployees
     }) => ({
       "x": numberofemployees,
       "y": revenue,
       "z": (!revenue) ? 1 : numberofemployees / revenue,
       "name": name
     }));
     console.log(rData);
   
     // new code to plot the data
     Highcharts.chart($('.mychart')[0], {
       title: {
         text: "Customers efficiency"
       },
       legend: {
         enabled: false
       },
       xAxis: {
         title: {
           text: "Number of employees"
         }
       },
       yAxis: {
         title: {
           text: "Turnover ($K)"
         }
       },
       tooltip: {
         pointFormat: '<strong>{point.name}</strong><br/>Employed: {point.x}<br>Turnover ($K): ${point.y}',
         headerFormat: ''
       },
       series: [{
         type: 'bubble',
         data: rData
       }]
     });
   }
   
   // retrieve accounts data using portals Web API
   $(document).ready(function() {
     $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
   });
   

10. اضغط عَلى اختصَار لوحة المفَاتيح Ctrl إضَافة S (⌘ إضَافة S on Mac) لحفظ المِلَف.

11. حدد مِلَف Chart.en-US.webpage.copy.html.

12. أدخل الكود التَالِي فِي عنصر <div> الدَاخلي:

      <figure>
        <div class="mychart"></div>
      </figure>
    

13. اضغط عَلى اختصَار لوحة المفَاتيح Ctrl إضَافة S (⌘ إضَافة S on Mac) لحفظ المِلَف.

    

14. أغلق علامة التبويب Visual Studio Code، ثم حدد مزَامِنة لمزَامِنة التغييرَات.

15. حدد إصدَار أولي > سطح المكتب.

16. يجب أن يتضمِن الإخرَاج الآن مخطط الفقَاعة. مرِّر مؤشر المَاوس فوق الفقَاعات للتحقق مِن البيَانَات.