إنشاء تطبيق Xamarin.Forms باستخدام Azure

• Android
• Cordova
• iOS
• Windows
• Xamarin.Android
• Xamarin.iOS
• Xamarin.Forms

نظرة عامة

يوضح لك هذا البرنامج التعليمي كيفية إضافة خدمة خلفية مستندة إلى السحابة إلى تطبيق Xamarin.Forms للأجهزة المحمولة باستخدام ميزة تطبيقات الأجهزة المحمولة في Azure App Service كواجهة خلفية. يمكنك إنشاء كل من الواجهة الخلفية لتطبيقات الأجهزة المحمولة الجديدة وتطبيق Xamarin.Forms لقائمة المهام البسيطة الذي يخزن بيانات التطبيق في Azure.

يعد إكمال هذا البرنامج التعليمي شرطا أساسيا لجميع البرامج التعليمية الأخرى لتطبيقات الأجهزة المحمولة ل Xamarin.Forms.

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

لاستكمال هذا البرنامج التعليمي، ستحتاج إلى ما يلي:

• حساب Azure نشط. إذا لم يكن لديك حساب، يمكنك التسجيل للحصول على إصدار تجريبي من Azure والحصول على ما يصل إلى 10 تطبيقات مجانية للأجهزة المحمولة يمكنك الاستمرار في استخدامها حتى بعد انتهاء الإصدار التجريبي. لمزيد من المعلومات، راجع الإصدار التجريبي المجاني من Azure.

• أدوات Visual Studio ل Xamarin، في Visual Studio 2017 أو أحدث، أو Visual Studio for Mac. راجع صفحة تثبيت Xamarin للحصول على الإرشادات.

• (اختياري) لإنشاء تطبيق iOS، يلزم استخدام Mac مع Xcode 9.0 أو إصدار أحدث. يمكن استخدام Visual Studio for Mac لتطوير تطبيقات iOS، أو يمكن استخدام Visual Studio 2017 أو إصدار أحدث (طالما يتوفر Mac على الشبكة).

إنشاء نهاية خلفية جديدة لتطبيقات الأجهزة المحمولة

1. تسجيل الدخول إلى ⁧⁩مدخل Microsoft Azure⁧⁩.

2. انقر فوق إنشاء مورد.

3. في مربع البحث، اكتب Web App.

4. في قائمة النتائج، حدد Web App من Marketplace.

5. حدد الاشتراك ومجموعة الموارد (حدد مجموعة موارد موجودة أو أنشئ مجموعة جديدة (باستخدام نفس اسم تطبيقك)).

6. اختر اسما فريدا لتطبيق الويب الخاص بك.

7. اختر خيار النشر الافتراضي كتعلم برمجي.

8. في مكدس وقت التشغيل، تحتاج إلى تحديد إصدار ضمن ASP.NET أو العقدة. إذا كنت تقوم بإنشاء خلفية .NET، فحدد إصدارا ضمن ASP.NET. وإلا إذا كنت تستهدف تطبيقا يستند إلى عقدة، فحدد أحد الإصدارات من Node.

9. حدد نظام التشغيل الصحيح، إما Linux أو Windows.

10. حدد المنطقة التي تريد نشر هذا التطبيق فيها.

11. حدد خطة خدمة التطبيقات المناسبة واضغط على Review and create.

12. ضمن Resource Group، حدد مجموعة موارد موجودة أو أنشئ مجموعة جديدة (باستخدام نفس اسم تطبيقك).

13. انقر فوق Create. انتظر بضع دقائق حتى يتم نشر الخدمة بنجاح قبل المتابعة. شاهد أيقونة الإعلامات (الجرس) في رأس المدخل للحصول على تحديثات الحالة.

14. بمجرد اكتمال النشر، انقر فوق قسم Deployment details ثم انقر فوق Resource of Type Microsoft.Web/sites. سينقلك إلى App Service Web App الذي قمت بإنشائه للتو.

15. انقر فوق جزء Configuration ضمن Settings وفي Application settings، انقر فوق الزر New application setting .

16. في صفحة Add/Edit application setting ، أدخل Name as MobileAppsManagement_EXTENSION_VERSION و Value كآخر واضغط على OK.

لقد تم تعيينك جميعا لاستخدام تطبيق App Service Web هذا الذي تم إنشاؤه حديثا كتطبيق الأجهزة المحمولة.

إنشاء اتصال قاعدة بيانات وتكوين مشروع العميل والخادم

1. قم بتنزيل عمليات التشغيل السريع ل SDK للعميل للأنظمة الأساسية التالية:

   iOS (Objective-C)
   iOS (Swift)
   Android (Java)
   Xamarin.iOS
   Xamarin.Android
   Xamarin.Forms
   Cordova
   Windows (C#)

   ملاحظة

   إذا كنت تستخدم مشروع iOS، فستحتاج إلى تنزيل "azuresdk-iOS-*.zip" من أحدث إصدار من GitHub. قم بإلغاء ضغط الملف وإضافته MicrosoftAzureMobile.framework إلى جذر المشروع.

2. سيتعين عليك إضافة اتصال قاعدة بيانات أو الاتصال باتصال موجود. أولا، حدد ما إذا كنت ستقوم بإنشاء مخزن بيانات أو استخدام مخزن موجود.

   • إنشاء مخزن بيانات جديد: إذا كنت تريد إنشاء مخزن بيانات، فاستخدم التشغيل السريع التالي:

     التشغيل السريع: بدء استخدام قواعد البيانات الفردية في قاعدة بيانات Azure SQL

   • مصدر البيانات الموجود: اتبع الإرشادات أدناه إذا كنت تريد استخدام اتصال قاعدة بيانات موجود

     1. تنسيق سلسلة اتصال قاعدة بيانات SQL - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} اسم الخادم، يمكن العثور على هذا في صفحة النظرة العامة لقاعدة البيانات الخاصة بك وعادة ما يكون في شكل "server_name.database.windows.net". {port} عادة 1433. {your_catalogue} اسم قاعدة البيانات. {your_username} اسم المستخدم للوصول إلى قاعدة البيانات الخاصة بك. {your_password} كلمة المرور للوصول إلى قاعدة البيانات الخاصة بك.

        تعرف على المزيد حول تنسيق سلسلة اتصال SQL

     2. أضف سلسلة الاتصال إلى تطبيق الأجهزة المحمولة في App Service، يمكنك إدارة سلاسل الاتصال لتطبيقك باستخدام خيار التكوين في القائمة.

        لإضافة سلسلة اتصال:

        1. انقر فوق علامة التبويب إعدادات التطبيق .

        2. انقر فوق [+] سلسلة اتصال جديدة.

        3. ستحتاج إلى توفير الاسموالقيمةوالنوع لسلسلة الاتصال.

        4. اكتب Name ك MS_TableConnectionString

        5. يجب أن تكون القيمة سلسلة الاتصال التي شكلتها في الخطوة السابقة.

        6. إذا كنت تضيف سلسلة اتصال إلى قاعدة بيانات SQL Azure، فاختر SQLAzure ضمن النوع.

3. تحتوي تطبيقات Azure Mobile على SDKs ل .NET والخلفيات Node.js.

   • خلفيةNode.js

     إذا كنت ستستخدم Node.js تطبيق التشغيل السريع، فاتبع الإرشادات أدناه.

     1. في مدخل Microsoft Azure، انتقل إلى Easy Tables، سترى هذه الشاشة.

        

     2. تأكد من إضافة سلسلة اتصال SQL بالفعل في علامة التبويب Configuration . ثم حدد المربع الذي أقر فيه بأن هذا سيؤدي إلى الكتابة فوق كافة محتويات الموقع وانقر فوق الزر إنشاء جدول TodoItem .

        

     3. في الجداول السهلة، انقر فوق الزر + إضافة .

        

     4. TodoItem إنشاء جدول مع وصول مجهول.

        

   • الواجهة الخلفية ل .NET

     إذا كنت ستستخدم تطبيق التشغيل السريع .NET، فاتبع الإرشادات أدناه.

     1. قم بتنزيل مشروع خادم Azure Mobile Apps .NET من مستودع azure-mobile-apps-quickstarts.

     2. إنشاء مشروع خادم .NET محليا في Visual Studio.

     3. في Visual Studio، افتح مستكشف الحلول، وانقر بزر الماوس الأيمن فوق ZUMOAPPNAMEService المشروع، وانقر فوق نشر، وسترى Publish to App Service نافذة. إذا كنت تعمل على Mac، فتحقق من طرق أخرى لنشر التطبيق هنا.

        

     4. حدد خدمة التطبيقات كهدف نشر، ثم انقر فوق تحديد موجود، ثم انقر فوق الزر نشر في أسفل النافذة.

     5. ستحتاج إلى تسجيل الدخول إلى Visual Studio باستخدام اشتراك Azure الخاص بك أولا. Subscriptionحدد ، Resource Group، ثم حدد اسم التطبيق الخاص بك. عندما تكون جاهزا، انقر فوق موافق، سيؤدي ذلك إلى نشر مشروع خادم .NET الذي لديك محليا في الواجهة الخلفية لخدمة التطبيقات. عند انتهاء النشر، ستتم إعادة توجيهك إلى http://{zumoappname}.azurewebsites.net/ في المستعرض.

تشغيل حل Xamarin.Forms

أدوات Visual Studio ل Xamarin مطلوبة لفتح الحل، راجع إرشادات تثبيت Xamarin. إذا كانت الأدوات مثبتة بالفعل، فاتبع هذه الخطوات لتنزيل الحل وفتحه:

Visual Studio (Windows وMac)

1. انتقل إلى مدخل Microsoft Azure وانتقل إلى تطبيق الأجهزة المحمولة الذي قمت بإنشائه. في الجزء Overview ، ابحث عن عنوان URL الذي يمثل نقطة النهاية العامة لتطبيق الأجهزة المحمولة. مثال - سيكون اسم الموقع لاسم تطبيقي "test123" هو https://test123.azurewebsites.net.

2. افتح الملف Constants.cs في هذا المجلد - xamarin.forms/ZUMOAPPNAME. اسم التطبيق هو ZUMOAPPNAME.

3. في Constants.cs الفئة، استبدل ZUMOAPPURL المتغير بنقطة نهاية عامة أعلاه.

   public static string ApplicationURL = @"ZUMOAPPURL";

   يصبح

   public static string ApplicationURL = @"https://test123.azurewebsites.net";

4. اتبع الإرشادات أدناه لتشغيل مشاريع Android أو Windows؛ وإذا كان هناك كمبيوتر Mac متصل بالشبكة متوفر، فإن مشروع iOS.

(اختياري) تشغيل مشروع Android

في هذا القسم، يمكنك تشغيل مشروع Xamarin.Android. يمكنك تخطي هذا القسم إذا كنت لا تعمل مع أجهزة Android.

Visual Studio

1. انقر بزر الماوس الأيمن فوق مشروع Android (Droid)، ثم حدد Set as StartUp Project.

2. في قائمة Build، حدد Configuration Manager.

3. في مربع الحوار Configuration Manager، حدد خانتي الاختيار إنشاءونشر بجوار مشروع Android، وتأكد من تحديد خانة الاختيار إنشاء لمشروع التعليمات البرمجية المشتركة.

4. لإنشاء المشروع وبدء تشغيل التطبيق في محاكي Android، اضغط على المفتاح F5 أو انقر فوق زر البدء .

Visual Studio لـ Mac

1. انقر بزر الماوس الأيمن فوق مشروع Android، ثم حدد تعيين كمشروع بدء التشغيل.

2. لإنشاء المشروع وبدء تشغيل التطبيق في محاكي Android، حدد قائمة Run ، ثم Start Debugging.

في التطبيق، اكتب نصا ذا معنى، مثل Learn Xamarin، ثم حدد علامة الجمع (+).

يرسل هذا الإجراء طلب نشر إلى النهاية الخلفية الجديدة لتطبيقات الأجهزة المحمولة المستضافة في Azure. يتم إدراج البيانات من الطلب في جدول TodoItem. يتم إرجاع العناصر المخزنة في الجدول بواسطة الواجهة الخلفية لتطبيقات الأجهزة المحمولة، ويتم عرض البيانات في القائمة.

ملاحظة

توجد التعليمات البرمجية التي تصل إلى النهاية الخلفية لتطبيقات الأجهزة المحمولة في ملف TodoItemManager.cs C# لمشروع التعليمات البرمجية المشتركة في الحل.

(اختياري) تشغيل مشروع iOS

في هذا القسم، يمكنك تشغيل مشروع Xamarin.iOS لأجهزة iOS. يمكنك تخطي هذا القسم إذا كنت لا تعمل مع أجهزة iOS.

Visual Studio

1. انقر بزر الماوس الأيمن فوق مشروع iOS، ثم حدد Set as StartUp Project.

2. في قائمة Build، حدد Configuration Manager.

3. في مربع الحوار Configuration Manager، حدد خانتي الاختيار إنشاءونشر بجوار مشروع iOS، وتأكد من تحديد خانة الاختيار إنشاء لمشروع التعليمات البرمجية المشتركة.

4. لإنشاء المشروع وبدء تشغيل التطبيق في محاكي iPhone، حدد المفتاح F5 .

Visual Studio لـ Mac

1. انقر بزر الماوس الأيمن فوق مشروع iOS، ثم حدد تعيين كمشروع بدء التشغيل.

2. في قائمة Run ، حدد Start Debugging لإنشاء المشروع وبدء تشغيل التطبيق في محاكي iPhone.

في التطبيق، اكتب نصا ذا معنى، مثل Learn Xamarin، ثم حدد علامة الجمع (+).

يرسل هذا الإجراء طلب نشر إلى النهاية الخلفية الجديدة لتطبيقات الأجهزة المحمولة المستضافة في Azure. يتم إدراج البيانات من الطلب في جدول TodoItem. يتم إرجاع العناصر المخزنة في الجدول بواسطة الواجهة الخلفية لتطبيقات الأجهزة المحمولة، ويتم عرض البيانات في القائمة.

ملاحظة

ستجد التعليمات البرمجية التي تصل إلى النهاية الخلفية لتطبيقات الأجهزة المحمولة في ملف TodoItemManager.cs C# لمشروع التعليمات البرمجية المشتركة في الحل.

(اختياري) تشغيل مشروع Windows

في هذا القسم، يمكنك تشغيل مشروع Xamarin.Forms النظام الأساسي العام لـ Windows (UWP) لأجهزة Windows. يمكنك تخطي هذا القسم إذا كنت لا تعمل مع أجهزة Windows.

Visual Studio

1. انقر بزر الماوس الأيمن فوق أي مشروع UWP، ثم حدد Set as StartUp Project.

2. في قائمة Build، حدد Configuration Manager.

3. في مربع الحوار Configuration Manager، حدد خانتي الاختيار إنشاءونشر بجوار مشروع Windows الذي اخترته، وتأكد من تحديد خانة الاختيار إنشاء لمشروع التعليمات البرمجية المشتركة.

4. لإنشاء المشروع وبدء تشغيل التطبيق في محاكي Windows، اضغط على المفتاح F5 أو انقر فوق زر البدء (الذي يجب أن يقرأ الجهاز المحلي).

ملاحظة

يتعذر تشغيل مشروع Windows على macOS.

في التطبيق، اكتب نصا ذا معنى، مثل Learn Xamarin، ثم حدد علامة الجمع (+).

يرسل هذا الإجراء طلب نشر إلى النهاية الخلفية الجديدة لتطبيقات الأجهزة المحمولة المستضافة في Azure. يتم إدراج البيانات من الطلب في جدول TodoItem. يتم إرجاع العناصر المخزنة في الجدول بواسطة الواجهة الخلفية لتطبيقات الأجهزة المحمولة، ويتم عرض البيانات في القائمة.

ملاحظة

ستجد التعليمات البرمجية التي تصل إلى النهاية الخلفية لتطبيقات الأجهزة المحمولة في ملف TodoItemManager.cs C# لمشروع مكتبة الفئة المحمولة للحل الخاص بك.

استكشاف الأخطاء وإصلاحها

إذا كنت تواجه مشكلات في إنشاء الحل، فقم بتشغيل مدير حزمة NuGet وتحديثه إلى أحدث إصدار من Xamarin.Forms، وفي مشروع Android، قم بتحديث Xamarin.Android حزم الدعم. قد لا تتضمن مشاريع التشغيل السريع دائما أحدث الإصدارات.

يرجى ملاحظة أن جميع حزم الدعم المشار إليها في مشروع Android الخاص بك يجب أن يكون لها نفس الإصدار. تحتوي Xamarin.Android.Support.CustomTabsحزمة Azure Mobile Apps NuGet على تبعية لنظام Android الأساسي، لذلك إذا كان مشروعك يستخدم حزم دعم أحدث تحتاج إلى تثبيت هذه الحزمة مع الإصدار المطلوب مباشرة لتجنب التعارضات.