{"id":3721,"date":"2017-06-13T07:17:28","date_gmt":"2017-06-13T14:17:28","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=3721"},"modified":"2025-06-13T20:40:55","modified_gmt":"2025-06-14T03:40:55","slug":"build-photogallery-app-aws-rekognition-and-couchbase-part2","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/es\/build-photogallery-app-aws-rekognition-and-couchbase-part2\/","title":{"rendered":"Crear una aplicaci\u00f3n de galer\u00eda de fotos con etiquetado autom\u00e1tico mediante AWS Rekognition y Couchbase - Parte 2"},"content":{"rendered":"

Ratnopam Chakrabarti<\/a>\u00a0is 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\u2019s not working, he enjoys spending time with his 3-year-old son.<\/em><\/p>\n

\"Ratnopam<\/p>\n

In Part 1 of this blog series<\/a>, 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 \u201clikes\u201d and show by tagname features of the app.<\/p>\n

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 \u201cURL\u201d which is exposed as a route <\/em>inside route.js on the server side.<\/p>\n

The like<\/em>\u00a0is an anchor element on click of which a new route gets called in the node app. Here\u2019s the snippet:<\/p>\n

 <\/p>\n

$(document).on('click', '.like', function(e){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Like clicked');\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var that = $(this);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var URL = host + '\/like\/' + that.data('photoid');\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ajax({\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 url: URL,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 success:function(data){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var parseData = JSON.parse(data.response);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 that.find('h4').html(parseData.likes);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 })\r\n\r\n<\/pre>\n
The URL is formed by appending the \u2018\/like\/\u2019 and the id of the image to the host <\/em>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.<\/p>\n
The corresponding route for this (in routes.js) is shown below:<\/p>\n
router.get('\/like\/:id', function(req, res, next){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImageModel.getByDocumentId(req.params.id, function(err, result){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var jsonFromDB = JSON.stringify(result);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var docFromDBArr = JSON.parse(jsonFromDB);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var docFromDB = docFromDBArr[0];\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var likes = docFromDB.likes;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ increment the like by 1\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0likes = likes + 1;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0docFromDB.likes = likes;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImageModel.save(docFromDB, function(error, result) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(error) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return res.status(400).send(error);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0res.status(200).send({likes:docFromDB.likes});\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\r\n\r\n})\r\n\r\n<\/pre>\n
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.<\/p>\n
The route makes a call to the getByDocumentId <\/em>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 \u201clikes\u201d <\/em>is incremented by 1. The updated document is saved by calling the save() function.<\/p>\n
The getByDocumentId function (defined in recordmodel.js file):<\/p>\n
\/*\r\n\r\n\u00a0* Get a particular document from Couchbase Server using a parameterized N1QL query\r\n\r\n\u00a0*\/\r\n\r\nImageModel.getByDocumentId = function(documentId, callback) {\r\n\r\n\u00a0 \u00a0 var statement = \"SELECT META(photos).id, filename, likes, tags \" +\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"FROM `\" + config.couchbase.bucket + \"` AS photos \" +\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"WHERE META(photos).id = $1\";\r\n\r\n\u00a0 \u00a0 var query = N1qlQuery.fromString(statement);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 db.query(query, [documentId], function(error, result) {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 if(error) {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return callback(error, null);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 callback(null, result);\r\n\r\n\u00a0 \u00a0 });\r\n\r\n};<\/pre>\n
 <\/p>\n
Show Images by TagName<\/h3>\n
To list images by a particular tag, we need to do the following things:<\/p>\n