Create Android and iOS App using HTML, CSS and JS
4.3 (31 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.
457 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create Android and iOS App using HTML, CSS and JS to your Wishlist.

Add to Wishlist

Create Android and iOS App using HTML, CSS and JS

Start developing apps for Android & iOS just by writing code using HTML, CSS and JS with the Ionic Framework.
4.3 (31 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.
457 students enrolled
Created by Samarth Agarwal
Last updated 8/2015
English
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Set up development environment for Ionic Framework
  • Download and Install Ionic Framework and Prerequisites
  • Understand Basic Ionic Templates
  • Connecting Ionic Apps to Parse.com
  • Interacting with Parse.com
  • Test Apps in the Browser
  • Test Apps on the Real Devices
View Curriculum
Requirements
  • Basic knowledge of HTML5, CSS and JS.
  • Very Basic knowledge of Angular.js is an additional advantage.
Description

This course is an essential for Web Developers, Professionals and Students who wish to develop Mobile Apps using the web development skills they have (HTML, CSS and JS).

At the end of this course, you will be capable enough to develop mobile apps for Android and iOS using the web development skills you already have. We will start by using basic Ionic Components. While the course, you will learn how to use Angular [dot] js to build dynamic apps that update in real time. The course will also introduce you to Parse, an amazing Platform as a Service which allows users to store their app data on the cloud and lets the developer completely focus on their app instead of worrying about the server. We will learn how to store data on Parse and then manipulate it using our Ionic Application.

Finally, we will learn to deploy Ionic applications on real Android Devices.

The aim of this course is not to cover as much Ionic components as possible but to create an Application with as minimum components as we can so that user can easily use the application. We will make a dynamic app that updates its data in real time using Parse.

We will create a Friends List Android App that contains the list of friends which can be extended by adding new friends to the list, deleting friends or updating data for existing friends. This idea can be extended to build a cloud based contacts manager app. This app will your thought process rolling and you will start thinking in terms of Ionic Framework.

And once you have started, sky is the limit.

Who is the target audience?
  • Students and Professionals who have Web Development skills and want to develop mobile Apps as well.
  • Developers who wish to expand their skill set.
  • Students who want to start in Mobile App Development.
Compare to Other Android Development Courses
Curriculum For This Course
37 Lectures
02:24:29
+
Introduction
4 Lectures 04:44

A brief introduction of the course.

Preview 00:49

This video explains what Ionic is and how we can leverage its functionality to develop cross-platform hybrid mobile apps.

What is IONIC?
02:02

This video explains the need to use Cordova, its functions and role in the course.

What is Cordova?
01:07

In this lecture, students will learn about the coming sections in the course and what they learn in each section.

Course Outline
00:46
+
Setting up everything
4 Lectures 10:35

This video will help students to understand Node.js and install it on their machines.

Installing Node.js and npm
01:49

This video will teach students how to install Ionic and cordova which the are the soul of this course.

Installing Ionic and Cordova
01:07

We will create an new Ionic Project. A "Hello World!" kind of project in Ionic and will run it.

Creating and Running Ionic Project Using Ionic CLI
03:15

Cloud9 is an awesome cloud development IDE. This video will help students understand how they can use C9 in their projects.

Creating and Running on Cloud9
04:24
+
Ionic and Its Components
6 Lectures 20:37

We will see what Ionic Templates are and how we can use them to get started with our apps.

Creating Projects Using Ionic Templates
03:27

Students will learn about the files and folder structure of a basic Ionic Project.

Understand Ionic Files and Folder Structure
02:58

Student will learn about the ion-header-bar and styling it.

Understanding Ion Header Bar
02:46

Student will learn about Subheaders and create a nice search bar in the subheader.

Adding Search Bar and Icons
02:29

Student will learn about Sub-header and style it.

Buttons with Icons
03:56

Create amazing looking lists with Ionic CSS Classes

Creating Lists with Images
05:01
+
Angular.js and ionic
6 Lectures 28:26

In this video, we will introduce Angular.js in our Ionic Project.

Introducing Angular.js in Ionic
04:24

In this video, we will make our app dynamic and get data from a JSON file. And then we will display that data in our frontend.

Getting data from an External File
04:20

In this video, we will see how we can use Angular.js directives to filter and sort data in an Ionic List.

Dynamic Filtering and Ordering
04:38

We will make our lists reorderable. The users will be able to touch and drag any item in the list and change their position in the list.

Reordering List Items
07:14

We will make use of features that Ionic offers to add delete buttons to our list.

Deleting Items from the List
04:24

Pull Down to Refresh in Ionic
03:26
+
Introducing Parse in Ionic Project
11 Lectures 52:42

In this video, you'll be introduced to Parse, a platform as a service, and we will save and retrieve data from Parse.

Introduction to Parse.com
06:27

In this video we will proceed further by displaying the data as received from Parse, in our list.

Displaying data received from Parse
03:33

In this video, we will implement a ionic popup to get data from the user and then update it on Parse.

Creating a Popup
06:36

In this video we will save the data back to Parse.

Saving Data to Parse
04:19

We will clean up the code and move the redundant code in a method.

Cleaning and Organizing the code
02:57

In this video we will learn how to delete data using our Ionic Application from the Parse classes.

Deletion with Parse
05:00

In this video, we will learn to create a popup which has text fields pre-populated with some information, ready to be edited.

Showing Edit Popup with Content
06:40

Updating data from Popup into the Parse Class.
Updating Data from Popup to Parse
05:08

We will implement Ionic JavaScript components like $ionicLoading and Spinners.

Using ionicLoading and Spinner
03:22

In this video, we will learn how to create Splash Screens and Icons for our application from PSD and PNG Files.

Creating Splash Screens and Icons
02:34

In this final video, we will deploy our application to real devices. We will also learn where to go for more information and learning about ionic.

Deploying Apps to Devices and Next Steps
06:06
+
Using Cordova and ngCordova
6 Lectures 27:25

This is an introduction to this module. We will see what we are going to learn in this module.

Introduction to the Module
00:41

In this video, we will start by implementing buttons to make calls from within the application. We will see a new angular service $window.

Adding Call button and using $window
04:23

In this video, we will test the calling functionality we just built in our app, on a real Android device.

Testing calling on Android device
02:47

We will start by creating more buttons and add the email functionality almost the same way we built the calling functionality.

Send email using Ionic and Cordova
03:54

We will be introduced to ngCordova and we will learn how to use ngCordova in Ionic Projects. We will then install $cordovaSms plugin.

Preview 14:21

Finally we will test the SMS functionality on the device.

Testing SMS functionality on device
01:19
About the Instructor
Samarth Agarwal
4.4 Average rating
615 Reviews
5,512 Students
7 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.