Apache Cordova uygulamanıza çevrimdışı veri eşitleme ekleme

Bu öğretici, Apache Cordova hızlı başlangıç uygulaması için Azure Mobile Apps'in çevrimdışı eşitleme özelliğini kapsar. Çevrimdışı eşitleme, son kullanıcıların ağ bağlantısı olmadığında bile 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 olduktan sonra bu değişiklikler uzak arka uçla eşitlenir.

Bu öğreticiye başlamadan önce, uygun bir arka uç hizmeti oluşturmayı içeren Apache Cordova Hızlı Başlangıç Öğreticisi'ni tamamlamış olmanız gerekir.

Çevrimdışı eşitleme özelliği hakkında daha fazla bilgi edinmek için Azure Mobile Apps'te Çevrimdışı Veri Eşitleme konusuna bakın.

Uygulamayı çevrimdışı eşitlemeyi destekleyecek şekilde güncelleştirme

Çevrimiçi işlemde, çevrimiçi tabloya başvuru almak için kullanırsınız getTable() . Çevrimdışı özellikleri uygularken, çevrimdışı SQlite deposuna başvuru almak için kullanırsınız getSyncTable() . SQlite deposu Apache Cordova cordova-sqlite-storage eklentisi tarafından sağlanır.

www/js/index.js dosyasında:

1. initializeStore() Yerel SQlite veritabanını başlatmak için yöntemini güncelleştirin:

   function initializeStore() {
       store = new WindowsAzure.MobileServiceSqliteStore();
   
       var tableDefinition = {
           name: 'todoitem',
           columnDefinitions: {
               id: 'string',
               deleted: 'boolean',
               version: 'string',
               Text: 'string',
               Complete: 'boolean'
           }
       };
   
       return store
           .defineTable(tableDefinition)
           .then(initializeSyncContext);
   }
   
   function initializeSyncContext() {
       syncContext = client.getSyncContext();
       syncContext.pushHandler = {
           onConflict: function (pushError) {
               return pushError.cancelAndDiscard();
           },
           onError: function (pushError) {
               return pushError.cancelAndDiscard();
           }
       };
       return syncContext.initialize(store);
   }
   

2. setup() yöntemini tablonun çevrimdışı sürümünü kullanacak şekilde güncelleştirin:

   function setup() {
       todoTable = client.getSyncTable('todoitem');
       refreshDisplay();
       addItemEl.addEventListener('submit', addItemHandler);
       refreshButtonEl.addEventListener('click', refreshDisplay);
   }
   

3. Çevrimdışı depodaki syncLocalTable() verileri çevrimiçi depoyla eşitleyecek yöntemi değiştirin:

   function syncLocalTable() {
       return syncContext.push().then(function () {
           return syncContext.pull(new WindowsAzure.Query('todoitem'));
       });
   }
   

Uygulamayı oluşturma

Android uygulamasını derlemek için aşağıdaki komutları çalıştırın:

cordova clean android
cordova build android

Uygulamayı çalıştırabilirsiniz:

cordova run android

Visual Studio Code içinde test edin

Cordova Araçları uzantısı yüklüyse Visual Studio Code'da hata ayıklayıcısını kullanabilirsiniz. Hata ayıklayıcıya tıklayın ve bir launch.json dosya oluşturun. İstendiğinde Cordova'yı ve ardından yapılandırmaları (örneğin, Öykünücüde Android'i çalıştır) seçin. Başlatma yapılandırması oluşturduktan sonra, uygulamayı hata ayıklayıcıda çalıştırabilirsiniz. Seçtiğiniz öykünücüde başlatılır. Ancak artık hata ayıklama çıktısını hata ayıklama konsolunuzda görebilirsiniz.

Uygulamayı test etme

Bu bölümde, WiFi açıkken davranışı test edin ve ardından Çevrimdışı senaryo oluşturmak için WiFi'yi kapatın.

Yapılacaklar listesindeki öğeler cihazdaki bir SQLite veritabanında depolanır. Verileri yenilediğinizde, değişiklikler hizmete gönderilir (gönderme). Uygulama daha sonra yeni öğeler ister (çekme). Öğreticide, yenileme bir simgeye basılarak veya "yenilemeye çek" kullanılarak seçilir.

1. Cihazı veya simülatörü Uçak Modu'na yerleştirin.
2. Bazı Yapılacaklar öğeleri ekleyin veya bazı öğeleri tamamlandı olarak işaretleyin.
3. Cihazdan veya simülatörden çıkın (veya uygulamayı zorla kapatın) ve uygulamayı yeniden başlatın.
4. Değişikliklerinizin cihazda kalıcı olduğunu doğrulayın.
5. Azure TodoItem tablosunun içeriğini görüntüleyin. SQL Server Management Studio gibi bir SQL aracı ya da Fiddler veya Postman gibi bir REST istemcisi kullanın. Yeni öğelerin sunucuyla eşitlenmediğini doğrulayın
6. Cihazda veya simülatörde WiFi'yi açın.
7. "Yenilemek için çek" veya yenile simgesine basarak verileri yenileyin.
8. TodoItem tablo verilerini yeniden gözden geçirin. Yeni ve değiştirilmiş öğeler artık görünmelidir.

Sonraki adımlar

Kimlik doğrulamasını uygulamak için devam edin.