Megosztás a következőn keresztül:

Offline szinkronizálás engedélyezése a Cordova-mobilalkalmazáshoz

  • Cikk

Áttekintés

Ez az oktatóanyag bemutatja az Azure Mobile Apps for Cordova offline szinkronizálási funkcióját. Az offline szinkronizálással a végfelhasználók akkor is használhatják a mobilalkalmazásokat – az adatok megtekintését, hozzáadását vagy módosítását –, ha nincs hálózati kapcsolat. A módosítások egy helyi adatbázisban vannak tárolva. Miután az eszköz ismét online állapotba kerül, a rendszer szinkronizálja ezeket a módosításokat a távoli szolgáltatással.

Ez az oktatóanyag az Apache Cordova gyors üzembe helyezési útmutatójának elvégzésekor létrehozott Mobile Apps Cordova gyorsindítási megoldáson alapul. Ebben az oktatóanyagban frissíteni fogja a gyorsútmutató-megoldást, hogy offline funkciókat adjon hozzá az Azure Mobile Appshez. Az alkalmazás offline-specifikus kódját is kiemeljük.

Az offline szinkronizálási funkcióval kapcsolatos további információkért tekintse meg az Offline adatszinkronizálás az Azure Mobile Apps szolgáltatásban című témakört. Az API-használat részleteiért tekintse meg az API dokumentációját.

Kapcsolat nélküli szinkronizálás hozzáadása a gyorsindítási megoldáshoz

Az offline szinkronizálási kódot hozzá kell adni az alkalmazáshoz. Az offline szinkronizáláshoz szükség van a cordova-sqlite-storage beépülő modulra, amely automatikusan hozzáadódik az alkalmazáshoz, amikor az Azure Mobile Apps beépülő modul szerepel a projektben. A gyorsindítási projekt mindkét beépülő modult tartalmazza.

  1. A Visual Studio Megoldáskezelő nyissa meg index.js, és cserélje le a következő kódot

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

    ezzel a kóddal:

     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. Ezután cserélje le a következő kódot:

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

    ezzel a kóddal:

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

    A fenti kódrészletek inicializálják a helyi tárolót, és meghatároznak egy helyi táblát, amely megfelel az Azure-háttérrendszerben használt oszlopértékeknek. (Nem kell minden oszlopértéket belefoglalnia ebbe a kódba.) A version mezőt a mobil háttérrendszer tartja karban, és ütközésfeloldáshoz használja.

    A szinkronizálási környezetre mutató hivatkozást a getSyncContext meghívásával kaphat. A szinkronizálási környezet segít megőrizni a táblakapcsolatokat azáltal, hogy nyomon követi és lekérte az ügyfélalkalmazás által a híváskor .push() módosított összes táblában történt módosításokat.

  3. Frissítse az alkalmazás URL-címét a Mobilalkalmazás-alkalmazás URL-címére.

  4. Ezután cserélje le ezt a kódot:

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

    ezzel a kóddal:

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

    Az előző kód inicializálja a szinkronizálási környezetet, majd meghívja a getSyncTable -t (a getTable helyett), hogy a helyi táblára mutató hivatkozást kapjon.

    Ez a kód a helyi adatbázist használja az összes létrehozási, olvasási, frissítési és törlési (CRUD) táblaművelethez.

    Ez a minta egyszerű hibakezelést végez a szinkronizálási ütközések során. Egy valódi alkalmazás kezelni fogja a különböző hibákat, például a hálózati feltételeket, a kiszolgálóütközéseket és más hibákat. Példakódokért tekintse meg az offline szinkronizálási mintát.

  5. Ezután adja hozzá ezt a függvényt a tényleges szinkronizálás végrehajtásához.

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

    A syncContext.push() hívásával eldöntheti, hogy mikor szeretné leküldni a módosításokat a Mobile App háttérrendszerbe. Meghívhatja például a syncBackend parancsot egy szinkronizálási gombhoz kötött gombesemény-kezelőben.

Offline szinkronizálási szempontok

A mintában a syncContextleküldéses metódusa csak az alkalmazás indításakor van meghívva a visszahívási függvényben a bejelentkezéshez. Egy valós alkalmazásban ezt a szinkronizálási funkciót manuálisan vagy a hálózati állapot változásakor is aktiválhatja.

Amikor lekérést hajt végre egy olyan táblán, amely a környezet által nyomon követett helyi frissítéseket vár, a lekérési művelet automatikusan elindít egy leküldést. A minta elemeinek frissítésekor, hozzáadásakor és befejezésekor kihagyhatja az explicit leküldéses hívást, mivel az redundáns lehet.

A megadott kódban a rendszer lekérdezi a távoli teendőlista összes rekordját, de egy lekérdezésazonosító és leküldéses lekérdezés megadásával is szűrheti a rekordokat. További információ: Növekményes szinkronizálás az Offline adatszinkronizálásban az Azure Mobile Appsben.

(Nem kötelező) Hitelesítés letiltása

Ha nem szeretné beállítani a hitelesítést az offline szinkronizálás tesztelése előtt, tegye megjegyzésbe a visszahívási függvényt a bejelentkezéshez, de a visszahívási függvényben lévő kódot hagyja megjegyzés nélkül. A bejelentkezési sorok megjegyzésbe helyezése után a kód a következő:

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

Most az alkalmazás szinkronizálódik az Azure-háttérrendszerrel az alkalmazás futtatásakor.

Az ügyfélalkalmazás futtatása

Ha az offline szinkronizálás most már engedélyezve van, az ügyfélalkalmazást minden platformon legalább egyszer futtathatja a helyi tároló adatbázisának feltöltéséhez. Később szimuláljon egy offline forgatókönyvet, és módosítsa az adatokat a helyi áruházban, amíg az alkalmazás offline állapotban van.

(Nem kötelező) A szinkronizálási viselkedés tesztelése

Ebben a szakaszban úgy módosítja az ügyfélprojektet, hogy offline forgatókönyvet szimuláljon a háttéralkalmazás érvénytelen ALKALMAZÁS URL-címének használatával. Adatelemek hozzáadásakor vagy módosításakor ezek a módosítások a helyi tárolóban lesznek tárolva, de nem szinkronizálódnak a háttéradattárba, amíg a kapcsolat újra létre nem jön.

  1. A Megoldáskezelő nyissa meg a index.js projektfájlt, és módosítsa úgy az alkalmazás URL-címét, hogy érvénytelen URL-címre mutasson, például az alábbi kódra:

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

  2. A index.html frissítse a CSP-elemet <meta> ugyanazzal az érvénytelen URL-címmel.

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

  3. Hozza létre és futtassa az ügyfélalkalmazást, és figyelje meg, hogy a rendszer kivételt naplóz a konzolon, amikor az alkalmazás a bejelentkezés után megkísérli a háttérrendszerrel való szinkronizálást. A hozzáadott új elemek csak a helyi tárolóban léteznek, amíg le nem küldik őket a mobil háttérrendszerbe. Az ügyfélalkalmazás úgy viselkedik, mintha a háttérrendszerhez csatlakozik.

  4. Zárja be az alkalmazást, és indítsa újra annak ellenőrzéséhez, hogy a létrehozott új elemek megmaradnak-e a helyi áruházban.

  5. (Nem kötelező) A Visual Studióval megtekintheti a Azure SQL Database táblát, és láthatja, hogy a háttéradatbázis adatai nem változtak.

    Nyissa meg a Kiszolgálókezelőt a Visual Studióban. Keresse meg az adatbázist az Azure-SQL>Database-ben. Kattintson a jobb gombbal az adatbázisra, és válassza a Megnyitás SQL Server Object Explorer lehetőséget. Most már tallózhat az SQL-adatbázistáblához és annak tartalmához.

(Nem kötelező) A mobil háttérrendszerhez való újracsatlakozás tesztelése

Ebben a szakaszban újracsatlakoztatjuk az alkalmazást a mobil háttérrendszerhez, amely az online állapotba való visszatérést szimulálja. Bejelentkezéskor a rendszer szinkronizálja az adatokat a mobil háttérrendszerbe.

  1. Nyissa meg újra index.js, és állítsa vissza az alkalmazás URL-címét.

  2. Nyissa meg újra index.html, és javítsa ki az alkalmazás URL-címét a CSP-elemben <meta> .

  3. Építse újra és futtassa az ügyfélalkalmazást. Az alkalmazás a bejelentkezés után megkísérli a szinkronizálást a mobilalkalmazás háttérrendszerével. Ellenőrizze, hogy nincsenek-e kivételek naplózva a hibakeresési konzolon.

  4. (Nem kötelező) Tekintse meg a frissített adatokat SQL Server Object Explorer vagy egy REST-eszközzel, például a Fiddlerrel. Figyelje meg, hogy az adatok szinkronizálva lettek a háttéradatbázis és a helyi tároló között.

    Figyelje meg, hogy az adatok szinkronizálva lettek az adatbázis és a helyi tároló között, és tartalmazzák azokat az elemeket, amelyeket az alkalmazás leválasztásakor adott hozzá.

További források

Következő lépések