1 00:00:00,710 --> 00:00:06,200 In the last video we left off, having just created class user right here, once again, if you see 2 00:00:06,200 --> 00:00:09,020 a warning around this class definition, that's totally fine. 3 00:00:09,020 --> 00:00:10,530 We're going to fix it up in just a second. 4 00:00:11,390 --> 00:00:14,230 So in this video, I want to focus on our implementation of a user. 5 00:00:14,690 --> 00:00:19,490 Remember, we had said that a user should have a couple of different properties assigned to it that 6 00:00:19,490 --> 00:00:20,710 will be randomly generated. 7 00:00:21,050 --> 00:00:24,770 So that should probably be like a user's name and their location as well. 8 00:00:25,730 --> 00:00:30,860 To get started, I think that we should define a couple of different fields on our user class and then 9 00:00:30,860 --> 00:00:33,020 we can figure out how to randomly generate those properties. 10 00:00:33,980 --> 00:00:38,720 All right, I'm going to flip back over to my class definition and inside of here, I'm going to assign 11 00:00:38,720 --> 00:00:40,970 two different properties to my user. 12 00:00:41,120 --> 00:00:46,790 I'm going to say that every user is going to have a name property that is a string and a location property 13 00:00:47,330 --> 00:00:53,210 that's going to be an object that has a latitude that is a number and a longitude. 14 00:00:53,210 --> 00:00:54,340 That is a number as well. 15 00:00:55,040 --> 00:00:56,720 So that stands for latitude. 16 00:00:56,720 --> 00:00:58,530 Eleni's stands for Longitude. 17 00:00:59,150 --> 00:01:04,280 Remember, we can use latitudes and longitudes to model a physical location in the world. 18 00:01:05,030 --> 00:01:10,820 So we're going to eventually randomly generate a latitude and longitude, assign it to this user and 19 00:01:10,820 --> 00:01:15,350 use that data to decide where to map a user on our Google map interface. 20 00:01:17,500 --> 00:01:21,930 OK, so now that we've defined these properties right here, we need to eventually initialize them. 21 00:01:22,330 --> 00:01:27,400 Remember, every time we define a property, we need to either initialize it on the same exact line 22 00:01:27,760 --> 00:01:28,990 or inside the constructor. 23 00:01:30,080 --> 00:01:34,460 Usually we will initialize the property on the same line if it's going to be some hard coded value, 24 00:01:34,800 --> 00:01:39,080 but in this case, we want to randomly generate a name and a latitude and longitude. 25 00:01:39,410 --> 00:01:44,210 So we will instead do our initialization inside of a constructor function instead. 26 00:01:45,020 --> 00:01:48,630 So I'm going to define my constructor function right here like so. 27 00:01:49,430 --> 00:01:49,820 All right. 28 00:01:49,820 --> 00:01:53,710 So we've got our place to initialize the name latitude, longitude. 29 00:01:53,750 --> 00:01:56,160 All we need now is our randomly generated data. 30 00:01:56,720 --> 00:02:01,310 So for that, let's take a look at some documentation for library that we're going to use to generate 31 00:02:01,310 --> 00:02:02,210 that information. 32 00:02:03,100 --> 00:02:09,550 All right, so quick link right here, we're going to go to AMPM, Bascome and take a look at the documentation 33 00:02:09,550 --> 00:02:11,110 for a package called Fakher. 34 00:02:11,830 --> 00:02:16,660 The FAKHER package gives us the ability to randomly generate a bunch of different types of information, 35 00:02:16,930 --> 00:02:19,860 which makes it really well suited for the project we are working on right now. 36 00:02:20,720 --> 00:02:22,910 So I'm going to go to James Dotcom. 37 00:02:24,010 --> 00:02:28,780 Once a year, I'm going to search for Fakher at the top and I should see it as one of the first results 38 00:02:28,780 --> 00:02:29,260 on here. 39 00:02:31,650 --> 00:02:34,860 All right, so here's the documentation, you can scroll down a little bit. 40 00:02:35,970 --> 00:02:41,470 And underneath AP right here are not AP next section down here we go apply methods. 41 00:02:42,180 --> 00:02:45,660 This is the absolute extent of all the documentation we get. 42 00:02:45,780 --> 00:02:47,640 Unfortunately, it's not super detailed. 43 00:02:47,800 --> 00:02:53,700 So what this is essentially saying is that the FAKHER package has a module inside of it called address, 44 00:02:54,120 --> 00:03:00,510 and we can use the address module to randomly generate a zip code, a city street name, a county, 45 00:03:00,510 --> 00:03:02,550 a country state, latitude, longitude. 46 00:03:02,600 --> 00:03:05,250 Well, those look really relevant and so on. 47 00:03:06,330 --> 00:03:12,060 Likewise, there is a company module that we can use to randomly generate a catchphrase or a company 48 00:03:12,060 --> 00:03:13,110 name and so on. 49 00:03:14,050 --> 00:03:15,610 If you scroll down a little bit more. 50 00:03:16,490 --> 00:03:19,280 You'll also find a section inside of here called. 51 00:03:20,730 --> 00:03:25,860 Name and we can use this module to generate a first name, last name and so on. 52 00:03:26,700 --> 00:03:31,260 So as you might guess, we're going to use this name module to generate some information for our user 53 00:03:31,980 --> 00:03:34,230 will use the company module back up here. 54 00:03:36,260 --> 00:03:39,980 To generate some random information for the companies we create inside of our app. 55 00:03:40,860 --> 00:03:46,470 And finally, for both the user and the company will use the address module to generate a random latitude 56 00:03:46,470 --> 00:03:47,640 and longitude. 57 00:03:48,830 --> 00:03:52,700 OK, so it looks like the FAKHER module is really going to take care of all of our data requirements 58 00:03:52,700 --> 00:03:55,670 for our application, so all we have to do is install this thing. 59 00:03:56,360 --> 00:04:00,490 So to install this package, I'm going to flip back over to my terminal inside of my project directory. 60 00:04:01,070 --> 00:04:06,050 I'm going to stop the running pozole server with control, see, and then I'll do an NPM install. 61 00:04:07,080 --> 00:04:09,690 Baker like so, and that's pretty much it. 62 00:04:10,550 --> 00:04:15,200 Now, the package is pretty small, so it should complete installation rather quickly, once it's all 63 00:04:15,200 --> 00:04:19,610 done, will start up parcel once again with parcel index HTML. 64 00:04:21,230 --> 00:04:26,420 All right, so now we can flip back over to our editor and make use of Faker to do so, I'm going to 65 00:04:26,420 --> 00:04:29,240 go to the top of the file inside my user file. 66 00:04:30,530 --> 00:04:36,950 And I'm going to import the FAKHER module import statements inside of TypeScript Look identical to import 67 00:04:36,950 --> 00:04:38,610 statements in 2015. 68 00:04:38,990 --> 00:04:43,540 So if you've ever worked on a react or angular application, you're probably going to be right at home. 69 00:04:44,150 --> 00:04:49,340 In other words, to access a module that we installed with NPM, oh, we have to do is write out import 70 00:04:49,340 --> 00:04:52,310 Fakher from Fakher like so. 71 00:04:53,220 --> 00:04:55,630 So that's going to reach into our package. 72 00:04:55,950 --> 00:04:57,600 I mean, Noad Module's directory right here. 73 00:04:58,470 --> 00:05:03,030 It's going to find that FAKHER module that we just installed and it's going to give us access to all 74 00:05:03,030 --> 00:05:06,000 the code inside there through a variable called Fakher. 75 00:05:07,020 --> 00:05:12,960 Now, there's just one little issue here, if we hover over Facher, we're going to see a little air 76 00:05:12,960 --> 00:05:13,770 message right here. 77 00:05:13,770 --> 00:05:16,890 It says, could not find a declaration file for Model Facher. 78 00:05:17,610 --> 00:05:22,530 Now, this is an air or a warning that you're going to see many, many, many times as you start to 79 00:05:22,530 --> 00:05:23,790 work on typescript projects. 80 00:05:24,120 --> 00:05:27,920 So let's take a quick pause right here and talk about why we are seeing this little warning message.