Ratnopam Chakrabarti is a software developer currently working for Ericsson Inc. He has been focused on IoT, machine-to-machine technologies, connected cars, and smart city domains for quite a while. He loves learning new technologies and putting them to work. When he’s not working, he enjoys spending time with his 3-year-old son.

Ratnopam Chakrabarti

In Part 1 of this blog series, we looked at how we can store and retrieve image metadata to and from a Couchbase bucket. In this post (Part 2), we will take a look at the “likes” and show by tagname features of the app.

The idea here is to use HTML and jQuery on the client side that interact with the node components such as route.js running on the server side. For instance, the following jQuery snippet sits on the client side and makes an Ajax call to the “URL” which is exposed as a route inside route.js on the server side.

The like is an anchor element on click of which a new route gets called in the node app. Here’s the snippet:

 

The URL is formed by appending the ‘/like/’ and the id of the image to the host variable. Once the Ajax call is made with success, the corresponding success callback parses the JSON response sent back from the server side (routes.js) endpoint.

The corresponding route for this (in routes.js) is shown below:

The above route serves the call from the client side jQuery and also sends back a HTTP response of 200 and a JSON response body.

The route makes a call to the getByDocumentId function exposed by the ImageModel. This function, as shown below, retrieves a document from the Couchbase bucket based on the document id passed as an argument. Once the document is retrieved successfully, the result is parsed and the “likes” is incremented by 1. The updated document is saved by calling the save() function.

The getByDocumentId function (defined in recordmodel.js file):

 

Show Images by TagName

To list images by a particular tag, we need to do the following things:

  • Pass the tagname when the anchor is clicked
  • Use the tagname to filter out images

The tagname is passed by the following simple jQquery:

And the corresponding route:

The getImagesByTag function is described below:

It simply runs the following query using N1QL:

select filename, likes from photogallery where <tagname> IN tags;

This allows filtering on the basis of tagname where tags is an array of strings.

pasted image 0 3

So, if we have two images with the same tag then the above query should return both images.

pasted image 0 1

Here both the documents have a common tag named “Blossom.” Now, if we run the query using the Couchbase Query Workbench, we get the following result:

pasted image 0 5

As expected, you can see two records are returned. This is in effect what’s happening in the getImagesByTag () function.

Troubleshooting

During npm-install, if you face the following error,

Can’t find Python executable “python,” you can set the PYTHON env variable

then do the following to get rid of the error:

Install python

Add python to the path

This should resolve the error … at least it did for me.

 

This post is part of the Couchbase Community Writing Program

Posted by Laura Czajkowski, Developer Community Manager, Couchbase

Laura Czajkowski is the Snr. Developer Community Manager at Couchbase overseeing the community, our incentive programs, Experts and Champions group, meetups, and defining our presence at developer events. She’s also responsible for our monthly developer newsletter and engaging with our community in various forms. Laura has been active in Open Source communities since 2000 and has been involved in various activities, including leading and organising conferences on software testing, documentation, and advocacy. Laura is an Open Source advocate and regular conference speaker who is passionate about getting people – everyone from primary school students to technology professionals – involved in Open Source communities both on IRC and in face-to-face discussions, she is easily found online at @czajkowski on twitter and on freenode.

Leave a reply