How to develop your first CouchDB application with CouchApp and JS

It is time for you to use the skills previously learned on this article (and first sneak peek to CouchDB) and finally get to develop CouchDB applications using JavaScript, HTML and CSS.

CouchApp is a JavaScript and HTML5 app that can be served directly to the browser from CouchDB, without any other software in the stack. In general, people chose the CouchDB (and we decided it was time to talk about the perks of using it to create an app) because it has a less structured operation, allowing more database design freedom.

Time to start building!

If you feel adventurous enough, today is your lucky day, as we are going to show you how to develop your first CouchDB application with CouchApp and JS.

First of all, you should know that CouchDB is based on the database documents model (a more flexible solution, IMO); and it also is a widespread choice in business. For example, by industry, CouchDB customers are divided in Computer Software (27%), IT and Services (10%) and Staffing and Recruiting (9%).

We can say that CouchApp generates the structure of the project and solves the front and back on the same controller (remember how MongoDB comes with three tools and requires the programmer to jump constantly between them?). This CouchDB developer also is part of Apache, so there won’t be any incompatibility issues between these two — everything matches here. It all stays in the family, right?

Using Couchapp is the perfect excuse to try something new and exciting. Ever thought about creating your own e-commerce with a bunch of elaborated features? We are talking about developing something complex, in an easy way. And this is how you do it.

Start installing CouchApp

CouchApp requires Python to be installed on your system to function. To check which version is already installed, open a terminal and type this command:

$ Python -V

If Python is installed, you should see a response like the following:

Python 2.7.15+

For assistance setting up Python, please check the next link: How to install Python PIP package manager on Ubuntu.

The next step is installing the setuptools for Python and Couchapp. For this, we’re going to use a package manager:

apt-get install python-setuptools
easy_install -U couchapp

Let’s start our first CouchApp!

Now that you have installed CouchApp, you can begin writing CouchDB application using JS!

1. Create a subdirectory below your home directory called couchapps.

mkdir ~/couchapps
cd ~/couchapps

2. Use the following command to generate the CouchApp, for this test is going to be couchproducts.

couchapp generate couchproducts
cd ~/couchproducts

This should generate something like this:

[INFO] Generating a new CouchApp in 
~/couchapps/couchproducts

3. If we navigate into the couchproducts directory we should see five subdirectories: _attachments, lists, shows, vendors, and views. We need to replace these folders with the ones we have on this github repo: CouchProducts.

For now, we will navigate into the _attachments subdirectory using the following command:

cd _attachments

CouchApp automatically creates an index.html file and a main.css file within the style subdirectory.

Open the index.html file in your favorite text editor. Here, you can change the code as much as you want.

4. Once you have finished making changes, you can save the file and reload your browser window using the next command to push your CouchApp.

couchapp push . http://127.0.0.1:5984/couchproducts

If you have set up authentication it would generate a response like this:

2019-05-30 11:54:29 [CRITICAL] {"error":"unauthorized","reason":"You are not a db or server admin."}

Time to put your admin username and password:

couchapp push . http://admin:password@127.0.0.1:5984/couchproducts

Click on the link to see your running application:

2019-05-30 12:28:12 [INFO] Visit your CouchApp here:
http://127.0.0.1:5984/couchproducts/_design/couchproducts/index.html

Now you can create products with their description and delete it!

What does it actually do?

To find out, first, let’s check our database on Fauxton.

http://127.0.0.1:5984/_utils/#database/couchproducts/_all_docs

We can see a new document has been created.

Click the first one, and hey! That’s the Product we set before.

How do we do this? Let’s briefly walk through what the main.js file does

As we can see on the first instance, the whole body of our code will be in the CouchApp instance. When you generate the app, it automatically configures the database and design document variables for you.

At the beginning of the add_product function, we skip the preventDefault (this event cancels the event if it is cancelable without stopping the rest of the operation, it can be called again). Then, we build our newProduct document in JSON format, using the value of the Product input field for the value of the prod field, and the Description for the value of desc.

Next, we have an if statement, here we need to fill the “Product” field or it won’t allow you to create a new product. But, if that’s not the case, this function saves the document with the parameters that you previously gave. Now, we add ‘delete buttons’ to take care of the two scenarios: first, adding delete buttons to links generated when a user adds a new task. And second, adding delete buttons to links generated when the application is launched.

Give me back my data!

So far, this part isn’t maintaining the state between sessions! But no need to worry… Now, we have to tell our application to bring back data from the CouchDB database.

Open your terminal and navigate to your couchproducts directory:

cd couchapps/couchproducts/views/get_products/

You will find a map.js file. This function takes a single argument, which is the document itself and uses the emit function to produce a result. This emit function accepts two arguments: a key and a value.

Now, we can use the view with the map function. This function (shown below) retrieves the products that are currently stored in the database when the application first loads. As seen, when emit function is called (on the map.js file) a row is added to the view. So, in our function “get_products” we just have to tell which attribute we want to call:

• row.key: Give us the name of the product.
• row.value.[value]: Give us a specific value.

And that’s all! Now you can improve your skills to define new fields for each document, independently of one another with CouchDB database then admin it by using Project Fauxton.

Remember that all repository git can be download here by clicking here CouchProducts.

Conclusion

In this article, you learned how to create an application where you can add products to the database using the form you gave to the application. We know this application is quite simple in its current form, but with a little bit of knowledge of JS, you can build a better application and, guess what? You can create a better Product Manager application!

Can’t get enough of Apache? Go check our step-by-step guide to use Apache Cassandra’s Stress Tool like a pro.