1
00:00:00,140 --> 00:00:03,240
So far, we have implemented the text-based

2
00:00:03,240 --> 00:00:05,640
search feature and the image-based search

3
00:00:05,640 --> 00:00:06,540
feature.

4
00:00:06,540 --> 00:00:08,500
We have displayed destination cards with all

5
00:00:08,500 --> 00:00:11,400
the details for travelers to be able to pick

6
00:00:11,400 --> 00:00:13,500
their appropriate destinations.

7
00:00:13,500 --> 00:00:15,700
But one feature is still pending, the weather

8
00:00:15,700 --> 00:00:18,500
display feature and in this section, we'll

9
00:00:18,500 --> 00:00:20,720
be developing this feature.

10
00:00:20,720 --> 00:00:23,100
First let's get a good understanding of how

11
00:00:23,100 --> 00:00:25,340
this feature will be implemented, then we

12
00:00:25,340 --> 00:00:28,200
can proceed to the implementation in the subsequent

13
00:00:28,200 --> 00:00:29,840
videos.

14
00:00:29,840 --> 00:00:32,140
When a user sees the destination card and

15
00:00:32,140 --> 00:00:34,800
then proceeds to clicking the weather button,

16
00:00:34,800 --> 00:00:37,320
the button will trigger an event handler that

17
00:00:37,320 --> 00:00:40,420
will call an endpoint to get the weather information.

18
00:00:40,420 --> 00:00:42,640
This request will carry the destination we

19
00:00:42,640 --> 00:00:45,720
want to query the weather for in its payload.

20
00:00:45,720 --> 00:00:48,680
At the backend, we'll then create a tool that

21
00:00:48,680 --> 00:00:51,760
helps us retrieve this weather information.

22
00:00:51,760 --> 00:00:53,780
This tool will be passed to our Gemini model

23
00:00:53,780 --> 00:00:56,480
in the request configuration to the Gemini

24
00:00:56,480 --> 00:00:58,040
API.

25
00:00:58,040 --> 00:01:00,940
will recognize this tool in our request and

26
00:01:00,940 --> 00:01:03,560
call it to get the weather information.

27
00:01:03,560 --> 00:01:05,480
The model will then package the data returned

28
00:01:05,480 --> 00:01:08,640
by the function and a summary of the weather

29
00:01:08,640 --> 00:01:10,680
as its results.

30
00:01:10,680 --> 00:01:12,900
This information will then be sent back to

31
00:01:12,900 --> 00:01:15,240
the frontend for display.

32
00:01:15,240 --> 00:01:16,860
Now that we understand the process flow for

33
00:01:16,860 --> 00:01:18,600
the implementation of this feature,

34
00:01:18,600 --> 00:01:20,440
let's look at the pieces of the puzzle we

35
00:01:20,440 --> 00:01:21,880
need to develop.

36
00:01:21,880 --> 00:01:24,460
We'll be starting from the backend and there,

37
00:01:24,460 --> 00:01:26,040
we first need to develop the function

38
00:01:26,040 --> 00:01:28,100
that will enable the model retrieve weather

39
00:01:28,100 --> 00:01:29,200
information.

40
00:01:29,200 --> 00:01:31,020
Once we have that in place, we'll then develop

41
00:01:31,020 --> 00:01:32,520
the endpoint that will use the function we

42
00:01:32,520 --> 00:01:32,740
just

43
00:01:32,740 --> 00:01:35,260
created in a function calling workflow with

44
00:01:35,260 --> 00:01:36,940
the Gemini API.

45
00:01:36,940 --> 00:01:38,500
This is the process that will be used by the

46
00:01:38,500 --> 00:01:41,580
Gemini API to get us the weather information.

47
00:01:41,580 --> 00:01:43,160
If you would like to learn more about function

48
00:01:43,160 --> 00:01:45,460
or tool calling using the Gemini API,

49
00:01:45,460 --> 00:01:47,820
you can check out my Gemini API course on

50
00:01:47,820 --> 00:01:51,640
the topic titled Gemini API Tool Calling.

51
00:01:51,640 --> 00:01:54,520
After implementing these pieces on the backend,

52
00:01:54,520 --> 00:01:56,200
we can then move to the frontend

53
00:01:56,200 --> 00:01:59,360
and attach our event handler to our checkWeatherButton.

54
00:01:59,360 --> 00:02:00,560
This will make a request to the

55
00:02:00,560 --> 00:02:03,560
API that we just created, retrieve the results,

56
00:02:03,560 --> 00:02:06,000
and display a modal to properly present our

57
00:02:06,000 --> 00:02:06,300
weather

58
00:02:06,300 --> 00:02:07,420
results.

59
00:02:07,420 --> 00:02:09,080
Sounds straightforward, right?

60
00:02:09,080 --> 00:02:09,940
Great.

61
00:02:09,940 --> 00:02:11,920
Now, let's start implementing this in the

62
00:02:11,920 --> 00:02:12,260
next

63
00:02:12,260 --> 00:02:14,200
video, beginning with the function that will

64
00:02:14,200 --> 00:02:17,000
be used by the modal for function calling.