مشاركة عبر

إنشاء تطبيق Apache Cordova

  • مقالة

نظرة عامة

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

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

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

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

يمكنك أيضا تجاوز Visual Studio واستخدام سطر أوامر Apache Cordova مباشرة. استخدام سطر الأوامر مفيد عند إكمال البرنامج التعليمي على كمبيوتر Mac. لا يغطي هذا البرنامج التعليمي التحويل البرمجي لتطبيقات عميل Apache Cordova باستخدام سطر الأوامر.

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

  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، فتحقق من طرق أخرى لنشر التطبيق هنا.

        نشر Visual studio

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

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

تنزيل وتشغيل تطبيق Apache Cordova

  1. انتقل إلى ملف الحل في مشروع العميل (.sln) وافتحه باستخدام Visual Studio.

  2. في Visual Studio، اختر النظام الأساسي للحلول (Android أو iOS أو Windows) من القائمة المنسدلة بجوار سهم البدء. حدد جهاز نشر أو محاكي معين بالنقر فوق القائمة المنسدلة على السهم الأخضر. يمكنك استخدام النظام الأساسي الافتراضي لنظام Android ومحاكي Ripple. تتطلب منك البرامج التعليمية الأكثر تقدما (على سبيل المثال، الإعلامات المؤقتة) تحديد جهاز أو محاكي مدعوم.

  3. افتح الملف ToDoActivity.java في هذا المجلد - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. اسم التطبيق هو ZUMOAPPNAME.

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

  5. انتقل إلى index.js الملف في ZUMOAPPNAME/www/js/index.js وفي onDeviceReady() الأسلوب، استبدل ZUMOAPPURL المعلمة بنقطة النهاية العامة أعلاه.

    client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

    يصبح

    client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');

  6. لإنشاء تطبيق Cordova وتشغيله، اضغط على F5 أو انقر فوق السهم الأخضر. إذا رأيت مربع حوار أمان في المحاكي يطلب الوصول إلى الشبكة، فاقبله.

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

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

يمكنك تكرار الخطوات من 3 إلى 5 للأنظمة الأساسية الأخرى.