التمرين - إنشاء مشروع وظائف Azure Functions - Learn

6 دقائق

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

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

قم بإنشاء فرع وأنت تستعد لإجراء تغييرات على تطبيق الويب الخاص بك.
استكشاف مشروع وظائف Azure.
قم بإنشاء الدالة “HTTP GET”.
استبدل رمز بدء التشغيل بالمنطق للحصول على المنتجات.
قم بتكوين تطبيق الويب لطلبات وكيل HTTP ل”API”.
شغّل “API” وتطبيق الويب.

ملاحظة

تأكد من تكوين Visual Studio من أجل تطوير Azure باستخدام Microsoft .NET.

احصل على تطبيق الدالة

الآن، ستضيف واجهة برمجة تطبيقات وتربطها بتطبيق الواجهة الأمامية. يتضمن مشروع ⁧⁩واجهة برمجة التطبيقات⁧⁩ مشروع وظائف Azure Functions غير مكتملة. ستكمل ذلك الآن.

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

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

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

يحتوي مشروع ⁧⁩واجهة برمجة التطبيقات⁧⁩ على مشروع وظائف Azure Functions الخاص بك، بالإضافة إلى ثلاث وظائف.

الفصل	الأسلوب	المسار
⁧⁩ProductsPost⁧⁩	POST	`products`
⁧⁩ProductsPut⁧⁩	PUT	`products/:id`
⁧⁩ProductsDelete⁧⁩	DELETE	`products/:id`

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

قم بإنشاء الدالة HTTP GET

في “Visual Studio”، انقر بالزر الأيمن على مشروع “Api” واختر “Add -> New Azure Function”.
أدخل ProductsGet.cs باعتباره اسم الوظيفة.
حدد “Http trigger” باعتباره نوع الدالة.
قم بتحديد “Anonymous”في القائمة المنسدلة “Authorization level”.
حدد ⁧⁩إضافة⁧⁩.

Creating a new Azure Function. .

قمت للتو بتوسيع تطبيق Azure Functions الخاص بك مع وظيفة للحصول على منتجاتك!

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

لاحظ أسلوب ⁧Run⁩ لفئة C# التي تم إنشاؤها حديثًا له ⁧HttpTrigger⁩ سمة على الجدال الأول، و⁧HttpRequest⁩. يتم استخدام هذه السمة لتعريف مستوى الوصول إلى الدالة، وكذلك أسلوب HTTP (أو أساليب) للاستماع ومن أجل نقطة نهاية الطريق.

ستكون نقطة نهاية المسار ⁧null⁩ افتراضية، ما يعني أن نقطة النهاية ستستخدم قيمة السمة ⁧FunctionName⁩، وهي ⁧ProductsGet⁩. سيؤدي تعيين Route الخاصية "products" إلى تجاوز السلوك الافتراضي.

الآن تُشغل دالتك بناءً على طلب GET“ HTTP” للمنتجات. أسلوبك ⁧Run⁩ يجب أن يشبه الرمز التالي:

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

تحديث المنطق للمسار

نص الأسلوب ⁧Run⁩ وهو ما سيتم تنفيذه عند تنفيذ الدالة.

ستحتاج إلى تحديث المنطق للحصول على منتجاتك. هناك منطق الوصول إلى البيانات في ملف ⁧ProductData.cs⁩ كفئة تسمى ⁧ProductData⁩، والتي تتوفر عبر Dependency Injection ⁧IProductData⁩ كواجهة. لدى الواجهة أسلوب يسمى GetProducts“which will return a”Task<IEnumerable<Product>> يقوم بإرجاع قائمة المنتجات بشكل غير متزامن.

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

افتح “ProductsGet.cs”.

استبدال محتوياته مع الرمز التالي:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using System.Threading.Tasks;

namespace Api;

public class ProductsGet
{
    private readonly IProductData productData;

    public ProductsGet(IProductData productData)
    {
        this.productData = productData;
    }

    [FunctionName("ProductsGet")]
    public async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
    {
        var products = await productData.GetProducts();
        return new OkObjectResult(products);
    }
}

الآن قمت بتحويل الفئة من ثابت إلى مثيل فئة، وأضفت الواجهة إلى المنشئ بحيث يمكن حقنها من قبل إطار عمل “Dependency Injection” وتكوين دالة لإرجاع قائمة المنتجات عند استردادها.

لن يكون لديك ما يدعو للقلق حول “Cross-Origin Resource Sharing (CORS)”عند نشره إلى “Azure Static Web Apps”. Azure Static Web Apps تقوم بتكوين تطبيقك تلقائياً حتى يتمكن من الاتصال بواجهة برمجة التطبيقات الخاصة بك على Azure باستخدام وكيل عكسي. ولكن عند التشغيل محلياً، تحتاج إلى تكوين CORS للسماح لتطبيق الويب وواجهة برمجة التطبيقات الخاصة بك بالاتصال.

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

قم بإنشاء ملف باسم launchSettings.json في مجلد Properties من مشروع Api.
- إذا لم يكن الملف موجودًا، قم بإنشائه.

حدث محتويات الملف إلى ما يلي:

{
    "profiles": {
        "Api": {
            "commandName": "Project",
            "commandLineArgs": "start --cors *"
        }
    }
}

ملاحظة

يُستخدم هذا الملف للتحكم في كيفية تشغيل Visual Studio لأدوات وظائف Azure Functions. إذا كنت ترغب في استخدام أداة “Azure Functions command line” فأنت بحاجة إلى ملف “local.settings.js” كما هو موصوف في “Azure Functions Core Tools docs”. سيتم سرد الملف “local.settings.js” في ملف “.gitignore”، والذي يمنع هذا الملف من أن يتم دفعه إلى “GitHub”. هذا لأنه يمكنك تخزين الأسرار في هذا الملف إن كنت لا تريد ذلك في GitHub. علاوةً على ذلك، هذا هو السبب في إنشاء الملف عندما أنشأت مستودعك من القالب.

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

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

في “Visual Studio”، انقر بزر الماوس الأيمن على حل “ShoppingList”.
حدد “Set Startup Projects”.
حدد خيار “Multiple startup projects”.
قم بتعيين “Api” و”Client” ليكون Start ليمثل Actionالخاص بهم، ثم حدد “Ok”.
قم بتشغيل مصحح الأخطاء.

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

حان الوقت لمشاهدة التطبيق الخاص بك قيد التشغيل محليًا مقابل واجهة برمجة تطبيقات وظائف Azure Functions.

وتصفّح تطبيق الويب (على سبيل المثال: ⁧https://localhost:44348/⁩).

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

والآن أوقف تشغيل التطبيق و”API” عن طريق قطع اتصال المصحح في “Visual Studio”.

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

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

متابعة

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