Arvind Ravulavaru is a passionate web developer, likes experimenting with new and upcoming technologies. He also blogs at http://thejackalofjavascript.com.

Arvind's articles

  1. Building a Chat App with node-webkit, Firebase, and AngularJS

    In this post we are going to build a desktop based chat application named vTak. We will use node-webkit to power the core desktop app and Firebase as our realtime data store. We will be using a slush generator named slush-wean to scaffold a basic node-webkit/Express/Angular app. The final product will look something like the […]

  2. Creating a Sentiment Analysis Application Using Node.js

    Sentiment Analysis helps you in understanding what people think about a certain topic. The sentiment analysis app we are going to build will take in a keyword(s) and will fetch the matching tweets from Twitter. Then, it will run each tweet through an AFINN powered sentiment analysis Node module. This module will score the tweet text, and finally will display the relevant statistics.

    Before we get started, you can take a look at the demo here. You can download the complete source code from here.

    Technology Stack

    This app is built on top of Nodejs. We will be using Express as our server side framework and jQuery for DOM manipulation on the client side. To make things easy for us, we will be using a Slush generator named slush-express (written by me) to scaffold a new Express app for us. We will be using a light weight disk based DB named diskDB (also written by me) to store the results.

    We will be using the Twitter module to interact with Twitter and Sentiment module to perform the analysis.

    So, let’s get started.

    Setup the App

    Create a new folder named sentimentAnalysisApp and open a new terminal/prompt here. First, we are going to install Gulp, Slush, and Express generator using the following command.

    [code]
    npm i -g gulp slush slush-express
    [/code]

    Once the above modules are installed, we will scaffold a new Express app using this command:

    [code]
    slush express
    [/code]

    Slush will ask you to pick a view engine and a style sheet engine. Answer as shown below.

    [code]
    [?] Select a View Engine: HTML
    [?] Select a Stylesheet Engine: CSS
    [/code]

    It will take slush a couple of minutes to scaffold the application and install the dependencies. The resulting scaffolded folder structure will look like this:

    [code]
    sentimentAnalysisApp
    ├── Gulpfile.js
    ├── app.js
    ├── bin
    │   └── www
    ├── bower.json
    ├── package.json
    ├── public
    │   └── stylesheets
    │   └── style.css
    ├── routes
    │   ├── index.js
    │   └── users.js
    └── views
    ├── error.html
    └── index.html
    [/code]

    Here is a quick explanation of the different files and folders.

    • bin/www – The server initiation and the port is configured here.
    • app.js – The server configuration, the routes, and the view engine is configured here.
    • gulpFile.js – The task runner for our project.
    • /public – Consists of the static files dispatched to the UI.
    • /routes – Consists of the app routes.
    • /views – Consists of the app views.

    You can run the app by executing the command gulp. This will start the Express server on port 3000. Navigate to http://localhost:3000 and you can see the sample home page.

    Server Side Development

    First, we will install the application level dependencies using the following command:

    [code]
    npm i twitter sentiment --save
    [/code]

    Next, create a new folder named logic at the root of the project. Create two files named twitterSearch.js and sentimentAnalysis.js. These files consist of the logic for fetching tweets from Twitter and performing analysis, respectively. Create another folder named db, which will store the data.

    Next, open routes/index.js in your favorite editor. We will add a new route, POST /search. The user entered search text will be submitted to this end point. Update routes/index.js as shown below.

  3. Creating a Firebase Powered End to End Ionic Application

    Technology has come a long way since mankind used rocks to start a fire. There was a time when the Internet was meant to serve Hypertext documents across a few machines. But today, we have reached a complex state where your heart rate is monitored by a device and then transmitted over to your computer. And if the heart rate is not normal, you might even see an Ambulance waiting at the end of your sprint.

    This is pretty much how we live these days. And to power such amazing features, we need to have amazing technologies. In this post, we are going to discuss two such bleeding edge technologies, the Ionic Framework and Firebase.

    What is the Ionic Framework?

    Ionic is a powerful AngularJS driven mobile web framework that makes building hybrid mobile application easy. Not only does it have the power of two way data-binding, it has an awesome interface for working with RESTful APIs. This makes Ionic a perfect match for developing apps and keeping them in sync across devices.

    What is Firebase?

    There were times when provisioning a machine to deploy a simple website would take weeks. Then, along came Amazon. You simply tell Amazon what kind of system you want, and it provides a server for you. Next, we have seen the rise of Heroku, which provides a PaaS (Platform As A Service) to host your applications. This allowed developers to focus more on the application, instead of worrying about provisioning and deploying the application. And finally, we have Firebase, which is a self sufficient “Server as a Service” driven by a NoSQL data store. In Firebase, all you need to do is define a collection of data, and Firebase will take care of exposing it as RESTful API for you.

    Bucketlist Application

    I have written an article named Ionic Restify MongoDB – An End to End Hybrid App, which explains how to build an end to end hybrid app using Restify and MongoDB as the API server and Ionic as the hybrid client. In this post, we will see how we can completely eliminate the API server layer with Firebase.

    The Bucketlist application we are going to build will have an authentication layer, allowing the user will be able to register and login. Once authenticated, the user is given the option to create a new bucketlist item.

    The primary view of the application shows a list of incomplete items and a secondary view to show the list of completed items. The user will have an option to mark an item as complete or delete it.

    Before we start building the application, you should:

    Application Architecture

    Our application will primarily consist of two layers. The first is the client (in our case, the Ionic App, but this could be any other client that can consume a RESTful API), and the second is the server (Firebase*).

    Application Architecture

    As you can see from the above diagram, on the client side we have an Angularfire layer which interacts with Firebase and acts as a service layer for the Ionic application. It is this layer that gives the power to keep the data in sync between Firebase and our Ionic client.

    On the Firebase end, we will configure a simple login to take care of the authentication.

    Our Ionic application will have five key controllers:

    1. Sign up controller
    2. Sign in controller
    3. Create new item controller
    4. Show incomplete items controller
    5. Show completed items controller

    Apart from that, we will have a couple of methods that will take care of marking an item as complete and delete the item.

    Designing the Data Structure

    Firebase is ideally used for real time data synchronization, where multiple clients across the globe are expected to see the same data at almost the same moment. This is not the case with our app. We are really not looking for a multi-device sync. All we need is for Firebase to take care of managing our bucketlist data for us.

    The awesome part of Firebase is that it provides an authentication API out of box. All we need to do is enable it and include the client, and Firebase will take care of the rest for us.

    For the bucketlist collection, we need a relation between the user and a bucketlist Item, kind of like a foreign key. This will enable us to show bucketlist items created only by the user.

    A sample buckletlist collection is shown below:

    [js]
    “BucketListCollection”:
    [{
    "item": "test",
    "isCompleted": false,
    "user": "test@bla.com",
    "created": 1400801853144,
    "updated": 1400801853144
    }, {
    "item": "tes message",
    "isCompleted": false,
    "user": "test@bla.com",
    "created": 1401008504927,
    "updated": 1401008504927
    }, {
    "item": "Just to check",
    "isCompleted": true,
    "user": "test@bla.com",
    "created": 1401008534451,
    "updated": 1401008534451
    }, ....]
    [/js]

    In the above sample JSON, the user key holds the link between the logged in user and their items. So, when we fetch the data, we fetch the records that match the logged in user. And this is how we represent the query using a RESTful end point:

    [code]
    https://bucketlist-app.firebaseio.com/bucketList/test@bla.com
    [/code]

    Unfortunately, there is no easy way to implement this in Firebase.

    As per this Stack Overflow post, there are three ways:

    • Use location names and priorities intelligently.
    • Do client-side querying.
    • Run a separate server.

    These approaches were kind of an overkill for a simple API. Then, I stumbled across this Stack Overflow post, that mentions how you can flip the data structure to be more user centric than feature centric. So I changed the app data structure as shown below.

    [js]
    “test@bla,com” : [{
    "item": "test",
    "isCompleted": false,
    "created": 1400801853144,
    "updated": 1400801853144
    }, {
    "item": "tes message",
    "isCompleted": false,
    "created": 1401008504927,
    "updated": 1401008504927
    }....]

    “test2@bla,com” : [{
    "item": "test2",
    "isCompleted": false,
    "created": 14008012853144,
    "updated": 14008012853144
    }, {
    "item": "tes message2",
    "isCompleted": false,
    "created": 14010028504927,
    "updated": 14010028504927
    }....]
    [/js]

    Now, every user has their own collection, rather than a common bucketlist collection, which makes more sense in our application. So, we will be using this structure for managing our data. And our URLs will look like this:

    [code]
    https://bucketlist-app.firebaseio.com/test@bla,com
    [/code]

    Note: I am not 100% sure if a large user base would affect the overall response time for a single query (more users = more collections ).

    Setup Firebase

    We have a good idea as to where we are headed to. Our first step would be to setup a Firebase account, create a new Firebase application instance, and configure the authentication for it.

    Navigate to Firebase.com and create a new account if you do not have one. Next, navigate to the Accounts page and create a new app. Provide the desired name and URL. Once the app is created, click on the app name to navigate to the data and configuration page. This is a bird’s eye view of the backend. Feel free to browse around before you continue.

    Next, we will setup authentication for our application. Click on the Simple Login tab on the left hand side of the page, and in the main content area you will see the available options. Under the Authentication Providers section click on Email and Password and then Check the Enabled checkbox. This will set up the Simple Login for us.

    Setup an Ionic Project

    Next, we will scaffold a new Ionic application from a blank template using the Ionic command line interface (CLI). Create a new folder named myIonicFireApp and open terminal/prompt here. First we will install Cordova and Ionic. Execute the following command:

    [code]
    $ npm i -g cordova ionic
    [/code]

    Next, we will scaffold a new Ionic app. Generally, I like to keep my code organized. Since this is a test app and we are not going to use any version control to manage development and production, we will create two folders, myIonicFireApp/dev and myIonicFireApp/prod. This step is optional and totally a preference. Next, cd into the dev folder (if you have created one) and run the following command:

    [code]
    $ ionic start bucketListApp blank
    [/code]

    bucketListApp is the name of the application. This will scaffold the Ionic + PhoneGap template for us. Once the setup is done, the first order of business is to move the config.xml from the bucketListApp folder to www folder (A PhoneGap build requirement).

    Next open up config.xml in your favorite editor and update the widget ID, name, description, and author fields. These will be the meta data for your app, when it run through Phonegap Build. The updated file would look like: