Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Ionic 2 Tutorial with Two Complete Apps to your Wishlist.

Add to Wishlist

Ionic 2 Tutorial with Two Complete Apps

Learn Ionic 2 by creating increasingly complex and functional mobile apps for iOS, Android, and Windows 10
3.3 (88 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.
705 students enrolled
Last updated 8/2016
English English
$10 $50 80% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

Learn Ionic 2 with two in-depth, step-by-step mobile apps. Updated for Ionic 2 beta 10.

There is a large, active Ionic community that has developed over a million apps. Ionic 1 has attracted a lot of people because it leveraged existing technologies that developers were familiar with on the web to create mobile apps. With the new advances in Angular 2 and TypeScript, Ionic 2 changes how we develop hybrid, mobile apps. Fortunately, this course teaches these new frameworks as you develop apps in an easy progression that will have you writing Ionic 2 apps within a couple hours.

As the video progresses, viewers will learn how to get the best of both worlds in terms of using Ionic and Angular together to create stunning apps with interactive UIs and real-time functionality.

By the end of this course, a viewer will be a professional Ionic 2 developer with the skills and deeper understanding to create any app imaginable.

Who is the target audience?
  • Ideal student would have some experience with Ionic
  • NOT for developers new to Javascript/HTML/CSS
  • Ionic 1 developers wanting to get their hands dirty with Ionic 2
  • Ionic 2 beginners will progress to intermediate and advanced skills
  • Existing mobile web developer wanting to learn the new Ionic framework
  • Desire concrete step-by-step instructions from start to publish
  • Understand the differences from Ionic 1
  • Want to stay up-to-date with Ionic 2
  • Stuck at simplistic Ionic 2 examples like the ToDo App? Take this course!
Students Who Viewed This Course Also Viewed
What Will I Learn?
Create iOS and Android Apps with Ionic 2
Manage data sharing across the app
Theme your Apps using SASS
Store data offline with SQL Storage
Consume APIs and JSON responses
Simulate server responses
Master Google Map APIs
Latest advances in Ionic 2
Learn Angular 2 and TypeScript
Conquer Angular 2 Components & Directives
Practiced at Angular 2 Page, Pipe, Provider, Service, Dependency Injection and more
Create two real mobile apps for the App Stores
Structure complex apps
Incorporate auto-completion and code-sense with TypeScript and Type Definitions
Publish your app to millions of users
Publish Subscribe in Angular 2
Skills to create any mobile app imaginable
Become a professional mobile app developer
Able to create any mobile app imaginable
View Curriculum
  • Download & Install XCode and Android Studio
  • Install Code Editor (like Visual Studio Code)
  • You should be familiar with HTML, CSS, and JavaScript
  • Familiarity with Ionic and Cordova will make the course easier, but it's not necessary
Curriculum For This Course
Expand All 35 Lectures Collapse All 35 Lectures 02:25:34
Intro to Course
3 Lectures 05:24

Overview of course

Preview 01:54

Overview of first section: Creating a weather app

Preview 01:11

Overview of second section: Creating an uber-clone app

Preview 02:19
Weather App
12 Lectures 51:06

Overview of this section. At the end, I explain how to install Ionic and create a new app, so that we will be ready to start coding in the next lesson.

Preview 02:04

Create an Ionic 2 App
2 questions

In this lesson we will:

  • Create a new page with a form to input a city
  • Present the page as a modal and pass back the entered city to the home page.
Preview 08:28

In this lesson we will:

  • Create a new service
  • Integrate with OpenWeatherMap API
  •  Add a service method that takes a city and returns the current weather
Create a Service to Fetch Weather from an API

In this lesson we will:

  • Turn weather data into a visual representation
  • Show a list of weather using the Angular 2 directive *ngFor
Display Weather from Multiple Cities

In this lesson we will:

  • Create a custom pipe
  • Show how to covert temperature in our templates using a pipe
Convert Kelvin Temperature to Celsius/Fahrenheit Using a Pipe

In this lesson we will:

  • Create master-detail relationship, with a detail view that shows the 7-day forecast
  • Add a service method that fetches the forecast for a given number of days
  • Use previously covered topics like *ngFor to show the forecast data in a template
Drill Down to 7-Day Forecast

In this lesson we will:

  • Use cordova geolocation to get current location of the mobile device
  • Create a new service method that fetches the weather for a given latitude/longitude
  • Learn how to create our own observables to wrap multiple asynchronous actions
  • Display the local weather in our app
Show Local Weather Using Geolocation

In this lesson we will:

  • Simplify code by dividing it into components
  • See how to interact with components by passing in data as an input and outputing data as events
Create Reusable Weather Component

In this lesson we will:

  • Persist our list of weather between app restarts
  • Create an offline storage service
  • Use the storage service from our home page
Persist Weather Offline

In this lesson we will:

  • Change the nav bar color
  • Use a logo/image as an app title
  • Show where to add additional styling
  • Modify the app icon and splash screen
Give It Some Style

In this lesson we will publish for the App Store:

  • Modify app config
  • Navigate Apple Member Center
  • Adding app to iTunes Connect for App Store

Publish to iOS App Store

In this lesson we will publish for the Google Play Store:

  • Setup Android Studio and SDK
  • Building our app, signing our app, and compressing our app
  • Upload to the Google Play Store
Publish to Android Google Play Store
Uber App
20 Lectures 01:29:05

Get an overview of what you'll learn by creating an Uber-clone mobile app.

Preview 02:19

In this video we will...
  • Create a new Ionic 2 app with TypeScript
  • Add in the Google Maps API
  • Add in the TypeScript definition for Google Maps giving us code sense
Create App with Google Maps

In this we will...

  • Add a Component for our Google Map
  • Init Google Map 
  • Style Map to take up the full screen
Google Maps Component

In this video we will...

  • Use the Ionic Grid system to layout our controls like Uber
  • Learn how to use Ionic style variables to create a gradient
  • Request/Cancel to be picked up
Add Pickup Button

In this video we will...

  • Use cordova, native geolocation from Ionic Native
  • Create an Observable to return Geolocation asynchronously
  • Show a loading screen finding our location
  • Learn how to use external references to access child component methods from the parent 
Get Current Location using Geolocation

In this video we will...

  • Create pickup marker as a component
  • Show pickup marker in the center of the map
Add Pickup Marker - Part 1

In this lesson we will...

  • Continue where we left off with the pickup marker
Add Pickup Marker - Part 2

In this video we will...

  • Shows the cars in my area
  • Create a component for available cars
  • See how to use observables make an HTTP request every 2 seconds

Available Cars - Part 1

In this video we will...

  • Simulate a backend server as an Ionic 2 service provider
  • Create mock data with locations
  • Add, update, and animate cars on the map
Available Cars - Part 2

In this video we will...

  • Add a component to control the car that will pick up the rider
  • See how to pass data up the component chain with Output()
  • See how to pass data down the component chain with Input()
Pickup Car - Part 1

In this video we will...

  • Simulate the pickup car
  • Get directions from Google Maps API
  • Break down directions into simulation-updates for the car

Pickup Car - Part 2

In this video we will...

  • Add pickup car marker to the map
  • Show directions line on the map
  • Continously update the car position and direction line on the map
Pickup Car - Part 3

In this video we will...

  • Create PubSub service to share pickup changes in the app
  • See an alternative to Output() and Input() to pass data in components
Publish & Subscribe Service

In this video we will...

  • Use PubSub to trigger a pickup
  • Prompt user to enter destination using Ionic 2 UI components 

Destination - Part 1

In this video we will...

  • Present the user with results that may match the entered destination
  • Use Google Maps geocode to convert the entered destination to map coordinates

Destination - Part 2

In this video we will...

  • Rate the uber driver
Rate the Driver

Prepare App to Publish

Publish to Android Google Play Store

Publish to iOS App Store

Publish to Windows
About the Instructor
3.3 Average rating
88 Reviews
705 Students
1 Course
Web & Mobile Developer

I have developed web and mobile apps for the last 15 years for companies, academia, and the military. I have a Masters in Computer Science, and I supported myself in university by teaching and tutoring other students. I've learned various technologies over the years, such as Java, C/C++ and Ruby. When the iPhone was released back in 2007, my interest switched to building native apps for a few years. More recently, I switched back to developing mobile apps using web technologies. At first, I developed mobile web apps from scratch without a framework, and I have since become a strong proponent of Ionic 1 & now Ionic 2. I now use my broad background in web and mobile to teach others how to crate highly engaging mobile web apps using Ionic 2.

Report Abuse