 Courses from Jorge Vergara

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Full Stack Web Applications with Angular and Firebase

Protect yourself from unexpected charges by learning how to use Firebase emulators. 

By using Firebase emulators you no longer have to create a second dev firebase project to avoid using production data. You also don't run the risk of having a cloud function crash and run up a huge bill.

In this course, you'll learn how to set up and use Firebase's authentication, function, and Firestore emulators. You will also learn how to safely set up Cloud Function emulation, import seed data into your emulators, and disable the emulators in production.  

By the end of this course, you'll be able to confidently set up a safe environment for testing in your own applications!

firebase

Local App Development with the Firebase Emulator Suite

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Learn to use the `SwUpdate` class from the Angular Service Worker to subscribe to application updates.

We will use the `available` property on the `SwUpdate` class to get the new application update and notify the user so that they can update their PWA.

Subscribe to Application Updates in an Angular PWA with SwUpdate

AngularFire is the officially supported AngularJS binding for Firebase. Firebase is a backend service that provides data storage, file storage, authentication, and static website hosting for your Angular app.

angularfire

You'll learn the 2 Observables that Firebase Authentication provides to subscribe to the authentication state of your application, `authState` and `user`.

You'll see how they both return the same `User` object from Firebase Authentication.

And you'll learn that the difference is that `authState` triggers when the user logs in, or logs out of the application, while `user` is called both of those times, and also is called when Firebase refreshes the user's authentication token.

As a personal guideline, if I need to do an operation when the user's token is refreshed (_for example, update a 3rd party service_) I'll use `user`, if not, I'll default to `authState`.

Choose Between authState or user to Subscribe to Firebase Authentication State Changes

Get familiar with the demo application I've created to teach you about Firebase's emulators as well as the tools that we will be using.

Overview of the demo application and tools we'll use

Welcome to my introductory course on the Firebase Emulator Suite. This course is broken down into 3 parts.

In the first part, we'll go through the process of initializing the emulator and the different APIs we'll use, like, Firebase Authentication, Firestore, and Cloud Functions.

Then, we'll cover the different types of cloud functions there are, how we call them, and how each type is handled differently by the emulator.

And lastly, we'll talk about properly configuring the emulator for things like having starter data so that you don't have to start it from scratch, or setting it up to only work in development mode.

My hope is that this course gives you enough tools to set up a local, safe environment where you can develop your app without being overly worried about surprise credit card charges.

Thank you for watching and I hope you enjoy the course 

Intro to Use the Firebase emulator to create safe test environments for Angular

Emulator data is lost on restart since it is all in memory. In this lesson we'll take advantage of Firebase's emulator export script and `--import` flag so that we will always have seeded data when we start our app.

Import seed data for your Firebase emulators

You are not supposed to run the Firebase emulators in production. In this lesson, you will learn how to set up environment variables to prevent emulator initializers from being executed when deploying your app. 

Disable Firebase emulators when in production

Learn how to listen for changes in your Firestore database and trigger cloud functions.

Watch for changes and trigger functions with the Firestore emulator

In this lesson you will learn how to use Firebase callable functions as well as learn how to initialize the functions emulator.

Create and use callable functions with the Firebase function emulator

Learn how to initialize Firebase's cloud functions in your app. You will also test out your first cloud function with the Firebase Emulator Suite.

Get started with Firebase HTTP Cloud Functions

Firebase has two methods for creating HTTP functions, `onRequest` follows a REST pattern and `onCall` gives you access to the Firebase JavaScript SDK. 

When to use the onCall or onRequest Firebase Cloud functions

Learn about the various types of cloud functions that the Firebase SDK offers.

Overview of the different Firebase cloud functions

Learn how to connect the Firestore emulator and explore it further in the Firebase Emulator Suite.

Initialize the Firestore emulator

In this lesson you'll learn how to use the `connectAuthEmulator` function from Firebase's authentication emulator and the Firebase Emulator Suite to test out auth in development.

Setup the Firebase authentication emulator

In this lesson you will learn how to set up the various Firebase emulators. You will also learn how to run the emulators and view the Emulator UI. 

Initialize Firebase emulators in your app

Bite-size video tutorials for badass web developers.

egghead

Both `BehaviorSubject` and `Subject` are a type of Observable that we can use to stream data throughout our application.

The main difference, is that the `BehaviorSubject` has an initial value, and when you subscribe to it, it will give you
the last value it emitted.

```ts
  myBehaviosSubject$ = new BehaviorSubject<string>('I have an initial value');
  myRegularSubject$ = new Subject<string>();
}
```

The regular `Subject` doesn't have an initial value, and even if it has been emitting data, when you subscribe to it you won't get any data until it emits something again.

What is the difference between a BehaviorSubject and a regular Subject?

There are 2 different ways to get a document's ID when using `@angular/fire`.

You can add the parameter `{ idField: 'id' }` to your collection when using the `collectionData()` observable.

You can also use the observable `collectionChanges()` and access the internal metadata of the document to manually get the ID and add it to the resulting object.

Code sample: https://github.com/javebratt/angularfire-idField

Access a Firebase Document's ID Even when It's Not Stored in the Document with angularfire

We want to secure our file storage so not just anyone can upload files to our Cloud Firestore.

We'll go through Cloud Storage Security rules to add rules and restrictions to our bucket server-side. You'll notice that the default rules for storage are the same as the database in that they are open to anyone for 30 days.

There are a few restrictions that we will implement:
    - Only allowing authenticated users to upload files.
    - Restrict the size of the files we want to upload.
    - Restrict the type of files we want to upload. (__i.e: only accept images or pdfs__)


Restrict File Uploading to Firebase Cloud Firestore with Cloud Storage Security Rules

Users can now see that files are attached to tasks but they can't do much with that. We need to let users be able to download the files so we'll do that in this lesson. 

We'll create a button for users to download the files they have in their tasks. We take a JavaScript first approach here by creating an anchor tag and adding all of the properties we need to allow for a download.


Download Files from Firebase Cloud Storage in Angular

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Now that file uploading works, we want to actually show that a task has files associated with it. To do this we will need to update the task object with a file property that we'll push files too.

In this lesson, we'll use Cloud Storage methods like getDownloadUrl() to get the file's download URL from our bucket.

Then we'll add that file's information to our task and persist it in the database to show the list of files in a task to the user.

While we do this, you'll see how we can easily add a spinner when files are being uploaded using Ionic loadingController.


Jorge Vergara

Search Results