1
00:00:01,030 --> 00:00:05,440
In this section we're going to start working on loading up some data into our re-act application.

2
00:00:05,440 --> 00:00:09,190
So let's get to it here's the general idea.

3
00:00:09,190 --> 00:00:12,600
Our application is going to be running inside a user's browser.

4
00:00:12,850 --> 00:00:19,000
Once they enter a search term and then hits hits enter We are going to make a Ajax request or a network

5
00:00:19,000 --> 00:00:23,340
request over to API called the splash API.

6
00:00:23,740 --> 00:00:29,460
Sunsplash is a company that focuses on stock images or essentially images of all types.

7
00:00:29,530 --> 00:00:35,380
If we send them a request to get back a list of images with some keywords like say cars or plants or

8
00:00:35,380 --> 00:00:43,180
flowers or whatever it is the splash API will send us back a big list of Sun Records this Jason is going

9
00:00:43,180 --> 00:00:48,390
to contain information about a bunch of different pictures matching our search request.

10
00:00:48,520 --> 00:00:54,490
We can then take that on and use it to render a big list of images on the screen and then remember that

11
00:00:54,690 --> 00:00:58,820
one of our application we want to take those images and to show them as a flat list.

12
00:00:58,900 --> 00:01:03,400
And then after we get that working we'll start to focus on kind of tiling them out in a nice little

13
00:01:03,460 --> 00:01:04,700
format like so.

14
00:01:05,080 --> 00:01:05,320
OK.

15
00:01:05,330 --> 00:01:09,840
So let's take a look at the splash API and get a better idea of how it works.

16
00:01:10,300 --> 00:01:11,810
Here's a link to the documentation.

17
00:01:11,830 --> 00:01:17,040
So going to take that link and I'll open up a new browser tab and navigate over there.

18
00:01:17,410 --> 00:01:17,610
All right.

19
00:01:17,620 --> 00:01:21,550
So this is the developer's page on Slashdot com slash developers.

20
00:01:21,640 --> 00:01:26,940
The first thing that we need to do is register as a developer Zeo click on that link either right there

21
00:01:26,950 --> 00:01:31,660
on the left hand side or up at the top right hand side and then you can enter in some information to

22
00:01:31,660 --> 00:01:33,810
create a new account.

23
00:01:33,820 --> 00:01:40,690
So once you log in to their service we can go to your apps up here at the top and you'll be prompted

24
00:01:40,690 --> 00:01:47,500
to create a new application the splash API has the ability for you to make separate applications as

25
00:01:47,500 --> 00:01:49,640
they refer to them with their service.

26
00:01:49,990 --> 00:01:55,950
These are essential essentially different little records that record your interaction with their API.

27
00:01:56,260 --> 00:01:59,560
So we're going to find the button to create a new application.

28
00:01:59,810 --> 00:02:04,090
They're going to ask you to accept a couple of rules right here and we're just going to say yup I agree

29
00:02:04,090 --> 00:02:07,490
with these rules and then I'll accept terms on the bottom right.

30
00:02:07,630 --> 00:02:11,650
And then we get prompted for a application name now for this application.

31
00:02:11,650 --> 00:02:13,790
You can give it any name you wish.

32
00:02:13,810 --> 00:02:18,940
There is no use to this name except for you to be able to recognize your application when you log into

33
00:02:18,940 --> 00:02:21,630
the splash dashboard.

34
00:02:21,690 --> 00:02:28,230
So I'll call mine re-act pics and then I'll give it a quick description of show a list of images and

35
00:02:28,230 --> 00:02:29,360
I'll create the application.

36
00:02:30,810 --> 00:02:31,090
OK.

37
00:02:31,110 --> 00:02:35,760
So you're going to see the first thing right here says apply for production that does not apply to us.

38
00:02:35,760 --> 00:02:42,270
We're not going to be using this API in a fully production application when they apply for production

39
00:02:42,270 --> 00:02:47,310
right here what they're really talking about is getting access to a huge amount of images or a huge

40
00:02:47,310 --> 00:02:48,840
amount of requests.

41
00:02:48,840 --> 00:02:54,000
Right now our application if you scroll down a little bit further is in a development mode you're going

42
00:02:54,000 --> 00:02:59,520
to see that our requests are the number of requests that we make to their API gets tracked over time.

43
00:02:59,520 --> 00:03:02,880
And the rule is that you can only make 50 requests per hour.

44
00:03:02,880 --> 00:03:07,590
Now it might sound like you would overwrite that or go over that limit very quickly but in practice

45
00:03:07,620 --> 00:03:09,200
I think you'll be really surprised.

46
00:03:09,210 --> 00:03:14,580
It's actually kind of hard to get over this request limits if you do hit the request limit and you go

47
00:03:14,580 --> 00:03:16,410
over 50 requests per hour.

48
00:03:16,410 --> 00:03:23,070
You could always just create a second app or a second account and get a new API you to go with it.

49
00:03:23,070 --> 00:03:28,750
Speaking of API key you'll see a little bit lower right here is the API key or the access key that we

50
00:03:28,750 --> 00:03:32,410
are going to need to get access to the splash API.

51
00:03:33,440 --> 00:03:39,620
So you can either copy this key right here or just we'll come back later on either copy it onto some

52
00:03:39,620 --> 00:03:43,400
other document right now that you could so you can get easy access to it but we'll will come back to

53
00:03:43,400 --> 00:03:45,650
this page in just a little bit to get the key.

54
00:03:45,680 --> 00:03:47,310
If you don't want to.

55
00:03:47,330 --> 00:03:52,360
All right now Leslie I want to show you is up at the very top you can find the documentation tab and

56
00:03:52,360 --> 00:03:55,870
it will tell you a little bit more about how to get started with the API.

57
00:03:55,940 --> 00:04:00,380
You can find a link on the top right here that says Search photos by keyword or you can look on the

58
00:04:00,380 --> 00:04:04,340
left hand side and go down to the search section.

59
00:04:04,340 --> 00:04:06,780
And we want to specifically search photos.

60
00:04:06,920 --> 00:04:08,180
We don't want to search collections.

61
00:04:08,180 --> 00:04:10,400
We want to search photos.

62
00:04:10,410 --> 00:04:16,260
All right so this will show us some information about how to make a request to search for some photos.

63
00:04:16,260 --> 00:04:19,430
We'll talk more about exactly how we're going to use this end point in a circuit.

64
00:04:19,620 --> 00:04:21,260
But right now let's take a quick break.

65
00:04:21,270 --> 00:04:22,370
We'll come back to the next section.

66
00:04:22,410 --> 00:04:28,080
We'll talk about exactly how we are going to issue a network request from our re-act application.

67
00:04:28,080 --> 00:04:29,970
So a quick pause and I'll see you in just a minute.