Ionic 2 - The Practical Guide to Building iOS & Android Apps

Visit Tutorial Page ( Report)
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
  • Getting Started
    • Course Introduction
    • This Course & Angular 4
    • What is Ionic 2?
    • Just to be safe: What is Angular 2?
    • Course Requirements
    • Creating our first Ionic 2 Project and App
    • Changing our First App
    • Running your App on a Real Device
    • The Structure of this Course
    • How to get the Most out of this Course
    • Section Source Code & Links
  • Mastering the Basics
    • Module Introduction
    • Module Introduction
    • Other available Project Templates
    • Understanding the Structure of an Ionic 2 Project
    • How an Ionic 2 App Works
    • Pages vs Components
    • How Navigation works in an Ionic 2 App
    • Initializing Navigation in the AppComponent
    • ionic generate page XY Problems
    • Creating a Page and how to Navigate to it
    • First Summary
    • An Alternative Way of Creating Pages
    • Passing Data between Pages
    • Popping Pages - Going Back
    • Time to Practice - Pages & Navigation - Problem
    • Time to Practice - Pages & Navigation - Solution
    • Saving Time with helpful Navigation Directives
    • Configuring Page Transitions
    • Understanding the Lifecycle of a Page
    • The Page Lifecycle in Action
    • How to use the Ionic 2 Documentation
    • Styling the App and Setting a Theme
    • Using Utility Attributes
    • Module Summary
    • Section Source Code & Links
  • "Favorite Quotes" App (Navigation, Pages and Components)
    • Module Introduction
    • What we're going to build
    • Breaking the App into Pieces (Defining the App Structure)
    • Creating the required Pages
    • Multiple Stacks of Pages vs One Single Stack
    • Implementing Tabs Navigation with Multiple Stacks of Pages
    • Adding Quotes Data to the App
    • Using the Quotes Data
    • Using the Ionic "List" and "List Item" Components
    • How to create more complex List Items
    • Passing the Quotes Data between Pages
    • Using the Ionic "Cards" Component
    • Using the Ionic Grid, Buttons and Styling Cards
    • Adding Custom Styles
    • Adding Alerts to the Application
    • Working with Angular 2 Services in the Ionic 2 App
    • Marking Quotes as Favorites by using a Service
    • Preparing the Favorite Quotes Page
    • Diving Deeper into List Items
    • Preparing a Modal Page
    • Presenting a Modal
    • Dismissing Modals
    • Passing Data to a Modal
    • Passing Data from a Modal back to the Page
    • Understanding ViewController Hooks
    • Receiving Modal Data by Using the ViewController
    • Updating the "Favorite Quotes" Page
    • Adding an "Unfavorite" Functionality to the App
    • Revealing extra List Item Options upon Sliding
    • Changing the overall App Theme
    • Adding a Sidemenu
    • How to change the Root Page
    • Adding a Menu Toggle Button to the Navigation Bar
    • Preparing the Settings Page
    • Creating and Using the Settings Service to Store Settings
    • Adding an Alternative Item Background
    • App Summary
    • Module Summary
    • Section Source Code & Links
  • Ionic 2 Components - A Closer Look
    • Module Introduction
    • Another Look at the Component Docs
    • Using and Styling Buttons
    • Understanding Lists
    • Understanding List Items and their Content
    • Configuring Lists
    • Item Groups and List Headers
    • Bonus: How to create a re-orderable List
    • Ionic 3.0.0 and the Grid
    • Understanding the Grid System
    • More than (click) - Using Gestures
    • Creating and Using Custom Components
    • Time to Practice - Components - Problem
    • Time to Practice - Components - Solution
    • Module Summary
    • Section Source Code & Links
  • Running an Ionic 2 App on a Real Device (or an Emulator)
    • Module Introduction
    • Where to get started
    • Building for iOS
    • Building for Android
    • Lists & Performance Issues
    • Step-by-step Guide for Building for iOS and Android
    • Module Summary
  • "The Recipe Book" App (User Input, Forms and Data Management)
    • Module Introduction
    • What we're going to build
    • Breaking the App into Pieces (Defining the App Structure)
    • Creating the required Pages
    • Implementing a Tabs Navigation
    • Setting the App Theme
    • Planning the Next Steps
    • Forms: Template-driven vs Reactive Approach
    • Understanding Ionic 2 Controls
    • Creating a Form Template (for Template-Driven Approach)
    • Registering Controls (Template-Driven)
    • Submitting the Form (Template-Driven)
    • Validating the Form (Template-Driven)
    • Handling Data with a Model for our Ingredients
    • Managing Data with a Service (Shopping List Service)
    • Saving Items with the Shopping List Service
    • Displaying Items from the Shopping List
    • Removing Item from the Shopping List
    • Adding a "New Recipe" Button and Page Transition
    • Creating a "Edit Recipe" Form (Reactive Approach)
    • Creating the Reactive Form
    • Syncing Form and HTML (Reactive Approach)
    • Add Ingredients Management to the Form
    • Creating an Action Sheet
    • Creating a Dialog (Alert) with an Input Field
    • Managing Ingredient Controls in a FormArray
    • Wiring it all up
    • Removing Ingredient Controls
    • Using Toasts to Present Short Messages
    • Adding a Recipe Model and Service
    • Adding Recipes through a Service
    • Outputting Recipes
    • Displaying Recipe Details - Template
    • Displaying Recipe Details - Styling
    • Loading the Recipe Detail Page (and passing Data to it)
    • Loading the Edit Page (and passing Data to it)
    • Initializing the Edit Form
    • Updating the Recipe through a Service
    • Sending Ingredients to the Shopping List
    • Finishing Steps
    • Module Summary
    • Section Source Code & Resources
  • "The Extended Recipe Book" App (Auth and Http)
    • Module Introduction
    • What we're going to build
    • Which New Features We're Going to Add
    • Generating the Required Pages
    • Adding a Sidemenu
    • Creating the Signup Page (and Form)
    • Creating the Signin Page
    • How Authentication Works in an Ionic 2 (Mobile) App
    • Setting up Firebase (as a Development Backend)
    • Implementing the Signup Process
    • Showing a Loader (Spinner) and Error Alert
    • Implementing the Signin Process
    • Refining the Signin Page
    • Managing the User State
    • Logging Users Out & Fixing a Bug
    • How Firebase stores the Token
    • Adding a Popover Component
    • Fetching the Token
    • Ionic 3 and Http
    • Sending a PUT Request with the Auth Token
    • More about Tokens
    • Sending a GET Request to load Data
    • Polishing the App (Adding a Spinner and Error Handling)
    • Fixing the Error Handler
    • Storing and Fetching Recipes
    • Fixing Errors
    • Seeing the App run on a Real Device
    • Module Summary
    • Section Source Code & Links
  • "Awesome Places" App (Native Device Features, Storage)
    • Module Introduction
    • What we'll build
    • Generating the required Pages
    • Creating Models for Location and Places
    • Implementing Navigation
    • Filling the "New Place" Page with Life (incl. Template-Driven Form)
    • Adding Google Maps to the App
    • Configuring our Maps
    • Allowing the User to Place a Marker on the Map
    • Passing the Chosen Location back to the Page
    • Displaying the Chosen Location
    • Using Ionic Native 3 instead of 2
    • Using a Native Device Feature: Geolocation to Locate the User
    • Polishing the Auto-Locate-Feature
    • Using a Native Device Feature: The Camera
    • Displaying the Picture
    • Managing Data with the PlacesService
    • Configuring the Single Place Page
    • Reflecting on our App
    • Using a Native Device Feature: The File System (to manage Files)
    • Ionic Storage for Ionic > 2.2.0
    • Using the Device Storage: Setting and Getting Data
    • Deleting stored Data and Files
    • Fixing the Fetching of Data
    • Fixing the Storage Issues
    • Extra: How to Debug
    • Module Summary
    • Section Source Code & Resources
  • Publishing Your App
    • Module Introduction
    • Deployment Considerations
    • Using Custom Icons & Splashscreens
    • Configuring the App
    • Build Preparations & Building for Production
    • Publishing the App in the Google Play Store
    • Publishing the App in the Apple AppStore
    • Section Source Code & Links
  • Course Roundup
    • Course Roundup
  • Bonus: Ionic 2 Tips & Tricks
    • Module Summary
    • Changing the Back Button Text
    • Changing Application-Wide Settings
    • Find out which Platform You're Running On
    • Find out which Screen Orientation You're Running On
    • Section Source Code & Resources
  • Angular Recap
    • Module Introduction
    • Understanding the Project Structure and how the App Starts
    • Understanding Components & Templates
    • What is Angular 2?
    • Understanding Databinding
    • Understanding Directives
    • Custom Property and Event Binding
    • Using Services & Dependency Injection
    • More on Angular 2
    • Module Summary
    • Section Source Code & Resources
  • Updating to Ionic 3 & Ionic Native 3
    • Ionic 3 Update Overview
    • Updating the "Awesome Places" App to Ionic 3 & Ionic Native 3
    • Ionic 3 Release Notes & Upgrade Guide
Write Your Review

Reviews