1
00:00:00,100 --> 00:00:04,400
[Intro Music]

2
00:00:04,470 --> 00:00:05,850
In this lecture, I will show you

3
00:00:05,850 --> 00:00:09,180
how to get Unsplash API key and how

4
00:00:09,180 --> 00:00:12,200
to insert it into the API microservice.

5
00:00:12,200 --> 00:00:14,400
Let us know that this step

6
00:00:14,430 --> 00:00:16,890
is mandatory for running this

7
00:00:16,890 --> 00:00:19,350
project both either locally or

8
00:00:19,350 --> 00:00:21,360
inside of the Docker. This way, if

9
00:00:21,360 --> 00:00:23,100
you want to run this application on

10
00:00:23,100 --> 00:00:24,990
your computer, you must get

11
00:00:25,020 --> 00:00:27,360
Unsplash API key. Alright,

12
00:00:27,540 --> 00:00:29,460
instructions are located in the

13
00:00:29,490 --> 00:00:31,980
images-gallery folder. You could go

14
00:00:31,980 --> 00:00:34,860
to it directly at github.com;

15
00:00:35,070 --> 00:00:37,650
and here in the README.md file,

16
00:00:37,710 --> 00:00:39,960
you'll find how to get actually

17
00:00:40,050 --> 00:00:42,510
Unsplash API key, and how to

18
00:00:42,540 --> 00:00:45,510
insert into the API microservice.

19
00:00:45,930 --> 00:00:47,670
Also, you could open the same

20
00:00:47,760 --> 00:00:50,280
README.md file located in the

21
00:00:50,310 --> 00:00:52,080
images-gallery folder in the Visual

22
00:00:52,080 --> 00:00:53,580
Studio Code, but it's more

23
00:00:53,580 --> 00:00:54,780
convenient to read those

24
00:00:54,780 --> 00:00:57,480
instructions directly at GitHub. So

25
00:00:57,630 --> 00:00:58,530
you have to create

26
00:00:58,560 --> 00:01:01,680
account at unsplash.com. Afterwards,

27
00:01:01,710 --> 00:01:03,840
you'll create demo application

28
00:01:03,960 --> 00:01:06,030
with title for example, 'Images

29
00:01:06,030 --> 00:01:08,490
Gallery', and notice that the demo

30
00:01:08,490 --> 00:01:10,830
applications are limited to 50

31
00:01:10,920 --> 00:01:13,110
requests per hour. But that's

32
00:01:13,110 --> 00:01:15,360
totally fine, for the sake of our

33
00:01:15,390 --> 00:01:16,950
application, you will not

34
00:01:16,950 --> 00:01:18,990
generate more requests for images.

35
00:01:19,770 --> 00:01:21,480
Afterwards, after the creation of

36
00:01:21,480 --> 00:01:23,580
the new application you will find in

37
00:01:23,580 --> 00:01:26,610
the section 'Keys' key called 'Access Key';

38
00:01:26,820 --> 00:01:29,070
and you need to copy it; and

39
00:01:29,100 --> 00:01:31,650
afterwards you insert this API key

40
00:01:31,830 --> 00:01:33,990
into the API microservice; and it

41
00:01:33,990 --> 00:01:35,880
will get it as environment

42
00:01:35,880 --> 00:01:37,920
variable. For that you have to

43
00:01:37,920 --> 00:01:40,890
create '.env.local' file

44
00:01:40,920 --> 00:01:44,100
inside of the 'api' folder; and in

45
00:01:44,130 --> 00:01:45,930
this file, you have to insert just

46
00:01:45,930 --> 00:01:49,452
single line 'UNSPLASH_KEY=',

47
00:01:49,452 --> 00:01:51,180
and here you have to paste

48
00:01:51,210 --> 00:01:52,950
copied Access Key from the

49
00:01:52,950 --> 00:01:56,130
unsplash.com. Here is example how

50
00:01:56,160 --> 00:01:57,870
this configuration should look like,

51
00:01:58,050 --> 00:02:00,120
UNSPLASH_KEY; and here's a sample

52
00:02:00,120 --> 00:02:02,280
key. Notice that this key is

53
00:02:02,280 --> 00:02:04,560
invalid, so don't attempt to use it

54
00:02:04,560 --> 00:02:06,780
in your application. Generate yours

55
00:02:07,020 --> 00:02:09,449
under your Unsplash account. And

56
00:02:09,449 --> 00:02:11,598
afterwards save modified

57
00:02:11,598 --> 00:02:14,790
'.env.local' file. But now question,

58
00:02:14,940 --> 00:02:17,310
why I asked you to create such file

59
00:02:17,310 --> 00:02:19,500
and insert the UNSPLASH_KEY there?

60
00:02:20,220 --> 00:02:23,310
Answer is very simple. This file is

61
00:02:23,340 --> 00:02:25,890
ignored by Git, and therefore when

62
00:02:25,890 --> 00:02:27,450
you commit changes it will not be

63
00:02:27,450 --> 00:02:30,000
committed, and therefore, such

64
00:02:30,000 --> 00:02:32,340
sensitive information as Access Key

65
00:02:32,460 --> 00:02:34,170
will not be pushed, for example, to

66
00:02:34,170 --> 00:02:36,750
remote GitHub repository. Because

67
00:02:36,750 --> 00:02:38,610
this is correct approach when you

68
00:02:38,790 --> 00:02:41,310
are handling different usernames,

69
00:02:41,310 --> 00:02:43,290
passwords, access keys, and so on.

70
00:02:43,710 --> 00:02:46,110
They should be stored only locally

71
00:02:46,380 --> 00:02:48,960
on the server or computer where you

72
00:02:48,960 --> 00:02:52,290
run your application. And we

73
00:02:52,290 --> 00:02:54,630
require such key in order to run

74
00:02:54,690 --> 00:02:57,060
API service actually in development

75
00:02:57,060 --> 00:02:59,160
mode locally on your or my

76
00:02:59,160 --> 00:03:02,100
computer. And if you for example,

77
00:03:02,100 --> 00:03:04,740
deploy same application somewhere

78
00:03:04,770 --> 00:03:07,170
into production, you will also have

79
00:03:07,170 --> 00:03:09,150
to create such environment

80
00:03:09,150 --> 00:03:11,340
variable as UNSPLASH_KEY; and

81
00:03:11,340 --> 00:03:13,170
such configuration depends on the

82
00:03:13,170 --> 00:03:16,080
actual service provider. But almost

83
00:03:16,080 --> 00:03:17,880
always, there is a section called

84
00:03:17,910 --> 00:03:19,860
environment variables where you

85
00:03:19,860 --> 00:03:22,170
could set this and potentially

86
00:03:22,200 --> 00:03:24,060
other environment variables which

87
00:03:24,060 --> 00:03:26,460
are required by your applications.

88
00:03:26,850 --> 00:03:28,500
Alright, that's quick overview of how

89
00:03:28,500 --> 00:03:30,750
you could create UNSPLASH_KEY, and

90
00:03:30,780 --> 00:03:33,420
insert it into the API service. And

91
00:03:33,420 --> 00:03:35,220
now let's go step by step and

92
00:03:35,220 --> 00:03:37,680
perform this task together. Let me

93
00:03:37,740 --> 00:03:40,650
open up unsplash.com. And here, I

94
00:03:40,650 --> 00:03:42,030
already have an account. If you

95
00:03:42,030 --> 00:03:44,250
don't have one, please go to Login

96
00:03:44,310 --> 00:03:47,190
and click here 'Join'. Fill information

97
00:03:47,190 --> 00:03:49,050
about yourself. And afterwards,

98
00:03:49,050 --> 00:03:51,510
click 'Join'. I'll go directly to

99
00:03:51,510 --> 00:03:53,880
Login. And here let me enter my

100
00:03:53,880 --> 00:03:58,560
Username and Password. Login. And

101
00:03:58,560 --> 00:04:02,310
now please open up this URL. I'll

102
00:04:02,310 --> 00:04:05,610
open it in the new tab. And here I

103
00:04:05,610 --> 00:04:07,200
already have a few disabled

104
00:04:07,230 --> 00:04:09,240
applications. In order to create new

105
00:04:09,240 --> 00:04:10,950
application, please click 'New

106
00:04:10,950 --> 00:04:13,830
Application' here. Check all check

107
00:04:13,830 --> 00:04:17,670
boxes here. Please read carefully

108
00:04:17,790 --> 00:04:21,720
all those API Terms of Use. Accept

109
00:04:21,720 --> 00:04:23,700
Terms, and here please enter

110
00:04:23,700 --> 00:04:26,459
Application name. I'll name it same

111
00:04:26,459 --> 00:04:30,150
as before, 'Images Gallery'; and

112
00:04:30,150 --> 00:04:32,478
Description will be the same, 'Images Gallery'.

113
00:04:33,449 --> 00:04:34,919
Let's create new application.

114
00:04:35,489 --> 00:04:37,259
Application was created, and here

115
00:04:37,259 --> 00:04:39,179
you see tag 'Demo'. It means that

116
00:04:39,209 --> 00:04:41,159
this application is limited to 50

117
00:04:41,189 --> 00:04:43,769
requests per hour. But if you want

118
00:04:43,769 --> 00:04:45,569
to increase rate limits, you could

119
00:04:45,599 --> 00:04:47,729
apply for production. And here

120
00:04:47,729 --> 00:04:49,349
following this URL, you could

121
00:04:49,349 --> 00:04:51,209
read guidelines regarding that.

122
00:04:51,749 --> 00:04:53,729
Alright, let me scroll down and

123
00:04:53,729 --> 00:04:56,069
find Access Key, and here is mine.

124
00:04:56,309 --> 00:04:58,229
Please copy it. Ensure that you copy

125
00:04:58,289 --> 00:05:01,499
Access Key not Secret key. So let

126
00:05:01,499 --> 00:05:04,289
me copy it. And now let's proceed

127
00:05:04,289 --> 00:05:06,689
with further instructions. Now we

128
00:05:06,689 --> 00:05:08,879
have to create '.env.local'

129
00:05:08,879 --> 00:05:11,129
file inside of the 'api' folder.

130
00:05:11,459 --> 00:05:14,669
Let's go there. Expand 'api'

131
00:05:14,669 --> 00:05:16,480
folder. And here let's create

132
00:05:16,480 --> 00:05:20,429
'.env.local' file. And here inside

133
00:05:20,459 --> 00:05:22,409
let's add environment variable

134
00:05:22,439 --> 00:05:24,569
UNSPLASH_KEY, and its

135
00:05:24,569 --> 00:05:26,849
value will be set to just copied

136
00:05:26,849 --> 00:05:29,378
key. Let's save changes in this

137
00:05:29,378 --> 00:05:31,919
.env.local file. And please

138
00:05:31,919 --> 00:05:33,869
notice that such file is grayed

139
00:05:33,899 --> 00:05:36,929
out. And git does not offer me to

140
00:05:36,929 --> 00:05:39,209
commit changes in this file. And

141
00:05:39,209 --> 00:05:41,069
that's because that was 'gitignore'

142
00:05:41,069 --> 00:05:43,979
file, which ignores such files as

143
00:05:43,979 --> 00:05:46,079
.env.local, and other

144
00:05:46,079 --> 00:05:48,809
environment related files. Alright,

145
00:05:48,809 --> 00:05:50,399
now we are all set. And we went

146
00:05:50,399 --> 00:05:52,319
through all those instructions. And

147
00:05:52,319 --> 00:05:54,719
now you're ready to go and start

148
00:05:54,779 --> 00:05:57,029
entire application that consists of

149
00:05:57,059 --> 00:06:00,719
API and Frontend services. But as

150
00:06:00,719 --> 00:06:01,979
I explained you before, you have

151
00:06:01,979 --> 00:06:03,809
two options to run entire

152
00:06:03,839 --> 00:06:06,119
application, either running

153
00:06:06,329 --> 00:06:08,609
separately API and Frontend

154
00:06:08,609 --> 00:06:11,219
services, or running all of them

155
00:06:11,249 --> 00:06:14,069
simultaneously using Docker. And

156
00:06:14,099 --> 00:06:16,199
I'll show you first how to run them

157
00:06:16,199 --> 00:06:18,419
separately locally on your machine.

158
00:06:18,959 --> 00:06:20,789
And in order to do so you have to

159
00:06:20,789 --> 00:06:23,399
install Node.js and Python. And in

160
00:06:23,399 --> 00:06:25,019
the next few lectures, I'll explain

161
00:06:25,019 --> 00:06:26,879
to you how to do that. But please

162
00:06:26,879 --> 00:06:28,349
notice that running of this

163
00:06:28,349 --> 00:06:30,749
application locally without Docker

164
00:06:30,869 --> 00:06:32,549
is completely optional in this

165
00:06:32,549 --> 00:06:34,379
course. This way, if you don't want

166
00:06:34,379 --> 00:06:36,659
to install Node.js and Python, you

167
00:06:36,659 --> 00:06:38,669
could simply skip next few lectures

168
00:06:38,819 --> 00:06:40,739
and continue following me when I

169
00:06:40,769 --> 00:06:43,199
start Dockerization of API

170
00:06:43,199 --> 00:06:45,809
and Frontend microservices. But

171
00:06:45,809 --> 00:06:46,919
if you want to get your hands

172
00:06:46,919 --> 00:06:48,749
dirty, and try to launch this

173
00:06:48,749 --> 00:06:50,339
application without Docker, I

174
00:06:50,339 --> 00:06:51,599
more than welcome you to do that,

175
00:06:51,599 --> 00:06:52,979
because in such a way you will

176
00:06:52,979 --> 00:06:54,359
deeply understand difference

177
00:06:54,359 --> 00:06:56,159
between running applications

178
00:06:56,189 --> 00:06:57,749
without Docker and with Docker.

179
00:06:57,989 --> 00:06:59,459
Alright, in the next lecture, I

180
00:06:59,459 --> 00:07:01,139
will show you how to get Node.js

181
00:07:01,139 --> 00:07:02,558
installed on your computer.

182
00:07:02,558 --> 00:07:04,640
[no audio]