Cordova mobil uygulamanız için çevrimdışı eşitlemeyi etkinleştirme

Makale
06/25/2019

Genel Bakış

Bu öğreticide Cordova için Azure Mobile Apps'in çevrimdışı eşitleme özelliği tanıtılmaktadır. Çevrimdışı eşitleme, ağ bağlantısı olmadığında bile son kullanıcıların bir mobil uygulamayla (verileri görüntüleme, ekleme veya değiştirme) etkileşim kurmasına olanak tanır. Değişiklikler yerel veritabanında depolanır. Cihaz yeniden çevrimiçi olduğunda, bu değişiklikler uzak hizmetle eşitlenir.

Bu öğretici, Apache Cordova hızlı başlangıç öğreticisini tamamladığınızda oluşturduğunuz Mobile Apps için Cordova hızlı başlangıç çözümünü temel alır. Bu öğreticide, Azure Mobile Apps'in çevrimdışı özelliklerini eklemek için hızlı başlangıç çözümünü güncelleştirin. Ayrıca uygulamadaki çevrimdışına özgü kodu da vurgularız.

Çevrimdışı eşitleme özelliği hakkında daha fazla bilgi edinmek için Azure Mobile Apps'te Çevrimdışı Veri Eşitleme konusuna bakın. API kullanımıyla ilgili ayrıntılar için API belgelerine bakın.

Hızlı başlangıç çözümüne çevrimdışı eşitleme ekleme

Çevrimdışı eşitleme kodu uygulamaya eklenmelidir. Çevrimdışı eşitleme, Azure Mobile Apps eklentisi projeye dahil edildiğinde uygulamanıza otomatik olarak eklenen cordova-sqlite-storage eklentisini gerektirir. Hızlı Başlangıç projesi bu eklentilerin ikisini de içerir.

Visual Studio'nun Çözüm Gezgini index.js açın ve aşağıdaki kodu değiştirin

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

yerine şu kodu yazın:

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

Ardından aşağıdaki kodu değiştirin:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
```
yerine şu kodu yazın:
```
 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();
```
Yukarıdaki kod eklemeleri yerel depoyu başlatır ve Azure arka ucunuzda kullanılan sütun değerleriyle eşleşen bir yerel tablo tanımlar. (Bu koda tüm sütun değerlerini eklemeniz gerekmez.) Alan version , mobil arka uç tarafından korunur ve çakışma çözümü için kullanılır.

getSyncContext çağrısı yaparak eşitleme bağlamı için bir başvuru alırsınız. Eşitleme bağlamı, bir istemci uygulamasının çağrıldığında .push() değiştirdiği tüm tablolardaki değişiklikleri izleyerek ve göndererek tablo ilişkilerinin korunmasına yardımcı olur.
Uygulama URL'sini Mobil Uygulama uygulama URL'nize güncelleştirin.

Ardından şu kodu değiştirin:

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

yerine şu kodu yazın:

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

Yukarıdaki kod, eşitleme bağlamını başlatır ve ardından yerel tabloya başvuru almak için getSyncTable'ı (getTable yerine) çağırır.

Bu kod tüm oluşturma, okuma, güncelleştirme ve silme (CRUD) tablo işlemleri için yerel veritabanını kullanır.

Bu örnek, eşitleme çakışmalarında basit hata işleme gerçekleştirir. Gerçek bir uygulama ağ koşulları, sunucu çakışmaları ve diğerleri gibi çeşitli hataları işleyebilir. Kod örnekleri için çevrimdışı eşitleme örneğine bakın.

Ardından, gerçek eşitlemeyi gerçekleştirmek için bu işlevi ekleyin.

 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() çağrısı yaparak değişiklikleri Mobil Uygulama arka ucuna ne zaman gönderebilirsiniz? Örneğin, eşitleme düğmesine bağlı bir düğme olay işleyicisinde syncBackend'i çağırabilirsiniz.

Çevrimdışı eşitlemeyle ilgili dikkat edilmesi gerekenler

Örnekte syncContextgönderme yöntemi yalnızca oturum açma için geri çağırma işlevinde uygulama başlangıcında çağrılır. Gerçek dünyadaki bir uygulamada, bu eşitleme işlevini el ile veya ağ durumu değiştiğinde tetikleyebilirsiniz.

Bağlam tarafından izlenen bekleyen yerel güncelleştirmelerin bulunduğu bir tabloda çekme işlemi yürütülürse, bu çekme işlemi otomatik olarak bir göndermeyi tetikler. Bu örnekteki öğeleri yeniler, ekler ve tamamlarken, gereksiz olabileceğinden açık anında iletme çağrısını atlayabilirsiniz.

Sağlanan kodda, uzak todoItem tablosundaki tüm kayıtlar sorgulanır, ancak göndermek için bir sorgu kimliği ve sorgu geçirerek kayıtları filtrelemek de mümkündür. Daha fazla bilgi için Azure Mobile Apps'te Çevrimdışı Veri Eşitleme'deArtımlı Eşitleme bölümüne bakın.

(İsteğe bağlı) Kimlik doğrulamayı devre dışı bırakma

Çevrimdışı eşitlemeyi test etmeden önce kimlik doğrulamasını ayarlamak istemiyorsanız, oturum açmak için geri çağırma işlevini açıklama satırı yapın, ancak kodu geri çağırma işlevinin içinde açıklamasız bırakın. Oturum açma satırlarına açıklama ekledikten sonra kod aşağıdaki gibidir:

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

Artık uygulamayı çalıştırdığınızda uygulama Azure arka ucuyla eşitlenir.

İstemci uygulamasını çalıştırma

Çevrimdışı eşitleme etkinleştirildiğinde istemci uygulamasını her platformda en az bir kez çalıştırarak yerel depo veritabanını doldurabilirsiniz. Daha sonra çevrimdışı bir senaryonun benzetimini yapın ve uygulama çevrimdışıyken yerel depodaki verileri değiştirin.

(İsteğe bağlı) Eşitleme davranışını test etme

Bu bölümde, arka ucunuz için geçersiz bir uygulama URL'si kullanarak istemci projesini çevrimdışı bir senaryonun benzetimini yapmak üzere değiştireceksiniz. Veri öğeleri eklediğinizde veya değiştirdiğinizde, bu değişiklikler yerel depoda tutulur, ancak bağlantı yeniden kurulana kadar arka uç veri deposuyla eşitlenmez.

Çözüm Gezgini index.js proje dosyasını açın ve uygulama URL'sini aşağıdaki kod gibi geçersiz bir URL'ye işaret eden şekilde değiştirin:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');
```

index.html'da CSP <meta> öğesini aynı geçersiz URL ile güncelleştirin.

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

İstemci uygulamasını derleyip çalıştırın ve uygulama oturum açtıktan sonra arka uçla eşitlemeye çalıştığında konsolda bir özel durumun günlüğe kaydedildiğini fark edin. Eklediğiniz tüm yeni öğeler yalnızca mobil arka uçtan gönderilene kadar yerel depoda bulunur. İstemci uygulaması arka uçla bağlantılı gibi davranır.
Oluşturduğunuz yeni öğelerin yerel depoda kalıcı olduğunu doğrulamak için uygulamayı kapatın ve yeniden başlatın.
(İsteğe bağlı) Arka uç veritabanındaki verilerin değişmediğini görmek üzere Azure SQL Veritabanı tablonuzu görüntülemek için Visual Studio'yu kullanın.

Visual Studio'da Sunucu Gezgini'ne gidin. Azure-SQL>Veritabanları'nda veritabanınıza gidin. Veritabanınıza sağ tıklayın ve SQL Server Nesne Gezgini Aç'ı seçin. Artık SQL veritabanı tablonuza ve içindekilere göz atabilirsiniz.

(İsteğe bağlı) Mobil arka ucunuza yeniden bağlanmayı test etme

Bu bölümde, uygulamayı mobil arka ucuna yeniden bağladığınızda, uygulamanın çevrimiçi duruma geri dönme benzetimi yapılır. Oturum açtığınızda veriler mobil arka ucunuzla eşitlenir.

index.js yeniden açın ve uygulama URL'sini geri yükleyin.
index.html yeniden açın ve CSP <meta> öğesindeki uygulama URL'sini düzeltin.
İstemci uygulamasını yeniden derleyin ve çalıştırın. Uygulama, oturum açma sonrasında mobil uygulama arka ucuyla eşitlemeyi dener. Hata ayıklama konsolunda hiçbir özel durumun günlüğe kaydedilmediğini doğrulayın.
(İsteğe bağlı) güncelleştirilmiş verileri SQL Server Nesne Gezgini veya Fiddler gibi bir REST aracı kullanarak görüntüleyin. Verilerin arka uç veritabanı ile yerel depo arasında eşitlendiğine dikkat edin.

Verilerin veritabanı ve yerel depo arasında eşitlendiğine ve uygulamanızın bağlantısı kesildiğinde eklediğiniz öğeleri içerdiğine dikkat edin.

Ek kaynaklar

Sonraki adımlar

Çevrimdışı eşitleme örneğinde çakışma çözümü gibi daha gelişmiş çevrimdışı eşitleme özelliklerini gözden geçirin
API belgelerinde çevrimdışı eşitleme API'sinin başvurusunu gözden geçirin.