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.4 (64 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.
569 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 35
  • Length 2.5 hours
  • Skill Level Intermediate Level
  • Languages English, captions
  • 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 6/2016 English Closed captions available

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

What are the 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

What am I going to get from this course?

  • 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

What 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!

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: Intro to Course
01:54

Overview of course

01:11

Overview of first section: Creating a weather app

02:19

Overview of second section: Creating an uber-clone app

Section 2: Weather App
02:04

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.

Create an Ionic 2 App
2 questions
08:28

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.
07:38

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

In this lesson we will:

  • Turn weather data into a visual representation
  • Show a list of weather using the Angular 2 directive *ngFor
02:45

In this lesson we will:

  • Create a custom pipe
  • Show how to covert temperature in our templates using a pipe
05:25

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

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

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

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

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

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

04:05

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
Section 3: Uber App
02:19

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

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

In this we will...

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

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

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

In this video we will...

  • Create pickup marker as a component
  • Show pickup marker in the center of the map
04:41

In this lesson we will...

  • Continue where we left off with the pickup marker
02:55

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

08:47

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

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

In this video we will...

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

05:30

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

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
06:17

In this video we will...

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


07:32

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


02:35

In this video we will...

  • Rate the uber driver
Prepare App to Publish
03:27
Publish to Android Google Play Store
04:35
Publish to iOS App Store
04:19
Publish to Windows
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Brent Daugherty, 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.

Ready to start learning?
Take This Course