Kurs i Angular PWA med Firebase

Fortsättningskurs i Angular med fokus på PWA och Firebase som backend-system

Denna Angular fortsättningskurs, tar steget till nästa nivå och visar hur du bygger Progressive Web Applications (PWA) med hjälp av Angular på klient-sidan och Google Firebase på server-sidan.

Under kursen får du konstruera Angular applikationer som använder det populära ramverket AngularFire för att medelst RxJS tillhandahålla en real-tids ström av data from Firebase FireStore JSON databaser.

Du får också skriva NodeJS cloud functions, som tar svarar på HTTP anrop eller responderar på händelser i Firebase. Vidare, får du lära dig att ladda upp filer till Firebase Storage och rendera dessa i en webb-app.

Via Firebase Hosting, får du lära dig att driftsätta en hel Angular applikation och vad man ska tänka på. Du får också lära dig att skicka push notiser.

Kursen förutsätter att du skapar (eller har) ett personligt Google konto, som är kopplat till deras Firebase tjänst.

Detta får du lära dig
  • Firebase FireStore JSON database
  • Firebase Storage file service
  • Firebase Authentication service
  • Firebase Hosting web hotel
  • Använding av AngularFire biblioteket
  • Förstå vad en PWA innebär
  • Kunna konfigurera en service worker
  • Konfigurera push-notifieringar
  • Använda plattformstjäster, såsom kamera
Kursinnehåll

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
SnabbFakta
NamnAngular PWA med Firebase
Längd 3 Dagar
Nivå Intermediate
MålgruppAngular utvecklare
Förkunskaper God erfarenhet av att programmera i Angular
Verktyg
  • NodeJS && NPM
  • JetBrain WebStorm IDE || Microsoft Visual Code
  • Chrome || Firefox || Edge
KursDatum
DatumPlats Pris
2019-08-12Stockholm 19 000 kr
2019-09-25Stockholm 19 000 kr
2019-10-16Stockholm 19 000 kr
2019-11-12Stockholm 19 000 kr
2019-12-11Stockholm 19 000 kr

Samma-Företags Rabatt

Vi ger 20% rabatt för tillkommande deltagare från samma företag vid samma kurs-tillfälle. Läs mer här.

Företagsintern Kurs

Om du beställer en företagsintern kurs kommer vi till er och håller kursen i era lokaler. Priset bestäms av vår prismodell och baseras på antalet kursdagar, antalet deltagare, samt i förekommande fall resa och logi.

Läs mer om vår prismodell och beställningsvillkor här.

Relaterade Kurser
KursDagarNivå
Angular Grundkurs4BeginnerVisa
NodeJS2IntermediateVisa
TypeScript2 IntermediateVisa
Twitter Bootstrap1Beginner Visa
JavaScript3Beginner Visa
GulpJS2Beginner Visa