Ionic 2 Tutorial with Two Complete Apps

Name: Ionic 2 Tutorial with Two Complete Apps
Rating: 3.2 (136 reviews)

Learn Ionic 2 by creating increasingly complex and functional mobile apps for iOS, Android, and Windows 10

Created byBrent Daugherty

Last updated 8/2016

English

What you'll 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

Course content

3 sections • 35 lectures • 2h 25m total length

Intro1:54
Overview of course
Intro to Weather App1:11
Overview of first section: Creating a weather app
Intro to Uber App2:19
Overview of second section: Creating an uber-clone app

Introduction2: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
Add Weather Modal8: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.
Create a Service to Fetch Weather from an API7: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
Display Weather from Multiple Cities2:18
In this lesson we will:
Turn weather data into a visual representation
Show a list of weather using the Angular 2 directive *ngFor
Convert Kelvin Temperature to Celsius/Fahrenheit Using a Pipe2:45
In this lesson we will:
Create a custom pipe
Show how to covert temperature in our templates using a pipe
Drill Down to 7-Day Forecast5: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
Show Local Weather Using Geolocation3: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
Create Reusable Weather Component3: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
Persist Weather Offline3: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
Give It Some Style2: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
Publish to iOS App Store5: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
Publish to Android Google Play Store4: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

Intro2:19
Get an overview of what you'll learn by creating an Uber-clone mobile app.
Create App with Google Maps2: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
Google Maps Component4:00
In this we will...

Add a Component for our Google Map
Init Google Map
Style Map to take up the full screen
Add Pickup Button4: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
Get Current Location using Geolocation4: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
Add Pickup Marker - Part 12:46
In this video we will...

Create pickup marker as a component
Show pickup marker in the center of the map
Add Pickup Marker - Part 24:41
In this lesson we will...
Continue where we left off with the pickup marker
Available Cars - Part 12: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
Available Cars - Part 28: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
Pickup Car - Part 15: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()
Pickup Car - Part 25: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
Pickup Car - Part 35: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
Publish & Subscribe Service5: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
Destination - Part 16:17
In this video we will...
Use PubSub to trigger a pickup
Prompt user to enter destination using Ionic 2 UI components
Destination - Part 27: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
Rate the Driver2:35
In this video we will...

Rate the uber driver
Prepare App to Publish3:27
Publish to Android Google Play Store4:35
Publish to iOS App Store4:19
Publish to Windows0:09

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 this course is for:

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!

Ionic 2 Tutorial with Two Complete Apps

What you'll learn

Explore related topics

Course content

Intro to Course3 lectures • 5min

Weather App12 lectures • 51min

Uber App20 lectures • 1hr 29min

Requirements

Description

Who this course is for: