مشاركة عبر

تمكين المزامنة دون اتصال لتطبيق Cordova للأجهزة المحمولة

  • مقالة

نظرة عامة

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

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

لمعرفة المزيد حول ميزة المزامنة دون اتصال، راجع موضوع مزامنة البيانات دون اتصال في Azure Mobile Apps. للحصول على تفاصيل حول استخدام واجهة برمجة التطبيقات، راجع وثائق واجهة برمجة التطبيقات.

إضافة مزامنة دون اتصال إلى حل التشغيل السريع

يجب إضافة رمز المزامنة دون اتصال إلى التطبيق. تتطلب المزامنة دون اتصال المكون الإضافي cordova-sqlite-storage، والذي تتم إضافته تلقائيا إلى تطبيقك عند تضمين المكون الإضافي Azure Mobile Apps في المشروع. يتضمن مشروع التشغيل السريع كلا من هذه المكونات الإضافية.

  1. في مستكشف الحلول Visual Studio، افتح index.js واستبدل التعليمات البرمجية التالية

     var client,            // Connection to the Azure Mobile App backend
    todoItemTable;      // Reference to a table endpoint on backend

    من خلال هذه التعليمة البرمجية:

     var client,            // Connection to the Azure Mobile App backend
    todoItemTable,      // Reference to a table endpoint on backend
    syncContext;        // Reference to offline data sync context

  2. بعد ذلك، استبدل التعليمات البرمجية التالية:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');

    من خلال هذه التعليمة البرمجية:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
 var store = new WindowsAzure.MobileServiceSqliteStore('store.db');

 store.defineTable({
   name: 'todoitem',
   columnDefinitions: {
       id: 'string',
       text: 'string',
       complete: 'boolean',
       version: 'string'
   }
 });

 // Get the sync context from the client
 syncContext = client.getSyncContext();

    تقوم إضافات التعليمات البرمجية السابقة بتهيئة المتجر المحلي وتحديد جدول محلي يطابق قيم العمود المستخدمة في نهاية Azure الخلفية. (لا تحتاج إلى تضمين كافة قيم الأعمدة في هذه التعليمة البرمجية.) version يتم الاحتفاظ بالحقل بواسطة الخلفية المتنقلة ويتم استخدامه لحل التعارض.

    يمكنك الحصول على مرجع إلى سياق المزامنة عن طريق استدعاء getSyncContext. يساعد سياق المزامنة في الحفاظ على علاقات الجدول من خلال تعقب التغييرات ودفعها في جميع الجداول التي قام تطبيق العميل بتعديلها عند .push() استدعاؤها.

  3. قم بتحديث عنوان URL للتطبيق إلى عنوان URL لتطبيق تطبيق الأجهزة المحمولة.

  4. بعد ذلك، استبدل هذه التعليمة البرمجية:

     todoItemTable = client.getTable('todoitem'); // todoitem is the table name

    من خلال هذه التعليمة البرمجية:

     // Initialize the sync context with the store
 syncContext.initialize(store).then(function () {

 // Get the local table reference.
 todoItemTable = client.getSyncTable('todoitem');

 syncContext.pushHandler = {
     onConflict: function (pushError) {
         // Handle the conflict.
         console.log("Sync conflict! " + pushError.getError().message);
         // Update failed, revert to server's copy.
         pushError.cancelAndDiscard();
       },
       onError: function (pushError) {
           // Handle the error
           // In the simulated offline state, you get "Sync error! Unexpected connection failure."
           console.log("Sync error! " + pushError.getError().message);
       }
 };

 // Call a function to perform the actual sync
 syncBackend();

 // Refresh the todoItems
 refreshDisplay();

 // Wire up the UI Event Handler for the Add Item
 $('#add-item').submit(addItemHandler);
 $('#refresh').on('click', refreshDisplay);

    تهيئ التعليمة البرمجية السابقة سياق المزامنة ثم تستدعي getSyncTable (بدلا من getTable) للحصول على مرجع إلى الجدول المحلي.

    تستخدم هذه التعليمة البرمجية قاعدة البيانات المحلية لجميع عمليات الجدول إنشاء وقراءة وتحديث وحذف (CRUD).

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

  5. بعد ذلك، أضف هذه الدالة لتنفيذ المزامنة الفعلية.

     function syncBackend() {

   // Sync local store to Azure table when app loads, or when login complete.
   syncContext.push().then(function () {
       // Push completed

   });

   // Pull items from the Azure table after syncing to Azure.
   syncContext.pull(new WindowsAzure.Query('todoitem'));
 }

    يمكنك تحديد وقت دفع التغييرات إلى الواجهة الخلفية لتطبيق الأجهزة المحمولة عن طريق استدعاء syncContext.push(). على سبيل المثال، يمكنك استدعاء syncBackend في معالج حدث زر مرتبط بزر مزامنة.

اعتبارات المزامنة دون اتصال

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

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

في التعليمات البرمجية المتوفرة، يتم الاستعلام عن جميع السجلات في جدول todoItem البعيد، ولكن من الممكن أيضا تصفية السجلات عن طريق تمرير معرف استعلام والاستعلام للدفع. لمزيد من المعلومات، راجع القسم المزامنة التزايدية في مزامنة البيانات دون اتصال في تطبيقات Azure Mobile.

(اختياري) تعطيل المصادقة

إذا كنت لا تريد إعداد المصادقة قبل اختبار المزامنة دون اتصال، فقم بالتعليق على دالة رد الاتصال لتسجيل الدخول، ولكن اترك التعليمات البرمجية داخل دالة رد الاتصال غير تعليق. بعد التعليق على خطوط تسجيل الدخول، تتبع التعليمات البرمجية:

  // Login to the service.
  // client.login('twitter')
  //    .then(function () {
    syncContext.initialize(store).then(function () {
      // Leave the rest of the code in this callback function  uncommented.
            ...
    });
  // }, handleError);

الآن، تتم مزامنة التطبيق مع الواجهة الخلفية ل Azure عند تشغيل التطبيق.

تشغيل تطبيق العميل

مع تمكين المزامنة دون اتصال الآن، يمكنك تشغيل تطبيق العميل مرة واحدة على الأقل على كل نظام أساسي لملء قاعدة بيانات المتجر المحلي. في وقت لاحق، قم بمحاكاة سيناريو غير متصل وتعديل البيانات في المتجر المحلي أثناء عدم اتصال التطبيق.

(اختياري) اختبار سلوك المزامنة

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

  1. في مستكشف الحلول، افتح ملف المشروع index.js وغير عنوان URL للتطبيق للإشارة إلى عنوان URL غير صحيح، مثل التعليمات البرمجية التالية:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');

  2. في index.html، قم بتحديث عنصر CSP <meta> بنفس عنوان URL غير الصالح.

     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net-fail; style-src 'self'; media-src *">

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

  4. أغلق التطبيق ثم أعد تشغيله للتحقق من استمرار العناصر الجديدة التي قمت بإنشائها في المتجر المحلي.

  5. (اختياري) استخدم Visual Studio لعرض جدول قاعدة بيانات Azure SQL لمعرفة أن البيانات في قاعدة البيانات الخلفية لم تتغير.

    في Visual Studio، افتح Server Explorer. انتقل إلى قاعدة البيانات الخاصة بك في قواعد بياناتAzure-SQL>. انقر بزر الماوس الأيمن فوق قاعدة البيانات وحدد Open in SQL Server Object Explorer. يمكنك الآن الاستعراض للوصول إلى جدول قاعدة بيانات SQL ومحتوياته.

(اختياري) اختبار إعادة الاتصال بالواجهة الخلفية لهاتفك المحمول

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

  1. أعد فتح index.js واستعادة عنوان URL للتطبيق.

  2. أعد فتح index.html وتصحيح عنوان URL للتطبيق في عنصر CSP <meta> .

  3. إعادة إنشاء تطبيق العميل وتشغيله. يحاول التطبيق المزامنة مع الواجهة الخلفية لتطبيق الأجهزة المحمولة بعد تسجيل الدخول. تحقق من عدم تسجيل أي استثناءات في وحدة تحكم تتبع الأخطاء.

  4. (اختياري) عرض البيانات المحدثة باستخدام إما SQL Server Object Explorer أو أداة REST مثل Fiddler. لاحظ أنه تمت مزامنة البيانات بين قاعدة البيانات الخلفية والمخزن المحلي.

    لاحظ أنه تمت مزامنة البيانات بين قاعدة البيانات والمخزن المحلي وتحتوي على العناصر التي أضفتها أثناء قطع اتصال التطبيق.

الموارد الإضافية

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