WEBVTT

1
00:00:00.610 --> 00:00:02.870
In this guide, we are gonna get set up

2
00:00:02.870 --> 00:00:05.140
and configure our API.

3
00:00:05.140 --> 00:00:08.060
So our API, which is short for

4
00:00:08.060 --> 00:00:10.600
Application Programming Interface,

5
00:00:10.600 --> 00:00:13.840
is a communication protocol,

6
00:00:13.840 --> 00:00:17.470
where we can have our front end application,

7
00:00:17.470 --> 00:00:22.470
make calls or server requests out to an outside service,

8
00:00:23.320 --> 00:00:25.620
and then receive data back.

9
00:00:25.620 --> 00:00:29.060
Now, don't worry, if you've never worked with an API before,

10
00:00:29.060 --> 00:00:31.510
we're gonna take it really nice and slow,

11
00:00:31.510 --> 00:00:35.190
and you're gonna be able to see this entire workflow

12
00:00:35.190 --> 00:00:38.140
and how you can use it to build

13
00:00:38.140 --> 00:00:41.000
your own dynamic applications.

14
00:00:41.000 --> 00:00:46.000
So I created a data dashboard here called DevCamp.Space.

15
00:00:46.310 --> 00:00:49.320
So go to DevCamp.Space in your browser,

16
00:00:49.320 --> 00:00:52.240
and then sign up for an account right here.

17
00:00:52.240 --> 00:00:55.597
So I'm gonna call this one hooks@devcamp.com.

18
00:00:57.857 --> 00:01:02.270
Use whatever email address that you have,

19
00:01:02.270 --> 00:01:04.790
and then here, I'm gonna say,

20
00:01:04.790 --> 00:01:06.490
let's just call it reactportfolio,

21
00:01:07.790 --> 00:01:09.690
see if that's available, and it is.

22
00:01:09.690 --> 00:01:12.030
Now these have to be unique.

23
00:01:12.030 --> 00:01:14.530
So because I'm recording this, you're not gonna be able

24
00:01:14.530 --> 00:01:17.780
to use the subdomain, React portfolio,

25
00:01:17.780 --> 00:01:22.780
and then type in some password and hit register.

26
00:01:23.070 --> 00:01:26.620
So after you have logged in,

27
00:01:26.620 --> 00:01:29.150
I'm gonna hit Add there to save my password,

28
00:01:29.150 --> 00:01:30.710
and after you've logged in,

29
00:01:30.710 --> 00:01:34.570
you want to pick this portfolio item.

30
00:01:34.570 --> 00:01:38.407
This is gonna be for the react project.

31
00:01:38.407 --> 00:01:40.340
Some of these other ones are like for our mobile course

32
00:01:40.340 --> 00:01:42.270
and our view course and that kind of thing,

33
00:01:42.270 --> 00:01:44.010
but you want to go to the portfolio,

34
00:01:44.010 --> 00:01:47.894
one with the React icon, and then this is gonna be your

35
00:01:47.894 --> 00:01:52.894
dashboard where you can manage everything from your items,

36
00:01:53.530 --> 00:01:55.696
your portfolio items to your blog posts,

37
00:01:55.696 --> 00:01:57.320
everything like that.

38
00:01:57.320 --> 00:01:59.980
You'll eventually see how we're gonna be able to

39
00:01:59.980 --> 00:02:02.930
create records and edit records straight

40
00:02:02.930 --> 00:02:04.870
from our own application.

41
00:02:04.870 --> 00:02:08.380
But to start off, we're simply going to be able to create

42
00:02:08.380 --> 00:02:10.530
some records right here.

43
00:02:10.530 --> 00:02:13.830
So, you wanna go into first portfolio items,

44
00:02:13.830 --> 00:02:16.950
'cause this is gonna be the first set of endpoints

45
00:02:16.950 --> 00:02:19.910
that we're gonna work with, and click View Data,

46
00:02:19.910 --> 00:02:22.120
and there's not gonna be any data there.

47
00:02:22.120 --> 00:02:25.970
But right here, you have the ability to start creating

48
00:02:25.970 --> 00:02:28.670
your own portfolio records.

49
00:02:28.670 --> 00:02:32.250
Now, I'm not gonna go through the process of you having

50
00:02:32.250 --> 00:02:35.480
to watch me type in all of the sample data.

51
00:02:35.480 --> 00:02:37.810
I think this is pretty self explanatory.

52
00:02:37.810 --> 00:02:41.606
You're gonna type in a name, a description, a URL,

53
00:02:41.606 --> 00:02:46.540
a category, a position, and then from there,

54
00:02:46.540 --> 00:02:48.750
you're gonna add some images.

55
00:02:48.750 --> 00:02:52.480
Now, don't worry about what you're using here.

56
00:02:52.480 --> 00:02:55.550
In fact, because if you're a brand new developer,

57
00:02:55.550 --> 00:02:58.550
you don't have a portfolio and that's perfectly fine.

58
00:02:58.550 --> 00:03:00.760
You can just place folder items,

59
00:03:00.760 --> 00:03:03.210
you can say that you're one the creators of Google

60
00:03:03.210 --> 00:03:05.710
and put Google logos and that kind of thing.

61
00:03:05.710 --> 00:03:08.460
So, don't worry about what you're placing in here.

62
00:03:08.460 --> 00:03:12.740
Just make sure that each one of these fields is filled out.

63
00:03:12.740 --> 00:03:15.040
So fill each one of these out,

64
00:03:15.040 --> 00:03:17.690
and let's say create nine records.

65
00:03:17.690 --> 00:03:22.690
So go through, add your images, add your name, description,

66
00:03:23.110 --> 00:03:25.450
some URL, all of those kinds of things,

67
00:03:25.450 --> 00:03:28.270
'cause what that's gonna do is that is gonna give us all

68
00:03:28.270 --> 00:03:32.690
of the data that we're gonna need to start populating

69
00:03:32.690 --> 00:03:35.550
that homepage and that portfolio list

70
00:03:35.550 --> 00:03:37.330
that we've started to work on.

71
00:03:37.330 --> 00:03:41.550
So now that you kind of have an idea of how to create those,

72
00:03:41.550 --> 00:03:44.130
go through the process, add each of those records

73
00:03:44.130 --> 00:03:46.560
and in the next guide, it's gonna be pretty fun.

74
00:03:46.560 --> 00:03:50.550
We're gonna see how we can connect to the service

75
00:03:50.550 --> 00:03:53.743
and pull in live data into our application.

Resources

• API Data Manager