Ionic 5 - Build iOS, Android & Web Apps with Ionic & Angular

Build Native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework.
 

What you'll learn

  • Build native apps and progressive web apps from one and the same codebase
  • Dive deeper into Ionic to learn more about core and advanced features
  • Build native apps for iOS and Android, using Angular and the powerful features Ionic offers
  • Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms

  • Course Introduction
  • What Is Ionic?
  • Join our Online Learning Community
  • A Closer Look at the Ionic Platform
  • What is Angular?
  • Node.js Download
  • Our First Ionic App!
  • The History of Ionic
  • Ionic 4+ vs Ionic 3
  • How to Build Native Mobile Apps with Ionic
  • Comparing Ionic to Alternatives
  • Course Outline
  • How To Get The Most Out Of The Course
  • The Course Source Code

  • Module Introduction
  • Core App Building Blocks
  • Under the Hood of Ionic Components
  • Setting Up a Non-Angular Ionic Project
  • Where to Learn all about Ionic Components
  • Using Basic Ionic Components
  • Component Categories
  • Using the Ionic Grid
  • Adding Icons & Using Slots
  • Using CSS Utility Attributes
  • Using Ionic Elements like "Normal" HTML Elements
  • Validating User Input
  • Creating Ionic Elements Programmatically
  • Finishing Up the Base JavaScript Logic
  • Finalizing the Layout
  • Use the right Ionic Import
  • Using Controller Components
  • Practicing Ionic Components
  • Why Angular?
  • Useful Resources & Links

  • Module Introduction
  • What is Angular?
  • Angular SPAs & Ionic
  • Understanding Components
  • Installing Angular with the CLI
  • Installing the IDE
  • Understanding the Folder Structure
  • The App Component
  • Creating Our First Component
  • Cross Component Communication with Property Binding
  • Understanding Directives & String Interpolation
  • Handling User Input
  • Understanding Event Binding
  • Local References
  • Understanding Two-Way-Binding
  • Passing Data Around with Custom Events
  • Implementing Routing
  • Setting Up Services
  • Using Services with Dependency Injection
  • Working with Angular Lifecycle Hooks
  • Adding a Person with Services
  • Navigating between Components
  • Removing Items Upon a Click
  • "Push"ing Data Around with Subjects
  • More on RxJS & Observables
  • Sending Http Requests
  • Showing a Placeholder Whilst Waiting for a Response
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • Why Use Angular?
  • Creating a New Ionic Angular Project
  • Important: CSS Utility Attributes
  • Analyzing the Created Project
  • How Angular & Ionic Work Together
  • Important: Extra Routing Modules
  • Adding & Loading a New Page
  • Using Angular Features on Ionic Components
  • Setting Up Angular Routes
  • Managing State with Services
  • Extracting and Displaying Route Param Data
  • A Potential Bug (+ Fix)
  • Navigating Between Pages
  • Deleting a Recipe
  • There's a Bug!
  • Injecting Ionic Controllers
  • Angular Components vs Ionic Components
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • General Information
  • Creating an Android App
  • Running the App on a Real Android Device
  • Creating an iOS App/li>
  • Running the App on a Real iOS Device
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • Error Messages & console.log()
  • Using the Browser DevTools & Breakpoints
  • Using VS Code for Debugging
  • Debugging the UI & Performance
  • Debugging Android Apps
  • Debugging iOS Apps
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • How Routing Work In An Ionic + Angular App
  • Ionic Page Caching & Extra Lifecycle Hooks
  • Planning the Course Project
  • Creating Our App Pages
  • MUST READ: Ionic 5 and Routing / Lazy Loading
  • Adjusting Our Main Routing Configuration
  • Understanding Ionic Tabs
  • Preparing Data & Services for the Project
  • Outputting "Places"
  • Adding Forward Navigation
  • Going Back with NavController
  • Practicing Ionic + Angular
  • Navigating via Toolbar Buttons
  • A Bug with Ionic
  • Extracting the ID of Loaded Places
  • More Practicing!
  • Optional: Assignment Solution Code
  • Adding a SideDrawer
  • Opening + Closing the SideDrawer
  • Adding Links & Switching Pages
  • Adding the Auth Service
  • Adding an Auth Guard
  • Opening a Modal
  • Closing the Modal & Passing Data
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • Attributes & Slots
  • Ionic Grid Basics
  • Controlling Grid Column Sizes
  • Controlling Grid Alignment
  • Responsive Grid Sizing
  • Grid Summary
  • ion-list vs ion-grid
  • ion-label & ion-item
  • ion-text
  • Swipeable List Items
  • Swipeable Bookings
  • Understanding Virtual Scrolling
  • Implementing Virtual Scrolling
  • Virtual Scrolling Bugs
  • Adding Image Elements
  • Segmented Buttons
  • Adding a Spinner
  • Using the Loading Controller
  • Using the ActionSheet Controller
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • How Styling & Theming Works in Ionic Apps
  • Docs & Utility Attributes
  • Setting Global Theme Variables
  • Setting Global Styles
  • Setting All Colors at Once
  • Setting Platform-Specific Styles
  • Styling Core Components with Variables
  • Missing iOS Icons
  • Adding Custom CSS Rulest
  • Component-specific CSS Variables
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • User Input Requirements
  • Setting Up a Form Template
  • Angular 8 & @ViewChild()
  • Adding a Template-driven Form
  • Handling Validation
  • Switching Between Auth Modes
  • Finishing the Auth Form
  • Starting Work on a New Offer Form
  • Finishing the Offer Form Template
  • Syncing the Form to the Template
  • Finishing the New Offer Form
  • Edit Form Challenge
  • Adding the Edit Offer Form
  • Starting with the Booking Form
  • Working on the Book Place Template
  • Configuring the Date Controls
  • Avoid Errors
  • Validating & Submitting the Form
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • What is State?
  • Adding New Places
  • Using RxJS Subjects for State Management
  • Passing Data via Subjects & Subscriptions
  • UI State in Action
  • Updating Places
  • UI State with Bookable Places
  • Filtering & Navigation
  • Booking Places
  • Fixing a Bug
  • Canceling Bookings
  • Finishing Touches
  • Useful Resources & Links

  • Module Introduction
  • How To Connect to a Backend
  • Setting Up Firebase
  • Sending Data via Http
  • Using Response Data
  • Fetching & Displaying Data
  • Updating Places
  • Fetching Data in Multiple Places
  • Loading Data in a Single Place
  • Updating Places Correctly
  • Error Handling
  • Fetching Single Places
  • Adding a Booking
  • Fetching Bookings By User
  • Deleting Bookings
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • API Setup
  • Angular 8 & @ViewChild()
  • Adding a LocationPicker Component
  • Opening the Map Modal
  • Adding the Google Maps SDK
  • Rendering a Map
  • Picking Locations via a Click on the Map
  • Finding the Address for a Place
  • Fetching a Static Image URL
  • Displaying a Place Preview
  • Removing the Click Listener
  • Submitting the Location
  • Outputting Address & Map
  • Re-using the Maps Modal
  • Useful Resources & Links

  • Module Introduction
  • Understanding Capacitor & Cordova
  • Using the Docs()
  • Using Capacitor Plugins
  • Getting the User Location
  • Testing the Location Feature
  • Angular 8 & @ViewChild()
  • Starting With the Image Picker
  • Taking Pictures
  • Avoid Distorted Pictures
  • Detecting the Platform Correctly
  • Adding a Filepicker Fallback
  • Adding a Filepicker Fallback
  • Converting the Image String to a File
  • Storing the Image in the Form
  • Useful Resources & Links
  • Capacitor v1 & PWA Elements
  • Using PWA Elements
  • Improving the ImagePicker Component
  • MUST READ: Firebase Cloud Functions Billing
  • Adding Server-side Image Uploading Code
  • Adding Image Upload
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • How Authentication Works
  • Firebase API Key
  • Adding User Signup
  • Refactoring the Authentication Code
  • Adding User Login
  • Managing the User with a Subject
  • Storing the Token in Memory
  • Using the ID Observable Correctly
  • More userId Usage
  • Fixing the Subscription
  • Using the userId Everywhere
  • Storing Auth Data in Device Storag
  • Adding Autologin
  • Using Autologin
  • Adding a Reactive Logout System
  • Adding Autologout
  • Requiring the Auth Token on the Backend
  • Sending the Auth Token to the Backend/li>
  • More Token Usage
  • Adding Server-side Image Uploading Code
  • Optional: Check Auth State When App Resumes
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • Preparing App Configs
  • Custom Icons & Splash Screens
  • Android Deployment
  • iOS Deployment
  • Web Development
  • Useful Resources & Links

  • Course Roundup

  • Bonus: More Content

Requirements

  • Angular fundamentals are required, though a brief refresher is also provided in the course
  • Basic HTML, JS and CSS knowledge is required
  • NO advanced Angular knowledge is required