Кроссплатформенное хранилище и синхронизация с Ionic Framework, Couchbase и PouchDB

Поскольку мы используем UI-маршрутизатор AngularJS, который поставляется с Ionic Framework, нам нужен только базовый файл www / index.html .

Создание нашего сервиса PouchDB AngularJS

Перед тем, как мы начнем использовать PouchDB, нам нужно создать для него оболочку, чтобы она прекрасно подходила для AngularJS и Ionic Framework. Из коробки PouchDB — это ванильная библиотека JavaScript, поэтому ее не обязательно проще всего использовать, когда дело доходит до AngularJS.

В файле www / js / app.js вашего проекта включите следующий сервисный код:

.service("$pouchDB", ["$rootScope", "$q", function($rootScope, $q) {

    var database;
    var changeListener;

    this.setDatabase = function(databaseName) {
        database = new PouchDB(databaseName);
    }

    this.startListening = function() {
        changeListener = database.changes({
            live: true,
            include_docs: true
        }).on("change", function(change) {
            if(!change.deleted) {
                $rootScope.$broadcast("$pouchDB:change", change);
            } else {
                $rootScope.$broadcast("$pouchDB:delete", change);
            }
        });
    }

    this.stopListening = function() {
        changeListener.cancel();
    }

    this.sync = function(remoteDatabase) {
        database.sync(remoteDatabase, {live: true, retry: true});
    }

    this.save = function(jsonDocument) {
        var deferred = $q.defer();
        if(!jsonDocument._id) {
            database.post(jsonDocument).then(function(response) {
                deferred.resolve(response);
            }).catch(function(error) {
                deferred.reject(error);
            });
        } else {
            database.put(jsonDocument).then(function(response) {
                deferred.resolve(response);
            }).catch(function(error) {
                deferred.reject(error);
            });
        }
        return deferred.promise;
    }

    this.delete = function(documentId, documentRevision) {
        return database.remove(documentId, documentRevision);
    }

    this.get = function(documentId) {
        return database.get(documentId);
    }

    this.destroy = function() {
        database.destroy();
    }

}])

.run(function($ionicPlatform, $pouchDB) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
    $pouchDB.setDatabase("nraboy-test");
    if(ionic.Platform.isAndroid()) {
        $pouchDB.sync("http://192.168.57.1:4984/test-database");
    } else {
        $pouchDB.sync("http://localhost:4984/test-database");
    }
})

.controller("MainController", function($scope, $rootScope, $state, $stateParams, $ionicHistory, $pouchDB) {

    $scope.items = {};

    $scope.save = function(firstname, lastname, email) { }

    $scope.delete = function(id, rev) { }

    $scope.back = function() { }

})

$scope.back = function() {
    $ionicHistory.goBack();
}

$scope.delete = function(id, rev) {
    $pouchDB.delete(id, rev);
}

$scope.save = function(firstname, lastname, email) {
    var jsonDocument = {
        "firstname": firstname,
        "lastname": lastname,
        "email": email
    };
    if($stateParams.documentId) {
        jsonDocument["_id"] = $stateParams.documentId;
        jsonDocument["_rev"] = $stateParams.documentRevision;
    }
    $pouchDB.save(jsonDocument).then(function(response) {
        $state.go("list");
    }, function(error) {
        console.log("ERROR -> " + error);
    });
}

$rootScope.$on("$pouchDB:change", function(event, data) {
    $scope.items[data.doc._id] = data.doc;
    $scope.$apply();
});

$rootScope.$on("$pouchDB:delete", function(event, data) {
    delete $scope.items[data.doc._id];
    $scope.$apply();
});

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("list", {
            "url": "/list",
            "templateUrl": "templates/list.html",
            "controller": "MainController"
        })
        .state("item", {
            "url": "/item/:documentId/:documentRevision",
            "templateUrl": "templates/item.html",
            "controller": "MainController"
        });
    $urlRouterProvider.otherwise("list");
})

<ion-view title="Couchbase with PouchDB">
    <ion-nav-buttons side="right">
        <button class="right button button-icon icon ion-plus" ui-sref="item"></button>
    </ion-nav-buttons>
    <ion-content>
        <ion-list show-delete="false" can-swipe="true">
            <ion-item ng-repeat="(key, value) in items" ui-sref="item({documentId: key, documentRevision: value._rev})">
                {{value.firstname}} {{value.lastname}}
                <ion-option-button class="button-assertive icon ion-trash-a" ng-click="delete(key, value._rev)"></ion-option-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

<ion-view title="Couchbase with PouchDB">
    <ion-nav-buttons side="left">
        <button class="left button button-icon icon ion-arrow-left-c" ng-click="back()"></button>
    </ion-nav-buttons>
    <ion-content>
        <div class="list">
            <label class="item item-input">
                <input type="text" ng-model="inputForm.firstname" placeholder="First Name">
            </label>
            <label class="item item-input">
                <input type="text" ng-model="inputForm.lastname" placeholder="Last Name">
            </label>
            <label class="item item-input">
                <input type="text" ng-model="inputForm.email" placeholder="Email">
            </label>
        </div>
        <div class="padding">
            <button class="button button-block button-positive" ng-click="save(inputForm.firstname, inputForm.lastname, inputForm.email)">
                Save
            </button>
        </div>
    </ion-content>
</ion-view>

{
    "log":["CRUD+", "REST+", "Changes+", "Attach+"],
    "databases": {
        "test-database": {
            "server":"walrus:data",
            "sync":`
                function (doc) {
                    channel (doc.channels);
                }
            `,
            "users": {
                "GUEST": {
                    "disabled": false,
                    "admin_channels": ["*"]
                }
            }
        }
    },
    "CORS": {
        "Origin": ["http://localhost:9000"],
        "LoginOrigin": ["http://localhost:9000"],
        "Headers": ["Content-Type"],
        "MaxAge": 17280000
    }
}

/path/to/sync/gateway/bin/sync-gateway /path/to/project/sync-gateway-config.json

ionic build android
adb install -r platforms/android/build/outputs/apk/android-debug.apk

ionic build ios

ionic build ios
ionic emulate ios