1
00:00:00,000 --> 00:00:04,300
[Intro Music]

2
00:00:04,380 --> 00:00:06,300
We just successfully created and

3
00:00:06,330 --> 00:00:08,010
activated Python virtual

4
00:00:08,039 --> 00:00:10,590
environment for our backend API

5
00:00:10,590 --> 00:00:12,450
service. And we successfully

6
00:00:12,450 --> 00:00:14,520
started Python application using

7
00:00:14,550 --> 00:00:17,010
'python' command here. And now we see

8
00:00:17,010 --> 00:00:19,470
the API service is still running.

9
00:00:19,890 --> 00:00:22,050
Frontend application is also

10
00:00:22,050 --> 00:00:24,720
running here. Notice that those

11
00:00:24,750 --> 00:00:26,640
applications utilize different

12
00:00:26,640 --> 00:00:29,340
ports. Frontend is running at Port

13
00:00:29,340 --> 00:00:32,070
3000, and backend API service is

14
00:00:32,070 --> 00:00:35,340
running at Port 5050. Let's now

15
00:00:35,340 --> 00:00:37,320
check how those two applications

16
00:00:37,350 --> 00:00:39,570
work together. Let's go to web

17
00:00:39,570 --> 00:00:41,970
browser, and let's go to frontend

18
00:00:41,970 --> 00:00:44,070
application here. Recap that before

19
00:00:44,100 --> 00:00:45,690
when we tried to search for new

20
00:00:45,690 --> 00:00:47,970
image, we got 'ERR_CONNECTION_

21
00:00:47,970 --> 00:00:50,460
REFUSED'. Let's clear console now,

22
00:00:50,610 --> 00:00:52,710
and let's search for image again.

23
00:00:52,980 --> 00:00:55,200
Again, 'sun' let's say, click Search.

24
00:00:55,740 --> 00:00:57,570
And now I see that image was

25
00:00:57,570 --> 00:00:59,790
successfully retrieved. Here is

26
00:00:59,820 --> 00:01:02,190
image itself, here is the search term

27
00:01:02,220 --> 00:01:03,930
that we entered in the search bar,

28
00:01:04,050 --> 00:01:05,790
here is the description of the image,

29
00:01:05,819 --> 00:01:07,830
and here is button which allows us

30
00:01:07,830 --> 00:01:10,300
to Delete this image from the Frontend

31
00:01:10,300 --> 00:01:12,400
application. Let's now go to

32
00:01:12,480 --> 00:01:14,880
Network tab here, select Network.

33
00:01:15,240 --> 00:01:16,740
And in this step, you will see

34
00:01:16,740 --> 00:01:18,780
actual request to the backend

35
00:01:18,810 --> 00:01:21,510
service. Here it is. If I click on

36
00:01:21,510 --> 00:01:23,400
it, I will see that there is the

37
00:01:23,400 --> 00:01:26,160
Request URL: http localhost IP

38
00:01:26,160 --> 00:01:29,130
address port 5050, that's that port

39
00:01:29,250 --> 00:01:31,170
where our backend service is

40
00:01:31,170 --> 00:01:34,320
running. Here is actual path on the

41
00:01:34,320 --> 00:01:37,020
server, 'new-image'. And there

42
00:01:37,020 --> 00:01:39,570
was query parameter which is set to

43
00:01:39,570 --> 00:01:41,640
'sun', which is actually search

44
00:01:41,640 --> 00:01:43,590
term which was entered by the user

45
00:01:43,590 --> 00:01:45,660
here in the frontend application.

46
00:01:46,200 --> 00:01:48,540
Request Method is GET. Status Code,

47
00:01:48,570 --> 00:01:49,950
which is the response to the code

48
00:01:49,950 --> 00:01:52,260
from the server is 200 OK,

49
00:01:52,350 --> 00:01:54,000
because now server correctly

50
00:01:54,000 --> 00:01:56,430
processed request and returned us a

51
00:01:56,430 --> 00:01:58,260
response. And if I click on

52
00:01:58,260 --> 00:02:00,870
Response step here, I'll see JSON

53
00:02:00,900 --> 00:02:03,180
object, which describes actual

54
00:02:03,210 --> 00:02:05,820
image that was retrieved by the API

55
00:02:05,820 --> 00:02:08,788
service using Unsplash Access Key.

56
00:02:09,150 --> 00:02:11,310
Here are all the details about this

57
00:02:11,340 --> 00:02:14,100
particular image. Let's create one

58
00:02:14,100 --> 00:02:16,320
more request to the API service,

59
00:02:16,410 --> 00:02:18,210
and let's search for new image, for

60
00:02:18,210 --> 00:02:21,900
example, 'water', Search, here is one

61
00:02:21,900 --> 00:02:24,210
more image. Previous remains in place

62
00:02:24,210 --> 00:02:26,310
here. And here, I see one more

63
00:02:26,310 --> 00:02:28,680
request. And here was response from

64
00:02:28,680 --> 00:02:31,350
the server. This whole frontend

65
00:02:31,380 --> 00:02:33,870
and api services could communicate

66
00:02:33,930 --> 00:02:36,840
right now. If I go to the terminal

67
00:02:36,840 --> 00:02:39,060
here, I will see that there were

68
00:02:39,060 --> 00:02:42,150
requests to following URLs here and

69
00:02:42,150 --> 00:02:44,790
here; and server responded with

70
00:02:44,790 --> 00:02:47,760
Status Code 200 OK, which

71
00:02:47,760 --> 00:02:49,920
means that it correctly processed

72
00:02:49,950 --> 00:02:51,900
request and sent correct

73
00:02:51,900 --> 00:02:54,780
response to the client. If you see

74
00:02:54,780 --> 00:02:57,120
some errors here, it might be due

75
00:02:57,120 --> 00:02:58,950
to incorrect configuration of the

76
00:02:59,010 --> 00:03:02,190
UNSPLASH_KEY here in the '.env

77
00:03:02,220 --> 00:03:04,650
.local' file. Please double check

78
00:03:04,650 --> 00:03:06,600
that there is UNSPLASH_KEY with

79
00:03:06,600 --> 00:03:08,580
corresponding key, that is your

80
00:03:08,640 --> 00:03:10,230
UNSPLASH_KEY from your account.

81
00:03:11,070 --> 00:03:13,350
All right, now we are running our

82
00:03:13,350 --> 00:03:16,020
application locally. But we are

83
00:03:16,050 --> 00:03:18,540
doing that with help of Python, and

84
00:03:18,570 --> 00:03:21,060
NPM. And we are running this

85
00:03:21,090 --> 00:03:23,430
application without Docker. And for

86
00:03:23,430 --> 00:03:25,200
that we're required to install

87
00:03:25,230 --> 00:03:28,530
Python and Node.js directly on our

88
00:03:28,530 --> 00:03:30,510
computers. We require actually

89
00:03:30,510 --> 00:03:33,150
additional pieces of software in

90
00:03:33,150 --> 00:03:35,010
order to be able to run application

91
00:03:35,010 --> 00:03:37,200
like that. If you want you could play

92
00:03:37,200 --> 00:03:39,150
with this application. You could

93
00:03:39,150 --> 00:03:41,070
delete images. They are actually

94
00:03:41,070 --> 00:03:43,200
deleted from the state of the React

95
00:03:43,200 --> 00:03:44,910
application. You could search for

96
00:03:44,910 --> 00:03:46,980
new images, spend some time in

97
00:03:46,980 --> 00:03:48,840
order to get familiar with this

98
00:03:48,870 --> 00:03:51,300
frontend application. And after

99
00:03:51,300 --> 00:03:53,010
the small pause, I'll summarize

100
00:03:53,040 --> 00:03:55,050
what we did actually in order to

101
00:03:55,080 --> 00:03:57,300
run images-gallery project without

102
00:03:57,300 --> 00:03:59,550
Docker locally on our computers.

103
00:03:59,550 --> 00:04:02,176
[no audio]