跨平台存储与同步：IonicCouchbase和PouchDB结合使用范例

Posted 小象

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨平台存储与同步：IonicCouchbase和PouchDB结合使用范例相关的知识，希望对你有一定的参考价值。

译者：刘旭坤

原文链接：http://blog.couchbase.com/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb

小象科技原创作品，欢迎大家疯狂转发；

机构、自媒体平台转载务必至后台留言，申请版权。



跨平台存储与同步：

Ionic、Couchbase和PouchDB结合使用范例

Ionic框架是混合移动应用开发框架中的佼佼者

使用它，开发人员只需懂得html、javascript和CSS

便可以进行ios和安卓应用的开发

今天我们就来介绍一下如何将Ionic框架、

Couchbase和PouchDB数据库结合起来使用


1

准备工作

本文的示例中我们需要：

Couchbase Sync Gateway

PouchDB 4

Ionic Framework 1

Couchbase Sync Gateway是在移动应用和Couchbase服务器之间传输处理数据的一项服务。不过我们这次不用Couchbase服务器所以就只拿Couchbase Sync Gateway来当内存存储使用。


2

创建Ionic项目

我们开始之前需要注意一点：如果要为iOS开发的话必须使用Mac系统。安卓的话就Windows、Mac、Linux都可以了。

在命令行中执行以下命令来新建一个空白的Ionic项目

ionic start PouchProject blank

cd PouchProject

ionic platform add android

ionic platform add ios


3

导入依赖包

如果没有PouchDB 4的话请先下载，然后把min.js文件复制到Ionic项目的www/js文件夹下。然后编辑Ionic项目的www/index.html文件并加入下面的代码：

<script src="js/pouchdb-4.0.3.min.js"></script>

请注意这一行要放在包括app.js的<script>标签之上，而且版本号应该和你所下载的PouchDB版本号保持一致。


4

修改Index.html

在我们添加AngularJS代码之前我们需要把www/index.html中的<body>标签替换成以下代码：

<body ng-app="starter">

<ion-pane>

<ion-nav-bar class="bar-stable"></ion-nav-bar>

<ion-nav-view></ion-nav-view>

</ion-pane>

</body>


5

创建PouchDB

AngularJS服务

这里我们需要把PouchDB给封装起来以便与AngularJS和Ionic框架进行结合使用。下载下来的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();

}

}])



6

创建本地数据库

这一步我们要在打开应用时创建一个本地数据库并与Couchbase Sync Gateway进行同步。我们可以在www/js/app.js中的run()函数中添加如下代码：

.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");

}

})

因为我们现在用的是模拟器，所以代码里的ip可能跟你的有所不同。不过在真正的app中iOS和安卓应该都是一样的。



7

设计controller

虽然我们还没有view不过可以先写controller的逻辑。编辑www/js/app.js并添加下面的controller代码：

.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() { }

})

这样我们就有了一个基本的controller。我们写了存储删除的函数和一个back()函数用于历史纪录的出栈也就是后退。


我们先从back()函数开始：

$scope.back = function() {

$ionicHistory.goBack();

}

在数据库中进行删除操作时我们需要指定文件的id和版本号rev这两个参数。删除函数的代码如下:

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

$pouchDB.delete(id, rev);

}

这里调用了我们之前写的PouchDB服务。

在这个简单的示例应用中我们只存储了firstname、lastname和email，不过大家在实际的使用过程中可以随便改成自己所需要的内容。存储函数save()的代码如下：

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

});

}

存储函数中我们依据documentId是否存在进行了两个动作：插入或者更新。

当我们调用$pouchDB.startListening()函数的时候，它会使用AngularJS的$broadcast事件，我们可以使用下面的代码来进行监听：

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

});



8

设计view

接下来我们在AngularJS的config()函数中定义view:

.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");

})

这里我们定义了两个view,一个用于展示一个用于新建和更新项目，还有两个可选参数documentId和documentRevision。

至此我们已经完成了所有的AngularJS逻辑。

下面打开www/templates/list.html并加入一下代码：

<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>


下面我们来编辑另一个view item.html。这个view就是一个form，代码如下：

<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">

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



10

设置Sync Gateway

PouchDB和Ionic之后才只是完成了一半。我们这个示例的目的是进行同步，所以打开sync-gateway-config.json并添加下面的代码：

{

"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

}

}

这里我们只进行了最基本的配置，并且有几点需要注意：

1）我们使用了walrus:data来在内存中进行存储，所以千万不要在生产环境中这么做

2）这里我们使用了GUEST用户，不过你可以自己设置身份验证

3） 这里我们使用CORS来解决跨域问题以便从浏览器中进行测试



11

测试

从命令行中运行如下代码来启动Sync Gateway:

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

要验证Sync Gateway是否已经启动的话在浏览器中输入http://localhost:4984



12

在安卓中测试

如果连接有安卓设备或者有模拟器，可以在命令行中运行以下命令来安装APK文件：

ionic build android

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



13

在iOS中测试

在iOS中测试你可以选择是否打开Xcode。比如下面的命令：

ionic build ios

就会在/ios文件夹下生成Xcode项目文件。如果安装了ios-sim这个NPM包的话还可以这样做：

ionic build ios

ionic emulate ios




以上是关于跨平台存储与同步：IonicCouchbase和PouchDB结合使用范例的主要内容，如果未能解决你的问题，请参考以下文章

Seafile开源文件同步和分享SAAS云盘

DataPipeline丨新型企业数据融合平台的探索与实践

去哪儿网数据同步平台技术演进与实践

具有本地存储、可同步、可搜索的只读内容的移动应用程序。石榴石？

手机跨平台实时更新

好用的同步软件