Single Page Application with Angular.js, Node.js and NeDB (NeDB Module) – updated for Express 4

This post is a proof of concept towards make web application with Javascript based Web Server with light-weight database NeDB.It shows how to create a single page application in Node.js and NeDB (NeDB Module) with Express4.

To make this possible, we have selected –

1> Angular.js for client side development – Single Page Application

2> Cross Domain Communication in between Angular.js and Node.js

3> Node.js for server side development

4> Rest based web service creation with express.js

5> Database – NeDb

6> Node.js NeDB Module Extention

We have created a Proof of Concept with Javascript based web server, where we have focused on dealing with NeDB with javascript based framework Node.js and angular.js on client side.

Architecture at a glance –

Angular.js Node NeDB

So here are the steps –

Installation –

A> Download and install Node.js from here.

B> To Develop the application we need to install nedb module for Node.js

Command – npm install nedb (should be connected to internet)

C> We need to install express.js for node.js

Command – npm install express  (should be connected to internet)

Configuration Code –

Now, we will try to describe the code portion –
[javascript]
var application_root = __dirname,
express = require("express"),
path = require("path");

[/javascript]
Here we have initialised the express.js within javascript variables in respect of Node.js concept.
[javascript]
var app = express();
[/javascript]
Here we have initialised the express web server in app variable.
[javascript]
var databaseUrl = "c:/nodeNedb/db/user.db";
var Datastore = require(‘nedb’);
db = {};
db.users = new Datastore({ filename: databaseUrl, autoload: true }); // to autoload datastore

[/javascript]
Here we have made the connection to the nedb database using the Node.js nedb module extension library.
[javascript]
var env = process.env.NODE_ENV || ‘development’;
if (‘development’ == env) {
var bodyParser = require(‘body-parser’);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
var methodOverride = require(‘method-override’);
app.use(methodOverride());
app.use(express.static(path.join(application_root, "public")));
var errorhandler = require(‘errorhandler’);
app.use(errorhandler());
}

[/javascript]
Here we have made the configuration related to express.js

Rest Services Code –

[javascript]
app.route(‘/api’).get(function (req, res) {
res.header("Access-Control-Allow-Origin", "http://localhost");
res.send(‘Our Sample API is up…’);
});
[/javascript]
Here we have made our first REST based web service and tested whether the express.js is up.

Our sample api will be  – http://127.0.0.1:1212/api (Get Method)
[javascript]
app.route(‘/getangularusers’).get(function (req, res) {
res.header("Access-Control-Allow-Origin", "http://localhost");
res.header("Access-Control-Allow-Methods", "GET, POST");
// The above 2 lines are required for Cross Domain Communication(Allowing the methods that come as Cross Domain Request
db.users.find(”, function(err, users) {// Query in NeDB via NeDB Module
if( err || !users) console.log("No users found");
else
{
res.writeHead(200, {‘Content-Type’: ‘application/json’}); // Sending data via json
str='[‘;
users.forEach( function(user) {
str = str + ‘{ "name" : "’ + user.username + ‘"},’ +’\n’;
});
str = str.trim();
str = str.substring(0,str.length-1);
str = str + ‘]’;
res.end( str);
// Prepared the jSon Array here
}
});
});

[/javascript]
Here we have created another REST api to get all username from user collection and so have done the nedb query.

Our sample api will be  – http://127.0.0.1:1212/getangularusers (Get Method)
[javascript]
app.route(‘/insertangularneuser’).post(function (req, res){
console.log("POST: ");
res.header("Access-Control-Allow-Origin", "http://localhost");
res.header("Access-Control-Allow-Methods", "GET, POST");
//The above 2 lines are required for Cross Domain Communication(Allowing the methods that come as Cross 
//Domain Request
console.log(req.body);
console.log(req.body.mydata);
var jsonData = JSON.parse(req.body.mydata);

db.users.save({email: jsonData.email, password: jsonData.password, username: jsonData.username},
function(err, saved) { // Query in NeDB via NeDB Module
if( err || !saved ) res.end( "User not saved");
else res.end( "User saved");
});
});
[/javascript]
Here we have made a POST request to create an user via REST calling.

Our sample api will be  – http://127.0.0.1:1212/insertangularneuser(Post Method)
[javascript]
//Launch server
app.listen(1212);
[/javascript]
We have made the server to listen at 1212 port.

Now run node appnedbangular.js from command shell.

Angular.js part –

Below is the code in Angular Controller –
[javascript]
‘use strict’;

var myApp = angular.module(‘myApp’, []); // Taking Angular Application in Javascript Variable

//Below is the code to allow cross domain request from web server through angular.js
myApp.config([‘$httpProvider’, function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common[‘X-Requested-With’];
}
]);

/* Controllers */

function UserListCtrl($scope, $http, $templateCache) {

var method = ‘POST’;
var inserturl = ‘http://localhost:1212/insertangularneuser’; // URL where the Node.js server is running
$scope.codeStatus = "";
$scope.save = function() {
//Preparing the Json Data from the Angular Model to send in the Server.
var formData = {
‘username’ : this.username,
‘password’ : this.password,
’email’ : this.email
};

this.username = ”;
this.password = ”;
this.email = ”;

var jdata = ‘mydata=’+JSON.stringify(formData); // The data is to be string.

$http({ // Accessing the Angular $http Service to send data via REST Communication to Node Server.
method: method,
url: inserturl,
data: jdata ,
headers: {‘Content-Type’: ‘application/x-www-form-urlencoded’},
cache: $templateCache
}).
success(function(response) {
console.log("success"); // Getting Success Response in Callback
$scope.codeStatus = response.data;
console.log($scope.codeStatus);

}).
error(function(response) {
console.log("error"); // Getting Error Response in Callback
$scope.codeStatus = response || "Request failed";
console.log($scope.codeStatus);
});
$scope.list();// Calling the list function in Angular Controller to show all current data in HTML
return false;
};

$scope.list = function() {
var url = ‘http://localhost:1212/getangularusers’;// URL where the Node.js server is running
$http.get(url).success(function(data) {
$scope.users = data;
});
// Accessing the Angular $http Service to get data via REST Communication from Node Server
};

$scope.list();
}

[/javascript]

Angular Template and HTML

We have referred the Angular Controller in above code
[javascript]
Search: <input ng-model="user">
<div class="span10">
<!–Body content–&gt;
<ul class="users">
<li ng-repeat="user in users | filter:user ">
{{user.name}}
</li>
</ul>
</div>
[/javascript]
We have used the ng-repeat tag to take the users data model from REST communication and shown in HTML
[javascript]
<form name="myform" id="myform1" ng-submit="save()">
<fieldset>
<legend>New User&lt;/legend>
<div class="control-group">
<center>input type="text" placeholder="User…" ng-model="username" size=50 required/></center>
<center><input type="text" placeholder="Password…" ng-model="password" size=50 required/></center>
<center><input type="text" placeholder="Email…" ng-model="email" size=50 required/></center>
</div>
</fieldset>
<p>
<div><center><button type="submit" >Save now…</button></center></div>
</p>
</form>
[/javascript]

We have used the ng-submit tag to send the user data model from REST communication and sent to node server to save in NeDB.

To Note : As NeDB is a light-weight Database, which can be embedded in Node WebKit Applications, for fairly large scale database requirement, reader should consider MongoDB in production environment.

Reader can download the complete source-code in GitHub.

Reference :-

https://github.com/louischatriot/nedb

Also if you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

ECMAScript 6 Fat Arrow Function – a discussion

ECMAScript 6 Fat Arrow Functions –

As we have understood from Mozilla Documentation, An fat arrow function is having shorter syntax compared to traditional function expressions and binds the return value inline. These Arrow functions are always anonymous.

According to MDN, The function definition will look like –
[javascript]
([param] [, param]) => {
statements
}
param => expression
[/javascript]

Below is a quick example of Fat Arrow function as per ECMAScript 6 specification.

A short example

[javascript]
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryl­lium"
];

var a3 = ((s) => s.length);
console.log(a3(a));
[/javascript]

So, this function will output 4 in console. Here before => the function is not having any name and it gets the return value inline.

Below are some examples of current ECMAScript 5 functions.

How we write it in ECMA5 currently?

[javascript]
//1. Simple function
var str = "Please find where there is a find";
var searchStr = "find";
var pos = function(totalStr,stringToSearch){ return str.indexOf(stringToSearch) };
console.log(pos(str,searchStr));
[/javascript]

ECMAScript 6 Equivalent

[javascript]
var es6pos = (totalStr,stringToSearch) => str.indexOf(stringToSearch);
console.log(es6pos(str,searchStr));
[/javascript]

ECMAScript 5

[javascript]
//2. Two functions in combination
var str = "Please find where there is a find";
var searchStr = "find";
var pos = function(totalStr,stringToSearch){ return str.indexOf(stringToSearch) };
var logIt = function(anything){console.log( anything)};
logIt(pos(str,searchStr));
[/javascript]

ECMAScript 6 Equivalent

[javascript]
var intermediateResult = ((totalStr,stringToSearch) => str.indexOf(stringToSearch)) ;
var es6Logit = intermediateResult => console.log( intermediateResult);
es6Logit(intermediateResult(str,searchStr));
[/javascript]

ECMAScript 5 Foreach and For

[javascript]
var arr = ["a", "b", "c"];

arr.forEach(function(entry) {
console.log(entry);
});

//old way
var index;

for (index = 0; index < arr.length; ++index) {
console.log(arr[index]);
}
[/javascript]

ECMAScript 6 Equivalent

[javascript]
arr.forEach(elem => console.log(elem));
[/javascript]

ECMAScript 5 Use of this in function

[javascript]
function Person() {
var self = this;

self.age = 14;

self.grow = function () {
// The callback refers to the `self` variable of which
// the value is the expected object.
return self.age++;
};
}

var p = new Person();
console.log(p.grow());
console.log(p.grow());
[/javascript]

ECMAScript 6 Equivalent for Lexical this

[javascript]
function Person(){
this.age = 14;

this.grow = () => {
return this.age++; // |this| properly refers to the person object
};
}

var p = new Person();

console.log("es6 –"+ p.grow());
console.log("es6 –"+ p.grow());

[/javascript]

Where will we implement arrow functions in a Server Side Framework like Node.js?

We can use this arrow function, where there is an inline functionality.
We should not try to use this arrow function, for global scope functions.
To have more clear code and compactness in code, we may use this Arrow function. Also we find, return value of this function will immediately have execution value in upper scope and the foreach iterator syntax will have more clarity with this function. Also as javascript introduced several utility functions like map(), reduce(), filter() etc. with arrays, this fat arrow function will have a better fit for those scenarios.

What is the Advantage of using this Feature?

As we have gone through –

  • Shorter syntax – without using function, return etc.
  • Better clarity and compact codebase for smaller inline functions
  • Get this context in all the inline functions of a class within higher order function root scope

A real interesting discussion, we have found in stackoverflow, is here.

Have we tested yet?
In Server Side – How have we tested this feature?

As of now, we do not have this => notation is not implemented yet in node.js 0.12 version. So we needed to use the harmony flag. We have use nvm (node version manager) to manage the node version.

[html]
nvm use 0.12
[/html]
and then using the harmony flag –
[html]
node –harmony es6arrow.js
[/html]

In Client Side – How have we tested this feature?

As of now, only Mozilla Firefox has implemented this feature.Our firefox version is 35.0.
We tested those above features in Firefox Console.

Example in Github –

Code tested with node.js harmony flag

Code tested in Mozilla Firefox Console

Other resources which are useful –

All comments are welcome.

If you find this article helpful, you can connect us in Google+ and Twitter.

Set up Apache Kafka and working with Java Client

Apache Kafka

Apache Kafka is a publish/subscribe messaging system, which is fast, distributed and having persisting data store over multiple clusters.

In our work, we needed to up Apache kafka for continuous data streaming. Here we have shown the basic work to setup Kafka and building a java client (producer) to send message and get those message from Kafka Console Consumer.

First the

Apache Kafka Configuration –

We have used kafka 2.10-0.8.2.0 and zookeeper-3.4.6 for our current work.

As Apache Kafka will run on cluster on single-node configuration also, first we need to configured Apache Zookeeper for Configuration Management.

The basic Zookeeper Standalone configuration in conf/zoo.cfg

[html]
tickTime=2000
dataDir=/<<Your Directory>>/zookeeper-kafka-out
clientPort=2181
[/html]

We have set the default port for it. The port can be changed and all the scripts of Apache Kafka are to be modified as and when required.
To start Zookeeper, the command is –

[html]
sudo ./bin/zkServer.sh start
[/html]

To Start Apache Kafka, the command is

[html]
bin/kafka-server-start.sh config/server.properties
[/html]

Topic in Apache Kafka
In Apache Kafka message producers and message consumers are related to per topic.
kafka topic creation –

[html]
bin/kafka-topics.sh –create –zookeeper localhost:2181 –replication-factor 1 –partitions 1 –<<Your topic name>>
[/html]

To list the kafka topic in console –

[html]
bin/kafka-topics.sh –list –zookeeper localhost:2181
[/html]

To show the messages consumed, we can open kafka consumer in console –
[html]
bin/kafka-console-consumer.sh –zookeeper localhost:2181 –topic internationalCDR –from-beginning
[/html]

If we want to make Kafka Producer from console, we need to open one with the following one –

[html]
bin/kafka-console-producer.sh –broker-list localhost:9092 –topic <<your topic name>>
[/html]

In the above section, we are in respective kafka and zookeeper directory.

The Java client – 

It is a Message Producer Program utility with java, tested for a stand-alone kafka. Codes are self explanatory.

[java]
package com.apt.server.utility;
import kafka.producer.KeyedMessage;
import kafka.producer.ProducerConfig;
import java.util.Properties;

public class KafkaUtility {

private final kafka.javaapi.producer.Producer<Integer, String> producer;
private final String topic;
private final Properties props = new Properties();

public KafkaUtility(String topic) {
props.put("serializer.class", "kafka.serializer.StringEncoder");
props.put("metadata.broker.list", "localhost:9092");
props.put("zk.connect", "localhost:2181");
// Use random partitioner. Don’t need the key type. Just set it to Integer.
// The message is of type String.
producer = new kafka.javaapi.producer.Producer<Integer, String>(new ProducerConfig(props));
this.topic = topic;
}

public void sendMessage(String particularMesage)
{
KeyedMessage<Integer, String> km = new KeyedMessage<Integer, String>(this.topic, particularMesage);
producer.send(km);
}

public static void main(String[] args) {
KafkaUtility ku = new KafkaUtility("indianCDR");
ku.sendMessage("Sample Message to India CDR");
}

}

[/java]

If you find this article helpful, you can connect us in Google+ and Twitter.

Set up a SVN repository in AMAZON EC2 Ubuntu 14.04

Setting up a SVN Server for Small to Mid Size Project handling in Amazon EC2 Server with Operating System Ubuntu Server is an general process. But this is an non trivial process, when we look it from a programmer perspective. I have recently configured such one and hence making documentation of the same. May be it will help someone.

We assume that Amazon EC2 server is configured with SSH already.
Now, first we need to update the Existing Operating System with –

[html]
sudo apt-get update
sudo apt-get dist-upgrade
[/html]

Apache, PHP, MYsql Setup

We have to install and configure Apache as web server to make access of the SVN through HTTP.
[html]
sudo apt-get install apache2
[/html]
We have to enable rewrite module in apache.
[html]
sudo a2enmod rewrite
[/html]

We had to configure PHP to run with apache server.

[html]
apt-get install libapache2-mod-php5
[/html]
And then restart the Apache Server.
[html]
sudo service apache2 restart
[/html]

Now we had added the default user and group “www-data” to run apache server in ubuntu and made the required permission for those.

[html]
sudo adduser ubuntu www-data
sudo chown -R www-data:www-data /var/www
sudo chmod -R g+rw /var/www
[/html]

Made another server Restart –
[html]
sudo /etc/init.d/apache2 restart
[/html]

We have installed mysql and php mysql driver to work the apache server seamlessly.

[html]
sudo apt-get install mysql-server
sudo apt-get install php5-mysql
sudo /etc/init.d/apache2 restart
[/html]

Subversion Setup

We have installed the subversion and related tools and apache svn module in our ec2 ubuntu instance.

[html]
sudo apt-get install subversion
sudo apt-get install libapache2-svn
sudo apt-get install subversion-tools
[/html]

We have created folder for SVN in /home folder. And made a test directory by using svnadmin tool. Also we have made necessary permission for the folders to the user “www-data”.

[html]
sudo mkdir /home/svn
sudo mkdir ~/test
sudo svnadmin create /home/svn/test
cd /home/svn
sudo chown -R www-data:www-data /home/svn
sudo chown -R www-data:www-data /home/svn
[/html]

Now as the new apache configuration has changed the folder structure and the enabled module related configuration are to be done in mods-enabled folder. For configuring svn, we needed to configure dav-svn.conf

[html]
cd /etc/apache2/
cd mods-enabled/
sudo nano /etc/apache2/mods-enabled/dav-svn.conf
[/html]

The changed configuration is –

[html]
<Location /repos>
DAV svn
SVNParentPath /home/svn
# Limit write permission to list of valid users.
AuthType Basic
AuthName "Authorization Realm"
AuthUserFile /home/svn/svn-auth/passwd
AuthzSVNAccessFile /home/svn/svn-auth/access
Require valid-user
</Location>
[/html]

Made another server Restart –
[html]
sudo service apache2 restart
[/html]

Rest of the works are relatively simple. We made 2 folders in SVN for our work –
[html]
sudo svnadmin create /home/svn/mobilesvn
sudo svnadmin create /home/svn/serversvn
[/html]

We had made the users to have access to the SVN folders.

[html]
sudo mkdir /home/svn/svn-auth/
sudo nano /home/svn/svn-auth/access

[/]
admin = rw
mobileuser = rw
serveruser = rw
[/html]

Now to create password for the users, we needed to install the apache2-utils utility.

[html]
sudo apt-get install apache2-utils
[/html]

We had created password –
[html]
sudo htpasswd -cb /home/svn/svn-auth/passwd admin ADMINPASS
sudo htpasswd -b /home/svn/svn-auth/passwd mobileuser MOBPASS
sudo htpasswd -b /home/svn/svn-auth/passwd serveruser SRVPASS
[/html]

Again, we have ensured the necessary permissions for the folders, so that they can not be accessed from external interface.

[html]
sudo chown -R www-data.www-data /home/svn /home/svn/svn-auth/
sudo chmod 600 /home/svn/svn-auth/access /home/svn/svn-auth/passwd
sudo service apache2 restart
[/html]

To ensure apache server at startup of the operating system, we made –
[html]
sudo apt-get install sysv-rc-conf
sudo sysv-rc-conf apache2 on
sudo sysv-rc-conf apache2 –list
[/html]

So our server configuration is completed here.

Subversion Setup

Now to test on client side, to make everything is ok –

We have tested with our local box, which is connected to the internet –

[html]
svn checkout http://<<Elastic IP>>/svn/mobilesvn mobilesvn
gedit mobile-initial.txt
svn add mobile-initial.txt
svn commit -m ‘initial commit’
svn up

svn checkout http://<<Elastic IP>>/svn/serversvn serversvn
gedit server-initial.txt
svn add server-initial.txt
svn commit -m ‘initial commit’
svn up
[/html]

Now, when we accessed the above URLs, we have found the initial committed files in SVN.

So that is all.

If you find this article helpful, you can connect us in Google+ and Twitter.

Basic Introduction to React.js

The aim of this article is to make a basic introduction to react.js.
Today React.js is gaining much more popularity in Front-end Web Developer world.

As we understand, React.js is a front-end developement framework, created and maintained by facebook for their production application. The framework focuses on UI and expect to handle the backend by WEB Apis. React.js implements One way data-flow.

We are learning React.js and will try to go through all the concepts of React.js step-by-step.

Here is a first Example of React.js Code, which will simply print “Hello React World” on the Html Page.

reactex

Basic Example without JSX

[javascript]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=’Content-type’ content=’text/html; charset=utf-8′>
<title>Basic Example</title>
<script src="react.js"></script>

</head>
<body>
<h1>Basic Example</h1>
<div id="container">

<script src="react.js"></script>
<script>
var ExampleApplication = React.createClass({
render :function()
{
var message = "Hello React World";
return React.DOM.b(null, message);

}
});
React.renderComponent(
ExampleApplication(),
document.getElementById(‘container’)
);
</script>
</body>
</html>

[/javascript]

We assume here, react.js is in our application root folder. No other dependencies are there in this code.
What – the code is doing? It simply prints some text in the web page.

React uses a specialized version of javascript, which is called jsx. These jsx codes are needed to be complied to produce pure javascript. To simplify this conversion, JSXTransformer.js is needed to be included in the Application web page. But for now, we have not used this feature and simply made a javascript code to show the example with react.js. We will see the use of JSXTransformer.js in our next articles.

In the above code, the ExampleApplication is represented as a React Class, which is having a pre-defined render method. This render method is responsible to update the view of the React Component. Here it is attaching a “hello world” king of message to the React DOM.

Now with the React.renderComponent, it is taking the class ExampleApplication and the respective div container – where the react component will be rendered. So finally it is showing the Hello React World.

We will write step-by-step article to understand react.js features. Meanwhile, for better understanding react.js, we should refer to facebook tutorial.

If you find this article helpful, you can connect us in Google+ and Twitter.