Angularjs, Material Design and Twitter Streams – A Twitter Live Search App9 min read

Recently I have stumbled upon Angular Material an Angularjs implementation of the Material Design and wanted to take it for a quick spin. This post gives an overview of  the same along with couple of other technologies.

If you have not heard about Material Design, take a look at this.

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.

The material design project for Angular is

a complementary effort to the Polymer project’s paper elements collection. Our goal is to provide a set of AngularJS-native UI elements that implement the material design system.

In this post, we will be using Twitter’s Streaming API to access public stream with the help of a Node module named Twit and then filter the stream based on the search text a user enter.

We would be using socket.io to keep the Node.js server in sync with the Angular client.

The final app would look like

Screen Shot 2014-11-08 at 2.44.12 pm

You can find the completed code here.

So, let us get started.

Architecture

The app we are going to build involves

  • Node.js
  • Twitter Streams
  • Socket.io
  • Angularjs
  • Material Design

And it is very essential to understand how these go along with each other.

archi

As you can see from the above diagram, when a user establishes a new connection, we will dispatch a web page that consists of the initial view and we will start listening for a query event on the socket.

And when the user searches, we will create a new stream instance using the Twit API with the provided search keyword and then start listening for events on the stream. Whenever there is a new tweet on the stream, a Tweet event would be fired.

And inside this event, we trigger our socket to emit the new tweet to the client. And then on the client, we will be listening for the tweet event and update the UI. Finally Material Design is used to enhance the UX.

Simple and easy!

Angular Material

As mentioned above, Angular Material is the counterpart of Polymer’s Paper elements. You can take a look at the Angular Material components here. There are fewer but adequate set of components that you can directly use to build a web page easily.

Angular Material provides a grid system that is built on top of Flex box. You can find more info on the grid system here.

In our app, we will leverage the grid system to position the elements on the page. And we will be using the Tabs component to build the search results interface, Card component to show a tweet and a Button component to show the Tweet link.

Setup the server

Now that we have a basic understanding on what we going to achieve, let us get started.

We will start off by building our server and then the client. Create a new folder named ngTwitterApp. We will init a new node project. Run

npm init

And fill it up as applicable. Next, we will install the required dependencies. Run

npm install --save express socket.io twit

This will take a couple of minutes to complete. The final package.json would look like

Create a new file at the root of the ngTwitterApp  folder and name it server.js. We will configure Express and Socket here. Update it as below

Things to notice

Line 1-7 : Require dependencies

Line 9 : Configure the Twitter client. You can get your Twitter client keys by creating a new app or you can follow this to help you setup.

Line 16 : Set the public folder as a static folder, which we will create in a moment.

Line 18 : Default route to dispatch index.html, which we will create in a moment.

Line 23 : We set up Sockets to start listening for a new connection.

Line 24 : Save the connected client to track and manage.

Line 25 : When a new query event is received, we will check if the current user has already subscribed to this event. If not, we will create a new stream on line 30.

Line 34 : When the stream emits a tweet event, socket will emit the same to its client

Line  39 : Fired when the Limit on the stream has reached.

Line 43 : Fired when there are any warnings on the stream

Line 48 : This is triggered when the Twit client tries to reconnect, if connection to Twitter fails.

PS : This happens when you try to run more than 2 streams parallely. 

Line 52 : This is triggered when the stream is disconnected.

Line 56 : We save the current query against the user’s socket id for managing the queries.

Line 60 : This is the remove event on the socket, when triggered will stop streaming the search results and remove it from the searches  object.

Line 66 : When a user disconnects, we don’t want any streams running in the background, so we will stop all the streams and delete the user instance from searches  object.

Line 77 : We start to listen on port 3000.

This is our complete server! Simple right!

Setup the client

Create a new folder named public at the root of ngTwitterApp folder. We will maintain all the client related files here.

We will be using bower to manage our client side dependencies. If you have not already installed bower globally, you can do so by running

npm install -g bower

We will init a new bower config file to track our client dependencies. Run

bower init

We will install 2 dependencies. One the Angular Material project and another the Angular Socket provider. Run

bower install --save angular-material angular-socket-io

PS : If prompted to pick between angular#~1.2.6 and angular#1.3.0, pick angular#1.3.0.

The final bower.json would look like

Now that dependencies are done, we will setup the index.html. Create a new file named index.html at the root of the ngTwitterApp folder. This will be served by Express when we request the home page.

Update index.html as below

Quite of lot of things are going on.

Line 6,7,8 : Refer required CSS. And for this app, I am using the default theme.

Line 80 : Refer Socket.io

Line 82 – 86 : Refer Angular Material libs

Line 87 : Refer Angular socket provider

Line 88 : Init our Angular app

Line 11 : We init the Angular module

Line 14 : We init the Angular controller

Line 16 – 23 : Consist of the Form that will Add a new search/tab

Line 25 : We use the md-tabs components to show all the tabs from the tabs variable in scope.

Line 36 : We use the md-card component to display each tweet

Now, we will work on the Angular code. Create a new folder named js inside public  folder. And then create a new file named app.js inside it.

Update app.js as below

Things to notice

Line 1 : Create new Angular Module and inject the dependencies

Line 2 : Create a new instance of the socketFactory and expose it as a Factory

Line 6 : Create an App controller

Line 12 : Logic for adding a new Tab

Line 31: Logic to remove a Tab

Line 44 : Logic for Add New Search button

Line 56 : Whenever a tab is selected, we set the current selected tab index.

Line 68 : This method is fired when we add a new search. We emit an event to create a new Stream using Twit. And then start listening to it for the tweet event.

Line 73 : We show only the latest 10 tweets from the stream at any point.

And finally, we will add a few styles to clean the UI. Create a new folder named css inside the public folder and create a new file named app.css. Update it as below

You can download the link image from here.

Save all of the files and run the app from inside the ngTwitterApp folder

node server.js

And navigate to  http://localhost:3000 and you should see the freshly baked Angular Material app powered by Twitter streams!

Screen Shot 2014-11-08 at 2.44.12 pm

Hope this post gave you an idea on how to work with Angular Material, Twitter Streams and Sockets.


Thanks for reading! Do comment.
@arvindr21