Ionic Framework: JumpStart

This lecture will get you started with setting up our Ionic Project on your computer.

In this lecture. we will set up our states and the navigation URLs. This will allow us to create a multi-page Ionic App. We will navigate among these states as and when required.

We will start by creating the template for our login page. We will create login [dot] html page and start coding it using HTML and CSS.

We will then create the template for our chat page. We will create chat [dot] html page and start coding it using HTML and CSS along with Ionic tags and classes.

We will learn how we can use State Parameters to send the user's nickname from login page to the chat page.

In this lecture, we will set up our cloud9 application and start by creating a new Node.js workspace.

In this video, we will write the basic Node.js server code and test it.

In this lecture, we will learn the basics of Socket.io. We will understand how socket.io clients and server interact.

In this video, we will install dependencies and configure our Ionic app to use Socket.io.

In this video, we will make sure that our Ionic App is able to connect to our cloud9 server with the help of Socket.io.

In this video, we will send messages from our Ionic App to server and vice-versa and make sure that this two-way communication takes place.

In this lecture, we will learn the basic differences between socket.emit() and io.emit(). We will also understand when to use socket.emit() and when to use io.emit().

In this video, we will send simple log messages from client to server. The server will send those messages to all other clients or all other Ionic Apps connected to the server. These messages will be sent automatically by the Ionic app whenever a new user joins the chat.

In this lecture, we will send real chat messages which will be received by all the other users of the Chat App.

In this video, we will learn about Socket ID and we will also use Socket IDs to style our messages differently on sender's and receiver's devices.

We will add some CSS to our app to make it look good and stylist, just like a real chat application.

In this video, we will fix some issues with our Log Messages as well add the famous chat bubbles to our Chat App. Our sent and received messages will then be shown on chat bubbles.

So far, we can send messages but we have click the send button. In this video, we will add the functionality so that we can send char messages whenever a user types and presses Enter key.

We will make our application more pleasing to the eye by adding colors. We will make each use show up in a particular random color based on some algorithm.

In this video, we will use an ionic service to scroll up the content automatically whenever a new message arrives so that the latest messages are visible at the bottom.

In this fun video, we will learn how to add the emoticon support to our application B-)

The emoticons are available to download along with the video.

In this video, we will use Cordova plugins to play sounds whenever we send or receive messages.

Since sounds cannot be tested inside the browser, we will deploy our app on and Android Emulator and test the functionality so far.

In this video, we will add a feature so that all the users know about the user who is typing a message at a particular moment. This is a very common functionality throughout chat apps, like Facebook Messenger and Whatsapp.

In this video, we will customize our app with CSS.

We will start by simply adding a button that says, "Login with Facebook" using Ionic and CSS classes.

We will go to Facebook Developers console at https://developers.facebook.com and create a new app there. We will get the App ID which we will use in the next video.

In this video, you will learn about Facebook Graph API and the Graph AP Explorer. You will also learn how to use Cordova plugins to get access token from Facebook. We will use CordovaOAuth for this.

We will use the Access Token received in the last video to get more information about the user. We will use $http service that Angular provides for this task.

In this lecture, we will pass on the data that we got back from Facebook to the Chat Controller and then display the image and username at the correct place.

In this video, we learn how to use PNG files to generate Icons and Splash Screen for our Ionic Application just by using one command.

In this long and final video, we will deploy our server code on Windows Azure Cloud Platform. We will also make some changes to our Ionic App so that it no longer connects to Cloud9 but to Azure Cloud Web App that we will deploy all our server code on using Git.

A step by step guide to help you deploy your apps on OpenShift for free.