The Ionic4 Master Course will teach you the fundamentals of full-stack cross-platform app development, using the combined powers of Angular & Firebase.
🗿 What will I build?
This is a project-based course that starts from zero and works up to an authenticated realtime todo list with push notifications. While that may not sound super exciting, it provides an ideal foundation to showcase the UI features offered by Ionic and connent them to live cloud infrastructure.
🐌 What will I Learn?
- Installation and Setup
- Ionic4 Component APIs
- Routing and Navigation
- Reactive Forms
- CSS Themes
- Platform Checking
- Push Notifications
- Cloud Function integration with NodeJS
- Firebase Auth, Firestore, and Cloud Messaging
- How to release Ionic to the Google Play Store and the Apple App Store
- And more…
🤔 Is this Course Right for Me?
This course is an intermediate level project-based course where you learn by doing. It assumes you have at least basic knowledge of programming, ideally with web tech like JavaScript, CSS, and HTML. It is fast-paced and similar to my style on YouTube, but far more in-depth and comprehensive.
🏎️ Test Drive
A live version of the app is currently available as a Progressive Web App
Chapters
- Resources - App tour and course resources
- What is Ionic - Ionic 4 technical overview
- Migration from Ionic v3 to v4 - Migration tips for Ionic 3 developers with existing apps
- Ionic Setup - Ionic installation and setup
- Firebase Setup - Firebase iOS/Android native app setup
- AngularFire Setup - Setup and installation of @angular/fire
- Code Organization - Optimize your Angular code for developer happiness
- Components - A gentle introduction to Ionic components with ion-menu
- Component APIs - How to use component APIs
- Routing and Navigation - Using the Angular Router to navigate between screens
- Ionic Storage - Manage app state between sessions with Ionic Storage
- Themes - Manage themes in Ionic with CSS
- Router Guards - Protect screens with Angular Router Guards
- Primer - An introduction to User Authentication
- Anonymous Auth - Simple guest login with Firebase Anonymous Auth
- User Profile - Build a reactive user profile in Ionic
- OAuth Web - Google Sign-In for progressive web apps
- OAuth Native - Google Sign-In for native iOS & Android apps
- User Router Guard - Prevent unauthorized user access to specific screens
- Primer - An introduction to Firestore and Realtime Data
- Database Service - Create an Angular Service to simplify database business logic
- Firestore Queries - How to query the database
- Observable Loop - Iterate over async realtime data
- Update data - Write data to the database
- Custom Events - Listen to custom events on an ion-segment
- Filter Data - Filter realtime data with a BehaviorSubject
- Modal - Pass data to an Ionic Modal
- Reactive Forms - Update data via Angular Reactive Forms
- Dynamic Routing - Navigate to a dynamic Firestore ID with Angular
- Security Rules - Secure your backend data with Firestore rules
- FCM Primer - An introduction to Firebase Cloud Messaging
- Cloud Functions - Use Firebase Cloud Functions to send push notifications
- Web Notifications - Ionic push notifications on the web
- Native Notifications - Ionic push notifications on iOS & Android
- Web Deployment - Deploy Ionic to Firebase Hosting as a PWA
- iOS Deployment - Deploy Ionic to the Apple App Store
- Android Deployment - Deploy Ionic to the Google Play Store