Ionic Framework: JumpStart

Create a Real-time Chat Application for Android and iOS using HTML, CSS and JS and the server backend as well, on Cloud.
4.1 (36 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
705 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 38
  • Length 3.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

Course Description

Ionic Framework: Jumpstart is an intermediate level course for students, web developers, professionals who have basic to moderate skills in web technologies like HTML, CSS and Javascript and want to create applications for mobile platforms such as Android and iOS. Ionic Framework is easy and always evolving. It is a young technology and growing every moment. In this course, you will learn to create a mobile app that will allow users to chat with each other in real-time.

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.

What are the requirements?

  • Basics of Ionic Framework, AngularJS, HTML, CSS and JS.
  • A Text Editor, like Sublime Text
  • An internet connection.

What am I going to get from this course?

  • Create and deploy real-time mobile applications using HTML, CSS and JS.
  • Write Basic Server Code using Node.js.
  • Deploy code on Windows Azure Cloud.
  • Use ngCordova and Ionic Services
  • Use Socket.io for real-time communication.
  • Learn about Facebook Login in Ionic Apps
  • Debug your Web Apps using Chrome Developer Tools

What is the target audience?

  • Students who wish to develop apps for Android and iOS.
  • Web Developers and Designers who are proficient in web technologies.
  • Professionals who wish to expand their portfolio but can't learn JAVA or Swift.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Course Introduction
01:17

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.

01:13

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

Course Contents
Preview
00:58
01:52

This lecture describes and introduces you to the content of the course.

1 page

Please go through this document before proceeding.

Section 2: Getting Started
03:30

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

05:08

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.

04:43

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.

07:58

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.

04:07

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

Section 3: Getting started with the Server
04:40

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

04:41

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

Section 4: Getting Started with Socket.io
03:56

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

07:46

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

06:00

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.

05:57

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.

03:41

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().

08:04

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.

04:06

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

Section 5: Improving UI and UX
10:17

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.

08:57

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

05:46

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.

05:31

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.

Section 6: Adding the fun stuff
08:01

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.

07:48

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.

09:13

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.

10:14

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

03:12

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

10:16

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.

10:15

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

Section 7: Login with Facebook
04:52

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

06:22

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.

05:14

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.

05:37

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.

06:41

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.

Section 8: Finalizing the Application
04:04

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.

Section 9: Deploying to Azure Cloud Platform
10:31

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.

Section 10: Deployment to OpenShift
4 pages

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Samarth Agarwal, Application/Web Developer, Instructor, Tech Enthusiast

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.

Ready to start learning?
Take This Course