Ionic 1: From Web to Mobile

Future Proof Yourself. Turn your existing web development knowledge into mobile development super powers with Ionic
4.5 (614 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.
4,829 students enrolled
$180
Take This Course
  • Lectures 116
  • Contents Video: 7.5 hours
    Other: 1 hour
  • 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

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.

What are the requirements?

  • A windows or mac machine
  • A text editor or an IDE like WebStorm
  • A basic understanding of command lines and the terminal

What am I going to get from this course?

  • 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.

What 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

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: Introduction
03:04

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

IMPORTANT: Blank Lectures!
Article
02:57

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.

04:05

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

02:56

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

02:01

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.

2 pages

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

OPTIONAL: How to use develop with the Chrome browser
13:20
OPTIONAL: What IDE am I using in this course?
06:53
Section 2: Setup
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
Article
Section 3: Ionic Overview
Introduction
02:16
Creating projects using the Ionic CLI
3 pages
Running Ionic in the Browser
Preview
05:55
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
Running Ionc in IOS Emulator & Device
Preview
05:06
Debug your iOS apps with the Safari Developer Tools
1 page
Setting up the Genymotion Android Emulator
8 pages
Running Ionic on Android Devices
Article
Debug your android apps with Chrome
1 page
Section 4: AngularJS Review
Introduction
03:00
02:43

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

Modules & Controllers
02:46
Corrections: Debugging Angular Applications
1 page
Debugging Angular Applications
03:13
05:39

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

01:46

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

02:59

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

02:22

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

01:21

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

02:51

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

04:54

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

05:48

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

11:32

Source code: http://play.ionic.io/app/3a0cfd6d6bd2

03:48

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

Section 5: The 8 Ball App
Corrections - 8Ball
1 page
03:48

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

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
Section 6: The Soundboard App
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
Section 7: The CaffeineHit List App
Corrections - Caffeinehit-List
1 page
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
Section 8: The CaffeineHit Map App
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
Section 9: The TED RSS App
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
Section 10: The Mealtracker App
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
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Asim Hussain, Full Stack Web & Mobile Developer

Over 15 years experience working for clients such as the European Space Agency and Google.

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.

Ready to start learning?
Take This Course