1 00:00:00,700 --> 00:00:02,890 Unless section we put together our first little comment. 2 00:00:02,910 --> 00:00:05,970 But we still do not have a little profile image on here. 3 00:00:05,970 --> 00:00:11,070 Now we could definitely go through the process of trying to find some image out there of someone else 4 00:00:11,130 --> 00:00:13,040 and insert it into our application. 5 00:00:13,250 --> 00:00:17,220 But that would involve a little bit more work than we probably want to go through because we would have 6 00:00:17,220 --> 00:00:21,600 to download the image dragged into this public directory which is where we place images that we want 7 00:00:21,600 --> 00:00:26,940 to use inside of our project and then somehow linked up to the image tag inside of our app component 8 00:00:27,570 --> 00:00:29,340 rather than going through all that trouble. 9 00:00:29,340 --> 00:00:34,620 We're going to use a little library that makes development of tiny little applications like the one 10 00:00:34,620 --> 00:00:37,850 we're working on right here very easy and straightforward. 11 00:00:37,860 --> 00:00:41,550 So let me tell you about this library because we're going to use it a decent amount throughout this 12 00:00:41,550 --> 00:00:46,900 course and it's something that you might want to use on your own personal projects. 13 00:00:46,950 --> 00:00:51,420 I'm going to open up a new browser tab and I go in to do a search for faker. 14 00:00:51,560 --> 00:00:59,120 Yes A.J. Yes like so and then I should see a result right here for the Get help page for this project. 15 00:00:59,130 --> 00:01:05,310 This is an open source library they can help you automatically generate a ton of data to use inside 16 00:01:05,460 --> 00:01:07,380 of your own personal projects. 17 00:01:07,380 --> 00:01:12,240 This is all going to be completely fake data but nonetheless it's very useful for when you're doing 18 00:01:12,240 --> 00:01:18,550 some initial development of a re-act project when you might not have some actual data to work with. 19 00:01:18,570 --> 00:01:21,270 You can scroll down and take a look at the documentation. 20 00:01:21,270 --> 00:01:24,740 Now some of the documentation here is a little bit hard to read. 21 00:01:24,750 --> 00:01:27,340 You'll find a section labeled API methods. 22 00:01:27,480 --> 00:01:32,770 So this is essentially all the different types of data that we can generate with this module. 23 00:01:32,820 --> 00:01:34,710 We can make fake addresses. 24 00:01:34,710 --> 00:01:43,530 We can make a companies make dates and fake finance data fake just about everything and including what's 25 00:01:43,530 --> 00:01:44,860 most important for us right now. 26 00:01:44,910 --> 00:01:53,320 Fake images so we can use this library to make a fake image specifically an avatar or a profile image. 27 00:01:53,340 --> 00:01:58,770 So essentially again rather than going through all that hassle of trying to find a profile image download 28 00:01:58,770 --> 00:02:00,310 it and use it inside of our project. 29 00:02:00,360 --> 00:02:05,100 We're going to instead use this faker J.S. library to just do it for us automatically. 30 00:02:05,160 --> 00:02:11,340 Like I said I really expect you might want to use this own or this library on your own personal projects. 31 00:02:11,340 --> 00:02:12,870 So how do we use this library. 32 00:02:12,870 --> 00:02:14,570 Well it's going to be pretty straightforward. 33 00:02:14,760 --> 00:02:17,220 We're going to flip back over toward terminal. 34 00:02:17,320 --> 00:02:22,920 I'm going to find the terminal with my running re-act server and I'm going to start this thing by hitting 35 00:02:22,980 --> 00:02:24,670 Control-C like so. 36 00:02:25,230 --> 00:02:31,440 Then inside of here I'm going to install that library by running NPM install dash dash save Baker. 37 00:02:31,440 --> 00:02:36,990 Like so this is using that same NPM install a command that we saw previously but this time rather than 38 00:02:36,990 --> 00:02:40,320 dash gee we had this dash dash save flag. 39 00:02:40,440 --> 00:02:43,980 That means that we want to save this thing in our local project. 40 00:02:43,980 --> 00:02:48,900 And when we save it to the local project it's going to create a new entry inside of our package not 41 00:02:48,900 --> 00:02:53,610 just on file and record the fact that we installed this thing into our project. 42 00:02:53,760 --> 00:02:58,290 So if we ever tried to install the dependencies for our project again we'll automatically install F.A. 43 00:02:58,320 --> 00:02:59,150 as well. 44 00:02:59,550 --> 00:03:01,190 OK it's going to run that command. 45 00:03:01,990 --> 00:03:05,470 Then we should have to only wait a couple of seconds for the thing to install. 46 00:03:05,470 --> 00:03:08,710 It is a somewhat small module in actual size. 47 00:03:08,710 --> 00:03:13,600 The thing ends up being pretty big and you probably don't want to use this thing inside of a professional 48 00:03:13,600 --> 00:03:14,290 project. 49 00:03:14,290 --> 00:03:18,000 But as far as installing it goes it's just one single package by itself. 50 00:03:18,280 --> 00:03:25,580 So now that that is installed I'm going to start my re-act server backup with NPM start OK. 51 00:03:25,600 --> 00:03:30,430 So now we're back to good as we were before and now we can use that Fakhry library inside of our indexed 52 00:03:30,840 --> 00:03:31,670 file. 53 00:03:31,750 --> 00:03:36,920 So to use that library I want to first add an import statement at the very top of the file. 54 00:03:36,920 --> 00:03:43,000 Remember anytime that we want to use some code from another file or a another open source project or 55 00:03:43,000 --> 00:03:46,220 dependency we have to add an import statement. 56 00:03:46,300 --> 00:03:54,260 So I'm going to say import faker from faker like the it's now we can make use of this library to get 57 00:03:54,260 --> 00:03:56,040 a image. 58 00:03:56,040 --> 00:04:00,870 So I'm going to add on that as sarcy which we usually designate in image. 59 00:04:00,890 --> 00:04:03,880 Now in this case we do not have a hard coded image. 60 00:04:03,890 --> 00:04:05,080 You are able to put in here. 61 00:04:05,270 --> 00:04:11,750 So we're not going to put in a set of double quotes like so instead we're going to use that GSX interpellation 62 00:04:11,960 --> 00:04:17,390 where we are going to refer to some javascript variable or the result of some javascript function from 63 00:04:17,390 --> 00:04:19,880 the body of our GSX. 64 00:04:19,880 --> 00:04:24,500 So I'm going to delete those double quotes and I'm going to replace it with that set of double curly 65 00:04:24,500 --> 00:04:31,170 braces like so or single curly braces so then inside of here we're going to reference that Fakhri library. 66 00:04:31,500 --> 00:04:34,390 And then the next part is where things get just a little bit hairy. 67 00:04:34,410 --> 00:04:40,950 Remember back over here inside the documentation there was a section called Image and inside this image 68 00:04:40,950 --> 00:04:42,930 section there was something called Aviator. 69 00:04:43,140 --> 00:04:49,580 So in order to generate a fake image or a fake guitar we're going to call faker dot image. 70 00:04:49,600 --> 00:04:50,210 Ava. 71 00:04:50,310 --> 00:04:52,430 That's how you read these documentation. 72 00:04:52,560 --> 00:05:01,260 If you wanted to make say a fake let's say a fake company name we would call fake or dumb company dot 73 00:05:01,560 --> 00:05:04,630 company name and then call that as a function. 74 00:05:04,950 --> 00:05:11,580 So with that in mind let's flip back over on the say faker that image Eva tar and then are called like 75 00:05:11,610 --> 00:05:17,090 a function by putting on those parentheses like so it's not going to save this file. 76 00:05:18,510 --> 00:05:22,390 I'm going to flip back over to my application in the browser. 77 00:05:22,590 --> 00:05:26,640 I'll see the automatic refresh cookin and then we see the image appear right there. 78 00:05:26,640 --> 00:05:27,740 Awesome. 79 00:05:27,750 --> 00:05:32,650 Now above all the image itself looks pretty darn nice it looks like a real profile image. 80 00:05:32,670 --> 00:05:34,980 The nice thing about faker or maybe the not nice thing. 81 00:05:34,980 --> 00:05:40,560 Let me rephrase that any time you refresh the page the image is going to be automatically regenerated 82 00:05:40,630 --> 00:05:43,090 and you're going to get a new one inserted in there. 83 00:05:43,380 --> 00:05:45,840 So every time that you refresh the page you'll see a new one. 84 00:05:45,870 --> 00:05:49,910 Now sometimes Baker is going to give you a broken image every now and then. 85 00:05:49,980 --> 00:05:52,200 And so you'll see a broken image like this appear. 86 00:05:52,200 --> 00:05:56,530 If that happens you can just refresh the page and he should see a normal image appear again. 87 00:05:56,910 --> 00:05:58,380 OK it says looks fantastic. 88 00:05:58,380 --> 00:06:02,940 Let's take another pause right here and we'll get back on track and figure out how to replicate these 89 00:06:02,940 --> 00:06:04,980 comments and get a couple more down here.