Course in Angular PWA using Firebase

Intermediate course in Angular focusing on PWA and using Firebase as its backend system

This Angular intermediate course, takes you to the next level and shows you how to design Progressive Web Applications (PWA) using Angular for the client-side and Google Firebase on the server-side.

During the course, you will learn how to construct Angular apps that are using the popular framework AngularFire that uses RxJS to provide real-time data streams from a Firebase FireStore JSON database.

You will also learn how to develop NodeJS cloud functins, which either responds to HTTO requests or Firebase events. In addition, you will learn how to upload files to Firebase Storage and render these in a web app.

Using Firebase Hosting, you will learn how to deploy a complete Angular app and things to consider. You will also learn how to send push notices.

The course requires that you will create (or already owns) a personal Google account, which is connected to the Firebase service.

This is what you will learn
  • Firebase FireStore JSON database
  • Firebase Storage file service
  • Firebase Authentication service
  • Firebase Hosting web hotel
  • Using the AngularFire library
  • Understand what a PWA means
  • Know how to configure a service worker
  • Configure push-notifications
  • Using platform services, such as camera
Course Contents

Concepts

  • Modern web architecture
  • Single Page Applications (SPA)
  • Progressive Web Applications (PWA)
  • Angular evolution
  • Angular eco-system
  • JSON databases
  • REST web services
  • Server-less
  • Backend-as-a-Service (BaaS)

Introduction to Firebase

  • What is Google Firebase
  • Authentication
  • FireStore JSON database
  • Firebase functions
  • FireStorage file service
  • Firebase Hosting web hotel
  • Firebase RTDB (the legacy db)
  • Overview of the Firebase API and documentation
  • The key difference of the client vs. admin API
  • Configuration of a JS/TS Firebase project

Firebase HTTP Cloud Functions

  • Configuring HTTP functions
  • Using TypeScript
  • Using ExpressJS for REST web services
  • Testing functions
  • Deployment and e2e test of HTTP functions

RxJS Refresher

  • What problem do RxJS solve
  • Sources
  • Subscription
  • Filters
  • Transformers
  • Combiners
  • Common idioms

Introduction to AngularFire

  • What is AngularFire
  • Installation and configuration
  • Overview of the RxJS based API

Authentication

  • Firebase authentication offerings
  • Configuration
  • Email & password based authentication
  • Google OATH based authenticaiton
  • Overview of working with other OATH providers
  • Authentication using AngularFire
  • Implementing an Angular authentication service
  • Configuring simple access rules for database and storage

FireStore JSON Database

  • Collections
  • Supported data types
  • Document ids
  • Using AngularFire
  • Fetching all documents of a collection
  • Fetching a single document based on its id
  • Document queries
  • Adding documents with a given id
  • Adding documents with a generated id
  • Updating a document
  • Implementing an Angular FireStore service
  • Fetching documents simultaneously from two or more collections
  • Best practices of using the Angular async pipe
  • Best practices of avoiding explicit subscription

Firebase Hosting Web Hotel

  • The hosting offering
  • Free HTTPS certificate
  • Powerful CDN
  • Configuration
  • Testing
  • Deployment
  • Managing more than one hosting instance
  • Attaching your own domain to a hosting instance

FireStorage File Service

  • Storage organization
  • Folders
  • Uploading a file
  • Obtaining the download url of a file
  • Handling file meta-data

Firebase Event Triggered Cloud Functions

  • Trigger on FireStore event
  • Trigger on FireStorage event
  • Trigger on FireAuth event
  • Organization of cloud function source code
  • Sending email from a cloud function

Firebase Rules

  • Authortization rules
  • Predefined rule variables
  • Rule functions
  • Rules simulation
  • Rules propagation/inheritance
  • Conjuntions and disjunction rules
  • Validation rules

Firebase RTDB

  • How RTDB differs from FireStore
  • Are there any use cases for RTDB, now when FireStore exists
  • How to organize data in a gigantic JSON tree

Progressive Web Application

  • What more exact do we mean with a PWA
  • Reliable, even when the network conditions are uncertain
  • Fast, respond quickly
  • Engaging, feel lika a native app
  • Configuring an Angular project for PWA
  • Running a PWA locally, using HTTPS
  • Responsive design
  • CSS Media queries
  • JS Media queries
  • Implementing support for install to desktop/launcher
  • Using Google Lighthouse to measure a PWA

Service Workers

  • The role of service workers in a PWA
  • Configuration
  • The manifest
  • Caching configuration
  • Angular (ng) service worker
  • Testing and exploring an app with service worker

Push Notification

  • What is push notification
  • Sending messages directly to a device
  • Publishing messages to a topic
  • Implementing ask for permisssion
  • Handling a device token
  • Firebase push notification support
  • Firebase (fb) service worker
  • Combining the ng and fb service workers
  • Subscription to topics using cloud functions
  • Pushing messages
  • Message configuration
  • Receiving messages in the foreground
  • Receiving messages in the background

Accessing native services

  • Getting the current position
  • Subscribing to position updates
  • Using the camera
  • Taking pictures and uploading to Firebase Storage

Introduction to the Ionic Framework

  • Properties of Ionic version 4
  • Using the Ionic CLI
  • Layout samples
  • Widget samples
  • Using Ionic to design a PWA
Facts
NameAngular PWA using Firebase
Duration 3 Days
Level Intermediate
AudienceAngular developers
Prerequisites Working knowledge of programming in Angular
Tools
  • NodeJS && NPM
  • JetBrain WebStorm IDE || Microsoft Visual Code
  • Chrome || Firefox || Edge
On-Site Course

If you order an On-Site course, we will come to you and hold the course in your office. The price is determined by our price model and is based on the number of course days, number of participants and any travel and lodging.

Read more about out price modell and term of sales here.

Related Courses
CourseDays Level
Angular Basics4BeginnerShow
NodeJS2IntermediateShow
TypeScript2 IntermediateShow
Twitter Bootstrap1Beginner Show
JavaScript3Beginner Show
GulpJS2Beginner Show