1 00:00:00,660 --> 00:00:05,040 In this video, we're going to take a look at a couple diagrams and understand how this convert component 2 00:00:05,040 --> 00:00:05,820 is going to work. 3 00:00:06,420 --> 00:00:07,050 All right, here we go. 4 00:00:07,860 --> 00:00:10,260 We've got our convert component that we are going to create. 5 00:00:10,710 --> 00:00:13,260 Convert is going to accept two different props. 6 00:00:13,650 --> 00:00:15,690 First off, it's a prop called text. 7 00:00:16,080 --> 00:00:19,650 This is going to be the text that we want to convert into some other language. 8 00:00:20,400 --> 00:00:24,960 We're also going to take a prop called Language, and that is going to be one of the options out of 9 00:00:24,960 --> 00:00:25,620 our dropdown. 10 00:00:26,010 --> 00:00:29,160 So it will be an object with a label and a value property. 11 00:00:29,910 --> 00:00:33,330 In this case, I'm going to imagine that the Hindi language is provided. 12 00:00:33,600 --> 00:00:36,610 So it's an object with a label and a value of H. 13 00:00:36,720 --> 00:00:37,080 I. 14 00:00:38,020 --> 00:00:41,260 We're going to provide those two props into the convert component. 15 00:00:41,580 --> 00:00:46,960 And then here is what the convert components ELF is going to do whenever we provide a new value for 16 00:00:46,960 --> 00:00:48,790 the language, prop or text. 17 00:00:49,090 --> 00:00:52,560 We need to make sure the convert component runs some code automatically. 18 00:00:53,170 --> 00:00:58,270 So if the convert component ever sees a new value for language or text, we're going to make a request 19 00:00:58,420 --> 00:01:00,520 to the Google Translate API. 20 00:01:01,210 --> 00:01:06,280 This API is going to be responsible for translating this text and giving us some translated output back. 21 00:01:07,910 --> 00:01:12,890 Now, the fact that I say here we got a new value for this prop and we should run some code. 22 00:01:13,190 --> 00:01:14,420 Whenever you see something like that. 23 00:01:14,660 --> 00:01:18,370 That is kind of a sign that we want to make use the use effect hook. 24 00:01:18,920 --> 00:01:21,230 So we are going to set up the U.S. fact hook inside of convert. 25 00:01:21,740 --> 00:01:26,990 We're going to make sure that is configured so that anytime we provide a new language or text prop, 26 00:01:27,320 --> 00:01:28,820 we run that use effect took. 27 00:01:30,160 --> 00:01:36,190 Now, the Google Translate API itself is going to take the text and the target language code or essentially 28 00:01:36,190 --> 00:01:38,440 the language we want to convert this text into. 29 00:01:39,040 --> 00:01:44,080 It's going to do the translation internally and then send us back a response inside. 30 00:01:44,080 --> 00:01:45,940 That response will be our translated text. 31 00:01:46,560 --> 00:01:48,070 We're going to take that translated text. 32 00:01:48,460 --> 00:01:50,260 Use it to update some piece of state. 33 00:01:50,720 --> 00:01:53,260 And we're going to show that data on the screen. 34 00:01:55,100 --> 00:01:59,440 And the first thing we really need to do here is get a better understanding of how the Google Translate 35 00:01:59,470 --> 00:02:00,430 API works. 36 00:02:00,640 --> 00:02:04,840 So let's just take a look at another diagram or two and understand how to use that API. 37 00:02:07,120 --> 00:02:11,190 We're going to take a look at the Google Translate API documentation directly, which you could find 38 00:02:11,190 --> 00:02:11,280 out. 39 00:02:11,310 --> 00:02:11,980 This you are L. 40 00:02:12,480 --> 00:02:13,650 Now, a couple of quick notes here. 41 00:02:14,070 --> 00:02:16,590 This is normally a paid API. 42 00:02:16,830 --> 00:02:20,070 In other words, you need to pay money to get your text translated. 43 00:02:20,100 --> 00:02:21,630 It is not a free service. 44 00:02:22,260 --> 00:02:24,270 You do not have to sign up for this API. 45 00:02:24,710 --> 00:02:28,830 I am going to give you an API key that you can use in the next lecture. 46 00:02:29,100 --> 00:02:30,480 So there's going to be a text lecture. 47 00:02:30,720 --> 00:02:31,500 Not really a video. 48 00:02:31,550 --> 00:02:34,820 I'll put in here a text lecture and Scyther. 49 00:02:35,010 --> 00:02:39,780 There will be an API key that you are going to copy paste and just hold on to for a little bit. 50 00:02:40,440 --> 00:02:45,330 Now, really important note here, in order to prevent any abuse of this API key. 51 00:02:45,390 --> 00:02:48,270 And make sure that people aren't using it to translate a ton of text. 52 00:02:48,630 --> 00:02:54,520 The API key is only going to work correctly if you are running your application on local host three 53 00:02:54,520 --> 00:02:55,170 thousand. 54 00:02:55,710 --> 00:03:00,990 So in other words, when you load up your react application, you must see localhost three thousand 55 00:03:00,990 --> 00:03:01,470 right here. 56 00:03:02,100 --> 00:03:07,890 If you are using some other domain, some other port, if you are using an online code editor or anything 57 00:03:07,890 --> 00:03:11,580 like that, this API key will not work correctly. 58 00:03:12,120 --> 00:03:13,740 There are a couple of exceptions to this. 59 00:03:13,860 --> 00:03:16,350 I did put some different domains on a white list. 60 00:03:16,690 --> 00:03:20,910 So in particular, if you're using a built in code editor through Udemy, don't worry, it is going 61 00:03:20,910 --> 00:03:21,960 to work fine in that case. 62 00:03:22,260 --> 00:03:26,670 But in general, if you're running your REACT application through anything else, the request may not 63 00:03:26,670 --> 00:03:26,970 work. 64 00:03:28,000 --> 00:03:30,880 OK, so now we've got some idea of this API key. 65 00:03:31,090 --> 00:03:32,920 Let's go take a look at the documentation. 66 00:03:36,750 --> 00:03:37,980 So here's the docks right here. 67 00:03:39,350 --> 00:03:44,150 We're going to find one of these main buttons on screen that says API is in reference and click it. 68 00:03:45,950 --> 00:03:52,370 And then on the left hand side, we will click on reste reference, then basic and then translate. 69 00:03:55,310 --> 00:03:59,250 But this is the API endpoint that we are going to make, you said to actually translate this text. 70 00:03:59,820 --> 00:04:06,540 We have to make a post request to this exact you URL that you see right there and in the query parameters. 71 00:04:06,600 --> 00:04:09,180 So not the body, the request, but in the query parameters. 72 00:04:09,650 --> 00:04:11,730 We are going to provide a couple of different properties. 73 00:04:12,450 --> 00:04:14,290 First, we'll provide a queue. 74 00:04:14,790 --> 00:04:17,220 He was going to be the actual text that we want to translate. 75 00:04:18,150 --> 00:04:21,210 We'll provide a target, which is going to be a language code. 76 00:04:21,300 --> 00:04:26,400 That is what we want to translate our text into this target property right here, or more specifically, 77 00:04:26,430 --> 00:04:30,210 the language code is essentially going to be one of these values. 78 00:04:30,690 --> 00:04:38,490 So the value F, A, R and HDI are very specific language codes that the Google Translate API understands. 79 00:04:39,090 --> 00:04:42,390 So if we provide a target of. 80 00:04:43,830 --> 00:04:44,480 A GI. 81 00:04:44,810 --> 00:04:48,140 That means we want to translate our text specifically into Hindi. 82 00:04:48,920 --> 00:04:53,750 If you want to add in any other languages on your own, you can open up this language support link right 83 00:04:53,750 --> 00:04:54,050 here. 84 00:04:55,670 --> 00:04:59,480 And inside this, it'll show you all the other languages that are available. 85 00:05:00,050 --> 00:05:06,650 You can add in additional options to that options array and you could, for example, add in about Dutch 86 00:05:06,800 --> 00:05:07,850 one to add in Dutch. 87 00:05:07,880 --> 00:05:09,620 We would look up the language code right here. 88 00:05:09,890 --> 00:05:10,510 It's N.L.. 89 00:05:11,300 --> 00:05:15,440 We could then go back over to our translate dot JSF file. 90 00:05:16,580 --> 00:05:18,080 And inside of our options array. 91 00:05:18,470 --> 00:05:24,020 Add in another object with a label of Dutch and a value of an EL. 92 00:05:25,150 --> 00:05:27,920 If you want to add in any more languages, that's how you're gonna do it. 93 00:05:28,040 --> 00:05:28,970 Just look up this document. 94 00:05:31,040 --> 00:05:37,790 Besides Q and Target, we are also going to provide the key, this key parameter is going to be the 95 00:05:37,790 --> 00:05:38,870 Valot API key. 96 00:05:39,080 --> 00:05:41,540 And again, I'm going to provide this to you in the next lecture. 97 00:05:42,930 --> 00:05:47,940 The response we get back is going to have a lot of information about the translated stuff rather than 98 00:05:47,940 --> 00:05:49,350 looking at the docks to understand this. 99 00:05:49,410 --> 00:05:53,820 There'll be a lot easier for us to just make the request and then inspect the response ourselves and 100 00:05:53,820 --> 00:05:54,660 see what comes back. 101 00:05:55,320 --> 00:05:59,880 So all we really need to understand right now is that we need to make a post request to that endpoint 102 00:06:00,090 --> 00:06:02,280 and we're going to include a couple of query parameters. 103 00:06:03,330 --> 00:06:03,640 OK. 104 00:06:03,840 --> 00:06:08,350 Well, I think that we've got a reasonable idea of what this convert component is going to do. 105 00:06:08,880 --> 00:06:13,860 So in the next lecture, make sure you take that API key that I'm going to provide you and just copy 106 00:06:13,860 --> 00:06:15,420 paste it into your editor somewhere. 107 00:06:15,960 --> 00:06:20,220 You can stick it out maybe the top of your translate J.S. file and we'll make use of it in just a little 108 00:06:20,220 --> 00:06:20,580 bit. 109 00:06:21,110 --> 00:06:21,460 Okay. 110 00:06:21,570 --> 00:06:21,870 Pause. 111 00:06:21,940 --> 00:06:22,440 And I'll see you. 112 00:06:23,580 --> 00:06:24,100 In just a moment.