1 00:00:00,460 --> 00:00:09,310 This is going to be a bit different because we'll have to get the access key, so before we start setting 2 00:00:09,310 --> 00:00:15,280 up anything as far as our folders, I would want to start by getting the key. 3 00:00:15,670 --> 00:00:22,070 And we can do that if we go to our search engine online or type on splash. 4 00:00:22,090 --> 00:00:24,040 So that is the name of the site. 5 00:00:24,370 --> 00:00:26,730 And of course, I would want to navigate there. 6 00:00:27,250 --> 00:00:30,320 And once we are here, we'll have to sign up. 7 00:00:30,640 --> 00:00:36,970 So in my case, I already have one dummy account, so I'll log out and then I'm going to create together 8 00:00:36,970 --> 00:00:38,220 with you another one. 9 00:00:38,440 --> 00:00:39,970 So I'm going to go with login. 10 00:00:40,000 --> 00:00:45,160 And of course, that is my first dummy account, but I'm going to create a new one from scratch. 11 00:00:45,400 --> 00:00:48,990 And you'll also have to do that if you want to get the API. 12 00:00:49,450 --> 00:00:51,160 So I'm going to go with Jaune. 13 00:00:51,610 --> 00:00:55,540 I'm going to go with Peter and of course, Smith. 14 00:00:55,930 --> 00:00:59,960 Now, would you need to come up with some kind of email address? 15 00:01:00,280 --> 00:01:07,510 In my case, I'm going to go with learn code tutorial at Gmail dot com. 16 00:01:07,960 --> 00:01:12,040 And as far as the user, I'm going to go react. 17 00:01:13,000 --> 00:01:18,640 Hyphen Project Hyphen 19 and then recording again. 18 00:01:18,650 --> 00:01:21,760 It is up to you whatever username you would want to do. 19 00:01:22,540 --> 00:01:25,360 Of course, keep in mind that some of them might be taken. 20 00:01:25,780 --> 00:01:34,650 But as far as the password, I'm going to go with my super secret password and I'm going to go with 21 00:01:34,660 --> 00:01:35,590 a joint option. 22 00:01:36,070 --> 00:01:43,510 And of course, once we join and by the way, for some reason says, OK, so no hyphens here can go 23 00:01:43,640 --> 00:01:45,580 with course instead. 24 00:01:46,300 --> 00:01:49,330 OK, so so hopefully that works. 25 00:01:49,720 --> 00:01:50,770 And I'm going to join. 26 00:01:51,480 --> 00:01:56,650 And once we do, that should be able to access our account. 27 00:01:57,160 --> 00:02:00,880 In this case, I'm not going to save this particular password. 28 00:02:01,150 --> 00:02:08,260 And then once you join, which you're looking for is the API developers link. 29 00:02:08,650 --> 00:02:14,080 So you click over here and you would want to start by creating the app. 30 00:02:14,440 --> 00:02:20,160 So we have your documentation and we have your apps and you would want to create a new application. 31 00:02:20,590 --> 00:02:24,820 So in here you would want to check all of them like so. 32 00:02:25,120 --> 00:02:28,480 And then of course you have to agree to the terms. 33 00:02:28,900 --> 00:02:33,330 And here I'm just going to say, yep, I would want to accept the terms again. 34 00:02:33,380 --> 00:02:34,930 I will ask you for a name. 35 00:02:35,290 --> 00:02:38,920 And in my case, I'm going to go with the REACT Project. 36 00:02:39,650 --> 00:02:47,990 Project then 19 online recording like so online, if you want to add some description, of course you 37 00:02:47,990 --> 00:02:50,810 can do it, but in my case, I'm trying to copy and paste. 38 00:02:51,110 --> 00:02:53,990 My name will create the application. 39 00:02:54,200 --> 00:02:54,830 Beautiful. 40 00:02:55,310 --> 00:02:57,830 And then you keep on scrolling, keep on scrolling. 41 00:02:58,220 --> 00:03:01,190 And that's the key of what you're looking for. 42 00:03:01,550 --> 00:03:03,760 So for the time being, just say it somewhere. 43 00:03:03,980 --> 00:03:06,890 So in my case, I'm going to copy this to the clipboard. 44 00:03:08,040 --> 00:03:13,800 And then, of course, I would want to go and see documentation, so where we have the OP's next link 45 00:03:13,800 --> 00:03:21,360 is the condition and I open this in the new browser tab and then let's scroll through documentation. 46 00:03:21,370 --> 00:03:25,800 We have getting started on all that info that we already completed. 47 00:03:26,160 --> 00:03:29,670 And what we're looking for is of this URL. 48 00:03:30,180 --> 00:03:38,640 So this is going to be the endpoint, the root endpoint where all our requests will start with this 49 00:03:38,640 --> 00:03:38,860 one. 50 00:03:39,150 --> 00:03:40,910 So that's something we need to keep in mind. 51 00:03:41,280 --> 00:03:46,950 And then, of course, we keep on scrolling, keep on scrolling, and we can see that in order to get 52 00:03:46,950 --> 00:03:50,580 anything, we have to provide our API key. 53 00:03:51,030 --> 00:03:56,520 So in order to get the photos, we're just going to go with API and splash dot com and then forward 54 00:03:56,520 --> 00:03:57,410 slash photos. 55 00:03:57,630 --> 00:04:02,550 Another way, of course, we'll take a look at the other options that they provide as well. 56 00:04:02,550 --> 00:04:06,750 But essentially we'll use this one and the search option. 57 00:04:07,020 --> 00:04:10,640 But in order to get anything, we'll have to provide the client. 58 00:04:11,210 --> 00:04:13,800 So here they go with Questionmark. 59 00:04:14,010 --> 00:04:19,310 So you are a parameter and then client is equal to our access. 60 00:04:19,420 --> 00:04:23,830 You remember the one that we got once we created the app. 61 00:04:24,600 --> 00:04:30,360 So now what I would want is to take this URL because I would want to double check whether I'm getting 62 00:04:30,360 --> 00:04:36,510 something back, because if you're not getting the data, then of course it's useless, whatever we're 63 00:04:36,510 --> 00:04:39,440 going to do after that, because you won't be able to follow along. 64 00:04:39,840 --> 00:04:47,310 I'm going to copy and paste right now my API key, and if you're getting some data back, beautiful, 65 00:04:47,520 --> 00:04:50,820 then you're ready to move on to the next step. 66 00:04:51,120 --> 00:04:58,380 Assuming that that is the case, I'm going to go back and like I said, they have multiple endpoints, 67 00:04:58,380 --> 00:05:00,210 but they all start with this API. 68 00:05:01,400 --> 00:05:03,780 And if you want, you can get the users. 69 00:05:04,110 --> 00:05:08,160 So you would go with that route endpoint and force users. 70 00:05:08,370 --> 00:05:12,160 And for example, you can go with username, you can get the photos. 71 00:05:12,450 --> 00:05:14,670 So this is going to be the one that we will use. 72 00:05:14,920 --> 00:05:18,320 We go with for photos and check it out. 73 00:05:18,630 --> 00:05:19,950 They have multiple options. 74 00:05:20,340 --> 00:05:23,940 You can get different pages, which of course we'll use later. 75 00:05:24,240 --> 00:05:27,620 When we set up the infinite scroll, we can have per page. 76 00:05:27,960 --> 00:05:29,640 So how many per page? 77 00:05:29,640 --> 00:05:33,180 And I'll default is ten and we're going to stick with default. 78 00:05:33,450 --> 00:05:34,800 That one is fine. 79 00:05:35,070 --> 00:05:42,110 Then you can also order them by some kind of parameter, whether that's latest, oldest popular or whatever. 80 00:05:42,450 --> 00:05:44,250 And that's also something that we're going to skip. 81 00:05:45,340 --> 00:05:52,660 And then there's the option for the search, so we go with search and then again, the URL is going 82 00:05:52,660 --> 00:06:00,630 to be following where we go with search and photos and the search is going to be in the query. 83 00:06:00,970 --> 00:06:04,390 Now, of course, we'll set up those URLs later. 84 00:06:04,720 --> 00:06:07,350 But this is just shock as the general idea. 85 00:06:07,630 --> 00:06:10,290 You can also get the collections if you want. 86 00:06:10,300 --> 00:06:17,170 Again, you're always going to be a bit different where you go with the root end point and forward slash 87 00:06:17,380 --> 00:06:18,010 collections. 88 00:06:18,460 --> 00:06:27,670 So with this out of the way now, of course, I can navigate back to my project and I'm looking for 89 00:06:27,670 --> 00:06:31,300 Project 19 of the stock photos and of course, the. 90 00:06:31,990 --> 00:06:39,620 So in this case, what I would want is to go here and clear everything that I currently have and then 91 00:06:39,670 --> 00:06:45,970 back to the route and we're going to go npm install, I'm not and P and start. 92 00:06:46,390 --> 00:06:52,120 We spin it up and make sure that you have the source in the source. 93 00:06:52,120 --> 00:06:59,560 You'll have app J.S. Laakso and of course in the Objets we have your imports here. 94 00:06:59,830 --> 00:07:01,420 We have, for example, icon. 95 00:07:01,690 --> 00:07:08,500 And of course in this case nothing happened because I would need to check with missing NPM install and 96 00:07:08,500 --> 00:07:11,730 NPM start and then for some reason I wasn't able to do. 97 00:07:12,190 --> 00:07:20,170 And of course it is because I didn't navigate to the folder so like so and I'm just making a big fat 98 00:07:20,170 --> 00:07:21,490 mess over here now. 99 00:07:21,490 --> 00:07:24,530 I copy and paste my API key. 100 00:07:25,120 --> 00:07:28,110 So let me grab right now my folder. 101 00:07:28,330 --> 00:07:30,400 So the set of folder for Project 19. 102 00:07:30,740 --> 00:07:36,730 Not once I'm in a folder, then I'm going to run, npm install and NPM start. 103 00:07:38,080 --> 00:07:46,000 And while I'm spinning up my dev server here, you can see that in The Objets, you'll find two heroes. 104 00:07:46,090 --> 00:07:51,270 So I already copied and pasted those you URLs because I thought that just going to be faster. 105 00:07:51,520 --> 00:07:59,770 Now, can we have API on dot com and photos, show the truth and point plus before us that we're going 106 00:07:59,770 --> 00:08:00,340 to be looking for. 107 00:08:00,520 --> 00:08:08,260 So this is just going to give us a list and then for to search the URL is going to be a tiny bit different 108 00:08:08,590 --> 00:08:14,370 where we're going to go with API on splash dot com and then search online for us. 109 00:08:14,710 --> 00:08:20,770 And then like I said, once we get to that point, of course, I'll show you how we would construct 110 00:08:20,770 --> 00:08:21,640 the URL. 111 00:08:22,120 --> 00:08:25,030 And you'll also notice of this coming here. 112 00:08:25,240 --> 00:08:31,570 And this is something that we're going to do first, where we will set up our environment variables 113 00:08:31,750 --> 00:08:34,510 and I'll talk about them in the next video. 114 00:08:34,690 --> 00:08:37,390 So for the time being, let's just leave it the way it is. 115 00:08:37,690 --> 00:08:43,050 And as far as it's done, we have stock photos are that's the text we should see on the screen. 116 00:08:43,420 --> 00:08:47,590 And of course, there's also one component that is the photo component. 117 00:08:47,860 --> 00:08:55,360 So since we have a list again, I just created one component that represents that photo for each photo 118 00:08:55,360 --> 00:08:58,770 will be represented by the photo component. 119 00:08:59,170 --> 00:09:01,760 And of course, we also have the index. 120 00:09:01,760 --> 00:09:02,130 Yes. 121 00:09:02,560 --> 00:09:05,170 So this is this is already prepared. 122 00:09:05,530 --> 00:09:10,600 So I think we are in good shape and we could start working on our application.