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

RapidDev Pro, Full Stack Developer & Tech Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
42 Lessons (4h 40m)
    • 1. Introduction

      1:53
    • 2. Tools used in this course

      0:23
    • 3. Install Nodejs and npm

      0:38
    • 4. Install Ionic CLI and Cordova

      0:36
    • 5. Promise vs async await

      13:33
    • 6. Project Setup And Running App

      2:47
    • 7. Project Structure Overview

      6:09
    • 8. Ionic Lab

      2:18
    • 9. Ion Split Pane

      2:28
    • 10. Toolbar Styling

      2:58
    • 11. Firebase and Cloud Firestore ( NoSQL ) DB setup

      3:27
    • 12. Configure Firebase and Firestore Library in Ionic App

      2:57
    • 13. Responsive Login Form UI

      9:11
    • 14. Login Form Validation Part-1

      10:04
    • 15. Login Form Validation Part-2

      15:00
    • 16. Login Form Validation Part-3

      2:41
    • 17. Signup Page

      7:27
    • 18. Firebase SIgnup/Register with Email and Password

      13:57
    • 19. Firebase Logout

      3:36
    • 20. Firebase Login With Email and Password

      6:00
    • 21. Firebase Auth State

      14:07
    • 22. Firebase Google Login Web

      6:59
    • 23. Android Studio Setup and Set Environment Variables

      4:09
    • 24. Run Ionic App on Real Android Device and Style Native Status Bar

      5:41
    • 25. Firebase Google Login For Native Platform ( Android, iOS )

      15:17
    • 26. Firebase Google Logout For Native Platform ( Android, iOS )

      3:29
    • 27. Profile Page

      13:53
    • 28. Fetch Product List From Firestore DB

      9:18
    • 29. List Product UI

      10:10
    • 30. Add Product Form UI

      10:30
    • 31. Add Product To Firestore DB

      9:29
    • 32. Get Product By Id From Firestore DB

      8:28
    • 33. List Product UI Update

      1:29
    • 34. Product Detail Page UI

      7:18
    • 35. Update Product Form UI

      12:04
    • 36. Update Product Firestore DB Service

      11:35
    • 37. Delete Product From Firestore DB

      7:43
    • 38. Build Ionic App as PWA in Production Mode and Serve with Node.js Server

      6:02
    • 39. Customize icon and splash screen for Native Platform (Android, iOS)

      4:47
    • 40. Build APK in production and release mode

      2:06
    • 41. Create Keystore, Sign APK with Keystore and Confgire SHA-1 Key to Firebase

      6:40
    • 42. Source code

      0:34

About This Class

Write once, run anywhere: Ionic 4 Angular with Firebase and Cloud Firestore NoSQL DB. Build Real World ionic 4 with Firebase Auth and Firestore DB


What is Ionic Framework ?

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

What is Angular?

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

ϟ About FIrebase Cloud Firestore

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.


Advantages of Ionic Framework:

 Cross-platform

Build and deploy apps that work across multiple platforms, such as native iOS, Android, desktop, and the web as a Progressive Web App - all with one code base. Write once, run anywhere.

 Web Standards-based

Ionic Framework is built on top of reliable, standardized web technologies: HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.

 Beautiful Design

Clean, simple, and functional. Ionic Framework is designed to work and display beautifully out-of-the-box across all platforms. Start with pre-designed components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme.

♦ Simplicity

Ionic Framework is built with simplicity in mind, so that creating Ionic apps is enjoyable, easy to learn, and accessible to just about anyone with web development skills.

♦ Ionic CLI

The official Ionic CLI, or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more .


You will learn the following things in the course:
♦ Build a real-world ionic app with angular and firebase, cloud firestore DB.

♦ Single codebase, run on any platform: web, native android, ios.

♦ Firebase email password authentication in ionic.

♦ Firebase Google login for Web.

♦ FIrebase Google login for native android, ios.

♦ CRUD operations to cloud firestore db in ionic app.

♦ Build ionic app as PWA.

♦ Build APK for production & release.

♦ Create a beautiful and precise app icon and splash screen.

♦ Deploy the app to native devices.

♦ Serve ionic app with Nodejs Express.

♦ Deep understanding of ionic UI components and its behavior on different platform such as android, ios.

♦ Various Module loading Strategy in Angular and how ionic uses it.

♦ Angular concepts such as routing, modules, components, services, injectables, conditional classes and much more.

♦ Powerful reactive form validation using Angular in Ionic.

♦ Responsive design with Ionic Grid.

♦ Ionic Split Pane View.

♦ Ionic Pull Down To Refresh.

♦ Create keystore and sign APK

♦and more