Ionic 2/ Ionic 3 - Build iOS & Android Apps with Angular
4.7 (2,345 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.
12,256 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!
4.7 (2,345 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.
12,256 students enrolled
Last updated 5/2017
Current price: $10 Original price: $180 Discount: 94% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 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
  • Angular (2 or 4) Fundamentals are strongly recommended
  • Basic HTML, JS and CSS Knowledge is required

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
227 Lectures
Getting Started
12 Lectures 24:13

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

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

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

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

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

Other available Project Templates

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

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

How an Ionic 2 App Works

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

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

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

ionic generate page XY Problems

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

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

First Summary

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

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

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

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

Time to Practice - Pages & Navigation - Problem

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

Time to Practice - Pages & Navigation - Solution

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

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

Configuring Page Transitions

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

Understanding the Lifecycle of a Page

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

The Page Lifecycle in Action

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

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

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

Time to summarize this module and the concepts learned.

Module Summary

This articles holds useful resources and links for this module.

Section Source Code & Links
"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

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

What we're going to build

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)

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

Creating the required Pages

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Diving Deeper into List Items

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

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

Presenting a Modal

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

Dismissing Modals

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

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

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

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

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

Updating the "Favorite Quotes" Page

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

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

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

Changing the overall App Theme

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

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

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

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

Preparing the Settings Page

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

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

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

App Summary

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

Module Summary

This articles holds useful resources and links for this module.

Section Source Code & Links
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

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

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

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

Understanding Lists

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

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

Configuring Lists

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

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

Ionic 3.0.0 and the Grid

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

Understanding the Grid System

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

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

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

Time to Practice - Components - Problem

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

Time to Practice - Components - Solution

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

Module Summary

This articles holds useful resources and links for this module.

Section Source Code & Links
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

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

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

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

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

Lists & Performance Issues

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

Let me summarize this module and what we learned.

Module Summary
"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

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

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)

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

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

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

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

Planning the Next Steps

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

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

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)

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)

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

Submitting the Form (Template-Driven)

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)

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

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)

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

Saving Items with the Shopping List Service

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

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

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

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)

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

Creating the Reactive Form

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

Syncing Form and HTML (Reactive Approach)

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

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

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

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

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

Wiring it all up

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

Removing Ingredient Controls

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

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

Adding a Recipe Model and Service

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

Adding Recipes through a Service

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

Outputting Recipes

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

Displaying Recipe Details - Template

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

Displaying Recipe Details - Styling

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)

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)

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

Initializing the Edit Form

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

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

Sending Ingredients to the Shopping List

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

Finishing Steps

Let me summarize the module and what we learned.

Module Summary

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

Section Source Code & Resources
"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

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

What we're going to build

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

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

Generating the Required Pages

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

Adding a Sidemenu

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)

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

Creating the Signin Page

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

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)

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

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

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

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

Refining the Signin Page

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

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

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

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

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

Fetching the Token

Ionic 3 and Http

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

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

More about Tokens

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

Sending a GET Request to load Data

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)

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

Fixing the Error Handler

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

Storing and Fetching Recipes

Time to fix two bugs in our app.

Fixing Errors

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

Seeing the App run on a Real Device

Let me summarize this module and what we learned.

Module Summary

Find some useful links and resources in this article.

Section Source Code & Links
"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

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

What we'll build

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

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

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

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)

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

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

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

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

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

Displaying the Chosen Location

Using Ionic Native 3 instead of 2

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

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

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

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

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

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

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

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)

Ionic Storage for Ionic > 2.2.0

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

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

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

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

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

Extra: How to Debug

Let me summarize this module and what we learned.

Module Summary

A collection of useful resources and links for this module.

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

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

Module Introduction

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

Deployment Considerations

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

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

Configuring the App

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

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

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

Let me summarize this module.

Module Summary

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

Section Source Code & Links
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
3 More Sections
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
42,895 Reviews
131,743 Students
15 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.