Ionic Framework: JumpStart
4.6 (41 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.
738 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ionic Framework: JumpStart to your Wishlist.

Add to Wishlist

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.6 (41 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.
738 students enrolled
Created by Samarth Agarwal
Last updated 1/2016
English
Current price: $10 Original price: $50 Discount: 80% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Basics of Ionic Framework, AngularJS, HTML, CSS and JS.
  • A Text Editor, like Sublime Text
  • An internet connection.
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.

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 38 Lectures Collapse All 38 Lectures 03:37:28
+
Course Introduction
5 Lectures 05:20

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.

Preview 01:17

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

Preview 01:13


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

Basic Tools and Services
01:52

Please go through this document before proceeding.

Course and Project Source Information
1 page
+
Getting Started
5 Lectures 25:26

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

Preview 03:30

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.

Preview 05:08

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.

Creating the Login page
04:43

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.

Creating the Chat page
07:58

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

States and State Parameters
04:07
+
Getting started with the Server
2 Lectures 09:21

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

C9 and NodeJs
04:40

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

Writing the Basic Server Code
04:41
+
Getting Started with Socket.io
7 Lectures 39:30

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

Basic of Socket.io
03:56

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

Configuring Ionic to use Socket.io
07:46

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.

Making First Communication over Socket.io
06:00

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.

Sending and Receiving Messages
05:57

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

socket.emit() versus io.emit()
03:41

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.

Sending simple log messages
08:04

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

Sending First Chat Message
04:06
+
Improving UI and UX
4 Lectures 30:31

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.

Conditional Styling with Socket.Id
10:17

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

Styling Log Messages
08:57

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.

Fixing Log Messages and Chat Bubbles
05:46

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.

Sending Messages on Enter Key Press
05:31
+
Adding the fun stuff
7 Lectures 58:59

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.

Playing with Colors
08:01

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.

Auto scroll the ion-content
07:48

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.

Adding Support for Emoticons :)
09:13

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

Adding Sounds
10:14

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

Testing Sounds on Emulator
03:12

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.

"User is Typing..." Message
10:16

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

Customizations using CSS
10:15
+
Login with Facebook
5 Lectures 28:46

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

Adding a Login with Facebook button
04:52

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.

Creating a Facebook App
06:22

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.

Facebook Graph API and Access Token
05:14

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.

Getting User Data using the Access Token
05:37

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.

Passing Data to Chat Controller and Displaying
06:41
+
Finalizing the Application
1 Lecture 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.

Ionic Resources: Icon and Splash Screen
04:04
+
Deploying to Azure Cloud Platform
1 Lecture 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.

Deploying to Azure Cloud Platform from C9
10:31
+
Deployment to OpenShift
1 Lecture 00:00

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

Deployment to OpenShift
4 pages
About the Instructor
Samarth Agarwal
4.5 Average rating
370 Reviews
2,865 Students
6 Courses
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.