Ionic 2/ Ionic 3 - Build iOS & Android Apps with Angular
4.7 (2,697 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.
14,171 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ionic 2/ Ionic 3 - Build iOS & Android Apps with Angular to your Wishlist.

Add to Wishlist

Ionic 2/ Ionic 3 - Build iOS & Android Apps with Angular

Build Native iOS and Android Apps with Angular 2/ Angular 4, Cordova and the Ionic 2 Framework. Build 4 Complete Apps!
Best Seller
4.7 (2,697 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.
14,171 students enrolled
Last updated 9/2017
English
English [Auto-generated]
Current price: $10 Original price: $180 Discount: 94% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 14.5 hours on-demand video
  • 26 Articles
  • 25 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build native apps for iOS and Android, using Angular and the powerful features Ionic 2 offers
  • Dive deeper into Ionic 2 to learn more about very advanced features and optimize their apps
  • Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms
View Curriculum
Requirements
  • Angular (2 or 4) Fundamentals are strongly recommended
  • Basic HTML, JS and CSS Knowledge is required
Description

Angular 4 (formerly Angular 2) allows you to create awesome web applications powered by TypeScript / JavaScript. Wouldn't it be great to use that Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device?

The Ionic 2 Framework allows you to do just that! Use your existing Angular, HTML, JS and CSS knowledge and build your native mobile app with that! Ionic 2 will handle the rest and compile your code for you. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn thousands of different languages!

No wonder that hybrid frameworks like Ionic 2 are extremely popular and in high demand!

My name is Maximilian Schwarzmüller and I'm a freelance web developer as well as creator of many 5-star rated courses here on Udemy - including the "Angular 4 - The Complete Guide" course, the bestselling Angular course on Udemy!

I love creating awesome web applications and it simply is awesome to now use that knowledge and build native mobile apps with it!

This course takes your from zero to published app, taking a very practice-orientated route. You'll build four major apps throughout the course, learning about the basics of Ionic 2, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!

Each app will focus on different topics like Components, Navigation, Tabs, Sidemenus, User Input, Native Device Features (e.g. Camera), Storage, Http, Authentication ...

And since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser (yes, it's like magic!), on an emulator or on your own device!

What exactly are you going to learn then?

  • A brief refresher on Angular 2 (=Angular 4)
  • How to set up your Ionic 2 projects
  • The basics about Ionic 2 - How navigation works, how your project is structured and you use its rich component library
  • Use the many beautiful components Ionic 2 ships with
  • Use different kinds of navigation concepts: "Back"-Button-Navigation, Tabs and Sidemenus
  • Show Modals, Alerts, Toasts and many, many more useful UI components
  • Test the app in the browser, on emulators and real devices
  • Fetch and handle user input through Inputs, Textfields, Dropdowns, Dialogs and Sliders
  • Authenticate users and access web servers
  • Access the local device Storage and native device features like the Camera or Geolocation
  • So much more ... like adding third-party packages or styling and theming your app
  • Finally, you'll learn how to configure your app and publish it to the App Store or Google Play Store

Does this sound great? Let's now find out if this course is for you! 

Here are four different types of students - do you recognize yourself?

Student #1

Has basic Angular (2 or 4) knowledge, likes the web apps one can build with it and would love to ship those apps to native devices, too. Angular apps installed on a device - wouldn't that be great?

Yes it would and your definitely taking the right course if this student sounds anything like you!

Student #2

Has basic Swift or ObjectiveC and/ or Android knowledge and already built some basic apps for those platforms. If only you wouldn't have to learn so many different languages...

Basic Angular (2 or 4) knowledge might be missing here, but this course will definitely allow you to solve this multi-language issue. You might need to pick up some basic Angular 2 course to dive deeply into this course but once you did this, you definitely should join! Or join now and just learn Angular 2 along the way!

Student #3

Already knows Angular 1 and Ionic 1 as well as some basic Angular. Is this course still adding extra value?

Sure it is! Ionic 2 uses Angular, which is a complete re-write of Angular 1. Therefore, Ionic 2 also distinctively differs from Ionic 1 and really embraces the component-driven approach of Angular. Angular 4 is the future of Angular, the same is true for Ionic 2!

Student #4

Has basic HTML and JS knowledge and would love to develop native apps with that knowledge!

Sounds great, but a bit more advanced skills will be required. You should dive into Angular first so that you get a feeling for how it works and which problem it actually solves. Thereafter, this course is definitely worth another visit.

I can't wait to welcome you in this course!

Who is the target audience?
  • This course is for students who want to use their Angular 2 or 4 knowledge to build native mobile apps
  • This course is for everyone interested in diving into the development of native mobile apps for iOS and Android
Compare to Other Ionic Courses
Curriculum For This Course
227 Lectures
14:37:21
+
Getting Started
12 Lectures 24:11

Let's get started with this course and let me introduce this course and myself to you!

Preview 01:29

You might have noticed that Angular 4 was released - what does this mean for this course?

Preview 01:01

It's a very important question and therefore I want to answer it first: What is Ionic 2 and what does it for us?

Preview 03:10

Okay, you should know that but ... just to be safe, let me repeat what Angular 2 is.

Preview 01:01

Learn which requirements you should fulfil to get the most out of this course.

Preview 01:06

Must watch!

Creating your First App
00:10

Now that the basics are set, let's install Ionic 2 (the Ionic CLI) and let's create our first project and  app!

Preview 06:41

We created our first app, time to change it and see how we actually work with an Ionic 2 project!

Preview 03:40

Don't want to see your App in the Browser but jump right into running it on a real device? This article shows you where to learn how to do that.

Running your App on a Real Device
00:22

How is this course structured, what are you going to learn? This lecture answers this question.

Preview 03:15

There are different ways of going through the course. Let me show you the way you're going to learn the most.

Preview 02:01

This article holds some helpful links and resources for this module.

Section Source Code & Links
00:14
+
Mastering the Basics
25 Lectures 01:26:41

Let me introduce you to this course module and explain what we're going to do and learn in this module.

Module Introduction
01:11

We already created a project in the first course module, let me now show you a slight variation to this approach.

A different Way of Creating a New Project
01:58

Ionic 2 offers a couple of different project templates - learn more about them in this article.

Other available Project Templates
00:22

Whilst it's certainly nice to be able to create projects, understanding the structure of those projects would also not be too bad. Time to dive into this topic in this lecture!

Understanding the Structure of an Ionic 2 Project
06:47

It's key to understand how an Ionic 2 app works - therefore this lecture will explore this topic.

How an Ionic 2 App Works
08:14

Pages seem to be important in Ionic 2 - what's the difference to Angular 2 components? Let's shed some light on this question now.

Pages vs Components
01:54

In an Ionic 2 app, you're not loading your pages via their selectors. You're also not going to use the Angular 2 router. So how does navigation then work?

How Navigation works in an Ionic 2 App
01:55

With the basics about navigation being introduced, let's have a look at how Ionic 2 initialized the navigation stack.

Initializing Navigation in the AppComponent
02:11

ionic generate page XY Problems
00:27

Time to use the things you learned - let's create a new page and see how we can navigate to it.

Creating a Page and how to Navigate to it
06:52

It's time for a first short summary of all the things learned thus far.

First Summary
01:23

We already saw one way of creating pages, let me know show you an alternative approach and explain what the pros and cons are.

An Alternative Way of Creating Pages
04:29

We can navigate to different pages - that's great! But what if you also want to pass some data? Nothing easier than that!

Passing Data between Pages
04:29

We learned how to go forwards but how do you actually go back? That's very easy, too, as this lecture will show.

Popping Pages - Going Back
03:46

Time to practice the things we learned. This video explains which problem I want you to solve.

Time to Practice - Pages & Navigation - Problem
02:02

Were you able to solve the problem? Let's have a look at my solution in this lecture.

Time to Practice - Pages & Navigation - Solution
12:01

If you only want to add a basic pushing or popping action, you can actually save some time (and code) with some useful helper directives. Learn more about them in this lecture.

Saving Time with helpful Navigation Directives
03:07

If you want, you can configure your page transitions in detail. This articles explores your options.

Configuring Page Transitions
00:32

Pages (loaded through Ionic 2's navigation) follow a certain lifecyle - learn more about it in this lecture.

Understanding the Lifecycle of a Page
03:28

Seeing it in theory is okay, but let's now dive into the page lifecycle in a real app.

The Page Lifecycle in Action
08:59

Ionic 2 has a lot of features and even more built-in components. Impossible to cover them all. But thankfully, it also has a good documentation - this lecture shows you how to use it.

How to use the Ionic 2 Documentation
03:43

The code and business logic is a very important part of your app. But it's not the only part - having a nice theme and style also matters. This lecture explores the options Ionic 2 gives you.

Styling the App and Setting a Theme
04:45

Ionic 2 has the goal of making the development of nice-looking app as easy as possible. A nice feature helping you with this are the "utility attributes" it ships with. This lecture takes a closer look.

Using Utility Attributes
00:58

Time to summarize this module and the concepts learned.

Module Summary
00:51

This articles holds useful resources and links for this module.

Section Source Code & Links
00:15
+
"Favorite Quotes" App (Navigation, Pages and Components)
39 Lectures 02:44:36

Let me introduce you to this course module and explain what we're going to do and learn in this module.

Module Introduction
01:30

Let's see the finished app before we start building it.

What we're going to build
02:04

Before diving into the project, let's first plan this app and think about the different pages and the flow of pages first.

Breaking the App into Pieces (Defining the App Structure)
02:29

We do need a couple of pages for this app - this lecture shows how to create them.

Creating the required Pages
04:16

We learned about that stack of pages managed by Ionic 2. This concept is actually very flexible as this lecture shows.

Multiple Stacks of Pages vs One Single Stack
01:58

We learned about the idea behind navigation in Ionic 2. This idea still holds but it's flexible. This lectures explores how we can incorporate tabs into that concept.

Implementing Tabs Navigation with Multiple Stacks of Pages
09:08

For our app, we also need some data to work with. This lecture shows how we may add some dummy/ static data to our application.

Adding Quotes Data to the App
01:48

Adding data to an app is one thing but using it is equally important. This lectures shows how to use that data.

Using the Quotes Data
04:28

Time to use some built-in components! Let's dive into lists and list items in this lecture.

Using the Ionic "List" and "List Item" Components
05:55

With the basics about lists and list items set, it's time to dive into more complex list items in this lecture.

How to create more complex List Items
05:00

We already learned how to pass data around, didn't we? Time to use it in this application, too!

Passing the Quotes Data between Pages
09:04

A great component for presenting data is the "Cards" component Ionic 2 ships with. Let's take a closer look in this lecture.

Using the Ionic "Cards" Component
05:31

Now we're diving deeply into Ionic 2 components! Let's learn more about cards and buttons and understand the grid shipping with Ionic 2.

Using the Ionic Grid, Buttons and Styling Cards
05:48

We're not limited to the built-in styles and helper attributes! Learn how to add your own styling to an app in this lecture.

Adding Custom Styles
03:24

Sometimes, you want to present an alert which is presented as an overlay to your page. This lecture explains how you may use that feature.

Adding Alerts to the Application
09:06

Keep in mind: You're still creating an Angular 2 app! Therefore, you can use any Angular 2 feature (besides the router...). Let's see how services can improve our app.

Working with Angular 2 Services in the Ionic 2 App
05:36

Now that a service has been added, let's use it to mark quotes as "favorite quotes"

Marking Quotes as Favorites by using a Service
02:41

The app is taking shape! Let's now prepare the favorite quotes page so that we actually can display our favorite quotes.

Preparing the Favorite Quotes Page
02:51

We already learned some basics about list items, let's now dive a bit deeper into them.

Diving Deeper into List Items
02:44

Modals are another great feature Ionic 2 offers you. Before showing a modal, we first need to prepare a fitting page - let's do this in this lecture.

Preparing a Modal Page
04:07

After preparing a fitting page, it's now time to also present the modal!

Presenting a Modal
02:41

Presenting Modals is one thing but how do you get rid of them? This lecture shows you how to dismiss a modal.

Dismissing Modals
03:41

In some modals, you need to work with data from another page. This lecture explains how you get your data into the modal.

Passing Data to a Modal
04:12

We know how to get data into the modal but how do we achieve the opposite? This lecture explains how you may pass data from the modal to the underlying page.

Passing Data from a Modal back to the Page
04:03

We gained some knowledge about the ViewController. Let's dive a bit deeper into it and understand how we may listen to certain events.

Understanding ViewController Hooks
01:31

Now that we know how to use ViewController events, we have a way of extracting the data passed back by the modal. Let's use it!

Receiving Modal Data by Using the ViewController
04:24

We can pass data around but our "Favorite Quotes" page is not getting updated correctly. Let's "fix" this.

Updating the "Favorite Quotes" Page
03:01

We can favorite quotes - but what if you want to unfavorite a quote? Let's add such a functionality right now!

Adding an "Unfavorite" Functionality to the App
06:19

You know this mobile pattern where you slide a list item are presented some extra options? Let's implement it in our own app!

Revealing extra List Item Options upon Sliding
05:34

Out app is taking shape! Let's now finetune its look and adjust the overall app theme.

Changing the overall App Theme
07:17

We already learned how to use tabs to navigate around, time to now learn about another major navigation pattern/ feature: A sidemenu.

Adding a Sidemenu
05:44

When selecting an item in the sidemenu, we definitely want to load the appropriate page. For that to work, we need to replace the root page. Let's learn how to do this now.

How to change the Root Page
03:55

We got a menu and we got a way of replacing the root page. But we got no way of opening the menu! Let's change this in this lecture.

Adding a Menu Toggle Button to the Navigation Bar
05:06

The sidemenu is working and we can now visit the settings page. Let's fill it with some life.

Preparing the Settings Page
05:12

Having a settings page is nice but we also need to make sure that changes on that page have an effect on the rest of the app. Let's create (and use) a settings service which helps us with that.

Creating and Using the Settings Service to Store Settings
04:22

For our settings to have some effect, we need an alternative background for the quote items. Let's add the appropriate styling.

Adding an Alternative Item Background
05:21

Let's have a look at our finished app. Great job!

App Summary
01:45

Let me summarize this module and the concepts learned throughout the module.

Module Summary
00:50

This articles holds useful resources and links for this module.

Section Source Code & Links
00:10
+
Ionic 2 Components - A Closer Look
16 Lectures 01:00:56

Let me introduce this module and its core concepts in this lecture.

Module Introduction
00:40

Ionic 2 has more components and possible component configurations than any course can cover. Therefore, it's key to know how to use the official docs - let's have another look at those docs.

Another Look at the Component Docs
02:35

Buttons are part of any app you're going to create. Therefore, it's really important to understand how to use and style them.

Using and Styling Buttons
09:11

Lists are another key feature - this lecture therefore takes a closer look at them.

Understanding Lists
02:59

If we're talking about lists, we also have to take closer look at the items of such lists. This lectures dives into them.

Understanding List Items and their Content
03:18

Let's have a look at some ways of configuring (the look of) lists.

Configuring Lists
01:18

Related to lists, we can also set up groups of items and add headers to lists to structure our data.

Item Groups and List Headers
05:01

This articles gives you an example for a re-orderable list - a pattern you might need in some apps.

Bonus: How to create a re-orderable List
00:32

Ionic 3.0.0 and the Grid
00:21

Enough about lists, let's have a look at another way of structuring our content/ template - the Ionic 2 grid.

Understanding the Grid System
04:24

In mobile apps, you have more events than just (click). This lectures explains how to listen to different types of gestures.

More than (click) - Using Gestures
06:30

Never forget: You're creating an Angular 2 app, therefore you can create and use your own components! Let's do this now!

Creating and Using Custom Components
04:07

Time to practice the things we learned. This video explains which problem I want you to solve.

Time to Practice - Components - Problem
02:27

Were you able to solve the problem? Let's have a look at my solution in this lecture.

Time to Practice - Components - Solution
16:42

Let me summarize the module and the concepts learned throughout the module.

Module Summary
00:42

This articles holds useful resources and links for this module.

Section Source Code & Links
00:08
+
Running an Ionic 2 App on a Real Device (or an Emulator)
7 Lectures 19:52

Let me introduce you to this module and what we'll cover.

Module Introduction
00:59

Building for different platforms can be challenging and some things can go wrong. This lecture explains where to find help and how to correctly prepare your workspace for the development of a multi-platform app.

Where to get started
01:24

This lecture shows you how to build your app for iOS and how to run it both on the iOS simulator and a real device.

Building for iOS
07:45

This lecture shows you how to build your app for Android and how to run it both on the Android Simulator and a real device.

Building for Android
07:29

When using (complex and long) lists, you can hit performance issues on real devices. Learn more about this in this article.

Lists & Performance Issues
00:33

You saw the videos but as a lot of steps were involved, definitely have a look at this step-by-step guide to not get lost.

Step-by-step Guide for Building for iOS and Android
01:06

Let me summarize this module and what we learned.

Module Summary
00:36
+
"The Recipe Book" App (User Input, Forms and Data Management)
42 Lectures 02:39:58

Let me introduce this module and the concepts we're going to cover to you.

Module Introduction
00:50

Let's start with the finished app and see what we're actually going to build in this section.

What we're going to build
03:01

As in the first app, it's really helpful to structure the app before starting to work on it. Let's do this in this lecture.

Breaking the App into Pieces (Defining the App Structure)
01:41

It's the mandatory first step: Let's create and register all the pages we're going to need in this application.

Creating the required Pages
03:35

We've also seen this before! Let's add a tabs navigation to our app - maybe you can now do it on your own?

Implementing a Tabs Navigation
04:07

We could use the default colors and the default theme in general but that would be boring. Let's make some changes to the app theme.

Setting the App Theme
01:16

Time to reflect what we built thus far and how we should continue.

Planning the Next Steps
01:18

Angular supports two different approaches when it comes to handling user input submitted through forms. Both work in Ionic 2.

Forms: Template-driven vs Reactive Approach
01:25

Ionic 2 gives you a rich toolset of controls you may use. This lectures explains how to learn more about them.

Understanding Ionic 2 Controls
01:21

Let's start building our first form (at least in an Ionic 2 app). We're going to use the template driven approach.

Creating a Form Template (for Template-Driven Approach)
06:11

Do you remember how we register controls in the template-driven approach? It works exactly the same in an Ionic 2 app - so let's do that now.

Registering Controls (Template-Driven)
03:20

The template was created, the controls registered - time to allow the user to submit the form!

Submitting the Form (Template-Driven)
02:19

Submitting the form is important but it's not that great if invalid values get submitted. This lecture shows how to add validation to the form.

Validating the Form (Template-Driven)
02:31

The user may no use the form and therefore create some data we can work with. Let's add a model to be able to use this data with ease.

Handling Data with a Model for our Ingredients
03:57

We got a model, though that alone won't manage our data. We need a service for that - so let's add one!

Managing Data with a Service (Shopping List Service)
05:56

With the service created, it's time to use it store items on our shopping list.

Saving Items with the Shopping List Service
03:54

Storing data is nice but it's worth even more if we're able to fetch it, too. This lecture dives into this.

Displaying Items from the Shopping List
05:26

We can add and view data - wouldn't it be nice to also be able to remove it? Let's work on this in this module.

Removing Item from the Shopping List
03:56

The shopping list looks alright - let's turn towards the recipes. This lecture shows how to implement a button to load the "New Recipe" page.

Adding a "New Recipe" Button and Page Transition
04:09

Time to allow the user to create new recipes. Let's start working on our "Edit Recipe" form using the reactive approach.

Creating a "Edit Recipe" Form (Reactive Approach)
08:32

The template has been created, let's now create the form behind it programmatically.

Creating the Reactive Form
05:07

We got the template and we got the form - let's now synchronize both parts!

Syncing Form and HTML (Reactive Approach)
04:14

The basic form needs some extra features! It would be nice to be able to add ingredients to a recipe - this lecture shows one way of implementing such a feature.

Add Ingredients Management to the Form
03:30

Ionic 2 ships with many components - one of them is the "Action Sheet". This lecture shows how to create and use it.

Creating an Action Sheet
03:55

Did you know that you could add input fields to dialogs? You can! This lecture shows how that works.

Creating a Dialog (Alert) with an Input Field
04:11

We're able to add new ingredients, now we need a way to manage those new controls in our form. FormArray to the rescue!

Managing Ingredient Controls in a FormArray
04:12

Let's wire up all those features we created over the last lectures.

Wiring it all up
04:19

We can add ingredients but what if we want to get rid of them? This lecture implement such a feature.

Removing Ingredient Controls
03:38

Giving some feedback to the user is always a good idea. Toasts can help us with that. Learn more about them, in this lecture.

Using Toasts to Present Short Messages
04:28

The form is taking shape - time to think about ways of managing all this recipe data!

Adding a Recipe Model and Service
07:55

With model and service in place, we can start using it and add recipes to our global recipes array.

Adding Recipes through a Service
06:07

We got recipes in the array - let's render them to the screen and actually display a list of recipes.

Outputting Recipes
05:16

What if the user wants to look into a single recipe? Let's work on the single-recipe page.

Displaying Recipe Details - Template
05:27

Don't forget that you can style parts of pages, too! Let's do this in this lecture.

Displaying Recipe Details - Styling
01:18

The single-recipe page is finished, let's now load it and pass some recipe data to it, too.

Loading the Recipe Detail Page (and passing Data to it)
06:34

Viewing details is nice but sometimes you want to edit them. No problem in our app - let's add the functionality to load the edit page and pass the data to it.

Loading the Edit Page (and passing Data to it)
01:45

We want to edit an existing recipe? We can do that - with our edit form! Let's initialize it!

Initializing the Edit Form
06:02

With the edits in place, it's time to add a feature which allows us to save our changes. Let's implement that in this lecture.

Updating the Recipe through a Service
03:16

Almost there! Time to allow the user to send ingredients from a recipe to the shopping list.

Sending Ingredients to the Shopping List
04:18

Done! Let's polish the app, finish it and see it run on a real device!

Finishing Steps
04:53

Let me summarize the module and what we learned.

Module Summary
00:35

Have a look at this article to find some helpful module resources and links.

Section Source Code & Resources
00:13
+
"The Extended Recipe Book" App (Auth and Http)
29 Lectures 02:04:28

Let me introduce this module and what we're going to learn in it.

Module Introduction
01:17

As always: Let's see the finished app first!

What we're going to build
02:51

We're going to add two new major "blocks" of features to our app in this module. Learn which blocks that are in this lecture.

Which New Features We're Going to Add
01:16

Let's start as usual and create all the pages we're going to need.

Generating the Required Pages
02:20

Having the pages is not enough - we also need a way of reaching them. Time to add a nice sidemenu.

Adding a Sidemenu
12:00

When talking about authentication, it makes sense to start with the signup process. Let's configure the respective page in this lecture.

Creating the Signup Page (and Form)
04:58

The signup page has been created, time to now work on the signin page.

Creating the Signin Page
02:03

It's key to understand how authentication works in an Ionic 2 app - this lecture sheds some light on this topic.

How Authentication Works in an Ionic 2 (Mobile) App
03:38

For this app, we're going to use Firebase as a development/ dummy backend. This lecture shows how to get started with it.

Setting up Firebase (as a Development Backend)
06:22

With the signup page and form setup and Firebase ready to go, let's work on the actual signup process now.

Implementing the Signup Process
06:44

User signup is working but we're not giving a very good feedback on whether it failed or worked. Let's change this now by implementing a "Loading" component and an error alert.

Showing a Loader (Spinner) and Error Alert
04:41

Now that users can be added, it's time to also allow the signin of those users. Let's implement the respective process.

Implementing the Signin Process
02:34

As with the signup page, it's time to add some visual feedback on the signin page, too.

Refining the Signin Page
02:41

We can sign users up and in but we don't really know whether a user is signed in or not. Time to do something about this and listen to changes in the auth state.

Managing the User State
04:05

We can't get rid of our authenticated users! Time to add a logout functionality to allow a user to ... well ... log out. Also, let's fix a tiny bug.

Logging Users Out & Fixing a Bug
04:43

Let's take a closer look at what happens behind the scenes and explore how Firebase actually stores our token.

How Firebase stores the Token
03:24

The auth flow is working great, the next step is the implementation of http calls to store and fetch data. Let's start by adding a popover to choose from those two options.

Adding a Popover Component
10:17

We know where the token is stored but how do we actually access it? Learn more about this, in this lecture.

Fetching the Token
05:43

Ionic 3 and Http
00:14

Time to get our hands dirty and send an actual http request. Don't forget to add that authentication token!

Sending a PUT Request with the Auth Token
08:31

Want to learn more about this strange token? This article is for you.

More about Tokens
00:15

We stored the data on the server, let's now get it back! 

Sending a GET Request to load Data
05:32

We're almost there, let's now polish the app, add a "Loading" component and add better error handling.

Polishing the App (Adding a Spinner and Error Handling)
05:19

In it's current state, the error handler won't display the error message. Let's fix it.

Fixing the Error Handler
00:29

With all the http functionality in place for the shopping list, let's now implement it for the recipes, too.

Storing and Fetching Recipes
13:43

Time to fix two bugs in our app.

Fixing Errors
05:15

We did it! The app is finished! Let's now view it on a real device!

Seeing the App run on a Real Device
02:18

Let me summarize this module and what we learned.

Module Summary
01:05

Find some useful links and resources in this article.

Section Source Code & Links
00:09
+
"Awesome Places" App (Native Device Features, Storage)
28 Lectures 02:02:56

Let me introduce you to this module and the concepts we'll cover here.

Module Introduction
00:57

As always, let's first see the finished app.

What we'll build
02:51

You know that process ... let's start in a blank project and generate all the pages we need in this project.

Generating the required Pages
02:03

This app is all about locations and places, so let's create some fitting models we can work with.

Creating Models for Location and Places
02:30

In order to create a new place, we need to get to the right page. In this lecture, we'll implement the required navigation.

Implementing Navigation
02:07

We're now on the "New Place" page, let's continue building our app by filling it with some life - including a template-driven form.

Filling the "New Place" Page with Life (incl. Template-Driven Form)
11:05

Now it's getting interesting! Let's add Google Maps to the app, so that we actually can pick a place.

Adding Google Maps to the App
06:27

Having Maps in the application is a big first step. Now let's finetune it and adjust the map excerpt to our needs.

Configuring our Maps
04:01

With the map added and configured, the next step is to allow the user to pick a place. This lecture shows how to add this feature.

Allowing the User to Place a Marker on the Map
04:28

We got a location, the goal now is to get this location back to our "New Place" page. We learned how to do that - let's see it again in this lecture.

Passing the Chosen Location back to the Page
03:49

Location picked, location returned - time to also display it. This lecture explores how that works.

Displaying the Chosen Location
08:35

Using Ionic Native 3 instead of 2
00:32

Picking a place manually is alright but why not use the built-in location tools like GPS? This lecture explains how to add a native device plugin (Geolocation) which allows us to use those tools.

Using a Native Device Feature: Geolocation to Locate the User
06:36

We're able to get our position, a little bit more feedback to the user would be nice though. This lectures dives into this topic.

Polishing the Auto-Locate-Feature
02:38

We also want to store a picture of the awesome place. For this, we obviously need to get access to the camera - this lecture shows how that works.

Using a Native Device Feature: The Camera
06:45

With the camera, we're able to take pictures, this lecture now also shows how we can retrieve those pictures and display them on the screen.

Displaying the Picture
02:30

We're now able to create new places, with that we should now also add a service to manage that data.

Managing Data with the PlacesService
10:59

With the data managed in a service, we can now move on and work on the page which should display a single place (once we select it). Let's do this in this lecture.

Configuring the Single Place Page
06:16

Time to have a look at our app and see how it works. Let's also check if we can improve something.

Reflecting on our App
03:17

Time to start working on that storage/ file issues. This lecture explores how the File plugin works and how we may use it to move our pictures.

Using a Native Device Feature: The File System (to manage Files)
10:18

Ionic Storage for Ionic > 2.2.0
00:06

Managing Files is not everything we can (and should do), we also have to manage our other data and make sure that it gets saved on the device. Let's start with that in this lecture.

Using the Device Storage: Setting and Getting Data
07:01

Storing and fetching data is one thing but this app also needs some functionality which allows us to get rid of data and files. This lectures dives into this issue.

Deleting stored Data and Files
07:07

We saw that our app has a tiny bug when it comes to loading the data on startup. Let's fix that bug now.

Fixing the Fetching of Data
02:54

We also had some storage issues - our files wouldn't get copied correctly. This lectures show why that happened and how to fix the issue.

Fixing the Storage Issues
04:07

Do you remember how to find errors? This video brings you back on track.

Extra: How to Debug
01:45

Let me summarize this module and what we learned.

Module Summary
00:55

A collection of useful resources and links for this module.

Section Source Code & Resources
00:16
+
Publishing Your App
9 Lectures 29:08

Let me introduce you to this module and explain what we'll cover.

Module Introduction
01:20

There are some considerations to be made before you actually decide to publish your app.

Deployment Considerations
00:44

Of course we want to use our own icons and splashscreens for the app. Ionic 2 makes this very easy - this lecture shows how it works.

Using Custom Icons & Splashscreens
04:03

Before publishing the app, we have to configure it correctly. Learn more about this process in this lecture.

Configuring the App
03:32

Almost there! Let's now learn how we prepare the project for the production build and how we then start this process.

Build Preparations & Building for Production
03:43

With all the configuration out of the way, let's now have a look at how publishing the app to the Google Play Store works!

Publishing the App in the Google Play Store
04:41

With all the configuration out of the way, let's now have a look at how publishing the app to the Apple AppStore works!

Publishing the App in the Apple AppStore
08:52

Let me summarize this module.

Module Summary
00:37

A must-read! Find all the resources and links shown in this module.

Section Source Code & Links
01:36
+
Course Roundup
1 Lecture 01:50

Let me summarize this course and go through all the things we learned again. I'll also lay out some next steps.

Course Roundup
01:50
3 More Sections
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
49,718 Reviews
150,723 Students
16 Courses
Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 100.000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.