Work with CouchDB on the JavaScript to-do List Sample App

July 06, 10 AM by Andrew Buren

2618

At some time, I had to work with one of the document-oriented DBMS – Apache CouchDB, but I had some difficulties with the search of the documentation.

In this article, I want to talk about how to work in this DBMS from JavaScript on the example of a small "To-do List" app. Because the article is focused on ApacheCouchDB – I'm not going to show and tell about how the app works entirely.

The Model

The operating principle of this app is the following:

1. When the page loads we send a request to the database server.
2. We receive from it a JSON structure.
3. Then we parse it on the page.
4. As needed, we add any notes.
5. When we press ‘Save’, we write the data to the database.

All page content is stored as the following:

model = {
items: [
{
_id: 1,
date: "11.11.11",
name: "test page #1",
does:[{
check : 'true',
name : 'Test 1',
time : '00:00'
}]
}
{
_id: 2,
date: "11.11.11",
name: "test page #2 ",
does:[{
check : 'true',
name : 'Test 2 ',
time : '00:00'
}]
}

]

Each of the elements of items keeps a worksheet that includes a list of the cases, in the example above each list contains one element (does).

So we have a model to store the data. The next step is directly working with DBMS.

CouchDB installation

The easiest way to install CouchDB is to go to the website and download the installation distributive for your operating system. When installing, it's necessary to pay attention to the viruses, so it's advisable to download antivirus with intelligent protection by Bod Security.

Functional testing

After installing CouchDB, it's needed to check it for serviceability, to do this, it's necessary to go to the address: 127.0.0.1:5984.

You can go to the next step.

Control panel

Working with a control panel CouchDB is carried out by using the Futon interface, the access to which can be done by typing in the address bar of your browser the following address: 127.0.0.1:5984/_utils.

If everything is correct, you will see the control panel (in version 2.x.x the control panel looks different).

Click on the button "Create Database, " and in the box, we enter the name of our DB.

All in all, our database is created, and the next step will be the engagement with this database, specifically from the app.

The engagement with DB from the app

I composed a functional part of the app, without the connecting to the database, that is, it operates in the offline mode after the reloading the page all the data are erased. We need to implement the record of the created data into the base, and the retrieving them from there when we download the app. Combed the official documentation, I found a plugin, which written for plain JavaScript, and also for JQuery. I decided to use the JQueryPlugin.

It is located in the CouchDB assembly that we downloaded, and you can find it at this address: 127.0.0.1:5984/_utils/script/jquery.couch.js.

Data record into the DB

When the app creates a model of our data, we need to log them into the DB. The first thing we need to specify the host and port of the DB:

$.couch.urlPrefix = "http://localhost:5984";

It's necessary to use the following function to access the database:

$.couch.db(“todo_model”).method

We need a saveDoc method which overwrites the document in the database if it has the same id as the input document has, and creates a new document if the id does not match any of the existing ones.

Next, it's necessary to cycle go through each element of the app model and write it to the database.

for(var i = 0; i < $scope.list.items.length; i++){ var doc = $scope.list.items[i]; doc._id = String(doc._id); $.couch.db("todo_model").saveDoc(doc, { success: function(data) { console.log(data); }, error: function(status) { console.log(status); } }); }

*The app was built using AngularJS framework. It's not recommended to use AngularJS and JQuery in conjunction for the real purposes.

There are documents in the database which are stored in the JSON format.

Thus, using the plugin JQueryCouchDB, we can easily record the data into the database. In the same way, we can get the data from the database, but I decided to show a slightly different way that can be used without connecting any third-party plugins.

The HTTP request to CouchDB

When the page loads I send the request to the server where our database is, as a response I receive the JSON structure with the necessary data:

$http.get('http://127.0.0.1:5984/todo_model/_all_docs').then(function(response){
$scope.model_len = response.data.rows.length
for (var i = 0; i < $scope.model_len; i++) { var p = response.data.rows[i].id

$http.get('http://127.0.0.1:5984/todo_model/' + p ).then(function(data){

model.items.push(data.data) }); } });

I get all the elements for fixing their number, then each of the elements I push into the model.

Conclusion

There is little documentation on this DBMS. I've shown one of the ways to work with it, and, hopefully, helped someone.

July 06, 10 AM by Andrew Buren

2618