In this lecture, we are going to import the Angularfire package into our project.
We need to perform this step manually.
Fortunately, it's effortless to start using angularfire.
First we need to grab our API keys.
Firebase will not grant us permission to interact with its products unless our app has the proper credentials.
We can grab this information at the Firebase console for our project on the home page.
We will be asked to add an app.
Firebase supports various platforms.
We can develop Android, iOS Unity or web apps for our case.
We are going to create a web app.
A pop up will appear asking us for more details about our project.
We need to give a project a nickname.
Let's set the nickname to clips.
It'll ask us if we'd like to host the app on Firebase.
We'll look into hosting in a later section.
This option can remain unchecked.
We can enable hosting later if we'd like.
Let's keep moving forward.
After a while, Firebase will spit out a code snippet for configuring Firebase into our project.
We're not going to copy the entire code snippet.
The most important piece of information from this snippet is the object assigned to the Firebase configuration
variable.
Copy the entire object.
Next, open your editor.
We're going to edit the environment files.
If these files don't exist in your project, you can manually create them.
Angular doesn't always generate them with every project.
Alternatively, you can use the n, g g environments command to generate these files, but they may
not be placed in the right directory, so be sure to move them after they're generated.
As a reminder, environment files are where we can store configuration settings for external APIs.
We have two environment files, one for development.
Another file for production.
In both files we are going to add an object called Firebase.
Its value will be the object we copied earlier.
We will be using the same Firebase project for our app.
Let's review the values in the object together.
The first property is the API key.
The API key is how we'll be able to connect to Firebase.
It's probably the most important key in this object.
Firebase will be able to identify where the ones sending the request and not some other application.
The next property is the authentication domain.
Firebase will provide us with a URL for handling authentication credentials.
We're going to need this value for logging users into our app.
Afterward, we have the project ID.
This property stores the ID of our project.
Firebase generated this ID for us.
It's followed by the storage bucket.
A bucket is used to describe the location where files are stored.
An application can have multiple buckets, but we're using the free plan which comes with one bucket.
One bucket is plenty for the application we're building.
The following property is the sender ID.
Firebase has a feature to push notifications between applications instantly.
We won't be using this feature, but it is there if you need it.
I'm going to remove this ID since we won't be using it.
Firebase won't throw an error if it's unavailable.
Lastly, we have the app ID property.
Firebase allows for multiple apps to be connected to a project.
We're building a web app.
If we added an iOS or Android app, they would be assigned unique IDs.
We have everything we need.
The next step is to import the modules into our project.
Open the app module.
At the top of the file, we're going to import the Angularfire module object from the angular slash
fire slash compat package.
The environment object will need to be imported to.
Lastly, we will add the angular fire module object to the imports array.
The Angular fire module has a function called Initialize app.
We will call this function with the credentials we had in the environment file.
The initialize app function will connect our Angular app to Firebase.
The module we're importing is the core module of Firebase.
Regardless of what services or products you plan on using, you will always want to import the core
module.
The core module is what will help you with configuring and connecting to Firebase.
In almost all cases you will need to import this module.
The rest of the features won't be usable unless you import this module first.
Firebase is broken into multiple packages.
We're notrillionequired to use the entire suite of products.
The package we're using creates separate modules for each feature that we want to use.
We're interested in the authentication capabilities that Firebase offers.
If we want to interact with a specific feature, we will need to import a module for the respective
feature at the top of the file.
We're going to import a module called Angular Fire Off Module.
This package can be found under the angular slash fire slash auth slash compat path.
Let's add this module to the imports option.
We're importing the authentication module because we'll be using Firebase to authenticate the user.
If we'd like the authentication service to be available, we'll need to import it.
We're finished.
We've successfully integrated the Firebase SDK into our project.
Let's refresh the page in the browser to check for errors.
The page is loading normally.
Perfect.
Within a couple of minutes.
We've integrated Firebase into our app.
There are various functions at our disposal for storing user information on a server.
We will begin registration and authentication in the next set of lectures.