Share via

Mengaktifkan sinkronisasi offline untuk aplikasi seluler Cordova Anda

  • Artikel

Gambaran Umum

Tutorial ini memperkenalkan fitur sinkronisasi offline Azure Mobile Apps untuk Cordova. Sinkronisasi offline memungkinkan pengguna akhir untuk berinteraksi dengan aplikasi seluler—melihat, menambahkan, atau memodifikasi data—bahkan ketika tidak ada koneksi jaringan. Perubahan disimpan di dalam database lokal. Setelah perangkat kembali online, perubahan ini disinkronkan dengan layanan jarak jauh.

Tutorial ini didasarkan pada solusi mulai cepat Cordova untuk Aplikasi Seluler yang Anda buat ketika Anda menyelesaikan tutorial mulai cepat Apache Cordova. Dalam tutorial ini, Anda memperbarui solusi mulai cepat untuk menambahkan fitur offline Azure Mobile Apps. Kami juga menyoroti kode khusus offline di aplikasi.

Untuk mempelajari selengkapnya mengenai fitur sinkronisasi offline, lihat topik Sinkronisasi Data Offline di Azure Mobile Apps. Untuk detail penggunaan API, lihat dokumentasi API.

Menambahkan sinkronisasi offline ke solusi mulai cepat

Kode sinkronisasi offline harus ditambahkan ke aplikasi. Sinkronisasi offline memerlukan plugin cordova-sqlite-storage, yang secara otomatis ditambahkan ke aplikasi Anda saat plugin Azure Mobile Apps disertakan dalam proyek. Proyek Mulai Cepat mencakup kedua plugin ini.

  1. Di Penjelajah Solusi Visual Studio, buka index.js dan ganti kode berikut

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

    Dengan kode ini:

     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. Selanjutnya, ganti kode berikut:

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

    Dengan kode ini:

     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();

    Penambahan kode sebelumnya menginisialisasi penyimpanan lokal dan menentukan tabel lokal yang cocok dengan nilai kolom yang digunakan di back end Azure Anda. (Anda tidak perlu menyertakan semua nilai kolom dalam kode ini.) Bidang version ini dikelola oleh backend seluler dan digunakan untuk penyelesaian konflik.

    Anda mendapatkan referensi ke konteks sinkronisasi dengan memanggil getSyncContext. Konteks sinkronisasi membantu mempertahankan hubungan tabel dengan melacak dan mendorong perubahan di semua tabel yang telah dimodifikasi aplikasi klien saat .push() dipanggil.

  3. Perbarui URL aplikasi ke URL aplikasi Aplikasi Seluler Anda.

  4. Selanjutnya, ganti kode ini:

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

    Dengan kode ini:

     // 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);

    Kode sebelumnya menginisialisasi konteks sinkronisasi lalu memanggil getSyncTable (bukan getTable) untuk mendapatkan referensi ke tabel lokal.

    Kode ini menggunakan database lokal untuk semua operasi tabel buat, baca, perbarui, dan hapus (CRUD).

    Sampel ini melakukan penanganan kesalahan sederhana pada konflik sinkronisasi. Aplikasi nyata akan menangani berbagai kesalahan seperti kondisi jaringan, konflik server, dan lainnya. Untuk contoh kode, lihat sampel sinkronisasi offline.

  5. Selanjutnya, tambahkan fungsi ini untuk melakukan sinkronisasi aktual.

     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'));
 }

    Anda memutuskan kapan harus mendorong perubahan ke backend Mobile App dengan memanggil syncContext.push(). Misalnya, Anda dapat memanggil syncBackend dalam penanganan aktivitas tombol yang terkait dengan tombol sinkronisasi.

Pertimbangan sinkronisasi offline

Dalam sampel, metode pendorongansyncContext hanya dipanggil pada startup aplikasi dalam fungsi panggilan balik untuk masuk. Dalam aplikasi dunia nyata, Anda juga dapat membuat fungsionalitas sinkronisasi ini dipicu secara manual atau ketika status jaringan berubah.

Ketika tarikan dijalankan terhadap tabel yang telah menunggu pembaruan lokal yang dilacak oleh konteks, operasi penarikan tersebut secara otomatis memicu dorongan. Saat menyegarkan, menambahkan, dan menyelesaikan item dalam sampel ini, Anda dapat menghilangkan panggilan push eksplisit, karena mungkin berlebihan.

Dalam kode yang disediakan, semua rekaman dalam tabel todoItem jarak jauh dikueri, tetapi juga dimungkinkan untuk memfilter rekaman dengan meneruskan id kueri dan kueri untuk mendorong. Untuk informasi selengkapnya, lihat bagian Sinkronisasi Inkremental di Sinkronisasi Data Offline di Azure Mobile Apps.

(Opsional) Menonaktifkan autentikasi

Jika Anda tidak ingin menyiapkan autentikasi sebelum menguji sinkronisasi offline, komentari fungsi panggilan balik untuk masuk, tetapi biarkan kode di dalam fungsi panggilan balik tidak berkomentar. Setelah mengomentari baris masuk, kodenya mengikuti:

  // 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);

Sekarang, aplikasi disinkronkan dengan backend Azure saat Anda menjalankan aplikasi.

Menjalankan aplikasi klien

Dengan sinkronisasi offline yang sekarang diaktifkan, Anda dapat menjalankan aplikasi klien setidaknya sekali di setiap platform untuk mengisi database penyimpanan lokal. Kemudian, simulasikan skenario offline dan ubah data di penyimpanan lokal saat aplikasi sedang offline.

(Opsional) Menguji perilaku sinkronisasi

Di bagian ini, Anda memodifikasi proyek klien untuk mensimulasikan skenario offline dengan menggunakan URL aplikasi yang tidak valid untuk backend Anda. Saat Anda menambahkan atau mengubah item data, perubahan ini disimpan di penyimpanan lokal, tetapi tidak disinkronkan ke penyimpanan data backend hingga koneksi dibuat ulang.

  1. Di Penjelajah Solusi, buka file proyek index.js dan ubah URL aplikasi untuk menunjuk ke URL yang tidak valid, seperti kode berikut:

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

  2. Di index.html, perbarui elemen CSP <meta> dengan URL yang tidak valid yang sama.

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

  3. Buat dan jalankan aplikasi klien dan perhatikan bahwa pengecualian dicatat di konsol saat aplikasi mencoba menyinkronkan dengan backend setelah masuk. Item baru apa pun yang Anda tambahkan hanya ada di penyimpanan lokal hingga didorong ke backend seluler. Aplikasi klien bersifat seolah-olah terhubung ke backend.

  4. Tutup aplikasi dan mulai ulang untuk memverifikasi bahwa item baru yang Anda buat tetap ada di penyimpanan lokal.

  5. (Opsional) Gunakan Visual Studio untuk menampilkan tabel Azure SQL Database Anda untuk melihat bahwa data dalam database backend tidak berubah.

    Di Visual Studio, buka Server Explorer. Navigasikan ke database Anda di Azure-SQL> Database. Klik kanan database Anda dan pilih Buka di SQL Server Object Explorer. Sekarang Anda dapat menelusuri ke tabel database SQL Anda dan kontennya.

(Opsional) Menguji koneksi ulang ke backend seluler Anda

Di bagian ini, Anda menyambungkan kembali aplikasi ke backend seluler, yang mensimulasikan aplikasi kembali ke status online. Saat Anda masuk, data disinkronkan ke backend seluler Anda.

  1. Buka kembali index.js dan pulihkan URL aplikasi.

  2. Buka kembali index.html dan koreksi URL aplikasi di elemen CSP <meta> .

  3. Bangun ulang dan jalankan aplikasi klien. Aplikasi ini mencoba menyinkronkan dengan backend aplikasi seluler setelah masuk. Verifikasi bahwa tidak ada pengecualian yang dicatat di konsol debug.

  4. (Opsional) Lihat data yang diperbarui menggunakan SQL Server Object Explorer atau alat REST seperti Fiddler. Perhatikan bahwa data telah disinkronkan antara database backend dan penyimpanan lokal.

    Perhatikan bahwa data telah disinkronkan antara database dan penyimpanan lokal dan berisi item yang Anda tambahkan saat aplikasi Anda terputus.

Sumber Daya Tambahan:

Langkah berikutnya