Ionic 4 Firebase with Angular-Build PWA, Native Android, iOS

Discover the essential tools used in this ionic 4 firebase with angular course, including the commander terminal for windows, and download these tools to match the setup.

download the nodejs installer for your operating system from the download section, run the installer, then use the terminal to run node -v and verify the installation.

Install the Ionic CLI and Cordova on your machine, then verify the installation by running ionic -v and cordova -v to confirm versions.

Explore how promises and async/await differ in handling asynchronous tasks, showing how async/await reduces callback hell and improves readability. Learn to use try/catch for error handling and sequence dependent operations.

Learn to create a new Ionic project with Ionic start, specify the framework via the front-type attribute, choose a side menu template, and run a live-reloading development server.

Explore the Ionic 4 Firebase with Angular project structure, reviewing key files like package.json, tsconfig, angular.json, environment configs, assets, modules, routing, and the distinction between www, platforms, plugins, and resources.

Preview your app UI in the browser and on Android or iOS with Ionic Lab, install the lab package when prompted, and compare layouts side by side.

Learn how the ion split pane adapts from hamburger menus on small screens to a side panel on larger screens, with breakpoint customization and options to keep the menu visible.

Style the ionic toolbar by applying the primary color with css variables and white text, then use android/web and ios classes to tailor the toolbar per platform, keeping iOS distinct.

Create a new Firebase project, add a web app and copy the config, then enable email/password and Google authentication, and set up Cloud Firestore in test mode.

Install and configure the Firebase and Firestore libraries in an Angular Ionic app, import the AngularFire modules, initialize the app with environment configuration, and verify the app runs.

Design and implement a responsive login form in ionic 4 with angular, featuring a login page, floating labels, email and password fields, and adaptive grid layout for various screens.

Compares template driven and reactive forms in Angular and demonstrates building a login form with form group, form controls, validators, and value changes to track state and enable login button.

Learn to display dynamic login form validation messages in an Ionic 4 Angular app by mapping form control errors to a central validation messages object and using a helper service.

Highlight login form validation in an Ionic 4 Angular app by showing email and password errors and styling with the error-message class, while addressing cache issues for real-time updates.

Create a signup page in an Ionic 4 Angular app, enable navigation from the login page, and implement a reactive signup form with validation messages.

Implement sign up with email and password using firebase in an angular app, including sending verification emails, showing toasts and a spinner, clearing fields, and navigating home on success.

Implement a logout feature by creating a logout service that calls AngularFire signOut, wiring a homepage logout button to display a toast on success and navigate to the login page.

Implement Firebase login with email and password in an Ionic 4 Angular app, including input handling, login spinner, navigation to the homepage, and Firebase error messages.

Learn how to track Firebase auth state with an AngularFire observable, gate navigation to the home or login pages, and hide the hamburger menu when not logged in.

Learn how to implement Google login for the web in an Ionic 4 Firebase with Angular project, including the Google login button and Firebase web provider.

Set up Android Studio for native Android development, install the Java JDK and verify with java -version, configure environment variables, and create emulators to test your app.

Deploy an ionic app to a real Android device and style the native status bar with a hex color using the status bar plugin.

Implement native Google login for Android and iOS in an Ionic Firebase app by configuring Firebase console, installing the Google Plus plugin, and platform detection for native vs web login.

Implement native Google logout for Android and iOS by invoking the Google Plus service on native platforms, using a helper to detect native context and test with cordova run Android.

Build a profile page in Ionic 4 with Firebase and Angular, display user name, email, and photo, use a default avatar when missing, and show a loading spinner.

Create a products collection in firestore, add documents with name, price, size, and brand, then fetch the list as an observable with snapshotChanges and map to include IDs on homepage.

build the product list ui on the homepage using ionic components, fetch and display products with a spinner, pull-to-refresh, detail icons, and an empty state message.

Design and implement an ad product form in an Ionic Angular app using reactive forms, featuring top-right navigation, validation messages, and a responsive, user-friendly UI.

Add a product to the Firestore database using a generic service that inserts data into any collection and fetches all data by collection, with toast feedback.

Apply a minor UI upgrade to the product list by switching to a single line list with multiple items, ensuring consistency across browser and iOS.

Design a product detail page in ionic angular by adding a back button, showing a loading spinner while fetching data, and rendering a key/value list from the product detail object.

Implement update product form in an Ionic 4 Angular app by adding edit and delete actions, toggling to the edit form, and wiring validation and a save action.

Implement an update product function in firestore db service to update a product document with changed fields, using async/await, and reflect updates in the detail view with toasts and navigation.

Implement delete functionality for products in Firestore using a dedicated service, with a confirmation alert, delete call, and toast notification plus navigation back to the home page.

Build an Ionic 4 Angular progressive web app in production mode, then serve the compiled static assets and index.html with a Node.js Express server on port 5000.

Customize your native app icon and splash in Ionic 4 by replacing defaults, generating multi-size resources with Cordova resources, and disabling the splash screen loader for a clean launch.

Build your Android app in production and release mode using the Ionic Cordova build command, then sign the APK with your key for Play Store submission.

Create and sign your Android app using a custom keystore, configure sha-1 fingerprints in Firebase, and prepare a signed APK for Play Store deployment.

Explore the source code for building a cross-platform app with Ionic 4, Firebase, and Angular, including PWA deployment and native Android and iOS builds.