السابق

التالي

تمرين - إنشاء مشروع دالات Azure

مكتمل

يحتاج تطبيق الويب لقائمة التسوق الخاصة بك إلى واجهة برمجة تطبيقات. في هذا التمرين، ستُنشئ واجهة برمجة التطبيقات الخاصة بك وتُشغّلها باستخدام مشروع Azure Functions. من هناك، ستقوم بتوسيع واجهة برمجة التطبيقات بدالة جديدة باستخدام ملحق Azure Functions لـ Visual Studio Code.

في هذا التمرين، سوف تكمل الخطوات التالية:

1. قم بإنشاء فرع وأنت تستعد لإجراء تغييرات على تطبيق الويب الخاص بك.
2. واستكشف “Azure Function project”.
3. قم بإنشاء الدالة “HTTP GET”.
4. استبدل رمز بدء التشغيل بالمنطق للحصول على المنتجات.
5. قم بتكوين تطبيق الويب لطلبات وكيل HTTP ل”API”.
6. شغّل “API” وتطبيق الويب.

تثبيت التطبيق "الدالة"

ستُضيف الآن واجهة برمجة تطبيقات وتوصلها بتطبيق الواجهة الأمامية لديك. يحتوي مجلد api-starter على مشروع Azure Functions غير مكتمل. ستكمل ذلك الآن.

ثم أنشيء فرع “API”

قبل إجراء تغييرات على تطبيق، من الأفضل إنشاء فرع جديد للتغييرات. أنت على وشك إكمال واجهة برمجة التطبيقات لتطبيقك، لذا حان الوقت الآن لإنشاء فرع.

1. في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.

2. أدخل وحدد Git: Checkout to....

3. حدد Create new branch.

4. أدخل api لاسم الفرع الجديد واضغط على Enter.

لقد أنشأت للتو فرع git لواجهة برمجة التطبيقات.

إكمال واجهة برمجة تطبيقات Azure Functions

لإكمال واجهة برمجة التطبيقات، ستبدأ بنقل التعليمة البرمجية البدائية لواجهة برمجة التطبيقات إلى مجلد يسمى api. هذا هو اسم المجلد الذي أدخلته للموقع api_location عندما أنشأت مثيل تطبيقات الويب الثابتة.

1. في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.

2. دخول وتحديد المحطة الطرفية: إنشاء محطة طرفية جديدة (في مساحة العمل النشطة).

3. تأكد من أنك في المجلد الرئيسي للمشروع.

4. استخدم أوامر git لإعادة تسمية مجلد api-starter إلى api.

   git mv api-starter api
   

5. افتح لوحة الأوامر بالضغط على F1.

6. اكتب Git: Commit All وحدده.

7. أدخل api رسالة الالتزام واضغط Enter.

سترى الآن مجلد api في مستكشف Visual Studio Code. يحتوي مجلد api على مشروع Azure Functions، إلى جانب ثلاث دالات.

المجلد والملف	الأسلوب	المسار
api/products-post	POST	products
api/products-put	PUT	products/:id
api/products-delete	DELETE	products/:id

إنشاء دالة HTTP GET

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

تثبيت ملحق Azure Functions لـ Visual Studio Code

يمكنك إنشاء تطبيقات دالات Azure وإدارتها بملحق Azure Functions لـ Visual Studio Code.

1. انتقل إلى "Visual Studio Marketplace" وثبّت ملحق Azure Functions لـ Visual Studio Code.

2. عند تحميل علامة تبويب الملحق في Visual Studio Code، حدد "Install".

3. بعد اكتمال التثبيت، حدد Reload.

ملاحظة

يرجى التأكد من تثبيت أدوات Azure Functions الأساسية التي ستسمح لك بتشغيل دالات Azure محليًا.

إنشاء الدالة

ستقوم الآن بتوسيع تطبيق Azure Function الخاص بك بدالة للحصول على منتجاتك.

1. في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.

2. أدخل وحدد Azure Functions: Create Function.

3. عند مطالبتك بإنشاء دالة، حدد HTTP Trigger.

4. أدخل products-get كاسم الدالة.

5. حدد Anonymous كمستوى للمصادقة.

ملاحظة

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

تكوين أسلوب HTTP ونقطة نهاية المسار

لاحظ أن المجلد api/products-get يحتوي على الملف function.json. يحتوي هذا الملف على تكوين دالتك.

تتضمن نقطة نهاية المسار اسم المجلد نفسه الذي يحتوي على الدالة، حسب الاصطلاح. بما أن الوظيفة أُنشئت في مجلد products-get، يتم إنشاء نقطة نهاية المسار كـ products-get افتراضياً. لكنك تريد أن تكون نقطة النهاية عبارة عن المنتجات.

كوّن دالتك:

1. افتح ملف api/products-get/function.json.

2. لاحظ أن الأساليب تسمح بـ GET و POST كليهما

3. غيّر صفيف الأساليب للسماح بطلبات GET فقط.

4. أضف إدخال "route": "products" بعد صفيف الأساليب.

الآن تُشغل دالتك بناءً على طلب GET HTTP للمنتجات. يجب أن تبدو function.json الخاصة بك مثل التعليمة البرمجية التالية:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

تحديث منطق الدالة

يحتوي ملف index.js الموجود في المجلد api/products-get على منطق يعمل عند تقديم طلب HTTP إلى المسار.

ستحتاج إلى تحديث المنطق للحصول على منتجاتك. يوجد منطق الوصول إلى البيانات في وحدة JavaScript النمطية /shared/product-data.js. تكشف الوحدة النمطية product-data دالة getProducts للحصول على المنتجات لقائمة التسوق.

الآن، غيّر نقطة نهاية الدالة لإعادة المنتجات:

1. افتح ملف api/products-get/index.js.

2. استبدل محتوياته بالتعليمة البرمجية التالية:

   const data = require('../shared/product-data');
   
   module.exports = async function (context, req) {
     try {
       const products = data.getProducts();
       context.res.status(200).json(products);
     } catch (error) {
       context.res.status(500).send(error);
     }
   };
   

ستجلب دالتك المنتجات وتُعيدها برمز الحالة 200، عقب نجاحها.

قم بتكوين “Cross-Origin Resource Sharing (CORS)” محليًا

لا داعي للقلق بشأن مشاركة الموارد عبر المصادر عند النشر في Azure Static Web Apps. Azure Static Web Apps تقوم بتكوين تطبيقك تلقائياً حتى يتمكن من الاتصال بواجهة برمجة التطبيقات الخاصة بك على Azure باستخدام وكيل عكسي. ولكن عند التشغيل محلياً، تحتاج إلى تكوين CORS للسماح لتطبيق الويب وواجهة برمجة التطبيقات الخاصة بك بالاتصال.

الآن، أخبر وظائف Azure Functions للسماح لتطبيق الويب الخاص بك لجعل طلبات HTTP إلى واجهة برمجة التطبيقات، على جهاز الكمبيوتر الخاص بك.

1. أنشئ ملفاً باسم api/local.settings.json.

2. أضف المحتويات التالية إلى الملف:

   {
     "Host": {
       "CORS": "http://localhost:4200"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:3000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:5000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:8080"
     }
   }
   

ملاحظة

يُدرج ملف local.settings.json في ملف .gitignore مما يمنع دفع هذا الملف إلى GitHub. هذا لأنه يمكنك تخزين الأسرار في هذا الملف، والتي لا ترغب في تخزينها في GitHub. هذا هو السبب في إنشاء الملف عندما أنشأت مستودعك من القالب.

تشغيل واجهة برمجة التطبيقات

حان الوقت الآن لمشاهدة تطبيق الويب الخاص بك ومشروع Azure Functions يعملان معاً. ابدأ بتشغيل مشروع Azure Functions محليًا باتباع الخطوات التالية:

ملاحظة

يرجى التأكد من تثبيت أدوات Azure Functions الأساسية التي ستسمح لك بتشغيل دالات Azure محليًا.

1. في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.

2. دخول وتحديد المحطة الطرفية: إنشاء محطة طرفية جديدة (في مساحة العمل النشطة).

3. انتقل إلى مجلد api:

   cd api
   

4. شغّل تطبيق Azure Functions محليًا:

   func start
   

شغّل تطبيق الويب

واجهة برمجة التطبيقات الخاصة بك تعمل. تحتاج الآن إلى تكوين تطبيق الواجهة الأمامية لتقديم طلب HTTP إلى واجهة برمجة التطبيقات الخاصة بك. يعمل تطبيق الواجهة الأمامية على منفذ واحد وتعمل واجهة برمجة التطبيقات على منفذ مختلف (7071). يمكن تكوين كل إطار عمل للواجهة الأمامية لطلبات وكيل HTTP إلى منفذ بأمان.

تكوين منفذ الوكيل الخاص بك

كوّن وكيلاً لتطبيق الواجهة الأمامية الخاص بك من خلال الخطوات التالية:

1. افتح ملف angular-app/proxy.conf.json.

2. حدد مكان target: 'http://localhost:7071' إعداد.

3. لاحظ أن منفذ الهدف يشير إلى 7071.

1. افتح الملف react-app/package.json.

2. حدد موقع إعداد "proxy": "http://localhost:7071/",.

3. لاحظ أن منفذ الوكيل يشير إلى 7071.

1. افتح ملف svelte-app/rollup.config.js.

2. حدد موقع سطر التعليمة البرمجية const api = 'http://localhost:7071/api';.

3. لاحظ أن منفذ المستودع يشير إلى 7071.

1. افتح ملف vue-app/vue.config.js.

2. حدد مكان إعداد target: 'http://localhost:7071',.

3. لاحظ أن منفذ الهدف يشير إلى 7071.

شغّل تطبيق ويب الواجهة الأمامية

واجهة برمجة التطبيقات الخاصة بك تعمل بالفعل على المنفذ 7071. الآن عند تشغيل تطبيق الويب الخاص بك، فإنه سيقدم طلبات HTTP الخاصة به إلى واجهة برمجة التطبيقات. شغّل تطبيق الويب الخاص بك باتباع هذه الخطوات:

1. في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.

2. دخول وتحديد المحطة الطرفية: إنشاء محطة طرفية جديدة (في مساحة العمل النشطة).

3. بعد ذلك، انتقل إلى مجلد إطار عمل الواجهة الأمامية المفضل، كما يلي:

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

4. شغّل تطبيق عميل الواجهة الأمامية:

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

استعرض تطبيقك

حان الوقت لمشاهدة تطبيقك وهو يعمل محلياً مقابل واجهة برمجة تطبيقات Azure Functions.

1. استعرض http://localhost:4200.

1. استعرض http://localhost:3000.

1. استعرض http://localhost:5000.

1. استعرض http://localhost:8080.

أنشأت تطبيقك وهو الآن يعمل محليًا ويقدم طلبات “HTTP GET” إلى “API” الخاصة بك.

2. الآن أوقف تشغيل التطبيق وواجهة برمجة التطبيقات الخاصة بك بالضغط على "Ctrl-C" في الوحدات الطرفية.

الخطوات التالية

يعمل تطبيقك محليًا وتتمثل خطوتك التالية في نشر التطبيق مع “API”.

متابعة