1 00:00:00,080 --> 00:00:05,570 In this lecture, we are going to import the Angularfire package into our project. 2 00:00:05,600 --> 00:00:08,360 We need to perform this step manually. 3 00:00:08,390 --> 00:00:12,860 Fortunately, it's effortless to start using angularfire. 4 00:00:12,890 --> 00:00:16,309 First we need to grab our API keys. 5 00:00:16,340 --> 00:00:23,470 Firebase will not grant us permission to interact with its products unless our app has the proper credentials. 6 00:00:23,480 --> 00:00:29,780 We can grab this information at the Firebase console for our project on the home page. 7 00:00:29,780 --> 00:00:32,600 We will be asked to add an app. 8 00:00:32,630 --> 00:00:35,600 Firebase supports various platforms. 9 00:00:35,600 --> 00:00:41,120 We can develop Android, iOS Unity or web apps for our case. 10 00:00:41,120 --> 00:00:43,310 We are going to create a web app. 11 00:00:45,610 --> 00:00:50,140 A pop up will appear asking us for more details about our project. 12 00:00:50,170 --> 00:00:52,630 We need to give a project a nickname. 13 00:00:52,630 --> 00:00:55,180 Let's set the nickname to clips. 14 00:00:57,260 --> 00:01:00,860 It'll ask us if we'd like to host the app on Firebase. 15 00:01:00,890 --> 00:01:03,530 We'll look into hosting in a later section. 16 00:01:03,560 --> 00:01:06,020 This option can remain unchecked. 17 00:01:06,050 --> 00:01:08,710 We can enable hosting later if we'd like. 18 00:01:08,720 --> 00:01:10,680 Let's keep moving forward. 19 00:01:10,700 --> 00:01:17,510 After a while, Firebase will spit out a code snippet for configuring Firebase into our project. 20 00:01:17,540 --> 00:01:20,620 We're not going to copy the entire code snippet. 21 00:01:20,630 --> 00:01:27,590 The most important piece of information from this snippet is the object assigned to the Firebase configuration 22 00:01:27,590 --> 00:01:28,430 variable. 23 00:01:28,460 --> 00:01:30,740 Copy the entire object. 24 00:01:32,750 --> 00:01:34,840 Next, open your editor. 25 00:01:34,850 --> 00:01:37,790 We're going to edit the environment files. 26 00:01:38,060 --> 00:01:42,800 If these files don't exist in your project, you can manually create them. 27 00:01:42,860 --> 00:01:46,130 Angular doesn't always generate them with every project. 28 00:01:46,160 --> 00:01:53,000 Alternatively, you can use the n, g g environments command to generate these files, but they may 29 00:01:53,000 --> 00:01:58,400 not be placed in the right directory, so be sure to move them after they're generated. 30 00:02:00,270 --> 00:02:07,380 As a reminder, environment files are where we can store configuration settings for external APIs. 31 00:02:07,410 --> 00:02:11,280 We have two environment files, one for development. 32 00:02:11,310 --> 00:02:13,290 Another file for production. 33 00:02:13,290 --> 00:02:17,670 In both files we are going to add an object called Firebase. 34 00:02:17,700 --> 00:02:21,390 Its value will be the object we copied earlier. 35 00:02:23,540 --> 00:02:27,470 We will be using the same Firebase project for our app. 36 00:02:27,470 --> 00:02:30,440 Let's review the values in the object together. 37 00:02:30,470 --> 00:02:33,250 The first property is the API key. 38 00:02:33,260 --> 00:02:37,490 The API key is how we'll be able to connect to Firebase. 39 00:02:37,520 --> 00:02:41,090 It's probably the most important key in this object. 40 00:02:41,120 --> 00:02:47,990 Firebase will be able to identify where the ones sending the request and not some other application. 41 00:02:48,140 --> 00:02:51,660 The next property is the authentication domain. 42 00:02:51,680 --> 00:02:56,970 Firebase will provide us with a URL for handling authentication credentials. 43 00:02:56,990 --> 00:03:01,280 We're going to need this value for logging users into our app. 44 00:03:01,430 --> 00:03:04,010 Afterward, we have the project ID. 45 00:03:04,340 --> 00:03:07,580 This property stores the ID of our project. 46 00:03:07,610 --> 00:03:10,790 Firebase generated this ID for us. 47 00:03:10,820 --> 00:03:13,490 It's followed by the storage bucket. 48 00:03:13,520 --> 00:03:17,830 A bucket is used to describe the location where files are stored. 49 00:03:17,840 --> 00:03:24,480 An application can have multiple buckets, but we're using the free plan which comes with one bucket. 50 00:03:24,510 --> 00:03:28,230 One bucket is plenty for the application we're building. 51 00:03:28,260 --> 00:03:31,230 The following property is the sender ID. 52 00:03:31,560 --> 00:03:37,020 Firebase has a feature to push notifications between applications instantly. 53 00:03:37,050 --> 00:03:41,190 We won't be using this feature, but it is there if you need it. 54 00:03:41,220 --> 00:03:45,310 I'm going to remove this ID since we won't be using it. 55 00:03:45,330 --> 00:03:48,990 Firebase won't throw an error if it's unavailable. 56 00:03:50,990 --> 00:03:54,290 Lastly, we have the app ID property. 57 00:03:54,320 --> 00:03:59,270 Firebase allows for multiple apps to be connected to a project. 58 00:03:59,300 --> 00:04:01,070 We're building a web app. 59 00:04:01,070 --> 00:04:06,920 If we added an iOS or Android app, they would be assigned unique IDs. 60 00:04:06,950 --> 00:04:09,050 We have everything we need. 61 00:04:09,080 --> 00:04:13,110 The next step is to import the modules into our project. 62 00:04:13,130 --> 00:04:14,960 Open the app module. 63 00:04:17,230 --> 00:04:23,740 At the top of the file, we're going to import the Angularfire module object from the angular slash 64 00:04:23,830 --> 00:04:26,500 fire slash compat package. 65 00:04:31,110 --> 00:04:34,860 The environment object will need to be imported to. 66 00:04:38,980 --> 00:04:44,530 Lastly, we will add the angular fire module object to the imports array. 67 00:04:46,610 --> 00:04:51,090 The Angular fire module has a function called Initialize app. 68 00:04:51,110 --> 00:04:56,060 We will call this function with the credentials we had in the environment file. 69 00:04:58,200 --> 00:05:03,280 The initialize app function will connect our Angular app to Firebase. 70 00:05:03,300 --> 00:05:07,410 The module we're importing is the core module of Firebase. 71 00:05:07,440 --> 00:05:13,530 Regardless of what services or products you plan on using, you will always want to import the core 72 00:05:13,530 --> 00:05:14,250 module. 73 00:05:14,280 --> 00:05:19,300 The core module is what will help you with configuring and connecting to Firebase. 74 00:05:19,320 --> 00:05:23,310 In almost all cases you will need to import this module. 75 00:05:23,340 --> 00:05:28,530 The rest of the features won't be usable unless you import this module first. 76 00:05:28,560 --> 00:05:32,010 Firebase is broken into multiple packages. 77 00:05:32,040 --> 00:05:35,730 We're notrillionequired to use the entire suite of products. 78 00:05:35,730 --> 00:05:41,400 The package we're using creates separate modules for each feature that we want to use. 79 00:05:41,430 --> 00:05:46,560 We're interested in the authentication capabilities that Firebase offers. 80 00:05:46,590 --> 00:05:52,860 If we want to interact with a specific feature, we will need to import a module for the respective 81 00:05:52,860 --> 00:05:55,140 feature at the top of the file. 82 00:05:55,170 --> 00:06:00,280 We're going to import a module called Angular Fire Off Module. 83 00:06:00,310 --> 00:06:07,590 This package can be found under the angular slash fire slash auth slash compat path. 84 00:06:10,480 --> 00:06:13,660 Let's add this module to the imports option. 85 00:06:15,870 --> 00:06:22,130 We're importing the authentication module because we'll be using Firebase to authenticate the user. 86 00:06:22,140 --> 00:06:27,210 If we'd like the authentication service to be available, we'll need to import it. 87 00:06:27,240 --> 00:06:28,320 We're finished. 88 00:06:28,350 --> 00:06:33,330 We've successfully integrated the Firebase SDK into our project. 89 00:06:33,360 --> 00:06:37,110 Let's refresh the page in the browser to check for errors. 90 00:06:39,230 --> 00:06:41,150 The page is loading normally. 91 00:06:41,180 --> 00:06:42,020 Perfect. 92 00:06:42,020 --> 00:06:43,460 Within a couple of minutes. 93 00:06:43,490 --> 00:06:46,620 We've integrated Firebase into our app. 94 00:06:46,640 --> 00:06:52,280 There are various functions at our disposal for storing user information on a server. 95 00:06:52,310 --> 00:06:57,860 We will begin registration and authentication in the next set of lectures.