All language subtitles for 005 Parsing The Incoming Request & Executing Server-side Code_Downloadly.ir_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:02,040 --> 00:00:05,770 So we got this feedback API route here 2 00:00:05,770 --> 00:00:08,810 and now as part of that function, 3 00:00:08,810 --> 00:00:12,060 I want to accept a incoming request 4 00:00:12,060 --> 00:00:14,310 with the email and feedback data 5 00:00:14,310 --> 00:00:17,540 and then store that somewhere in a database, 6 00:00:17,540 --> 00:00:20,390 in a file or for development, 7 00:00:20,390 --> 00:00:23,470 maybe also just in an array. 8 00:00:23,470 --> 00:00:25,110 And therefore, to implement this, 9 00:00:25,110 --> 00:00:27,460 we now have to do one important thing. 10 00:00:27,460 --> 00:00:29,540 Inside of this handler function, 11 00:00:29,540 --> 00:00:32,830 we have to find out which kind of request 12 00:00:32,830 --> 00:00:35,710 is triggering this API route 13 00:00:35,710 --> 00:00:39,000 because when we submit that form here, 14 00:00:39,000 --> 00:00:44,000 I soon want to send a HTTP request with JavaScript 15 00:00:44,080 --> 00:00:47,310 and I'll do this with the fetch function here. 16 00:00:47,310 --> 00:00:50,680 We could also use third-party library like Axios. 17 00:00:50,680 --> 00:00:52,370 That does not matter. 18 00:00:52,370 --> 00:00:55,970 But I'll send the request from inside my JavaScript code. 19 00:00:55,970 --> 00:00:58,680 And I will send a POST request 20 00:00:58,680 --> 00:01:01,120 because I don't want to get data, 21 00:01:01,120 --> 00:01:03,510 instead, I want to send data. 22 00:01:03,510 --> 00:01:05,910 So we would typically use a POST 23 00:01:05,910 --> 00:01:09,110 or maybe also a PUT request. 24 00:01:09,110 --> 00:01:10,610 Now, since that's the goal, 25 00:01:10,610 --> 00:01:12,330 here inside of that handler, 26 00:01:12,330 --> 00:01:14,900 we need to find out which kind of request 27 00:01:14,900 --> 00:01:17,960 is triggering this function execution 28 00:01:17,960 --> 00:01:19,540 because by default, 29 00:01:19,540 --> 00:01:23,750 all kinds of requests will trigger this function execution. 30 00:01:23,750 --> 00:01:28,120 GET requests, POST requests, PUT, DELETE, everything. 31 00:01:28,120 --> 00:01:30,830 Now, I only wanna try and extract data 32 00:01:30,830 --> 00:01:33,840 from the request and store it in a database 33 00:01:33,840 --> 00:01:37,890 or somewhere else if it's a POST request though. 34 00:01:37,890 --> 00:01:39,560 So therefore here, we need a if check 35 00:01:39,560 --> 00:01:41,090 and we need to find out which kind 36 00:01:41,090 --> 00:01:43,210 of request was sent. 37 00:01:43,210 --> 00:01:46,810 And that's easily done with help of that request object 38 00:01:46,810 --> 00:01:50,070 which we get automatically by Next.js 39 00:01:50,070 --> 00:01:52,340 when this function executes. 40 00:01:52,340 --> 00:01:53,760 This will give us information 41 00:01:53,760 --> 00:01:56,380 about the incoming request and for example, 42 00:01:56,380 --> 00:01:59,030 there we'll have a method property, 43 00:01:59,030 --> 00:02:02,873 which allows us to find out which HTTP method was used. 44 00:02:03,770 --> 00:02:07,020 And we can simply check if that was a POST request here, 45 00:02:07,020 --> 00:02:08,770 if it was a POST method. 46 00:02:08,770 --> 00:02:10,020 And if that's the case, 47 00:02:10,020 --> 00:02:12,680 then inside of this if check, 48 00:02:12,680 --> 00:02:15,090 we could try to extract data 49 00:02:15,090 --> 00:02:16,450 from the incoming request 50 00:02:16,450 --> 00:02:20,110 and then store that extracted data in a database. 51 00:02:20,110 --> 00:02:24,100 Now, let's say we expect our incoming POST requests 52 00:02:24,100 --> 00:02:25,890 to this API route 53 00:02:25,890 --> 00:02:29,910 to have this email and feedback text data field 54 00:02:29,910 --> 00:02:31,870 in the request body. 55 00:02:31,870 --> 00:02:33,250 That is something we could expect 56 00:02:33,250 --> 00:02:36,143 because we're the ones writing the code for this API. 57 00:02:37,150 --> 00:02:41,450 Then we can easily extract data from the incoming request 58 00:02:41,450 --> 00:02:44,260 with help of more properties that exist 59 00:02:44,260 --> 00:02:46,890 on this request object, 60 00:02:46,890 --> 00:02:49,590 to be precise, with help of the body property, 61 00:02:49,590 --> 00:02:51,470 which exists there. 62 00:02:51,470 --> 00:02:54,980 This will be the already parsed body 63 00:02:54,980 --> 00:02:57,400 of that incoming request. 64 00:02:57,400 --> 00:03:00,110 So Next.js will automatically parse 65 00:03:00,110 --> 00:03:02,420 the incoming request body for us, 66 00:03:02,420 --> 00:03:05,850 so it will give us easy access to the data attached 67 00:03:05,850 --> 00:03:09,390 to the request through that body property. 68 00:03:09,390 --> 00:03:11,650 And then body will just be the value 69 00:03:11,650 --> 00:03:14,560 that was sent with the request. 70 00:03:14,560 --> 00:03:17,390 So let's say here in our front end, 71 00:03:17,390 --> 00:03:19,610 we will soon send a request, 72 00:03:19,610 --> 00:03:23,095 which carries a body of a JavaScript object 73 00:03:23,095 --> 00:03:26,740 with an email field with some data 74 00:03:26,740 --> 00:03:31,740 and with a text field with some feedback text data. 75 00:03:32,290 --> 00:03:34,250 That could be the structure we wanna use 76 00:03:34,250 --> 00:03:35,510 in this application. 77 00:03:35,510 --> 00:03:38,830 And since we are the developer of this application, 78 00:03:38,830 --> 00:03:40,420 of this website, we can, of course, 79 00:03:40,420 --> 00:03:42,830 use any structure we want. 80 00:03:42,830 --> 00:03:44,735 So now we would send this object 81 00:03:44,735 --> 00:03:48,370 with a request to that API route. 82 00:03:48,370 --> 00:03:49,950 So on that API route, 83 00:03:49,950 --> 00:03:52,860 we could now expect that on this body, 84 00:03:52,860 --> 00:03:57,246 we get our email with request.body.email 85 00:03:57,246 --> 00:03:59,810 because we have an object as a body, 86 00:03:59,810 --> 00:04:01,920 which has a email property. 87 00:04:01,920 --> 00:04:04,150 And it also has a text property, 88 00:04:04,150 --> 00:04:06,320 so we can extract that as well. 89 00:04:06,320 --> 00:04:08,773 We can also get our feedbackText 90 00:04:09,660 --> 00:04:13,723 by accessing request.body.text then. 91 00:04:14,570 --> 00:04:16,680 So that's how we can extract the data 92 00:04:16,680 --> 00:04:20,019 from the incoming request if it's a POST request 93 00:04:20,019 --> 00:04:23,300 and then here we could store that in a database. 94 00:04:23,300 --> 00:04:26,870 So here we could create a newFeedback object 95 00:04:26,870 --> 00:04:31,870 where we add this email and text 96 00:04:33,150 --> 00:04:35,840 and then maybe also add a unique ID 97 00:04:35,840 --> 00:04:40,784 to have well, a unique identifier for every newFeedback. 98 00:04:40,784 --> 00:04:42,640 And here during development, 99 00:04:42,640 --> 00:04:45,950 I'll just create a new Date object 100 00:04:45,950 --> 00:04:48,260 and convert that to a string. 101 00:04:48,260 --> 00:04:50,320 It's not a perfect unique ID 102 00:04:50,320 --> 00:04:53,960 because theoretically, two requests could be sent 103 00:04:53,960 --> 00:04:56,540 and handled at exactly the same time 104 00:04:56,540 --> 00:04:58,750 but during development, that's good enough. 105 00:04:58,750 --> 00:05:01,163 It's a dummy ID we can use here. 106 00:05:02,320 --> 00:05:04,680 So now we would create this feedback object 107 00:05:04,680 --> 00:05:09,420 and we could now store that in a database 108 00:05:09,420 --> 00:05:13,050 or in a file or anything like that. 109 00:05:13,050 --> 00:05:14,540 Now, here during development, 110 00:05:14,540 --> 00:05:16,190 I will store it in a file 111 00:05:16,190 --> 00:05:18,440 and I'll create a new data folder, 112 00:05:18,440 --> 00:05:20,600 the folder name is up to you though, 113 00:05:20,600 --> 00:05:22,390 in my root project folder. 114 00:05:22,390 --> 00:05:25,070 So not inside of pages, api, 115 00:05:25,070 --> 00:05:27,140 you should not create it there 116 00:05:27,140 --> 00:05:29,810 but just in my root project folder. 117 00:05:29,810 --> 00:05:34,650 And in there, I'll add a feedback.json file, 118 00:05:34,650 --> 00:05:36,790 the file name is up to you though, 119 00:05:36,790 --> 00:05:38,730 and my goal is to open that file 120 00:05:38,730 --> 00:05:40,460 and store my data in there 121 00:05:40,460 --> 00:05:43,313 when we well, get that feedback. 122 00:05:44,290 --> 00:05:48,360 For this, I, will import fs from fs. 123 00:05:48,360 --> 00:05:51,910 So import the file system Node.js module 124 00:05:51,910 --> 00:05:54,620 and we can use Node.js code here 125 00:05:54,620 --> 00:05:56,850 because this will run on the server 126 00:05:56,850 --> 00:05:59,240 and this will only run on the server, 127 00:05:59,240 --> 00:06:00,960 never somewhere else 128 00:06:00,960 --> 00:06:04,110 and it will be executed with Node.js. 129 00:06:04,110 --> 00:06:07,670 So we can use all the Node.js features here 130 00:06:07,670 --> 00:06:12,670 and I'll also import the path Node.js module here 131 00:06:13,200 --> 00:06:16,030 and then here we can store that in a file 132 00:06:16,030 --> 00:06:18,500 by constructing a path 133 00:06:18,500 --> 00:06:21,870 with the join method to that data folder 134 00:06:21,870 --> 00:06:24,000 and there the feedback.json file 135 00:06:24,000 --> 00:06:26,310 by getting access to the current working directory 136 00:06:26,310 --> 00:06:28,860 with process current working directory, 137 00:06:28,860 --> 00:06:32,163 which will refer to the overall project directory. 138 00:06:33,030 --> 00:06:34,820 Then diving into data 139 00:06:34,820 --> 00:06:37,700 and then into feedback.json. 140 00:06:37,700 --> 00:06:40,200 And this will create an absolute path 141 00:06:40,200 --> 00:06:42,340 to that folder for us. 142 00:06:42,340 --> 00:06:45,723 So that's my filePath then. 143 00:06:46,620 --> 00:06:51,150 And then we can use the fs module to write to a file 144 00:06:51,150 --> 00:06:54,780 and here I wanna write to that filePath 145 00:06:55,890 --> 00:06:57,970 and then the data which I wanna write 146 00:06:57,970 --> 00:07:00,720 is actually this data, 147 00:07:00,720 --> 00:07:02,430 however, to be precise, 148 00:07:02,430 --> 00:07:05,060 I actually wanna read the file first, 149 00:07:05,060 --> 00:07:07,150 fetch the data which is in the file 150 00:07:07,150 --> 00:07:10,780 and then override it with the updated data. 151 00:07:10,780 --> 00:07:12,230 And therefore, to do that, 152 00:07:12,230 --> 00:07:15,260 I'll first of all, read the file 153 00:07:15,260 --> 00:07:17,220 and I'll do this with readFileSync 154 00:07:17,220 --> 00:07:19,803 to do it a synchronous blocking way. 155 00:07:20,830 --> 00:07:23,150 So I'll read that file here 156 00:07:23,150 --> 00:07:25,463 and that gives me my fileData, 157 00:07:26,390 --> 00:07:29,140 so the data which is currently stored in that file 158 00:07:29,140 --> 00:07:31,200 and that will be some JSON data, 159 00:07:31,200 --> 00:07:35,340 so I'll now convert to a JavaScript object to work with it 160 00:07:35,340 --> 00:07:39,583 by executing JSON.parse fileData. 161 00:07:41,120 --> 00:07:43,700 Then that data should be an array, let's say, 162 00:07:43,700 --> 00:07:45,730 and therefore, I'll add an empty array 163 00:07:45,730 --> 00:07:49,550 inside of this feedback.json file as a start. 164 00:07:49,550 --> 00:07:51,870 So this is an empty array for now. 165 00:07:51,870 --> 00:07:55,610 And then we interact with that array. 166 00:07:55,610 --> 00:07:57,380 We know that it will be an array 167 00:07:57,380 --> 00:07:59,870 because we own that file 168 00:07:59,870 --> 00:08:03,220 and I push my need feedback into that array 169 00:08:03,220 --> 00:08:06,290 and then I wanna write it back to the disk. 170 00:08:06,290 --> 00:08:08,480 So then I use writeFile 171 00:08:08,480 --> 00:08:10,340 and I'll use writeFileSync 172 00:08:10,340 --> 00:08:12,910 to again do this in a blocking way here 173 00:08:12,910 --> 00:08:15,210 and I'll write my file here 174 00:08:15,210 --> 00:08:17,210 by again targeting that file 175 00:08:17,210 --> 00:08:20,730 in that filePath and now the data which I write back 176 00:08:20,730 --> 00:08:23,820 is again the data converted back to JSON 177 00:08:23,820 --> 00:08:26,090 with the JSON.stringify method, 178 00:08:26,090 --> 00:08:28,340 I pass in my updated data here 179 00:08:28,340 --> 00:08:30,740 and that then writes the data to the disk. 180 00:08:30,740 --> 00:08:33,090 That's the goal, that's how this should behave. 181 00:08:34,049 --> 00:08:36,130 And then once we're done with all of that, 182 00:08:36,130 --> 00:08:38,259 we wanna send back a response. 183 00:08:38,259 --> 00:08:41,419 So then here I'll set a response of 184 00:08:41,419 --> 00:08:44,300 or with a status code of 201, 185 00:08:44,300 --> 00:08:48,800 which signals success, we added data successfully. 186 00:08:48,800 --> 00:08:51,332 And then any data of our choice. 187 00:08:51,332 --> 00:08:55,820 For example, an object sent back as JSON 188 00:08:55,820 --> 00:08:59,370 where I say Success in my message property 189 00:08:59,370 --> 00:09:03,533 and where I maybe also send back the newFeedback object 190 00:09:03,533 --> 00:09:05,013 that was created. 191 00:09:06,050 --> 00:09:07,870 So that will send back a response 192 00:09:07,870 --> 00:09:11,020 after we successfully updated our file 193 00:09:11,020 --> 00:09:14,340 and it sends back an object in JSON format 194 00:09:14,340 --> 00:09:17,290 with a message and a feedback property. 195 00:09:17,290 --> 00:09:20,290 This line of code would also execute though 196 00:09:20,290 --> 00:09:22,520 after we go through this if check 197 00:09:22,520 --> 00:09:25,310 because function execution does not stop 198 00:09:25,310 --> 00:09:29,040 just because we set some response data. 199 00:09:29,040 --> 00:09:31,980 Hence, to not send two responses, 200 00:09:31,980 --> 00:09:33,930 which would cause problems, 201 00:09:33,930 --> 00:09:37,130 we should move this code into an else block 202 00:09:37,130 --> 00:09:39,380 so that this does not execute 203 00:09:39,380 --> 00:09:42,773 if we just make it here into this if check. 204 00:09:43,860 --> 00:09:46,770 Okay, so now we spent a lot time on that 205 00:09:46,770 --> 00:09:49,760 but now we got some server-side code added 206 00:09:49,760 --> 00:09:54,760 to this API route using API routes-specific features 207 00:09:54,860 --> 00:09:56,860 like looking into the request, 208 00:09:56,860 --> 00:09:59,460 extracting request body data 209 00:09:59,460 --> 00:10:01,110 and running server-side code 210 00:10:01,110 --> 00:10:02,830 and sending a response 211 00:10:02,830 --> 00:10:04,800 and with all that added, 212 00:10:04,800 --> 00:10:07,340 we can now connect our front end code 213 00:10:07,340 --> 00:10:08,630 to that backend 214 00:10:08,630 --> 00:10:12,190 by sending that request to that API route 215 00:10:12,190 --> 00:10:14,283 to then see whether that works. 16194

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.