{"id":302,"date":"2015-12-16T01:03:04","date_gmt":"2015-12-16T01:03:03","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/first-steps-with-pouchdb-sync-gateway-todomvc-todolite\/"},"modified":"2015-12-16T01:03:04","modified_gmt":"2015-12-16T01:03:03","slug":"first-steps-with-pouchdb-sync-gateway-todomvc-todolite","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/pt\/first-steps-with-pouchdb-sync-gateway-todomvc-todolite\/","title":{"rendered":"First steps with PouchDB & Sync Gateway"},"content":{"rendered":"\n

This week, PouchDB v3.4.0<\/a>\u00a0was released with Couchbase Sync Gateway compatibility.<\/p>\n\n\n\n

In this post, we\u2019ll take the existing \ufffcTodoMVC example\ufffc and add filtered sync using Facebook authentication. In addition to syncing between Web clients, we\u2019ll change the data model slightly to sync with the existing ToDoLite apps running on iOS\ufffc<\/a> and \ufffcAndroid<\/a>:<\/p>\n\n\n\n

To follow along, you can open and run the TodoMVC example at commit \ufffcd9bb961<\/a>. For convenience, I\u2019ve added the Facebook login code in app.js<\/strong>. When the user logs in, the function startSessionAndSync(accessToken, userId)<\/strong>\u00a0is called. Now let\u2019s add the code to make it happen!<\/p>\n\n\n\n

QuickStart<\/h1>\n\n\n\n

Make sure to serve the app on port 9000<\/strong>\u00a0as we will configure CORS for localhost:9000<\/strong>\u00a0later. The simple python command should do:<\/p>\n\n\n\n

$ python -m SimpleHTTPServer 9000\r\n<\/code><\/pre>\n\n\n\n
Data modelling<\/h1>\n\n\n\n
TodoMVC and ToDoLite have a slightly different data model. In ToDoLite apps, a user can create multiple lists and share them with multiple users.<\/p>\n\n\n\n
First let\u2019s look at a Task document with the expected title<\/strong>\u00a0property and a list_id<\/strong>\u00a0referencing the List it belongs to (in this case 123):<\/p>\n\n\n\n
{\r\n  "_id": "E9W3-9I2Y-O8W2-6Y4D",\r\n  "type": "task",\r\n  "list_id": "123",\r\n  "title": "A task title"\r\n}\r\n<\/code><\/pre>\n\n\n\n
Likewise, a List document also has a title<\/strong>\u00a0and an owner referencing the user it belongs to:<\/p>\n\n\n\n
{\r\n  "_id": "123",\r\n  "type": "list",\r\n  "title": "TodoMVC list",\r\n  "owner": "p:1234567890"\r\n}\r\n<\/code><\/pre>\n\n\n\n
TodoMVC however is a single list app. To keep things simple we can insert the List document in code as soon as the user logs in.<\/p>\n\n\n\n
Let\u2019s create a new function called migrateGuestToUser<\/strong> to create the List document with the user id and save it to PouchDB:<\/p>\n\n\n\n
function migrateGuestToUser(userId) {\r\n  var list = {\r\n    _id: '123',\r\n    type: 'list',\r\n    title: 'TodoMVC list',\r\n    owner: 'p:' + userId\r\n  };\r\n  db.put(list, function(err, result) {\r\n    if (!err) {\r\n      console.log('Successfully saved user list');\r\n    }\r\n  })\r\n}\r\n<\/code><\/pre>\n\n\n\n
Note:<\/strong> It\u2019s very important to set the owner field, the sync function will reject the document otherwise<\/a>.<\/p>\n\n\n\n
And we can call it in startSessionAndSync<\/strong>:<\/p>\n\n\n\n
function startSessionAndSync(accessToken, userId) {\r\n  migrateGuestToUser(userId);\r\n}\r\n<\/code><\/pre>\n\n\n\n
Task documents belong to a list and so they have a list_id<\/strong> property we need to set. Change the addTodo<\/strong> function in app.js<\/strong> to look like below. Notice we set the list_id<\/strong> field to the hardcoded _id<\/strong> of the list we inserted above:<\/p>\n\n\n\n
function addTodo(text) {\r\n  var todo = {\r\n    _id: new Date().toISOString(),\r\n    title: text,\r\n    checked: false,\r\n    type: 'task',\r\n    list_id: '123',\r\n    created_at: new Date()\r\n  };\r\n  db.put(todo, function callback(err, result) {\r\n    if (!err) {\r\n      console.log('Successfully posted a todo!');\r\n    }\r\n  });\r\n}\r\n<\/code><\/pre>\n\n\n\n
Now we have the appropriate documents conforming to ToDoLite\u2019s data model we can take a look at authentication and replication.<\/p>\n\n\n\n
Enabling CORS on Sync Gateway<\/h1>\n\n\n\n
In this tutorial, we\u2019ll run a local instance of Sync Gateway on localhost:4984<\/strong> but we\u2019re serving our web app on localhost:9000<\/strong>. At this point we\u2019d get a same origin policy error. But Chris<\/a> recently added CORS support to Sync Gateway for this purpose. So we don\u2019t have to write one line of server side code :)<\/p>\n\n\n\n
CORS allows web apps to access resources on other domains than the origin domain. By enabling CORS on Sync Gateway we\u2019re telling the browser “Yes, the Sync Gateway domain name is allowed to communicate with this web app”. Open sync-gateway-config.json<\/strong> with the extra CORS configuration to enable it on localhost:9000<\/strong>:<\/p>\n\n\n\n
{ \r\n ...\r\n "CORS": {\r\n   "Origin": ["https:\/\/localhost:9000"],\r\n   "LoginOrigin": ["https:\/\/localhost:9000"],\r\n   "Headers": ["Content-Type"],\r\n   "MaxAge": 17280000\r\n },\r\n ...\r\n}\r\n<\/code><\/pre>\n\n\n\n
Use Sync Gateway 1.1 or later. Start it with the config file:<\/p>\n\n\n\n
$ ~\/Downloads\/sync_gateway sync-gateway-config.json\r\n<\/code><\/pre>\n\n\n\n
Back in app.js<\/strong>, update the remoteCouch url accordingly:<\/p>\n\n\n\n
var SYNC_GATEWAY_URL = 'https:\/\/127.0.0.1:4984\/todos\/';\r\nvar remoteCouch = SYNC_GATEWAY_URL;\r\n<\/code><\/pre>\n\n\n\n
Now if we tried to sync the list to Sync Gateway we\u2019d get a 401 Unauthorized error. Let\u2019s fix that by creating a user session with Facebook login.<\/p>\n\n\n\n
Authenticating with Sync Gateway<\/h1>\n\n\n\n
To authenticate with Sync Gateway we can send a POST request to \/todos\/_facebook<\/strong> with the access token, if we get back a 200 OK, the browser will set the session cookie returned from Sync Gateway for future push\/pull replications.<\/p>\n\n\n\n
function startSyncGatewaySession(accessToken) {\r\n  var request = new XMLHttpRequest();\r\n  request.open('POST', SYNC_GATEWAY_URL + '\/_facebook', true);\r\n  request.setRequestHeader('Content-Type', 'application\/json');\r\n  request.onreadystatechange = function() {\r\n    if (request.readyState == 4 && request.status == 200) {\r\n      console.log('New SG session, starting sync!');\r\n      sync();\r\n  };\r\n  request.withCredentials = true;\r\n  request.send(JSON.stringify({"access_token": accessToken}));\r\n}\r\n<\/code><\/pre>\n\n\n\n
Note<\/strong>: It\u2019s important to set request.withCredentials = true<\/strong> in a CORS request to save the cookie returned from Sync Gateway for future authenticated requests (push\/pull replications).<\/p>\n\n\n\n
Call it in startSessionAndSync<\/strong> passing the accessToken<\/strong> we got back from Facebook:<\/p>\n\n\n\n
function startSessionAndSync(accessToken, userId) {\r\n  migrateGuestToUser(userId);\r\n  startSyncGatewaySession(accessToken);\r\n}\r\n<\/code><\/pre>\n\n\n\n
Wrap up<\/h1>\n\n\n\n
Now open up your browser, you can test todo items are syncing with another browser window opened or the native apps running TodoLite.<\/p>\n\n\n\n
Users can still create tasks without being logged in. But the minute a user logs in, the tasks belong to the user\u2019s list. Providing a guest account feature is one of the many benefits of building for offline-first capabilities.<\/p>\n\n\n\n
Notice the TodoMVC list<\/strong> document is displayed as a task in Chrome. That\u2019s because this example was using the allDocs<\/strong> query to display tasks.<\/p>\n\n\n\n
In the next post, we\u2019ll use Map\/Reduce queries to add the multi-list capability and a profile document as well to share them with other users.<\/p>\n\n\n\n
Read more:<\/p>\n\n\n\n