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

typescript

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

ionic

firebase

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

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

Welcome to my course on building web applications with Angular and Firebase. This course is broken down into 4 parts.

In the first part, we'll go through the process of reviewing our demo application, the tool choices we have for UI components, and initializing our Firebase application. We'll also take a quick look at the Firebase console and all the services available for us to use, like Firebase Authentication, Cloud Firestore, and Cloud Storage.

Then, we'll go through working with Cloud Firestore, we'll interact with the database to create, read, update, and delete documents.

We'll also work with Firebase Authentication, you'll learn how to build the basis of your authentication system, like creating users, logging into the application, and resetting users' passwords. We'll also cover a bit about securing our database.

And lastly, we'll talk about Cloud Storage and see how we can upload and download files in our application, and how we can create restrictions on who can upload files, the type of files we can upload, and even restrict the size of the files.

My hope is that this course gives you enough tools to start building your own applications with all the modern features users expect these days.

Thank you for watching and I hope you enjoy the course.

Intro to Full Stack Development with Angular and Firebase

You'll learn how to set up a new Firebase project and connect it to your Angular application, by initializing Firebase Authentication, Firestore, Storage, and Firebase Hosting.

With the `ng` CLI tool you'll run `ng add @angular/fire`. This kicks off an interactive CLI that lets you pick the Firebase API you want to include in your application. 


Set up a new Firebase project and connect it to your Angular application

We'll go through the Firebase console and explore the services we'll use. We'll take the time to prepare these services like creating a new database, a storage bucket, and adding email and password as an available authentication method.

Explore and Prepare the Firebase Services We'll Use in the Firebase Console

We'll go through a quick intro to the 2 different types of data in Firestore: documents and collections. A document is an object and a collection is a list of documents.

Then we'll learn how to fetch a collection of documents from Firestore and display it in our application. We'll do this through API that Firestore offers us. In this case we'll call `collectionData` and pass in the `collection` function with a key of tasks that matches our collection in the Firestore.


Fetch a List of Firebase Documents with Firestore collectionData

We'll use the `ngSwitch` directive to show a different badge next to the task depending on the status of the task. Then for each status we need to handle we'll add a `*ngSwitchCase` that matches that status.

Dynamically Display a Task Status with ngSwitch

We need to add a new tasks page so we'll add a button on the home page and link to this new page with `routerLink`.

Then we'll use the Angular CLI to create a new page with `ng generate`. Finally we'll add the page route to our `routing.module`.


Create a New Task Page with Angular CLI ng generate

We'll create the template for our new page and set everything up so that we can use this page to create new tasks. The first thing we will do is create a BehaviorSubject task variable that we'll store form values in to send to Firebase.

Because we are using the ionic framework we'll lean heavily into this when creating our templates. You'll see how we bind text values to the object we'll send to Firebase as well as a selector component that will use `ion-segment`.

We'll also see a tip on handling the `async` pipe in a top container in our template so that we don't have to manually add it everywhere we'll render a property from an observable


Create a New Task Form Page Template with Ionic

We have a new task form but currently it doesn't do anything. In this lesson we'll implement the save button that will add the task to Firebase.

First, we'll create a reference to our tasks collection in Firestore, and then push a new document to that collection with the `addDoc` function Firestore provides us.

After the document is in the database, we'll use the `updateDoc` function to edit that document and add the document's ID as a property on the document.


Add a New Document to a Collection in Firestore from Angular with Firestore addDoc

We'll evaluate 2 good practices when adding a new task.

First, we'll show the users a toast alert to notify them that their document was saved in the database. We'll do this with a toast component that ionic makes available to us

And second, we'll use Angular's router to navigate the user back to the task list.

Notify Users Their Database Operation Worked with a Toast Alert

We'll navigate our users to a task's detail page. To do so we want to reuse the task page that we built for creating new tasks. The difference here is we'll check the route if it includes a task Id, if it does we will grab that task from our database. 

To do this we will use Angular's `ActivatedRoute` class in the `ngOnInit` lifecycle method to decide when to show the form for creating a new task, and when to populate it with an existing task's data.

Firebase gives us a handy `docData` function that we can access the task data via the id and subscribe to it.


Navigate Users to a Tasks Detail Page and Load Task via Route Param

We'll go through the process of adding a new property to our task and how to update our task document in the database. Because we are using a `BehaviorSubject` we can utilize the `.next` function on the `task$` to add the assignee.

We'll also explore the use of action sheets to use as selectors.


Add New Properties to an Existing Document in Firebase through a Ionic Action Sheet

We'll explore what happens when we don't differentiate between a document update and creation leading to duplicated documents in our database.

We'll see how to fix this and make sure that when we send an update to Firestore we don't duplicate data but update the actual document in the database. In our `saveTask` function we will check to see if the tasks id is `new` and if it is we'll keep the functionality we have. If the task id isn't `new` then we have a task already and we'll use `updateDoc` to update that existing task.


Avoid Duplicating Documents in Firestore

We'll learn how to delete documents from the database. This action is pretty straight forward, we'll add a delete button that will call Firestore `deleteDoc` and pass in the task id.

We'll also explore a good practice when performing destructive operations (__like deleting database objects__) of adding a confirmation step to make sure our users don't delete objects by accident. We'll do this with the Ionic Alert Controller.


Delete a Document with a Confirmation Step from Firestore

Now it's time to create a template for our authentication page using Ionics page generation CLI.

We'll show how to use the same page for all of our authentication operations by reading the parameters from the URL and displaying the right form elements and buttons depending on the parameters present.


Create an Authentication Page Template with Ionic Page Generation

In our application, we have a login page but it currently doesn't do anything. We need to let users login, and after successful login, we'll redirect them to the tasks page.

To do this, we'll inject the AngularFire Auth dependency and call `signInWithEmailAndPassword` when the user clicks the login button. 


Sign in Users to Your Application with AngularFire Auth

We'll learn how to create new users/let users sign up in Firebase using our application. The Firebase auth store gives us `createUserWithEmailAndPassword` that will create a user and return a `userCredential` for us to store in our database.

We'll also learn how our database and authentication system aren't connected by default and we'll create a user profile document in the Firestore database. The process here will be very similar to how we created the tasks collection.


Create New Users in Firebase Authentication and Store within the Database

A scenario you will inevitably run into is users needing to reset their passwords for security reasons or they lost and forgot their password.

We'll learn how to send our users an email to reset their passwords, after we send the email, we'll display a notification alert with ionic alertController to the user and redirect them to the login page.


Send a Password Reset Email Using Firebase Authentication with sendPasswordResetEmail

User authentication has been implemented but you'll notice if you navigate to any route in the app you are free to do so whether you're logged in or not. Let's fix this.

`@angular/fire` gives us a feature that is prepared to handle protected routes: the authentication guard.

We'll add that guard to our routing module to protect our tasks page, and redirect unauthenticated users to the login page.


Show Protected Pages only to Authenticated Users with AngularFire Authentication Guard

Now that we have users in our application, we need to start associating them with tasks that are created. We'll revisit our task object and add our currently logged-in user's ID to our task object so that we can show users only their tasks. This is done through the Firebase Auth module.

Store the User's ID in the Task Documents That are Saved in Firestore

Now that tasks are actually associated with a user in our database, we want to only show a user their own tasks.

To do this we'll revisit our task list and make some changes to use the `query()` and `where()` methods to filter our list before we get it from the database.

We'll learn how to pass our user's ID to a query and fetch only the tasks that belong to that user. Because Firebase uses Observables, you'll also see how we handle and change observables in Angular.


Query and Filter Documents from Firestore by userId with query()

All the security we've added to our application has been client side. In a production app this isn't enough, we want to add security to our database directly.

We'll start securing our application's database with Firestore Security Rules.

We'll write security rules to prevent unauthenticated users from accessing our database, and then we'll add extra rules so that only a document's owner can access that document.


Secure your Firestore Data with Security Rules

Currently our Firebase Security Rules aren't as secure as they could be. When it comes to tasks, we are comparing the request's user on the task to the requests auth id. If someone intercepted this request and changed the ids here they could get away with it.

In this lesson, we'll go through our security rules and create a different set of security rules depending on the action the user is performing. For tasks specifically we will check the documents user id against the request user id.

We'll take things a step further as well and write different rules if a user is trying to create, delete, or update a task document.


Break Up Firebase Security Rules Into Different Actions Depending on Operation Performed

Our Security Rules are getting repetitive with all the logic that we've copy and pasted for the several actions we currently have.

In this lesson, we'll go through our security rules and extract the duplicated rules into functions that we can call.

With this approach, we can eliminate the copy/pasting and make our functions a bit more readable.


Refactor Firebase Security Rules to Use Functions for Easier Reading

We want our users to have more power by uploading and downloading files to the tasks they create.

In this lesson, we'll start creating the functionality that will allow our users to upload files. I went ahead and created the UI and click handler for this feature so we can focus on the actual file uploading.

We'll use the browser's `<input type="file">` to select files from our device and then we'll use Cloud Storage methods to upload the file to our storage bucket.


Upload Files to Firebase Cloud Storage with AngularFire storage uploadBytes

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.


Save and Display Tasks Files Utilizing Firebase Cloud Storage getDownloadUrl

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

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

The last step we'll take is to make our application public.

We'll use the Angular CLI to generate a production build of our application, and then we'll use the Firebase CLI to deploy our application to Firebase hosting servers.

Firebase hosting is a great choice for us because Firebase Hosting will incorporate the services that we use in the app by default.


Deploy an Angular Web Application Powered by Firebase to Firebase Hosting

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

Build Applications Locally with the Firebase Emulator

This course by JavaScript teacher Sam Julien is here to help you learn Angular in bite-sized chunks. 

Build Full Stack Web Applications with Angular and Firebase

Jorge Vergara

You might also like these resources:

Build Applications Locally with the Firebase Emulator

Angular Basics

Course Content

You might also like these resources:

Build Applications Locally with the Firebase Emulator

Angular Basics