To create such an app, all you need is to have basic skills in HTML, CSS and AngularJS. You do not need to learn JAVA or Objective C or Swift. you can create a fully functional, advanced and beautiful Chat Application using just the Web Skills.
This course will also introduce you to the Facebook Graph API and you will learn how to use Facebook login in your Ionic and Cordova Apps.
Later in the course we will learn to deploy our server code, which we will write on Cloud9, as cloud based IDE, on Windows Azure Cloud Platform.
The course contains video content of around 3 hours and 30 minutes. And during this time, you will learn Ionic and a lot of AngularJS. You will learn how to use Angular services and controllers to implement logic in the app. You will also learn how to create multi-page applications in Ionic and navigate between those pages.
And the best part, your app will work on both Android and iOS devices.
Welcome to Ionic Framework: Jump-start course. This is an intermediate level course on Ionic Framework. This course will walk you through the process of developing and deploying a Chat Application that will work on both Android and iOS devices. We will also write the minimal server code required for our application backend. All this while, we will learn Ionic, AngularJS and NodeJS. All our server code will be developed on Cloud9 and then we will finally deploy it on Windows Azure Cloud.
This course requires that you have basic knowledge of Ionic along with HTML, CSS and JS. Knowledge of basics of AngularJS is also required. Please take the beginner level course on Ionic Framework before taking this course if you are new to Ionic.
Beginner Level Course: Create Android and iOS Apps with HTML, CSS and JS
This lecture describes and introduces you to the content of the course.
Please go through this document before proceeding.
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.
I have been working as a freelance application and web developer for last 3 years. I am passionate about technology and learning it. I love learning new technologies and teaching them keeps me satisfied. I love to share knowledge. Let me know if you have some knowledge that you want to share. I like to create new tools and applications that ease the tasks of a common man.