Ionic 1: From Web to Mobile
4.4 (786 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.
5,570 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ionic 1: From Web to Mobile to your Wishlist.

Add to Wishlist

Ionic 1: From Web to Mobile

Future Proof Yourself. Turn your existing web development knowledge into mobile development super powers with Ionic
4.4 (786 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.
5,570 students enrolled
Created by Asim Hussain
Last updated 2/2017
English
Current price: $10 Original price: $180 Discount: 94% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 9 Articles
  • 25 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand what Ionic is and how it's related to Cordova and AngularJS
  • Setup their computer to build Ionic, iOS and Android applications
  • Have enough AngularJS knowledge to be able to build Ionic applications
  • Build hybrid mobile applications using Ionic Framework
  • Implement Push notifications, automatic app updates and analytics with the Ionic Platform tools.
  • Release their application to the Apple AppStore or Google Play Store.
View Curriculum
Requirements
  • A windows or mac machine
  • A text editor or an IDE like WebStorm
  • A basic understanding of command lines and the terminal
Description

IMPORTANT: This course is for Ionic v1 ONLY. Ionic v2 is currently unreleased in BETA

This course will NOT be updated to Ionic v2 once it's released, v1 and v2 are too different, another course will be created instead.

UPDATE: 8/16

  • Support for firebase v3 added

UPDATE: 6/16 

  • Support for open source parse server. 
  • Resources added in again to the Angular Review section. 
  • Android Marshmallow Update
  • Various other changes including updates to the Windows setup instructions

UPDATE 1/16

  • Updates and fixes to the TV Chat App, Mealtracker App & TED RSS Reader App.
  • Workaround for the iOS9 Breaking Changes
  • New Lectures on Chrome Developer Tools and IDE

-----------------------------------------------------------------------------------------------------------------------

Gartner predict that by 2016 50% of all mobile applications will be hybrid apps built using technology like Ionic.

Ionic is a powerful HTML5 SDK that helps you build native-feeling iOS and Android apps using web technologies like HTML, CSS, and Javascript. It's based on Cordova and AngularJS.

This course is for existing web developers, your level of HTML, CSS and JS doesn't matter but you must have some since we won't be covering those topics on this course.

You DO NOT need to know AngularJS.

We will cover the essential AngularJS topics needed to build Ionic applications in the AngularJS Review section (If you already know AngularJS feel free to skip it)

Through a series of 7 real-world examples you will learn the skills needed to build fully functional, cross platform iOS and Android mobile applications in Ionic.

The course will cover:

  • Implement both Tabbed and Side Menu navigation.
  • Interact with the phones Camera, GPS & play sounds.
  • Embed Google Maps with markers, popup info windows.
  • Login with Facebook and add real-time chat functionality with Firebase.
  • Implement list controls, with re-order, delete, pull to refresh and infinite scroll functionality.

The course will also cover the feature of the Ionic Platform such as

  • Ionic Push - Send cross platform push notifications with just a few lines of code.
  • Ionic Deploy - Update your apps automatically and silently.
  • Ionic Analytics - Easily add deep analytics to your application.

With the rapid expansion of Javascript into nearly every area of application development. Web Developers are now the most versatile developers in the market, enjoying long-term job stability, growth, and diversity of work.

Thanks to Ionic, you now can design, build, and deploy robust mobile apps faster than you could with native technologies, all while incurring little to no app performance penalties and sticking to the web technologies you already love working with, namely css, html and javascript.

Imagine if you were the CTO of a small tech company, who would you rather hire?

A versatile web/mobile superstack developer.

  • In the morning they can fix a bug with the front end of the website.
  • In the afternoon they get their hands dirty adding a new feature to the node server side application.
  • And then in the evening they work on the companies new mobile application which is launching on iOS and Android in 2 weeks time.

OR

A unicorn native app developer, who can only work on iOS or Android.

Do I even need to say it?

With Ionic the dream of using web technology to build mobile apps is finally here. It isn't a second-class option, it's the future of mobile app development.

Who is the target audience?
  • Web developers who want to break our into the mobile development market
  • Freelancers who are starting to see that most of their clients are now looking for mobile apps
  • Freelancers who want to up sell clients to have both a web and a mobile application.
  • This course is meant for Web Developers who want to start building mobile applications, they don't need to know AngularJS
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 116 Lectures Collapse All 116 Lectures 08:24:43
+
Introduction
8 Lectures 35:16

A quick introduction to this course in ionic, who am I, what will you learn on this course and who this course is for.

Preview 03:04

A summary of hybrid application development, an explanation of cordova vs phonegap and where does Ionic and the Ionic framework fit into all of this.

Preview 02:57

A deeper dive into Ionic, what it is and why you should be interested in learning it.

Preview 04:05

A summary of each section and how this course is structured.

Preview 02:56

An overview of the ionic playground (play.ionic.io) which is a tool we'll be using throughout this course to help explain ionic concepts.

Preview 02:01

How to get help regarding issues with Ionic, both on this course and also for your own Ionic projects.

Preview 2 pages

OPTIONAL: How to use develop with the Chrome browser
13:20

OPTIONAL: What IDE am I using in this course?
06:53
+
Setup
5 Lectures 02:59
Introduction
02:47

Installing Dependancies
5 pages

Setup for iOS development
5 pages

Setup for Android development on Mac
6 pages

Setup for Android development on Windows
00:12
+
Ionic Overview
11 Lectures 27:00
Introduction
02:16

Creating projects using the Ionic CLI
3 pages


How to find completed code for sample apps
2 pages

Important! iOS9 Breaking Changes
1 page

iOS: Creating developer certificates and setting up XCode
12:53


Debug your iOS apps with the Safari Developer Tools
1 page

Setting up the Genymotion Android Emulator
8 pages

Running Ionic on Android Devices
00:50

Debug your android apps with Chrome
1 page
+
AngularJS Review
15 Lectures 55:22
Introduction
03:00

Source code can be found at: http://play.ionic.io/app/4c971fed4c67

Data Binding
02:43

Modules & Controllers
02:46

Corrections: Debugging Angular Applications
1 page

Debugging Angular Applications
03:13

Source code: http://play.ionic.io/app/9f9919d00359

Scope inheritance and the dot notation
05:39

Source code: http://play.ionic.io/app/279d6ebab714

Watches
01:46

Source code: http://play.ionic.io/app/2cac895552bf

ng-click & ng-submit
02:59

Source code: http://play.ionic.io/app/214ccac63d56

ng-class
02:22

Source code: http://play.ionic.io/app/e49c46c8ee7b

ng-style
01:21

Source code: http://play.ionic.io/app/9fd77cb75b5e

ng-show, ng-hide, ng-if
02:51

Source code: http://play.ionic.io/app/245cb314b470

ng-repeat & filters
04:54

Source code: http://play.ionic.io/app/f52ca5b880df

Dependancy Injection & Services
05:48

The $http service and promises with the $q service
12:12

Source code: http://play.ionic.io/app/48640b408d31

Digest, Apply & handling callbacks from outside Angular
03:48
+
The 8 Ball App
8 Lectures 19:59
Corrections - 8Ball
1 page

What we are going to build and what you will learn whilst building it.

Introduction
03:48

Setup instructions
1 page

Building the application
05:57

Adding animation effects
04:05

Previewing your application on the IonicView App
04:03

Ionic View App Limitations
1 page

Quick Question
02:06
+
The Soundboard App
7 Lectures 23:51
Corrections - Soundboard
1 page

Introduction
02:14

Setup instructions
1 page

Styling ionic apps using the default colors
02:26

Building our ionic list based application
06:07

Using the cordova media plugin
06:13

Ionic list re-order and delete components
06:51
+
The CaffeineHit List App
12 Lectures 37:56
Corrections - Caffeinehit-List
1 page

API Playground
00:17

Introduction
02:41

Setup instructions
1 page

Breaking out our app into multiple javascript files
01:56

Understanding the starter project code
02:22

Implementing the YelpService
06:20

Implementing pull to refresh with the ion-refresher component
03:17

Implementing infinite scroll with the ion-infinite-scroll component
05:24

Implementing swipe reveal buttons with the ion-option-button component
04:01

Using the cordova geolocation plugin to get the users lat and lon
08:09

Using the navigator plugin to show directions on the apple or google maps app
03:29
+
The CaffeineHit Map App
7 Lectures 23:27
Corrections - Caffeinehit-Map
1 page

Introduction
01:45

Setup instructions
2 pages

Understanding the starter project code
02:32

Using SASS to theme your Ionic application
08:23

Implementing maps and map markers
05:38

Implementing popup info windows on maps
05:09
+
The TED RSS App
11 Lectures 39:20
Corrections - TED RSS App
3 pages

Introduction
02:21

Setup instructions
1 page

Understanding the starter project code
09:27

Introduction to uiRouter and implementing the apps routes
06:46

Show a loading spinner with the ionicLoading component
02:50

Navigating between routes in Ionic and the back button.
04:56

Implementing the detail page and $stateParams
02:35

Changing the title in the header bar
03:45

Using the InAppBrowser plugin to open up links in the default browser app
03:29

Using the SocialSharing plugin to share links to social networks
03:11
+
The Mealtracker App
13 Lectures 01:24:13
Introduction
04:04

Setup instructions
2 pages

Understanding the starter project code
05:53

CORRECTION: ng-messages-include and angular1.4
1 page

Forms and form validation in Ionic
19:55

Setting up Parse
00:29

Implementing authentication via Parse
10:27

Understanding and implementing the tabbed navigation component in Ionic
11:27

Interacting with the ion-header bar by using the ion-nav-buttons directive
07:37

Using the Camera plugin to take a photo
05:16

Creating objects in the Parse database
09:23

Querying objects from the Parse database
05:23

Implementing the settings tab
04:19
4 More Sections
About the Instructor
Asim Hussain
4.7 Average rating
3,404 Reviews
19,431 Students
5 Courses
Speaker • Trainer • Author • Developer

Over 15 years experience working for clients such as the European Space Agency and Google, regular conference speaker and published author.

Wrote my first program in 1988, my first website in 1996, earned a 1st Class Degree in Computer Science in 2000 and now 15 years later I own a digital agency in London called Bubblegum specialising in building complex web & mobile applications in AngularJS/Node/Django and IonicFramework.

As well as building applications for awesome clients word-wide, through Udemy i'm now following my dream of teaching other passionate developers like myself what I know through my company CodeCraft.

# What do I believe?

- I believe as a developer at it's heart, your job is to make the lives of other people more productive, that's what computing is all about.

- So if you yourself are not 100% focussed on making your own development as productive as possible then it doesn't bode well for your clients.

# What are my values?

- I'm 100% focused on practical development skills.

- I don't waste peoples time.

- I value my time and I value yours.

- I'm driven to be the most productive developer I can possibly be. I don't get caught up in philosophical debates.

- I value shipping “correct" functionality as fast as possible for myself and my clients.

If those are your values as well them you will love my courses.

If you want to sip your skinny decaf soya latte whilst discussing the pros and cons of different naming conventions for 3 hours then look somewhere else, if you want to learn how to ship functionality as fast as possible for yourself and your clients, these courses are for you.