Ionic 2 Tutorial with Two Complete Apps
3.0 (110 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.
856 students enrolled
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.0 (110 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.
856 students enrolled
Created by Brent Daugherty
Last updated 8/2016
English
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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
Requirements
  • 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
Description

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
Curriculum For This Course
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
07:38

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
02:18

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
02:45

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
05:25

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
03:29

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
03:49

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
03:33

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
02:22

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
05:10

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
04:05
+
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
02:45

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
04:00

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
04:43

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
04:44

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
02:46

In this lesson we will...

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

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
02:55

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
08:47

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
05:07

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
05:55

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
05:30

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
05:57

In this video we will...

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


Destination - Part 1
06:17

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
07:32

In this video we will...

  • Rate the uber driver
Rate the Driver
02:35

Prepare App to Publish
03:27

Publish to Android Google Play Store
04:35

Publish to iOS App Store
04:19

Publish to Windows
00:11
About the Instructor
Brent Daugherty
3.0 Average rating
110 Reviews
856 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.