Offline-fähige UI5-Anwendung Teil 2/2: IndexedDB mit erweitertem OData Model

Die Zeiten der Pandemie zeigen, dass sich mehr und mehr Tätigkeiten ins heimische Büro verlagern. Doch nicht erst seitdem dieser zusätzliche Datenverkehr die Infrastruktur verstärkt belastet, besteht die Anforderung, auch in WLAN- und mobilfunkfreien Bereichen, bestimmte Funktionen einer Anwendung verfügbar zu halten. Die lokale IndexedDB kann dafür verwendet werden, UI5-App-Daten zu speichern.

In diesem zweiten Teil geht es um das Offline-Anlegen und Löschen von Daten sowie die anschließende Synchronisierung bei wiederhergestellter Internetverbindung.

Inhalt Expertblog Teil 2/2

Daten anlegen: Online
Daten anlegen: Offline
Daten löschen: Offline
Synchronisierung
Ausblick

1. Daten anlegen: Online

Im Online-Zustand funktioniert das Speichern der Daten über die Schnittstelle des Table Models. Die neuen Daten werden über die GUI angelegt und an das Backend übertragen.

Die Tabelle zeigt die aus dem Backend gelesenen Daten an.

2. Daten anlegen: Offline

Für den Testfall wird das Netzwerk über die Chrome Browser-Optionen deaktiviert. Für den Nutzer läuft der Anlageprozess an der Oberfläche gleich. Wie auch im Online-Modus werden die Daten über die GUI angelegt.

View1.controller.js

Nach dem Speichern wird manuell nachgelesen (S1).

Copy to Clipboard

Table.js

Copy to Clipboard

oData.js

Nachdem der Createcall wie geplant gescheitert ist, werden die zu speichernden Daten, inklusive Pfad an die IndexedDB weitergeleitet. Die Daten bekommen für die spätere Synchronisierung ein zusätzliches Attribut „_http“ mit dem Wert „create“.

Copy to Clipboard

/**
 *@description extended CREATE
 *@memberOf oData
 *@param {String} sPath - A string containing the path to the collection
 * where an entry should be created.
 * The path is concatenated to the service URL which was specified in the
 * model constructor.
 *@param {Object} oData - Data of the entry that should be created.
 *@param {Object} mParameters - Optional parameter map, refer to API
 */
create: function(sPath, oData, mParameters)
{
   oData = this._trimPayload(oData);
   var that = this;
   mParameters.success = (function(success)
   {
      function fnExtend(data, oData)
      {
         success(data, oData);
         that._createSuccessCallback(data, oData, this)
      }

return fnExtend.bind({
         path: sPath,
         data: oData
      });
   }.bind({
      path: sPath,
      data: oData
   }))(mParameters.success);

mParameters.error = (function(error)
   {
      function fnExtend(data)
      {
         that._createErrorCallback(data, this)
            .then(function()
            {
               error();
            });
      }

return fnExtend.bind({
         path: sPath,
         data: oData
      });
   }.bind({
      path: sPath,
      data: oData
   }))(mParameters.error);

ODataModel.prototype.create.call(this, sPath, oData, mParameters)
},

…

/**
 *@description Extended CREATE ERROR function
 * Stores data in local Index DB
 *@memberOf oData
 *@param {Object} data - Data resulting from call
 *@param {Object} mParameters - 1: called sPath, 2:saved object
 */
_createErrorCallback: function(data, mParameters)
{
   console.error("CREATE ERROR: %s \n Property %s not Set", data.message, sPath);
   var sPath = mParameters.path;
   var oUnsavedData = mParameters.data;
   oUnsavedData._http = 'create';
   return this._oComponent.getIndexDb()
      .create(oUnsavedData, sPath);
},

IndexedDb.js

In der IndexedDB wird zunächst, wenn nötig, eine neue Tabelle (sPath) angelegt. Anschließend werden die Daten dort hinterlegt.

Copy to Clipboard

/**
 *@description stores data in indexeddb and creates Table if necessary
 * adds property _http to save the intended http action (CRUD)
 *@memberOf IndexedDb
 *@param {object} data - data to be stored in indexed db
 *@param {String} sTable - Name of table that data is added to
 */
create: function(data, sTable)
{
   var that = this;
   sTable = that._trim(sTable)[1];
   return Promise.resolve()
      .then(that._createTable.bind(that, sTable))
      .then(that._createData.bind(that, data, sTable))
      .catch(function(err)
      {
         console.error("Data could not be written to INDEXEDDB");
      })
},

…

/**
 *@description creates a new table
 *@memberOf IndexedDb
 *@param {String} sTable - Name of table that data is added to
 */
_createTable: function(sTable)
{
   if (!this._tableAvailable(sTable)) version++;

…

/**
 *@description create indexdb entry
 *@memberOf IndexedDb
 *@param {object} data - data to be stored in indexed db
 *@param {String} sTable - Name of table that data is added to
 */
_createData: function(data, sTable)
{
   return new Promise(function(resolve, reject)
   {
      var oTransaction = IndexedDb._db.transaction(sTable, "readwrite");
      var oDataStore = oTransaction.objectStore(sTable);
      oDataStore.add(data);
      IndexedDb._db.close();
      resolve();
   })
},

In der IndexedDB ist der Eintrag entsprechend zu finden. Zur späteren Weiterverarbeitung wurde ein zusätzliches Attribut (_http) hinzugefügt, welches das http Verb speichert.

Anschließend werden die Daten neu gelesen und die Tabelle zeigt lokale sowie Daten aus dem Backend an.

3. Daten löschen: Offline

Wie das Anlegen der Daten soll auch das Löschen funktionieren, wenn die Anwendung keinen Zugriff auf die SAP-Systeme hat. Die im Folgenden beschriebene Löschfunktion, entfernt lokale Einträge und legt außerdem, im Offline-Zustand, Lösch-Tokens für Einträge auf dem Backend an in der IndexedDB an.

Die Anwendung wird erneut in den Offline-Zustand versetzt, um den ersten Eintrag der Liste (Backend-Daten) zu löschen.

Der Programmablauf ist wie folgt:

View1.controller.js

Prozess-Start über ViewController:

Copy to Clipboard

Table.js

Weiterleitung der Anfrage:

Copy to Clipboard

oData.js

Nachdem der Removecall fehlgeschlagen ist, wird der sPath an die „_removeErrorCallback“-Methode weitergeleitet:

Copy to Clipboard

/**
 *@description extended REMOVE
 *@memberOf oData
 *@param {String} sPath - A string containing the path to the collection where an entry should be created.
 * The path is concatenated to the service URL which was specified in the model constructor.
 *@param {Object} mParameters - Optional parameter map, refer to API
 */
remove: function(sPath, mParameters)
{
   var that = this;
   mParameters.success = (function(success)
   {
      function fnExtend(data, oData)
      {
         success(data, oData);
         that._removeSuccessCallback(data, oData, this);
      }

return fnExtend.bind({path: sPath});
   }.bind({path: sPath}))(mParameters.success);

mParameters.error = (function(error)
   {
      function fnExtend(data)
      {
         error(data);
         that._removeErrorCallback(data, this.path);
      }

return fnExtend.bind({path: sPath});
   }.bind({path: sPath}))(mParameters.error);

ODataModel.prototype.remove.call(this, sPath, mParameters)
},

…

/**
 *@description Extended REMOVE ERROR function.
 * Stores items that are to be deleted in indexedDB
 *@param {Object} data - Data resulting from call
 *@param {String} sPath - called Path, including Key
 */
_removeErrorCallback: function(data, sPath)
{
   return this._oComponent.getIndexDb()
      .remove(sPath)
},

IndexedDb.js

Wie bereits beim Ablegen der Daten im „Create“-Prozess wird auch in diesem Fall zunächst geprüft, ob eine Tabelle „Spath“ bereits vorhanden ist. Ist dies nicht der Fall, wird diese angelegt. Wenn die _removeData-Methode unter dem übergebenen Pfad und Schlüssel keinen Eintrag findet, wird er lokal als zu löschender Eintrag abgelegt.

Copy to Clipboard

/**
 *@description Checks if affected tableentry exists. triggers creation of table if needed.
 * if data cannot be found in indexed db, the system asumes that the entry needs to be saved
 * to be deleted later
 *@memberOf IndexedDb
 *@param {String} sPath - Name of Spath that is read (most of it is also the iDB table name)
 */
remove: function(sPath)
{
   var that = this;
   var sKey = this._getKeys(sPath);
   var sShortPath = this._trim(sPath)[0];

return Promise.resolve()
      .then(that._createTable.bind(that, sShortPath))
      .then(that._removeData.bind(that, sShortPath, sKey, false))
      .catch(function(err)
      {
         that._removeData(sShortPath, sPath, true)
            .then(function()
            {
               console.log("deleteToken successfully written to IndexedDB")
            })
            .catch(function(err)
            {
             })
      })

…

/**
 *@description Removes entry from indexed DB
 * if entry is not found, affected key and table are stored to be dealt with later
 *@memberOf IndexedDb
 *@param {String} sTable - Name of Spath that is read (most of it is also the iDB table name)
 *@param {String} sKey - spath Key
 *@param {Boolean} bDeleteToken - remove a delete token from INDEXED DB (_http: remove).
 * if false, its assumed that a create entry is to be delete after it was successfully send to the backend
 */
_removeData: function(sTable, sKey, bDeleteToken)
{
   var that = this;
   var bIndexedEntryFound = false;

return new Promise(function(resolve, reject)
   {
      var request = indexedDB.open("localStorage", version);
      request.onsuccess = function(oEvent)
      {
         IndexedDb._db = oEvent.target.result;
         var objectStore = IndexedDb._db.transaction([sTable], "readwrite").objectStore(sTable);
         var request = objectStore.openKeyCursor(sKey);
         request.onsuccess = function(oEvent)
         {
            var cursor = oEvent.target.result;
            if (cursor)
            {
               bIndexedEntryFound = true;
               objectStore.delete(cursor.primaryKey);
               cursor.continue();
            }
            else
            {
               if (!bIndexedEntryFound)
               {
                  if (bDeleteToken)
                  {
                     that.create({ //...create indexeddb table with delete token, if it doesnt exist
                        'Id': sKey,
                        _http: 'remove'
                     }, sTable)
                        .then(function(data)
                        {
                           IndexedDb._db.close();
                           resolve();
                        })
                  }
                  else
                  {
                     reject();
                  }
               }
               else
               {
                  resolve(); //entry found + deleted
               }
            }
         };
      }
   })
},

4. Synchronisierung

Nachdem das Netzwerk wieder zur Verfügung steht, müssen die lokalen Daten mit dem SAP-System synchronisiert werden. Es liegt nun jeweils ein Eintrag zum Löschen und ein Eintrag zum Erstellen von Daten vor.

Auf der IndexedDB wird je nach hinterlegtem http-Verb unterschieden, ob Daten zu erstellen oder zu löschen sind.

View1.controller.js

Prozessstart

Copy to Clipboard

IndexedDb.js

Verarbeitung der lokal gespeicherten Daten:

Copy to Clipboard

/**
 *@description After the system is back online, this will synchronize local storage with Backend data
 *@memberOf IndexedDb
 *@param {String} sTable - Name of table that data is add
 *@return {promise}
 */
processLocalData: function(sTable)
{
   var that = this;
   return new Promise(function(resolve, reject)
   {
      that.getTable(sTable, true)
         .then(function(data)
         {
            data.forEach(function(line)
            {
               var sKey = line.Id;
               if (line._http === 'create')
               {
                  that._oComponent.getModel()[line._http](sTable, line, {
                     success: function()
                     {
                        that._removeData(sTable, sKey, false)
                           .then(function()
                           {
                              resolve()
                           });
                     },
                     error: reject
                  })
               }
               else if (line._http === 'remove')
               {
                  that._oComponent.getModel()[line._http](line.Id, {
                     success: function()
                     {
                        that._removeData(sTable, sKey)
                           .then(function()
                           {
                              resolve()
                           });
                     },
                     error: reject
                  })
               }
            });
         });
   })
},

4. Ausblick

Je nach Anwendungsbereich ist es denkbar, auf diese Weise eine App zu bauen, die nach dem initialen Laden netzwerkunabhängig funktioniert. Alle Funktionen stehen dem Nutzer somit jederzeit zur Verfügung. Techniker im Außendienst oder Mechaniker in großen Produktionshallen können die für die Anwendung benötigten Stammdaten, beim Öffnen der App laden. Sind Sie dann z.B. in Lagerräumen ohne Empfang oder beim Kunden ohne WLAN, ist trotzdem die volle Funktionsfähigkeit gewährleistet. Neue Daten werden einfach in der IndexedDB angelegt und bei verfügbarem Netzwerk synchronisiert.

Zurück zum ersten Teil