1
00:00:01,170 --> 00:00:04,790
The next thing you have to do inside of our search screen component is add in the ability to make a

2
00:00:04,790 --> 00:00:06,700
request to the Yelp API.

3
00:00:06,850 --> 00:00:11,480
Anytime we want to make a network request from React Native application we have a couple of different

4
00:00:11,510 --> 00:00:12,410
options.

5
00:00:12,590 --> 00:00:14,870
But I want to really focus on two.

6
00:00:15,050 --> 00:00:19,260
So these are two things we can use to make a network request from a react native app.

7
00:00:19,280 --> 00:00:24,350
The first is fetch fetches a built in function which means that we essentially don't have to install

8
00:00:24,410 --> 00:00:26,560
any additional libraries to make use of it.

9
00:00:26,630 --> 00:00:31,330
We can just add in a call to the fetch function anywhere inside of our code like so.

10
00:00:31,490 --> 00:00:33,240
And that's pretty much it.

11
00:00:33,290 --> 00:00:38,070
Now the downside to fetch is that error handling with it is just a little bit strange.

12
00:00:38,180 --> 00:00:43,190
And in general if we're going to use fetch it requires us to write a lot of additional code to make

13
00:00:43,190 --> 00:00:48,170
it work in kind of a sensible fashion that makes a lot of sense in a application like the one we are

14
00:00:48,170 --> 00:00:48,890
building.

15
00:00:49,160 --> 00:00:50,420
So we can definitely use fetch.

16
00:00:50,480 --> 00:00:54,710
However we just have to write a good amount of additional code.

17
00:00:54,740 --> 00:00:58,910
The other option that we have is to use a separate library that we have to install into our project

18
00:00:58,910 --> 00:01:00,430
called axioms.

19
00:01:00,440 --> 00:01:05,660
So this really is a separate library which means that we have to install some additional dependency

20
00:01:05,660 --> 00:01:11,840
into our project which therefore means that our application size is going to increase by some amount.

21
00:01:11,840 --> 00:01:17,720
However Acciona is a really easy to use especially compared to fetch and has a lot of sensible defaults

22
00:01:17,960 --> 00:01:22,770
and some really nice features inside of it that allows us to write some pretty reusable code.

23
00:01:22,790 --> 00:01:27,650
So in this course you and I are going to be making use of fetch just because it is a lot easier to use

24
00:01:27,920 --> 00:01:31,750
and it keeps us from having to write a lot of extra wrapper code around it.

25
00:01:31,910 --> 00:01:34,750
Now if you want to use fetch absolutely go for it.

26
00:01:34,760 --> 00:01:39,560
I've had a lot of people in some other courses get a little upset that I make use of axes over fetch

27
00:01:39,560 --> 00:01:41,140
because it is built in.

28
00:01:41,150 --> 00:01:46,190
However once again there are some really good reasons to use axioms over fetch.

29
00:01:46,400 --> 00:01:51,520
So to make use of axes to make a network request we first have to install it as a package.

30
00:01:51,650 --> 00:01:54,080
So I'm going to once again go back over to my terminal.

31
00:01:54,210 --> 00:01:59,420
I'm gonna open up a new terminal window still inside of my food project directory.

32
00:01:59,420 --> 00:02:01,930
Then once inside of here we'll do an npm install.

33
00:02:02,090 --> 00:02:07,100
Excuse me not fetch but axioms like so.

34
00:02:07,330 --> 00:02:07,590
Okay.

35
00:02:07,630 --> 00:02:08,920
So it's a really small package.

36
00:02:08,920 --> 00:02:10,950
So it should be done in just a second or two.

37
00:02:10,960 --> 00:02:12,170
Very good.

38
00:02:12,170 --> 00:02:15,140
So now we can flip back over inside of my search screen.

39
00:02:15,160 --> 00:02:20,110
Well actually not our search screen we're going to actually make a new file that's going to import axioms

40
00:02:20,350 --> 00:02:25,350
and create a pre configured version of it to work specifically with the Yelp API.

41
00:02:25,540 --> 00:02:31,810
So inside of my source directory I'll make a new folder called API and an inside there I'll make a new

42
00:02:31,810 --> 00:02:34,630
file called Yelp dot J.S..

43
00:02:34,930 --> 00:02:39,280
So the idea here is that if we might have multiple different API that we want to work with inside of

44
00:02:39,280 --> 00:02:45,310
our project we will create several different files inside this API directory inside of each one we will

45
00:02:45,400 --> 00:02:51,010
import axioms will then create an instance of axioms and pre configure it to where have it work with

46
00:02:51,010 --> 00:02:53,020
some specific API.

47
00:02:53,020 --> 00:02:57,340
So this is how we very easily get some amount of code reused with axes.

48
00:02:57,340 --> 00:03:05,260
So inside of yellow dot J.S. I'm going to first import axioms from axioms I'll then export default axioms

49
00:03:05,350 --> 00:03:10,710
dot create so we can use axes directly to make a network request.

50
00:03:10,720 --> 00:03:15,850
Alternatively we can make an instance of it that has some preset options assigned.

51
00:03:15,850 --> 00:03:20,380
So like I said this is how we're going to get some amount of code reuse the first option we're going

52
00:03:20,380 --> 00:03:28,210
to set is base you are El and notice that are in L inside there are capitalized the base your old property

53
00:03:28,360 --> 00:03:32,580
is going to be essentially the route you are L that we want to make the request to.

54
00:03:32,590 --> 00:03:36,490
So at this point we should probably go back over to the Yelp API documentation and just get a quick

55
00:03:36,490 --> 00:03:41,280
reminder on some of the different routes we have to make a request to okay.

56
00:03:41,290 --> 00:03:46,950
So back at my documentation here's the documentation for these search the search route.

57
00:03:46,990 --> 00:03:51,950
So if you want to make a request to the search route we need to make a request to API Yelp dot com b

58
00:03:51,980 --> 00:03:58,630
3 businesses slash search and then for looking up information about a very particular business we make

59
00:03:58,630 --> 00:04:03,760
a request to V3 businesses and then the I.D..

60
00:04:03,760 --> 00:04:08,700
So the commonality between both these routes is essentially the HDP s API Yelp.

61
00:04:08,710 --> 00:04:17,150
The three businesses are going to copy that entire portion of the url like so I'll then paste it as

62
00:04:17,150 --> 00:04:19,700
a string for my base your old property.

63
00:04:19,700 --> 00:04:23,140
Now notice that I do not have a board slash at the very end.

64
00:04:23,150 --> 00:04:24,410
There's no slash there.

65
00:04:24,410 --> 00:04:27,090
It just ends with the word businesses.

66
00:04:27,130 --> 00:04:29,040
So now that we set the base you are all property.

67
00:04:29,090 --> 00:04:34,970
If we ever want to make a request to either that search route or to some particular business I.D. we

68
00:04:34,970 --> 00:04:40,550
would just call our Yelp instance which we are going to import into some other file and we would do

69
00:04:40,550 --> 00:04:43,360
a get request and then like search like so.

70
00:04:44,180 --> 00:04:49,340
So this pre configured copy is always going to have the base url tacked on.

71
00:04:49,340 --> 00:04:57,130
So it just saves us having to write out the entire you are L inside that string like so okay.

72
00:04:57,210 --> 00:05:01,830
The other thing that we're going to use this instance right here for those api keys that we generated

73
00:05:01,830 --> 00:05:08,770
just a little bit ago so in order to authorize ourselves with the Yelp API we have to pass in a request

74
00:05:08,830 --> 00:05:16,160
header we can specify a header inside of this instance right here by adding in a headers option put

75
00:05:16,320 --> 00:05:21,750
an object and we'll put in the name of our header the header we want to designate to authorize ourselves

76
00:05:21,750 --> 00:05:27,180
with the Yelp API is authorization and notice how it has a capital A.

77
00:05:27,360 --> 00:05:30,710
If you put in a lowercase say this is not going to work.

78
00:05:30,750 --> 00:05:38,780
So please make sure you get carried away like so then the value for this will be a string of bearer

79
00:05:39,410 --> 00:05:42,270
and then a space and then our API secret.

80
00:05:42,290 --> 00:05:46,690
Immediately after that remember you should have saved your API secret.

81
00:05:46,690 --> 00:05:47,750
Hopefully you did.

82
00:05:47,750 --> 00:05:54,880
If you didn't you can always log back into Yelp and go to the manage app page on this page you'll be

83
00:05:54,910 --> 00:05:57,670
presented with your API key once again.

84
00:05:57,670 --> 00:06:02,290
So we're gonna copy our API key not the client I.D. We want the API key.

85
00:06:03,740 --> 00:06:07,780
And then we'll paste it right after there like so.

86
00:06:08,040 --> 00:06:08,310
Okay.

87
00:06:08,340 --> 00:06:13,860
So at this point time I really got beg you please make sure you have headers.

88
00:06:14,100 --> 00:06:20,330
Make sure you have authorization with a capital A and then make sure you have a string that says bear.

89
00:06:20,540 --> 00:06:26,750
And then one space and then your API key immediately after that if you make a mistake anywhere inside

90
00:06:26,750 --> 00:06:29,500
of here you're going to very quickly see a error.

91
00:06:29,510 --> 00:06:35,120
When we start to make our network request which is obviously just not at all ideal OK.

92
00:06:35,160 --> 00:06:37,780
So that's it for our Yelp API setup.

93
00:06:37,890 --> 00:06:43,650
So now in any component that needs to access the Yelp API we can import this file and immediately access

94
00:06:43,650 --> 00:06:49,260
the Yelp API without having to re designate the base you or L or any authorization headers or anything

95
00:06:49,260 --> 00:06:50,640
like that.

96
00:06:50,670 --> 00:06:53,270
So now that we've got this all put together let's take another pause.

97
00:06:53,370 --> 00:06:57,810
When we come back the next video we're going to start to use this thing from our search screen component.