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.

Created bySamarth Agarwal

Last updated 8/2015

English

What you'll 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

Course content

6 sections • 37 lectures • 2h 24m total length

Introduction0:49
A brief introduction of the course.
What is IONIC?2:02
This video explains what Ionic is and how we can leverage its functionality to develop cross-platform hybrid mobile apps.
What is Cordova?1:07
This video explains the need to use Cordova, its functions and role in the course.
Course Outline0:46
In this lecture, students will learn about the coming sections in the course and what they learn in each section.

Installing Node.js and npm1:49
This video will help students to understand Node.js and install it on their machines.
Installing Ionic and Cordova1:07
This video will teach students how to install Ionic and cordova which the are the soul of this course.
Creating and Running Ionic Project Using Ionic CLI3:15
We will create an new Ionic Project. A "Hello World!" kind of project in Ionic and will run it.
Creating and Running on Cloud94:24
Cloud9 is an awesome cloud development IDE. This video will help students understand how they can use C9 in their projects.

Creating Projects Using Ionic Templates3:27
We will see what Ionic Templates are and how we can use them to get started with our apps.
Understand Ionic Files and Folder Structure2:58
Students will learn about the files and folder structure of a basic Ionic Project.
Understanding Ion Header Bar2:46
Student will learn about the ion-header-bar and styling it.
Adding Search Bar and Icons2:29
Student will learn about Subheaders and create a nice search bar in the subheader.
Buttons with Icons3:56
Student will learn about Sub-header and style it.
Creating Lists with Images5:01
Create amazing looking lists with Ionic CSS Classes

Introducing Angular.js in Ionic4:24
In this video, we will introduce Angular.js in our Ionic Project.
Getting data from an External File4:20
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.
Dynamic Filtering and Ordering4:38
In this video, we will see how we can use Angular.js directives to filter and sort data in an Ionic List.
Reordering List Items7:14
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.
Deleting Items from the List4:24
We will make use of features that Ionic offers to add delete buttons to our list.
Pull Down to Refresh in Ionic3:26

Introduction to Parse.com6:27
In this video, you'll be introduced to Parse, a platform as a service, and we will save and retrieve data from Parse.
Displaying data received from Parse3:33
In this video we will proceed further by displaying the data as received from Parse, in our list.
Creating a Popup6:36
In this video, we will implement a ionic popup to get data from the user and then update it on Parse.
Saving Data to Parse4:19
In this video we will save the data back to Parse.
Cleaning and Organizing the code2:57
We will clean up the code and move the redundant code in a method.
Deletion with Parse5:00
In this video we will learn how to delete data using our Ionic Application from the Parse classes.
Showing Edit Popup with Content6:40
In this video, we will learn to create a popup which has text fields pre-populated with some information, ready to be edited.
Updating Data from Popup to Parse5:08
Updating data from Popup into the Parse Class.
Using ionicLoading and Spinner3:22
We will implement Ionic JavaScript components like $ionicLoading and Spinners.
Creating Splash Screens and Icons2:34
In this video, we will learn how to create Splash Screens and Icons for our application from PSD and PNG Files.
Deploying Apps to Devices and Next Steps6:06
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.

Introduction to the Module0:41
This is an introduction to this module. We will see what we are going to learn in this module.
Adding Call button and using $window4:23
In this video, we will start by implementing buttons to make calls from within the application. We will see a new angular service $window.
Testing calling on Android device2:47
In this video, we will test the calling functionality we just built in our app, on a real Android device.
Send email using Ionic and Cordova3:54
We will start by creating more buttons and add the email functionality almost the same way we built the calling functionality.
Using ngCordova and $cordovaSms14:21
We will be introduced to ngCordova and we will learn how to use ngCordova in Ionic Projects. We will then install $cordovaSms plugin.
Testing SMS functionality on device1:19
Finally we will test the SMS functionality on the device.

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 this course is for:

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.

Create Android and iOS App using HTML, CSS and JS

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 5min

Setting up everything4 lectures • 11min

Ionic and Its Components6 lectures • 21min

Angular.js and ionic6 lectures • 28min

Introducing Parse in Ionic Project11 lectures • 53min

Using Cordova and ngCordova6 lectures • 27min

Requirements

Description

Who this course is for: