Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB

[ MUSIC ] LENNON: Hi, there. I’m Joe Lennon, and in this video, I’m
going to talk about the app I created for the IBM developerWorks article,
Building a real-time polls application with Node.js, AngularJS and MongoDB. Be sure to check out the article when
you’ve finished watching the video. I regularly lecture to students
in my local university. Often I will ask the students a
question to get instant feedback on their knowledge of a particular topic. Traditionally, I’d ask a simple yes or no
question and get a show of hands in response. In a large class, however, this isn’t
exactly accurate, and it doesn’t allow me to ask questions with more
than two possible answers. I recently to myself, wouldn’t it be great if
I had a simple app where I could create a poll and [get them into the class]
to allow them to vote? I could then show the results
updating in real time on the big screen at the
top of the lecture hall. So, that’s why I decided to
create this particular app. As a big fan of JavaScript, I really liked the
idea of using it at every layer of the app. As a result, I decided to build
the app using the MEAN stack, MongoDB Express, AngularJS and Node. Choosing this particular technology
stack simplified things significantly, and makes it really easy to deploy the
app to a Platform as a Service solution such as IBM’s Blue Mix or Cloud Foundry. Next, I’ll give you a quick demo of the
app in action, and then I’ll talk you through the code before leaving
you to get on with the tutorial. This is the main view for the polls app. From here, I can see all of the
available polls and I can filter that it’s done using the search field. Let’s go ahead now and create a new poll. To do this, I simply enter a
question and some possible responses and press the “create poll” button. Once the poll has been created, it
then appears in the main list view. To vote on a poll, I simply
click on it in the list and then pick the option
that I wish to vote for. The field then displays the results,
which will update in real time as other users vote on this poll. Now that you’ve seen the app in action,
let’s jump in and take a look at the code. At the back end, the applications
uses the Express framework. This allows you to easily define
URLs and connect these to functions. For example, the root URL will call the
index function in the routes module. If you look at this function,
it simply renders a template. Because the app uses AngularJS, this template
is very straightforward and just loads in the client side resources
that are needed for the app. The other routes in the Express
app use the Mongoose npm module to query and update a MongoDB database. I use a simple schema to define how the
data is structured and then use Express to return this data as JSON where required. On the client side, the app uses
AngularJS, defining client-side routes that map to partial view templates. For example, in the view templates. For example, on the poll list view,
it renders the list.html template. This flow uses Angular directives
that iterate over a collection, filter a collection and perform
conditional logic. These directives are bound to data that
is set up in an Angular controller. For the poll list, the controller
is very straightforward. It simply binds the data to
the result of poll.query. At this point, you’re probably
wondering how Angular communicates with the server-side to query for the polls. In the app.js file, the poll
services module is included. This module uses the Angular resource library to
define how it should interact with the server. This works great with RESTful
endpoints out of the box. Alternatively, you can define custom functions
like the query function I’ve used here. Finally, let’s take a peek at
how the app enables a client side to receive real-time updates from the server. This is achieved using,
a library that sends messages between the node server-side applications
and the client side using web sockets. Here [in] Express app, we include the module and
when a connection is made we call a function. This function listens for a vote event, and when it receives this it broadcasts
an event to all listening clients. On the client side, we define a socket
factory as part of the app’s Angular services, which is then used in the controller to
listen for messages from the server and also to send a message to the
server when the user votes. The full source code for the app
is covered in the main article, Building a real-time polls application
with Node.js, AngularJS and MongoDB, which is published on IBM developerWorks. You can download or fork the
app source code on JazzHub, and you can also find a link
to this in the article. Thanks for watching.

15 thoughts on “Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB

  1. What a pain in the arse. Why don't you just use github like a conventional person. jazzhub is so fiddly and won't let me clone.

  2. @Juan Gallardo, this video summarise a good tutorial, follow this link:

  3. Learn how to use EJS/Jade/Handlebars, build applications backed by MongoDB,

Leave a Reply

Your email address will not be published. Required fields are marked *