WEBVTT
But I only have a button that says details and I do not know how to connect it
Should I connect it via my local terminal or should I use this this browser version of the desktop?
Can you
Share your screen maybe
I
Have a couple of tabs here like courses course desktop stand-alone recordings and
I have I have now on course desktops and it showed by virtual machine
But it only has a button eaters and the other is course that says no JS and I do not know
What should I click?
Can you share your screen, please?
Let me just
Okay, and I see Stefan and Melina don't have their desktop ready
Okay
Everyone that one else you can click on the the icon on the bottom left the
Like the little squares the nine little squares
Okay, click on no
So what he click on no GS course no, yes. Yes. Yes
And then click to unconnect. Yes
So if you click on the
Under icon on the bottom left
the little square the little
nine white squares
At the bottom and then you start
Typing code you should have
Visual Studio code icon and then you can click on it and then
Yes code ready
If you have that you can yes just stand stand STA and stand, okay
STA and and it should be good STA. Yeah, it looks it looks like it works. Should I open the terminal?
You can yes or you can stay in VS code as you wish
If you are in VS code, yeah, let's let's all just
Dive in and just use VS code
Did you all use the VS code?
Okay, I used it
Okay, so we are we are going to use VS code and it's really nice to code in various languages and
Especially in JavaScript. It was created. It is created in JavaScript actually type script
It it embeds a crow and
because it is
Based on electron, you know electron electron is the base of many of the
Applications you use like slack or discord or VS code or
I don't know what teams there are a lot of
applications that you use that were
that are built from
Electron meaning from Chrome and are actually web applications
Okay, so this is
This is VS code and if you
If you type control J in VS code control J, you should see the panel
right
the panel is the the bottom part of the VS code and
if you
Type again control J it will disappear
Okay, so this is a shortcut really important to access the panel
Okay
Yes, please please type Stan STAN
No, no, no, no, you don't it's already installed
Okay, and
so
so what I wanted you to know is how to
Close and open the the panel with control J. Okay, this is really important you use this shortcut a lot
so
you since the default tab in the panel when you open it is the terminal and
In the terminal you can type note and then enter and then you are in what we call the rebel of note
note rebel
rebel means
read evil print loop
So it's a loop where you can write something and then type enter and it will be read
you got evaluated and then
something will be printed and
then you get back to
Position when you can start writing code again
Okay
So everyone is there. Yes, I think so
No, Christie who's Christie I guess question yes, okay perfect and
Malina I
Don't see
so type control J
Yes Jaguar yes
Yes, so and then you type node and
Stefan also you can type node and enter and Vlad you are on your own machine, right?
Okay, perfect, where are you? Oh, yes. Yes. All right
Okay
The other thing that is great if you use the the the virtual machine is that I can see what you're doing
So, please do know that I see what you're doing
Please be advised so
Everyone is on the rebel
So now you can
Write
one plus one and
enter and you should see two and
Then you are back to a position when you can write some code. Okay, so now
you have
Wrote you have written the first JavaScript code in node.js and you should be proud
You can you can use some of the
of the code that you might know in JavaScript like
math dot random and then parents
If you see my screen
No
and then I can math with an capital M random and
Parents parenthesis
Okay, do you know this math random
Yes, exactly and you can use new date
And then you have the current date
Yes, you see here a T and then a Z at the end
Meaning that yes, it is the the UTC. Okay, and then you can
write
console dot log
That you may know
Hello world
Who cannot do what Stefan
Okay
Okay, can anyone guess why if I
If I enter console log hello world, I have hello word and then undefined
Exactly
console log
Returns undefined and that is why I have here undefined. I will talk more about console log
In just a minute
Hello world, so
Now you can
You can do that
So do you
Do you all have access to the course on
On your browser
Because you will need it to so you can copy paste some code will be much better
You know, I am sharing two screens right my VS code and
My browser and
Yes with the link provided in the chat, I hope you can all see it
Okay, I'm maybe you were not connected when I
Okay, okay
Okay, okay, okay my fault
Here you should all see it now
Yes
So in VS code you should all have here my media right on the top right in my case
Yes, yeah sure. Yeah. Yeah, perfect. Yes media API. Sorry, I
Call it my media, but in your yes media API. Okay
so why why that is is because I
opened
This directory
In VS code so in VS code you can type control K and then control O
Then you can open
Directory okay the folder and
The one that I
the one that I opened it with was
media API and
So if you close your VS code and then you reopen it
It will reopen with the same state that you left that in in
That you left it
Meaning that it will open with the same folder that it was open with when you closed it
Okay
So that is why there is media API
Here it is because you are in this
Directory this folder
Okay
now in this folder if you click on this icon the
Like the sheet with the plus on the bottom, right?
You can
You can write src slash index dot js and
VS code will understand that you want to create a folder named src with with within its
file named index dot js
Yes, I don't think that's an appropriate position but you can easily change it and
I will demonstrate why I
Don't like it. So if you do see Explorer on the on the top of the this is called the sidebar
Okay
Yes, yes, it's configuration that I did
so
This is called the sidebar. Okay, and with ctrl B
You can hide it and this is a shortcut that you must know ctrl B like bar
Toggle the sidebar
Okay
Next to it is the activity bar with all the the big icons
This is
The activity bar there is no shortcut to toggle it but you can add your own to toggle it I
do but and
On the sidebar if you click on the on the on the top
then you can have access to
To a
Menu and in the menu you can change the activity bar position
From default to top bottom no, sorry, sorry to
Yes, you can move primary sidebar left that way. Okay, and since I often use
control B to
To toggle the sidebar
Here what here's what happens?
Okay, you see I have to move my eyes from
Here
To the left when I try when I want to toggle off the sidebar
This annoys me. This is why I prefer it on the right side
If I do if I make it on the right side, I
Don't have to move my eyes of the here for you see that here word. Okay
So here I
Can write console dot log parents and the world
And there is much to say of this line what can you say about this time
Yes, it returns undefined perfect what else
What is console? Yes, it is an object perfect. How do you know it is an object?
Because after that there is a dot yes, what is the dot?
Exactly it is it is the accessor
Operator yes, and so it's
Allows
the the programmer to have access to any of the
Properties of the object which is on the left. So console is an object
Doesn't know is an accessor and log is what?
Yes, it is but before you say it is a method it is a
Property of yes, it is a property of console. How do you know it is it is a method?
Yes, exactly because you call it or you invoke it okay
So log is a function actually and it is called here as a method
What what in the hell did I say so I
Won't talk to you into the details but
You must know that in JavaScript there are no methods
There are only functions and any function can be called as a function or as a method or as a constructor
Okay
So
Log is
A property of console and it is a function and what is hello world
Yes, it is a string. How do you know it is a string because it's delimited with quotes single quotes
Okay, and you can you can create strings in other ways in JavaScript, what are they?
Yes
Exactly, what are literal templates?
Everyone is familiar with literal template because we are going to use it. Yes back quote. Yes or back tick. Yes
Okay, everyone is aware of that and
Understands what Vlad said
Don't be afraid to say no
Okay, perfect
so
Where does console come from?
It is yes in the browser it is a web API in node it's an environment API
So console is not in the specification. It is not
Specified in ECMA script, okay
So
Console is is not a native JavaScript object it is a global variable
Provided by the environment here by node.js. And yes, it is
Also available in the browsers but in the browsers the implementation will be different why because it's not standardized
It is not specified in any
specification
Okay, so you won't have the same
API in console in no GS and the browsers
Okay, even in Chrome
so
The dot is a property accessor and you know another property accessor
Yes
so this can be
So this is the same almost the same this is much more performant, please don't use this if
If this is static, I mean this is if this inside the square brackets are not
Is not a variable, please don't use it
okay, and
last thing to know about
Yes, I think you all
Um, I think you own
Yes, well said okay, everything is okay. Oh
Yes, you said hello world is a string but I wanted you I wanted
And at least one of you to tell me that it was an argument of the log
function
Okay, this is an argument and you know how many parameters console log accepts?
Yes, many it's infinite you can you can you can see hello world
Maybe yes, but you you won't I hope you can't you won't reach the limit
So now you can
exit
No DS using control C
In your terminal, so everyone is out
Okay, perfect and
Everyone has a console log in index.js, right?
Yes, yes, yes, okay, so now you can
Type on the terminal node
SRC dot slash index.js and then enter okay run
So any please type control C
Twice
Yes
Okay
Control C is the break for any command in the terminal in any chef in power shell
Okay. So now you can type node. Yes, everyone did except Melina maybe
All you
Stefan you did not
save
Your index dot JS
So you can type control s to save
Yes, and then
Yes, okay better. Okay, so everyone has
written
Maybe not Christie. Oh Christie Christian you did not
You I did not understand you were trying to
Okay, so please start please
Create a
JavaScript file in the folder s RC called index.js. So in the Explorer
You can yes, you can click on the
Gag on with the sheet and the plus
Yes, and then us RC slash index.js
Who is talking and yes, so yes
Yes, tell me
Yes, exactly in the in the rebel you saw undefined in gray not in white
right, so
It is it was just to advise you that your
Your function returns undefined, but you don't need to know
in
You don't need to know that your
Function returns undefined in your file in text.js
So it assumes that you don't need it and it doesn't show
So now
Now a bit of theory I hope I want I
Hope it won't be too complicated
But I think it's really important because one of you mentioned even the the event loop I think it was blood
And this is a really important concept
So
JavaScript the code that that you write in JavaScript
Will run in a single threaded environment. Do you understand what it means?
Okay, so
if the there is only one thread and it's called the main thread and if the main thread is
Occupied is busy. It cannot
It cannot do anything else, okay
so
This is good because it avoid complications associate with multi-threaded programming and if you are
if you have
Developed in Java or sorry
In Java or any other languages that are multi-threaded
Might have encountered
Difficulties about how you man handle
multiple threats
so
The JavaScript is
The code that you write is only executed in one thread but
Exactly exactly. Thank you for the clarification. That is well was it and
To
Despite that no JS can handle
multi multiple
Things at the same time almost at the same time because it's even based
Because it has an even base concurrency model meaning that
Everything is
Happening in an event loop in the event loop is an infinite loop
looking for something to do and
If there is nothing else to do the program stops, okay, um, so
The event loop allows for non blocking operations and
What it means in that is that some of your
code may access the network or the database or the the
file system and
Using the while it reads
The what the file system is occupied
Getting the file that you want to read for example
No, it can do
Something else and it will
that is the whole point of the even base and
non-blocking operation system
So
I'm gonna give you an example
So I said that your code will only be
Handled by one threat but in no JS
Under the hood there is a thread pool
Which is handled by the lib UV which is a library in
C or in C++ C++ or both. I don't remember and
So the thread pool
Thanks to lib UV means that you can call
At the same time several
you can try to read several files of non-file system and
When they are already all the files are ready to be read
the it will give the power back to
No, JS and your code and then you will be able to
Do some stuff with the files that you wanted to be to be read
Okay
No, it's it uses the
Thread pool of lib UV for either the file system database or network
Requests and
It's it's perfectly perfectly
Transparent for you. You won't you won't use the UV yourself
Okay, it just so you know that even though your code will only be executed in one thread
That doesn't mean that there is only one thread in no JS. It's more complicated. I won't talk about way workers
I
Will talk about
blocking and non-blocking
So blocking operations
Means that you won't be able to do anything else okay until the operation finishes
for example if you read
synchronously a file from disk
then
if it's a
pretty pretty heavy file
It will block the main thread for a long time
Okay, and the program won't be able to do anything else
with non blocking operations meaning that if you
Read a file asynchronously
That means that you command
note you command the file system to read a file and
You and you tell the UV that when the file is ready
Do do the execute this function, okay and
This is managed through callbacks or maybe promises
Okay, a single weight is based on promises
I hope you all know what promises are because it's a really complicated subject and it might take one hour or two
To to get the grip of
Promises so I hope you all know about promises. It's really important
Especially now
Everything is promisified everything even the the native API of node.js
Is now promisified
It was
It was once built
with the callback
System and now it's all promised
So
The system initiate the operation then moves to other tasks then
that you can
Know JS can do and then when the
The operation completes its executes the the callback functions
Okay
So this is blocking and non blocking operations
Now the event loop
The event loop is really really important
so
it's a fundamental part of node.js and
it's allowed
to perform non blocking I
O meaning input output operations like faceting network database, etc
Okay
and
In OJS
most input output tasks are
Performed asynchronously you have the choice sometimes between synchronously and asynchronous and please always do
asynchronous
But know what you're doing. So every every every every time you call node with
JavaScript
File
node.js starts and it
starts the event loop
Okay, and
sits in its infinite if there is something in the
in
The message queue that is I will talk about it in a minute
then the
the program
Is still running
It only stops when the event loop knows that there are no even
event
That may be possible to
To have in the message queue, okay
So
If I do this
Can you all see my vehicles?
So if I do this
Do you know what will happen?
Okay, everyone agrees
Yes, so the
JavaScript will the engine will see this and will execute this so I will see start in the
In the console then it will execute this
okay, and
When it is resolved
It will add this on a queue I
Purposely don't tell you how it is named how to call but this is
This enter a queue, you know what a queue is
in any language
Computer programming what the queue is, you know the first in first out. Yes
Okay, so the queue is a fee for
So the first input will be the first output
The first in the first thing in will be the first thing out
Okay
So
Console log start then this then this will be added to a queue
Then this will be executed and I will see and in
The console and then this will be executed
because it is in the queue and the queue will be
Will be read
On the same order that it was
That some
That the things are be are were added in it and so I will see promise resolved after okay, perfect
We'll talk about set immediate
Or we like okay just just so you know, you know set immediate
Yes, it's almost the same meaning that
So you see that
You see that I have start and
Then end and then promise resolved and then set immediate executed
Okay, why because this is in a queue that is called micro task queue and
this is
Added in a queue that is called macro task queue
Okay, so every callback of any promise will be added to the micro task queue
And why is it why is it important it is because
the micro task queue will be executed as soon as
The the call stack is empty. Do you know what a call stack is?
Yes, yes you can see that way
No
You know what a stack is
Yes, exactly. It's a default. So the last thing in will be the first thing out. So I
will
Exactly
Exactly. That is what I want you to understand and this is really important and I will try
Because they are not
I will try to yes this one
Yes, yes, yes absolutely
just a minute and then
You have it on the on the course
So here there is a visualizer
visualizer of
The microtask and the macro task queue I
Sent you the the URL in the chat
You can access it
So if you press run
Then you have all the the four functions that are created then the function log a is called
Okay, so this is the call stack so the log a arrives and it's the first out
Lasting the first out then you have set timeout and so set timeout should be here on the call stack and
This is not quite correct. You should have seen set timeout here in the call stack
Do you see my no you don't you don't see my
my mouse
Mouse cursor, right?
Okay, okay, perfect. So this is the call stack and
Then you have the promise resolved then log C meaning that log C
Will be added to the micro task queue
Okay, and even though there is set timeout zero here and even though it was
Called before this callback
Log D will be here so last in first out and
Then the log C will happen
Okay, even though it was called after the set timeout because this is added in the micro task queue, which is
Which has priority?
on task queue or
What should be called micro tasks you okay is another visualizer? Why because this one is
But first it's not quite because you don't see set timeout here in the cost that we should should be
able to see it and the second thing is that
It is wrong because here
It is not added directly to the task queue it is first
added to the
Place that we call web API where all the web API are
Placed and
After zero milliseconds, which is never zero which is at least four milliseconds
It will be added to the task queue and so there is another visualizer
And you see here
If I take this I take the same code
Visualize
If I click on visualize and then very slow visualize so this there is the call stack
With lock a and then so yes set timeout log B and you should see here
Set timeout. Okay
Then is added
It should be should be here still
So this is oh yes, this is the callback queue meaning the
Micro task queue, okay
I repeat so log a which in itself calls
Console log a and then set timeout
What this is very very slow? Sorry and timeout so it goes into the web API
And promise resolve and
the log C will be added to the
micro task queue
So you have log D and
Then log C. Oh, yeah, but it doesn't know the log C
So this visualizer doesn't know about micro task and micro task queue. So
That this one is not really correct as I said and this one is not
complete so I hope you have a better understanding still with those visualizer about
micro task you and
Micro task and macro. So this is micro with an I and this is the
Task you are the macro with an a macro task
Okay
So set timeout and set immediate and set interval
Will be added to the macro task you all their callbacks
I mean will be added to the macro task you and the promise callbacks will enter the mic micro task queue
Okay, and the micro task you is has priority higher priority than the macro task you
Okay
So if you have console log start then set timeout with zero
So technically internally this will be for okay non zero
Then you have set immediate then you have next tick which I have not talked about and you should not
You should not
Need it
But just so you know
Next tick is
Has a lower priority of
Of them
Against the micro task but higher priority
What so
You have micro task you
macro task you and
Next tick queue and this is just because you might see it and
Some some code might I don't know and just so you know next tick has a lower priority
Than micro task but higher than macro task
Okay, so you will have start and end because these are these are synchronously
then the promise
then the nest egg and then all the
micro task
callbacks
Okay
So an exercise for you since you know that the execution order is first
There are currently executing functions then the micro task you then the next to queue
then the micro task
What will be?
The output of this code you you have it if you
Everybody has the open the discourse in their browser
Okay
So
Interval
Yes, yes
I don't remember but it is specified somewhere
And this shouldn't this shouldn't this should not alarm you in any way you you won't have problem with this
Okay, it's just so you know that you can't you cannot
Really have an immediate
Callback
You want to call back it will be called as soon as possible but at least four milliseconds
Exactly exactly. Yes
Depending on how the
Main thread is occupied before this. Yes, it will be at least 10 milliseconds, but maybe
100 milliseconds
Sorry, could you beat the same queue
Some instructions
Yes
But it can be quite tricky so so this is an example the exercise that I that I
That I'm asking you to consider is quite tricky there is one trap
Exactly, yes
Yes
Oh, yes, I think it's because you're using Firefox are you
Yes, unfortunately the the VMS
Cannot handle the copy and paste from your host. I mean your your own
Operating system to the inside to the VM inside your browser only Chrome can
Welcome but you can in your VM
Go to open the Firefox and
go to the
to the the course with with it and then copy and paste in your VM
Yes
Yes
It's strange is going on because the
next thing you seems to be
Having the highest priority, but
Yes
You're scaring me oh
Yes, you're right amazing that is not what I expected
And that is not the result I had
Oh, yes, thank you
It seems it has changed between no 18 and no 20
Sorry, but
Yes, yes
Yeah, so it seemed that I am wrong and I am sincerely sorry
so the next take
Has a higher priority than the micro task
And this is not what I
Yes
Decides from which cube
Something which
Examples we have the
Micro right from the promises which is also adding promise one promise two promise three
Then switches to another cube no, so
So here is the the call stack, okay
Then you call another function which calls another function
Okay, this is a stack so the last thing is the first out, okay, so this function
finishes
So it goes out of the call stack and this function finishes
Then it's out of the call stack, but this one
added
something in a macro task queue, so it goes here, okay, and
This one finishes
Okay, so it goes out of the call stack the call stack is empty so the micro task here
He is
So the the micro
Task you here comes in the call stack
Okay, and then this function calls another function. So here you have another call stack. Okay, then this function
Finishes goes out of the call stack and this one finishes and so it goes out of the call stack and then
You have the micro task
Queue that has another event here or another message and so it goes on the main stack
the call stack
Okay, is that that clear?
What else yes, I wanted to to talk about
The order of the promises that was the trap
Why is it that I have promised three before promise to?
It needs to be resolved first because the promise must be resolved and then it needs to be resolved to
Okay, everyone understood that
Yes, exactly after this is
Executed then it's it can be resolved and this is added to the micro task queue
Yes, so this is added to the micro task queue before this
This is why you have promised three before promise to that was the trap and that I'll say okay. So perfect
Thank you very much everyone
Things that was quite quite a bit I think
I
Suggest that we take a five-minute break
And clear your mind. Okay and stretch, please stretch and do do something on run run
Run a bit. Okay
Drink and see you in five minutes. Okay
Five minutes yet. Okay. Is everyone back?
Yes
Oh, that's a good question, I don't know I don't know I I rarely use it I don't know and
But no, no, no, no since it has higher priority than the microtask it's it's really
Happening as soon as it can
Well, yes a second exercise the last exercise about promises
This one
So if you have this, you know, what will be output
What will be the output in the console?
No cheating allowed
You have to know that this function that I am underlining overlining maybe
That I'm selecting is always called involved synchronous
Exactly, okay. Okay, Marlena
Okay
Sorry what what what comes last
Yes, this callback is added to the microtask you
Immediately so this is called immediately this is called immediately then this is called immediately and
Then oh
Sorry, this is called immediately. This is called immediately and this is added to the microtask and then
This is called
then the
the call stack is empty and
the microtask
Has this one in
In it and this is called
This
Yes, when this is called
This function is added to the microtask it and that was your question or
Only when this is called this is added to the microtask
So about the event emitter interface
So the
Event loop is quite
It's really important to know
In node.js and another thing to really know well
In node.js is the event emitter interface
Many of the native built-in objects of node.js
Implements the event emitter interface
Okay
the event emitter interface allows object to emit and
Listen to
Events, okay, so you might know this with it's really similar to the
HTML element add event listener, okay
The the API is really really similar
For the core features are
It allows for even driven communications
that means that object that emits that emit events are
instances of the emits even the amateur class and
they can
emit and listen to events and
Thanks to that you can call
Functions that are asynchronous callbacks with the
Thanks to the events that are emitted
So you might know maybe some of you know jQuery and on on and off maybe
So this is really similar, okay, and there's a once that
Allows you to only call a callback function just once just the first time even is emitted
No, it's separate no it's separate
We will see it I will answer
But you will answer your question on your own with the things that I'm gonna say
here you import
For everyone do you everyone know about ESM meaning ECMAScript module
meaning the
import export syntax
Maybe not Ference
Okay, so this is the syntax that allows you to import a
Module and
If you see note
column
As this one it means that events is is a native
Module inside note and you don't have to install it
Because it's already in node
Okay, the node
column is
Optional but I strongly recommend you put it in every import that
You you make with built-in node.js objects modules and
Okay, and this should be a rule in your yes lint rule
You don't know is it I will talk about yes lint in
Maybe not today. I don't know
Yes, and no
You know that there are no oh yes
Yes, you can call it a class. I am I don't like to
to talk about classes in JavaScript because
They they don't really exist
Do you know why I say that classes don't really exist in JavaScript?
Because what we call classes in JavaScript are this really functions and
In other languages classes are really like blueprints of
the house and the object is
the house itself
Okay in JavaScript
There is no such thing as a class in
In the way that there is no blueprint of anything everything in JavaScript is a value and
a class in JavaScript is actually a function that
You can only call as a constructor
Meaning that you can only call this function with the new keyword
Okay, when when here
You see the new keyword here it means that event emitter is a function and
Here I call it as the constructor. Okay, this is one of the three or more ways
JavaScript call a function you can call it with new and if you call it with new this function is called as a constructor and
it has implication with
The the way that these
This keyword is bound in the function. I don't want to talk about it in detail
but if you don't know about how
This work in JavaScript that this keyword works in JavaScript
It can be difficult at first
Okay, because not because it's complicated it it is a bit but because it's not
like all other languages
Because the the this keyword is bound dynamically and non-statically
So if you don't understand what I just said, it's no big deal. Okay
So I
Import event emitter from events events is a module built in now.js
Then I create an emitter
Using the
constructor event emitter then I register an event listener with the
function on
Okay, which is a property of any
event emitter and
Then I say whenever event
Whenever the event called event is emitted call this function so on my emitter if I use the
emit
function
with the
event named event
Then this callback will be
executed
Yes, exactly
Yes, this might not be yes, this is not a good name for an event
Okay, so here I can
Okay, so my event
So I register
This event under my event event and whenever I emit my event
Then this callback will be called. Okay
Okay, so now an exercise for you
If I add the following code at the end of this one what will happen
This is my event I forgot to fix it here so this is my event sorry, what did you say?
After this one so you can
You have an error
Oh, yes, yes, I know okay. Thank you. Thank you
So
Okay, I will have to talk to you about
Okay, I'll just
I'll just explain what what yeah, let me just bring and then then we can
Talk about your error because because I know where it comes from. Okay
I'm just finishing about even emitter and then we go to NPM and then
About your error
So
What I wanted you to know is that
Since I have emitted emits here my event
Then I will see an event occurred
Okay, then in two seconds
Meaning that the node will not
Not close until two seconds
Because I use setTimeout and to 2000
Meaning that I will add in the the API the node.js the host API
this function and
I will tell him to add it to the message queue
meaning to the micro task queue in two seconds and
this function will be added and
Will be called so I will see before a second event and then
This will be called so I will see an event occurred and then after second event
Okay
Yes, this is synchronous and that is why
I told you a few minutes ago that you will answer your question yourself because
Since I see before second event then an event occurred and then after second event
Then you see that this is called synchronously. I mean the callback
Associated to this event is called synchronous. So it's not added to any
queue
It's called synchronously immediately. I mean
Yes, exactly, yes, yes it is
Yes
The the call all the callbacks associated to the event will be called
In the same order as they have been registered
Yes
Okay, but you can try you can try to add different
Callback functions to the same event and see what what what what what the result is
So
Bit now about method in properties
So you have emit on event emitter that triggers an event
You have on that adds a listener to the specified event in the first
parameter here once that only calls listener the first time the event is emitted and
Remove listener with the same event name and the same listener so you will have to have a
I mean a
Yes, I don't like to call that reference in JavaScript
But yes, you will have to have a name of the function here and not a new function
When I mean by that and it's really important. I hope you can see the
my
My VS code here if I do that and then I do that
This will not work as expected
because this
Callback is not this one. Okay, this is a new function
Even though it looks the same function. It is not the same
They are two functions that do that do the same thing, but they are not the same
Okay, so if I really want to use off I
Have to first add
Cost of my
I
Have to first add a variable with the function
And then
Then this will work as expected
Okay, because this and this
Will be the same value meaning the same function and
This will be removed this listener will really will be removed
Okay, everyone, okay
Okay, so a bit about best practices
Error handling you you will use this
and
Always listen for a special error event of any event emitter
If it's emitted and not handle no JS process will crash and you don't want your no JS
process to crash
So, please always listen for error event
Avoid excessive synchronous work any even handler should perform a minimal work synchronously, okay
But it is called it is called
Synchronously, okay, but in the function call is synchronously you can call asynchronous functions and you should do that
okay, and
Every time you add a listener you
Take the risk of
memory leak and
Use more memory
Okay, even to emitter is
internally in node
used extensively
Okay, and
For example the the global process variable
Is
Is for an object that extends even to image. Okay, this is
12 noon and 20 for you, right?
When do you want to go for the lunch break now or in half an hour
Okay, perfect
So NPM I
Hope you have heard about NPM
So historically is the it's the node package manager but since it's includes numerous package that are beyond node
It's a joke
Was joke I think they
For a time here at the top left
there was a
Rotating
Just I mean play of words with they added three words that
Were starting with NP and M and that didn't mean anything
Unfortunately, they stopped with this joke I was quite fond of it
But anyway, so NPM what is NPM do you know what NPM is
Yes, is it only that
So first it's a company and it was bought by github in 2020 and
If you don't know github
Had been bought in
2018 by Microsoft so Microsoft is really really really big in the JavaScript community and
In the open source software in general, okay
Please know that Microsoft owns LinkedIn
github and through github NPM and
VS code is also created and maintained by Microsoft
So
besides a company
It's a website with NPM JS com. Okay, and
this website
Allows you to see the registry which can be
the biggest open source package registry ever
in any in any language
Okay, and it is also a CLI. Do you know what the CLI is?
Yes, command line interface or command line interpreter, yes, so the NPM CLI
They are installed when you install node.js
that was not case at the beginning of node because node and NPM were distinct projects and
as I told you
node.js was created by
Ryan Dahl and
NPM by Isaac Sluiter so
It it since a few years after the creation of node and NPM it was
Always
Delivered package
Together but it was not the case in the first years
So the NPM CLI can be used to either
Create minimal package JSON and that's what we are going to do
with the command NPM in it
You can use it to install dependencies that are listed in a special
The special file called package JSON
Install new dependencies with NPM installed in the name of the package to run standard scripts like NPM start
And some custom script and if you want to run custom script you must use
The run prefix
Okay, so NPM run and then the name of the script do you know all this or is it new
Okay, perfect
So now we're going to to really begin a simple
Project and
I wanted you to create a new directory, but I have done this for you and this is called media API
Okay
Then use NPM in it
So you are going to open the terminal and
And execute NPM in it
If you do so
You will see
That it asks for the package name so you can call it me
And you and you see in parentheses the defaults since the default is okay
you can just
Type enter, okay
Then you it asks for the version
And what that zero that zero that's okay. So enter
the description you can
Write restful API for
Movies and series
The entry point will be src dash slash index
dotjs
And not index.js
The test command I will I will talk about it later
Get repo
Nothing now and keywords you can add anything you want I will add media
Movies series
And that's it okay author
You can
I will add myself but you can add maybe the name of your company
And
Between
How you call this I don't know the garden is for this
This character
You can put your
Email address and the license is C meanings meaning means that it is open source. Okay
And then you can see that it outputs
Adjacent file content and it asks you if this is okay and this is okay, so I'm going to press yes enter and
Now you can see here that I have a new
Package isn't fine with all that I
Entered okay
Okay
Now I will ask you
Everyone to get an API from
OMDB API you go to one DB API calm to decide
Then you click on free put your email name your first name or last name and you
Here you can make right training
Everyone has a key an API key
Okay
So now you copy paste this code
And you replace the dots with a real code I
give you
What do you need ten minutes maybe though, what will you need do you know the fetch API
Okay, so we'll use it you'll use it here and
That's it
Yes
Yes
So you will need to know about the fetch API and to know about how the API works
and
API
He works this way. So you have this
okay, and then you can add a
Parameter like by search and s you will use t s and
The API key, this is too obscure. Let me help you. I mean that the URL
Will be something like this
Okay
So there you have your API key
And it you go how you
put that here and
the search is a
Keyword or several keywords after the s equal
The the what the what party yet after the key
Yes, this is as for search and this is a keyword you can you can
Yes, so you can call it Batman or love or or horror
Okay, I see people that don't know how what to do with the URL
Okay, so I'm gonna talk a bit about the fetch API
So the fetch API
Is an API that were first built in the browsers and has come to node.js also
so
You can
You can fetch something
with the function with the function with the name fetch and
by default it calls
With it does an HTTP request
with a get method on the
URL that you put on the first
The first argument, okay
This returns a promise so you can
Use the then method on the return of fetch and
The response will be in JSON so you have to transform the body of the response into a
JavaScript object with the JSON method on response
And this also
Returns a promise so you can have this
So here in data you have the result you have the body as a JavaScript object
so in data
You have something like
Something like this
Okay, this is the raw data and since I'm in Firefox developer edition, I have a JSON
View which is quite agreeable to see much better than raw data
Yes
And so
The return object in the JSON is
Has three properties for a search then total results and then response and
what I
Interested in is search shows are the title that I want that is almost perfect blood
Oh
Yes, you can do that but it's not what I asked but
That's not that's not the most important part
so
Just instead of the I just put s and and just put I don't know and what you
And instead of TT
Put just an a word
Yes
No, this is the right way
Yes, you should put I don't know yes, that's great
Okay, I won't just search
So I'm gonna give you the answer
Who is that
Attila great. Yes, something like that. Okay. So first
So first how can I put the API key here there are two ways I
Can do that
Okay, I hope you're watching my screen
I can do that. This is quite old-school
It works no problem
But I would rather
Use the template string
Like this one, okay
So here I have back ticks
Okay, and this is called an interpolation
Okay, what is inside the dollar dollar curve brace?
dollar opening curly brace and
Closing curly brace. This is an expression
It will be evaluated and then
Converted to string if it's not a string and then concatenated
Yeah
Okay
Then I make the fetch request to this URL that I just built here
I receive a promise that contains a response this response
Is a is an object that has a JSON method
that I can call to
Transform the body of the response into a JavaScript object that I can manipulate
Okay
so in data I
have as I said
the
the the content of the
The thing that you see on my Firefox on my browser
So I have a property called search
with some of the results
Why do I say some because I only have ten results and the total results is?
22,000 more than 22,000 so here I can do
Then
Titles host titles equal data dot search
Okay
And then I can console log the titles and what I want you to do Vlad is to
Get the this code and put it in a then callback
Okay, that was the main thing that I that your code was lacking I know maybe you did it before I
After I went from
And this but that was the main thing that I wanted to modify your code
And so if I do this no
Yes, I
See all the titles wait do you want the answer in the course maybe
Or I did
So, you know, yes, I'm gonna tell you about another way to do it and
I will get an error that will be almost the same as you had
A few minutes ago Vlad and I told you I will tell you about this error
So I
Can do this I can do an I can write here and wait
What does this thing do is that you wait wait for the resolution of this promise and
the resolution of the promise goes into the body variable and
then I
Can do that
Okay, this code is correct, but if I
Executed it
will tell me a weight is only valid in asym functions and the top-level bodies of
modules and
This is really important
Okay
you
Maybe
You had a similar error when you when you tried this code, right?
Why
Because
It also
Requires to be a module and what is a module is a neck masquerade module
This is just a common js module and this is default in node js
so what I will
urge you to do in every project that create from now on is to add here in
packet JSON
Type module and not common js
Okay, you see here I only have two choices common js or module please just use module
and
if you do that
This code is
Running without their okay, man
So again, I just added type module in package JSON
Please do
Do it every time you create project one other way though
Is that instead of
Instead of
Instead of
Instead of adding the JS extension you can add mjs extension
It's called Michael Jackson, yes it is and if you do that and you without
type module in package JSON
It runs smoothly also
because if you
if you name your
Your your file with the mjs extension
It tells no j that it should be treated as a negma script module
Okay on the opposite if I add type module
And I want it to be treated as common js
You write the extension cgs
Okay, and here I will have the same error okay because it's not a module okay
So, please just remember to type to add type module in your package JSON
So now
If I run this or this is body
Okay, just with this await this await
I repeat await for the promise to be resolved and
The resolution of the promise will go into the body available
By nine from lines eight and ten
This returns a promise but this with the await but this await
means that it
It will wait for the resolution of the promise
before it continues here this
this is exactly the same as
Okay, just a minute just a minute
Okay
This part and this part are rigorously the same
Yes, this is still asynchronous
Yes, you can see it that way yes, it is a syntactic sugar yes, it was added in
2018 I think
What is undefined
Who's talking
Okay, you must use back ticks and I don't know about your keyword so back ticking I
don't know
Yes
One
So you can click on reveal answer and you will have my code
I didn't made a mistake
Okay, now it's now it's okay it's fixed and here
Okay for this to work sorry
For for this to work
The this
Sorry
Yes for this to work that this
file must be read as a module so either
use type module in package JSON or
Name it index dot mjs
Okay to be able to
Use the awake keyword just tell me
From the first option way way the second one I'm
Once we have the result from the
This one also this this one also will be executed only when this
Promise is resolved because of the await keyword
These two code are rigorously the same
No
Okay, I think we will stop here and after lunch we will do almost the same but as
a
HTTP server, okay
Then we will
just with the the the HTTP
Native node.js module then we'll try to
refactor it to express
And then we will refactor it to use fastify which is the
Web framework that we will use throughout of the whole training. Okay. Do you have any questions about all we did this morning?
Okay, so we saw about
Some of the
Some of the vocabulary that we might use and it's really important to know it to be able to discuss about our code
with others and
so that we can understand the
Other others when they talk about their code. So I'm talking about what's an object in JavaScript
What are types in JavaScript?
That console is not in the
Atmoscript specification we saw that we saw that the dot is a property accessor
and we saw that
In JavaScript an object can be a function or an array or a literal object or an object literal
Sorry, or some built-in
Some I mean native JavaScript like date or math
and it can also be a
host object like console
we saw that
the code that we write in JavaScript is
executed in only one thread and
We can mitigate this that can be viewed as a limitation
with the blocking and non blocking
Operation and almost all the operation we do in JavaScript
That can be done in a non blocking way should be done in the non blocking way and I mean
I that that it should be
Used every time we can with the asynchronous
Callbacks, okay, and we saw the event loop that it's an infinite loop that checks for and
Dispatches events we saw the different cues microtask you and microtask you are really important
Next excuse not really important. But just so you know that if you see it you
You don't
You know be so surprised and
What did we see we saw the even emitter interface and we would see a bit about it later this afternoon
and
we saw about NPM and
Create a package JSON that has minimal information about our project and
created a
Simple
Index dot JS file that we
Can use or not in
necroscript module way
Meaning that if you add type module in package JSON
It will be treated as a necroscript module and you should always use this
syntax
Okay, so have a good one. See you in
Seeing what half an hour more less
Okay, perfect see you
Okay
Exactly
Exactly, yes this this means that
Sorry, I'm looking for a word in English
No, it's the
Tonke
Until
The promise return return by
Then here is resolved the
This is this is where the the code
Blocks, okay, but it's not blocking the even clue just as you said
Meaning that if this is done if this is done in a
In a
In a in a in a request
Well in a in a route handler
We will see what is your what the route?
Routender is but if this is in a code
That is executed if
Somebody makes a request to this route particular route
If during the the fetch another request comes in
Your application can can treat it can process it until it has the response
Is everyone here back
Okay, perfect
So I told you that I would like to rewrite this
So that we use the built-in HTTP module
Before that maybe
We want to
Yes
Maybe we want to not
Put this
In clear text in our code base
Because this is this might be sensible data
sensitive data
Okay, so
What I am proposing you to do what I'm suggesting when I'm suggesting is that we put this
In what we call a dot of five
So we are going to create in the
route in the root folder of the project a
dot of five
You see then this dot of has special icon. Oh
By the way, you see these icons because I installed the extension VS code icons on your VS code
Maybe you don't have these icons
Okay on your on your computer birth on the VM you will have the same
And so we will add
DbAPI key equal and
Your API key of OLDB in the dot of five
Okay, everyone did this
I don't know where you are. Did I lose you?
Maybe I lost your
Could be true
Oh, yes, yeah, okay
So yes dot dot
Neither do I yes, maybe the package is not nice don't know
Okay, maybe I forgot so you can press ctrl shift
X and this opens the extension
part of the sidebar and
You can search for VS code dash icons
Yes, oh yes and here you on the
Jolt don't touch anything on the on the upper side of on the top of VS code you can click on VS code icon
Yes, and now if you use your explorer so shift ctrl E
Okay
We're just using the an extension that makes the icons prettier than the defaults
in VS code, so you should press ctrl shift and
X and
It should open the extension sidebar. Yeah, then you look for
search VS code dash icons
And click on install oh it is installed so click on it maybe
And then use it
Set set
What does it say the first button on the the first blue button
Yeah set file icon theme, yes
Press set file icon theme and then click on VS code icons on the top
And now if you go back to your explorer with shift ctrl E
E like Explorer, okay the first letter of Explorer
Yes, well you should create it dot of to create a dot on file
No, you can but I think it's simpler from the explorer of VS code
Who is this
Stefan go back go back to VS code icons
And click on set icon theme
Yes
And click on click on that at the top click on VS code icons. Yes
Where are you
Any good
I don't see we
Okay, this is perfect
Just write one DB
underscore API underscore key equal
Yeah, and then
API key
Without cause yes, this is not this is not a JavaScript file. This is a dot on file and you should have
You should have
Syntactic coloring
And you should just like me you should have the
Where am I that you should have the equal sign in red
Maybe I forgot this one too. Sorry, you should have the dot of official
So shift control X dot of and should be the second one
This one yes that are official from that of that or
It's not red but change the notes
Black bells
Yes, it's on purpose and you can click on the link at the top of the
just above the
Your line and click auto toggle auto cloak just above the line just above the line
Yes, maybe you don't have my theme
Yes, maybe you don't have my thing to change the theme maybe I
Should have told you more about VS code. So let's talk a bit about VS code
Okay, so I told you this is the sidebar and this is the activity bar
okay on the either on the right of the sidebar if you have the sidebar on the right or
At the left of the sidebar if you have it on the left. Okay, no
Okay, this is the the activity bar. This is the sidebar
with
control J you can toggle the
Panel so this is the panel. This part is called the panel. It has it has several tabs in it
Okay
the
the problems
In the problems you have all the
the the either the warning or the
The errors that it has detected on any of the file of your project that is open currently
Output is for the on the extensions
They can output some some some information
debug console is to
Just like the console log of your your
browser
terminal is the terminal ports are a way to
Forward ports I won't talk about it
Open shift. I don't know what it is. I don't use open shift and
And
Commons I don't know this one. This one might be new
Okay, so really important terminal and problems
Sorry
Oh, yes, okay. Yes, maybe it's from extensions
What else what else what else
Yes
Some shortcuts so so you know about control B
to toggle the sidebar control J to talk over the panel and
Then you have shift control E or the Explorer
Okay, this is the Explorer and you can see all the files of your project here
it has
an outline of the
Current
Open file you can
You can go through it to
go
Quickly to any part of the code the currently open file. We have a timeline that
Saves all the different states across time of your
file
Yeah, the open editor I don't use it I don't like it and I don't know how to get rid of it
It was simple in the previous
Versions now know how to do it
Draw I don't know what it is and so knowledge is from my extension smiling so don't pay attention to that
So this is the first
Combined shortcut that you must know is shift control E to go to the Explorer
Then you have
What is your shift control F to find and it does not only find can replace and
The first time you open it
You have only this here if you click on it. I
Hope you see all my VS code
Here if you click on it it makes the search
Sensitive case sensitive if you click on this, so let's say
URL so here it detects the four
The four occurrences of URL, all right
And if I click on it there is only three because this one is not
With the same case is lower case and this is uppercase. So it does not
Find it
if I click here I get all the the URL, but if I
get the L
Does not constitute a whole word
So it doesn't not find it
Are talking to me
So control E and control shift control E shift control F find and here you can click on the
on the
Don't know the word list or this particular character. So if you click on it
You can have an input to put something to replace it. Okay. Oh, by the way, this is to use
Regular expressions, do you know regular expressions?
Really really useful
Should all know a bit about
Regular expressions so here you can replace and here if you click on the
three dots here you can
Tell this good to only search certain
Certain files or folders and can exclude some files or folder folders
In your search, okay
So this is shift control F to find then you have shift control D to debug and
We will use it
later not today
Then you have shift control X
To go to the extension and the last one is shift control
G
G like get so it
It shows in the sidebar the
Everything about the git or bazaar. What do you use? What SEM do you use you use git or bazaar or Mercurial?
Okay, it's really important to know about get it's it's quite complicated
If you're interested I can do training also in jib so
So here are the five
Shortcuts that allows you to go to the five
Different parts of the sidebar
Matching the five icons on the activity bar that you have by default. Okay, the first five ones
Okay, I
Had some extensions for you such as Docker and I
Added I think shortcuts to go to Docker if you type shift control D. I
Think oh no, it's at at sorry. Sorry. It's at the
Okay, um
So what was yes if you hit the alt D you should see the Docker view
With the containers. Yes, so did it
Okay, so this will use tomorrow I think I hope
So there are plenty numerous and almost an infinity of extensions
with for VS code and
And I just
Install some of them. Okay, I so I
Did not install all the ones that I use
But all the one that really matter for the train
Okay, well I hope I hope I did but
so VS code was installed but not
activated right and
Dot was not installed. Is that correct?
Okay
okay, so
now
back to
our dot on file
so this is
My on file and how do I get here
The environment variables that are declared into the dot on file
This is the way
Process dot of
That
OMDB API key so
This here at the right of all that
Must be exactly the same as in your dot on file. Okay, this is exactly this right?
Now
It won't work
Natively so when I run node
If I do this it will say the API is not
Not okay, so I will have an error here I think
So I added a catch
Why those who works for me doesn't
So who for who does it work still
What
It should not
Yes, that's that's that is what I was expecting okay funny really really
Yes, that was what I expected
so
Tell me the
The version the node version you are using for the not yes
Okay
And you're sure you have the save the file
Okay
So to make it work
There are a few ways
Okay, the first one is not the one that we will use but I want you to know it
So the way that we're going to do it is
To use the dash dash of
Target of the note
And I think this is or maybe it's on fire
Yes
Okay, so this is one option
Just add dash dash on fire and the path to your dot on fire. Okay a
second way and
This is why we are still in the NPM
Chapter is because we are using we are going to use NPM to install another package
To handle this dot on and it is obviously named dot on so to install a package
we I'm going to show you your my package JSON, okay and
just
Pay attention to these packages in here. Oh, so you told me you don't know about git
much, right
Okay
Okay, how do we create a git repository
Okay, so we're going to use git init
Just git init and then what it what it what it creates is a
dot git
folder
In which there will be all the database of the repository
Because you can see a git repository as a database of contents. Okay, so now you see
For for those that made them that executed the git init you see now that your prompt
is now
Has additional information and
The you have
Background color which is yellow then
A character here that
That is like a branch of git or
a road sign
to tell you to to to go right, okay to go on the right lane and
And then you have master right
Master is the name of the current branch. Okay, so what I want you to do now is to
Add
We're going to add all okay. This should not be done
Should not be done
Generally this should not be done dash dash
Capital a should not be done. Why because you are adding everything and
This is not a good practice. Okay, but for simplicity and because it is the start of the project. I'm gonna do it
So you see here that
You might you might
This this
interface, okay
So maybe it's your it's in English or in your language. I don't know
So sorry git status
status if you
type git status
You you have the status of the current
state of your repository
Okay, so it says no commit
It says you are on the branch master maybe yes, you are on the branch master
there is no commit and
these
addition or modification or changes yes, and
Those changes will be committed and this is all green
Okay before
Sorry just a minute. Oh
Oui
Oui, je suis en formation. Oui, j'ai mangé mais tu peux
Tu peux venir et commander ce que tu veux avec mon compte pro parce que je vais manger très vite donc j'ai recommandé
à plus
So
Before I add the files in what we call the index
Okay, it was all you should have this in red right
You can yes
But I don't think it helps you to understand
Git
But yes, you are right. You can use
if you will all of this and
So if you want to add all you click on the plus here so this plus
Means exactly the same git-git add-capital-a, okay
And now
Now you should see this everything is green and is ready to be committed
Okay, so now I will commit
git commit
Dash M and the message
message would be
Meet NPM project
Okay, and then you see that the background goes back goes from yellow to green
If you have the green it means that everything is
Is
at
Every file is at the same state as the last commit
Yes, thank you yes, thank you so
Sorry for that. Yes
so
You are going to do git config
dash-dash global
user
Dot name again your name
Your name so Stan
Okay, and then get
config
global
user email and then your email
As an error
Oh
It's dash M like message not N
It's git commit dash M like message
Okay, everyone is okay everyone is green almost everyone
Okay, so
Now you will
Add package that is named dot on to do so you will either
Write NPM install dot on or since we are all developers and we are lazy just
NPM I dot on I standing for install okay, and here you go
now
You should you should see two things first it
Goes back from green to yellow meaning that there is modification in your working directory
Second that you have a plus here at the end of the
After master
You have a plus and
Plus
Plus and minus sign okay that means that in your current working directory
there are some new files and
Some lines that were deleted
Okay, and if you write get if you have this one
this line that was
Erased deleted removed and those one that were added, okay
Get diff come difference as in difference
What do you mean it doesn't show
It's almost yes, yes
So it's almost the same line
if you look closely and this is important for the for the for the configuration of yes, it's so
If you look closely there is a coma here this line there is a coma at the end
So it's not the same line
I'm sorry who's talking I can I can I'm sorry because I I am
watching
your VMs, and I don't know who is talking and I I'm sorry I don't
Recognize all your voices. Yes, so Stefan. Yes, so
What's your what's your problem?
Oh, yes use the arrow key the arrow key down down arrow key. Yes
So this is
This is the less
Less program
You know less maybe you don't know click on quit keep you queue for quit the fun use queue for quit in the terminal
and then go
Less packet JSON and now you can use the arrow key the the yes the arrow keys. Okay?
Okay, this is used internally by default by git
for everything
That doesn't fit the screen
It uses less so you can use the arrow key to go down and up, okay
Maybe I should have
So please everyone's watching my screen
so you see here I
I
just
entered git diff, okay, and
Since my terminal is not
big enough to show all the
Other content I
Must use the arrow key down
to go down and when it says and I am at the end of the file and I can
type queue for quit
Okay
Now
The important thing to notice is that when I
When I used NPM install it added
dependencies
property and
in it an object the value of the this property is an object and
in it we have
.of which is the name of the module and
Here we have the version
at least a range of
versions a
Range of versions. Why do I say a range of versions?
this is
Versions specific versions specific versions. Sorry, okay
This is the version 16.4.5 of .on
if in my package.json I do this I will only have this version of
the module if I do this I
Will have the latest version at the time I do NPM install of the
16.4 branch
Meaning that I can have the 6 and the 7 and even 12. Okay
And
This is the same
almost as this
This is the latest this means the latest
of the 16
No, no, sorry this is the same
This is the same as
This okay this tilde here means
The latest of the 16.4.
16.4 and at least the 16.4.5. Okay, and this
Means
This
This means at least the 16.4.5 and the latest of the 16 branch
Okay
By default when you use NPM install
It puts a carrot here. Okay
So now that we do have these .on
Module
Not only did this happen this modification of the package.json, but it also created a nod modules
folder and
in it a .on folder and in it all the
Package
Contents of the .on module. Okay
This is not our code. This is the code from .on package module
Okay
Now how do we use it we use it
simply by importing
.on
from .on
Okay, this is the name that I give
to
Whatever the default export of .on is. I can call this whatever I want
But please stick to the name of the module
And
For this I will load the environment variables with the .on.config function
This will automatically read a .on file at the root of the project. Okay
So I was not planning on
Talking to you about this already
So it's not in the course yet, but I will I will add it tonight, okay
Okay now
Now everything should work as expected
So this is work, okay
And
We then the .on file
Okay
Is everyone at the same
status than I
Or do you need time to catch up?
I will add this
In the course
Yes
There you go
Well everyone has installed the .on module right
Okay, what is undefined show me
Okay, this should be good
What is happening okay, this should be good
Add
Get after the line 13, please add console log
Okay, oh yes
I told you to put the .on file at the root folder in the root folder not in the src folder
so move it at the
You can take it and move it
At the bottom and it will go to the yes exactly
and then you can go back and run node
run node again on the
On the terminal you can run it again and yes
Yes
Yes close the package JSON please
Don't save don't save
and then you go
Ctrl P and P
2 times P and and yes here you go and you have it. Okay, and now I should change it
No, no, no, no
you
You you did not add type module in package JSON
And it says here in the console you cannot use import statements outside a module
You really should know this error means that it is not
It is not read as a module. So you just have to type type
Module yes, perfect
And this should go smoothly
Maybe you did not save all that on your dot on files you see there's a
There's like a pin
Yes little disk, okay
Yes
Okay
You're welcome is everyone okay now
Yes, okay now
So what do we do now
Now you can see in in the course that I will
Have you create a server with the
Node.js native HTTP module, please read the course and then try to make it work
Index HTML no, there is no index HTML
Yeah, you should not delete yours
You just you should just see what I wrote in the course and then adapt it to your index.js
Yes, do you know the difference between the good developer and the bad developer
This is not a trap
Yes, no, I'm don't I really don't like comments
that the comments that I you see here I just so you know the
Statement that I asked me you to do okay, but a code should not have many comments
Comments should be used really scarcely
Why because if you add comments it means that your code is not easily readable and
Understandable as it might want to put some
comments where you do something that is not quite right or is
not intuitive and
Or because there is
Specific reason to do what you're doing to your code then you you you create a comment
explaining why
But but certainly not how
Your code is and what your code is doing just why you are putting it this way
Okay, I hope I hope you understood me
No, so
The first answer was quite correct you don't copy paste code. Yes
You can copy paste code but from the official documentation, okay
so here
To get the URL you should know how to get the euro. I am I am helping you here
Okay
You should know how to get the query string, but do you know what a query string is
Exactly
Exactly, so please please everyone see see my what please everyone pay attention to my VS code
To my VS code yes
What is this
Yes, you can call it that way
How can you call it this is a URL
Okay, what is HTTP?
Protocol perfect what is example?
Yes, and it should be is it every time a domain
It can be an IP so this is not a domain this is a host
Okay, this is called a host
And what is this
8440 the port number exactly
And
What is my route?
Yes, you can call it a route yes, it's called path, okay
And this is
A query string
Okay, this is the query string
This is the path
This is the port number. This is the host. This is the protocol and what is all this this three?
What is it? What is it called? You don't know it's called the origin
This is the origin
Okay
the combination
of
protocol host and port number
Is called origin whenever one of those changes the origin changes and this is really important for
cross origin resource sharing
As you might know as course, maybe you have heard of it
No
So this is really important to know that origin is the combination of protocol host and port number
Okay
So this is the path or the route
This is the query string and this is the hash the hash
The hash is never read by the server
the client doesn't
Send this to the server
only this okay
this won't be in the
In the request on the server, okay, but you can
Get
All of the others data here, okay
So
Here you create a server and here you give a callback to the server this callback will be
Called every time you make a request to the server and here you start
the server and you you by telling him to listen to this port on this host name and
Whenever it's ready
you you
You ask him to
Run this function to invoke this one. Okay
So what I'm gonna do is just here
Command this and
Wreck dot URL and console log URL
Okay, just so you see that
When I run
src.js
the service starts running and
It does not stop
Because it is still listening what having any request, okay
Now I want to show you the
Or I have much to show you I want to show you
The extent the extension that I installed for you that is called rest client
And to see the points of this
Extension I will ask you to create a file in a test folder
named API but
HTTP you can either call it HTTP or
Rest doesn't matter it's it's the same
Maybe some of you know postman
Okay, well postman is quite complicated and it's really difficult to add all the
The
Other collection of requests in the project
because you have to export the collection into
into a
into a file and then
you have to put in the the project and it's quite difficult to
to
to when you have
When you have a conflict in it, it's quite complicated to
To handle them
Okay to deal with them
so this file
Will have the same purpose as postman and it will be much simpler and it will be all in one file
That you can understand and the machine can understand. Okay. Everyone has a API dot rest or API dot HTTP file
I don't think so if you do
if you write HTTP
Localhost 3000 you should have a link
above it that says send request and if you click on it you'd have this
Yes
Yes
Yes
So everyone is okay
Okay, so you have the slash just like me
Okay, and then if you put API
V1 slash
F
And you click on send request you should hear have slash API slash V1 slash help
Okay
So now you see that in rec URL all you have is the path, okay now
Yes, so what I want you to do is to get
The value of the S param in the query string
Meaning that if I
Just do that I
Should see I should get love here in search I would like to have love
How can I do that if I do send requests you see that in the URL?
I have all that I need can someone tell me how I get this maybe I can split the
URL at the
Question mark and to be the second yes, you can do that
Yes, you can do that you can do maybe you
You use the C or C++
No, what what what language have you used I just used a
Okay, so I'm just so you know there is
An object native object which is called URL
So if you see my
My browser I can go to MDN
MDN should should be your go to
Documentation okay, this is French
All right, so I'm going to look for URL and the URL constructor
Yeah
Helps me a lot why because
I can do that and then you see my my
browser I
Can use the new URL?
Constructor the URL constructor to build
the a new URL and then
But I will show you
Okay, so the base URL is not important. Okay, because I don't really need it
so I
Can use this one
API base URL and I only have to
Only have to use an origin, okay
so
protocol host and
port if
What I can use them?
I'm sorry. I am not
It's not mandatory to to
To indicate the port number if it's the default one for for the protocol, okay, so I'm just going to do that and
I
am going to
Create the URL
with
This the URL and the API base URL
Okay, and from there
And from there I'm sorry, it's not in the course yet so
So I have to develop with you
There you are well
You see that I have search parents and search parents you see this is all
Intelligent smart completion, okay, and with the ABC it's not smart completion
Also completion. This is dumb. This this means that
it
Suggests me words that it found in the project. Okay, and here with the other
Icons here. It means that it really has
these
properties
Because it detected the object
Object type, okay, so I want I'm going to use search parents
and
Here I can get
all the entries
or the keys
or a specific value
for a specific
Parameter
Okay, so the search
Is this
So if I control see the server and so if I
Quit the server and if I shut down the server and then I rerun
With the new code and I send a request here. You can see that I only have love
Okay
This is what I wanted, okay
Now that I have what I search I can use this
And I let you do it I'll give you two minutes to create all this
It's called rest client
Is this one
No, no in the VM that I built for you
But it's not it's not installed by default when you you install the escort
Yes, yes
And you mean you don't have send request about
Okay, okay, just let me arrive where are you
So Stefan right
Yes, it's wreck dot URL not coma
Yes wreck dot URL
So strange
Can I do you think I can take control or I
Don't know how to do this
Interactive
Whoa great good stuff so
Why does it look for oh yes, this is why oh
Sorry
You did not save the fire the fire wasn't safe so so try again
Yeah, go on go on or maybe I can't maybe you can because I'm here
Okay, this is really strange
Titles join
No, no, it's here
Okay
Now it's working
So anyone has a problem with the task at hand
Where who are you?
Yes
Okay
Yes, why is it why is it do you think
Yes
And so how do you get only the titles
This is JavaScript so what do you have in search this is
Please see my just watch my VS code
So in search what you have you have objects, okay with some properties
So, how do you get only the title?
This is a what is the list of object yeah
Yes, it is a list of object
Yes, exactly who told that
Yes, who it was love who told about map
So, how do you use my is everyone aware of the map array method?
Yes
Okay, who does not does not know the map array method
Yes, please do
Yes
Yes, where where does it save it
No in a new array
That the map function returns
Okay, so when you call map on an array it creates a new array with exactly the same number of elements
and each element
of the original array is
transformed or what we call mapped mapped
to a new object
And this new object is what is returned by the callback function that you give to the map method
Yeah, okay. This is this is too complicated. Okay. Let me show you an example
I'm sorry. I just broke my glasses. So give me a minute, please
So search is a
I want to show you what it is
Constraught console.no type. Yeah title
Okay
So if I call it
Your is not defined. Yes
Okay, so this is the titles
That I get okay. It's an array of objects
with the property title that I want
And maybe the year
Okay
So search is an array so I can call map on it
And map requires as
An argument a new function that will be applied to any element
of
The of the original array
Okay, so here here I can call it whatever I want is the element of the array
Okay
There is second
Second
Parameter that is the index. Okay, and there is a third
Parameter that is the original array
Okay, I won't need them I will just need to return a new object
Sorry
to return a string
with el title
and maybe
space
And the year
In parentheses, okay
and this
Thanks to this but I think
No, no
Oh, that's bad
Refactor
Convert to template string
Oh, I may have
Maybe so I selected this okay all of this from el to here
Right click and then refactor then convert to template string
And it writes here for me, okay
So here I have the titles and the year in parentheses
In this function we just called for the map we change the elements
It does not
Will not change the original element of the array right? Good question. Yes and no
so in the map
You will when you call map you create a new array. Okay, so it will not change
The original array
Okay
but
You can do things that you should not but you can
like
In el
This is the element
and you can
for example add a
New property on each element which will be titled with here and this will change every element of the original right?
Yes, yes, this is really important to know and
And
I think that that wasn't the prerequisite but not maybe not as clearly as it should
That you should know
the difference between a primitive value
and
An object value
For example run js
Okay, i'm going to share with you
I don't know exactly how it is internally implemented
So we could have done directly then if you call it on one array, maybe could have done a copy of that array
So somehow to still stop you from modifying the original array, right?
Yes, and no it's it
There is no such thing in javascript as
a
Deep cloning or deep copy, okay natively
Okay, i'm gonna show you this
you see all my
Does everyone see my the the yes, the third the third window that i'm sharing
Okay
I'm writing. Hello. Everybody's seeing hello
Okay, this is a run js application, I mean this is the application run js, okay and
It allows me to write
Javascript and even typescript
And see the result immediately
Okay, so
when
object one
When I do that
And then I do that
Um, what do you think will happen if I
If I do this
Why
Perfect even though the objects seem to be the same object it is a different object every time you use
the color brace
the opening color brace
Like this it creates a new object
Remember, this is exactly the same internally as this
Please do not do this, please do not write this write this okay, but it is exactly the same
Okay, so when you do that you create a new object you create a new instance. Okay, so this is false. Yes
Okay
But if I say if I do this
What will that be
Why is the same reference
Yes, you can remember it that way but
Please know that there are no reference in javascript. There are no pointers and there are no reference in javascript. So this means
this object
The object you created here has two names has the name object one and object three
Okay
Yes
It should you're right
Okay, so this is true
Okay
It should be
Okay
Okay, this is false and this is true right so now if I do this
Uh, odd one and odd two and
Um three
Uh
Everyone agrees
Okay perfect
So this is true
Okay, and now if I do this
Will this be array two should be a shallow copy of the first array
Mm-hmm. And what is a shallow copy for everyone? It copies only the first level of an object but
Yes
Not the deeply nested with the properties
Exactly. So this returns
You all agree because I don't
Yes, so this
And this
and this
And this
Are three ways to access the same value
Okay
What is empty oh no, no
Yes to be exactly the same, okay, and so last if I do this
Map el
El
Okay
Now I have
Three elements in array one, okay and for each one
I create
a new
Value which is the value either of the foo
Property or the bar property if foo is false today that way I have
Uh an array with the string foo and then the string bar and then the string foo, okay
but
if I
Do this
Well, I should not do this
Just yet
Okay
But if I do this they all they all have the new property
Because here
All we have is a complex object
and if I and since every object is writable by default in javascript
I can add a property or modify a property or delete a property of
Any of the elements in map? This is what?
This has changed it not the map yes
Okay, everything everything is okay for everyone
But normally this this thing that you did in line 25 should not be done
No, this is bad this is bad
This is bad and that that is
That is a what we call an impure function
And every function that you give to map
Should be in the realm of the pure the the functional programming and therefore should be pure function
and
since
This modifies
the input
It is not pure. So this should not be done. Definitely. This is wrong
This is definitely wrong
Okay, so I hope that answers the vlad vlad question about does change
the
elements in the
In the original right
Um
I recommend you to test run.js. It has a free
a free
Well, it's free and you can pay like ten dollars to have
to have some some some
Some premium
functional features
But really the the free one is quite great
Okay, so I don't want this I just want to map the the the each element of the search
That is returned by the open m api open db
Open movie database api to just a string
Okay, and so
Um
if I do this and I
Restart the server and I send the request
And here I have
all
The titles with the year in parentheses in an array, okay?
Thanks to this map function. Okay now can I um
How can I
Sorry
How can I send instead of just text? How can I send json specify line 33 that
Text json, yes application json. Oh, yeah
Right, it has changed over the years. So, uh, maybe text json is still working but
application json is good
and then
What do I do with titles?
And I guess we should stringify that with json stringify
Okay, do everybody knows stringify from json?
json is a native
uh a native
javascript object
That only has two properties stringify and parse
Okay, so it can
uh parse uh text
To build a javascript value
Or on the contrary take a javascript value and convert it into a string
So if I do this
and I
Start again
My server and I send the request again
Should have here
What happened well here I go, okay
So
We now know
Oh by the way, um, yeah, I did not tell you that uh, this is all the response
this is
The first is the protocol used
Second there is the the http code
Of the response
200 is okay and it should almost every every
Every time should be 200
For post um for post
Request
I mean request with the post method it should be 201 and this is the text
Status
Of the response 200 is okay 201 is created
Here you have the content type of the response
the date of the response the states of the connection
and the transfer encoding and then we have um
Black line and then the response in json
Okay
and
so
The 200 comes from here
Okay, right head means right header
So you write header and you first give this http status code. This is really important for any api to respect
the http codes
And then you add an object with every header that you want to add
http by default adds the date and the connection and the transfer encoding
But you have to tell your client that your response is in json. All right, so this is quite
um cumbersome to
get the search and if you want the
if there are
Multiple parameters in the quest string
You don't want to go there
through over this and oops
This and this
and
you don't want to
to write all of this and to stringify yourself or this
and so
there are
modules that were built to upon on top of this http module and
And make the life simpler simpler for the developer and that's we are going to see with express
Okay, i'm just gonna write this in the course
Yeah
Yeah sure
when I
Triggered the when I access the the from the browser. I also saw in the
Logs of the node
Can you show me please yes. Yes. Yes
Oh, yes, yes, um this this you cannot do anything the
Your browser needs to
display
For your for your
for your
To give you a good user experience. It wants to display for you the the the fab the fabicon
in the in the in the tab of the browser
And so it looks for the standardized
Fabricone
Path which is fabicon.ico
At the root of your of your domain. Okay, this is
This is the the browser that makes it for you you cannot do anything about that
Um
So I wrote here
If you click on
Reveal answer you have the code that I wrote for you. Okay, it is the same that I have here
um, i'm just
to
Eliminate the constructor
Okay, now we are going to try to use express so first thing to do is to install express so how do you do that?
You all know how it's called express nobody knows everybody knows
Yeah, exactly so npm i express
And since I gave you the hello world
In express, oh I did not uh, I can add
I can add
Also, I did not
Finish about the good developer and the bad developer. Oh, yes
Uh, I did I told you that the good developer reads documentation official documentations
All right
So this is the official documentation about express
And i'm going to add it in the course
Uh, so i'll make express
Here a link
Here you go
So this is a link
That goes to the home of express.express.js.com and here is link about the hello world
I just repeated the hello world here so you don't have to go there
But you should know
that there are many more
things to know about express and if you want to
To know more go to the official documentation
And what I want you to know is that since
Express is more
Makes it simpler for the developer
Is the result of invoking the express
Function, okay
And so here if I
Use
this
The response is hello world
Okay, because I sent hello world
All right
now
First thing first if I want to send json
I just do json
And here
If I stop and restart and then
Send a request again. I have a json and you see that
it's express
Added by itself this header which should not be here and we will
Normally will
Remove it but it adds this content type
It automatically adds content length
meaning that
This is 27 bytes
It adds an e tag. This is for
Cache caching
And the dates and the connection
Okay, so this is much more much simpler, okay
You just give an object or an array and it will
Transform it automatically in json
Okay, and the second thing is
that that when you
want to
When you want to have the query it's available in web.query and if you want just the search
It transformed it automatically
in
An object query is an object and every property is the name of the parameter here
So let me show you
Here search
And if I do again the send request I have searched with love
Okay
So now that you know that I will ask you to refactor the code that you have
To use express and to do the same thing but with much less lines than previously
I will give you five minutes
You think that's okay
Yes, yes you can
So
Everyone succeeded who has difficulties or encounters
Yes
Oh because you have a this is not a node js problem, this is a
Shell problem. You have a quote at the end of node src next js in your terminal just do ctrl c
So
So atila is good
Eniko, where are you?
You are lost you mean
You said you're lost
Okay, you should have told me before
Okay, so
You can please remove the commented code
Okay, okay, okay, okay go go up please so here you can you can comment the import http
Okay, you're not using it
And
So you are importing dot-on then you are importing express then you are using dot-on to read the dot-on file
Then you get the api key from the environments then you create a port a host name that will use it later
You create base url api url search url
Then you create an express app. Okay, this is really important
then
You can comment the line 29
It goes with the the other portion of the code you commence it, okay
Then you add a route which is the
root route
Meaning slash okay at line 49
And you add a route handler which is this callback that will be called every time
the a client
asks for the slash route
Okay
Yeah
I clean a client 50
You get
you try at least to get the
s parameter the value of the s parameter of the query string
Of the url sent by the client
Okay, yeah
Make me look at your api rest file so here in your query string you have s equal love, okay
So the search in your code will contain love the the the string love
All right
You can you can save this file, please control s
Okay, and then go back to your index.js and then at line 51 I want you to make
um
A request just like the line 40 see the line 40. Yes
So you get the body
of the response
from
Yes, perfect
And you will
Create the url it's just fetch
Fetch
Fetch parenthesis and in parenthesis you you you call the url and the url
Is the concatenation of the search url?
Plus search, okay. Why because the search url is the api url
Which is wmdb.com
um
Question mark api key and the in the api key
and then
S equal
Okay, so
Finally, you will have htp
Ww.omdbapi.com
slash
Question mark api key equal uipi key
10 s equal m search
Which means love
Yes
So this will give you a response
and you will
Try to get the json value of the body of this response. So here you go res
Res fat fat arrow
Res dot json, okay, so this transforms the body of the response
from a json
String value to a javascript object value. So in body here you have
um
You have the
the response
As a javascript object and so you want to res json
the titles
Only the titles so you can use the lines of 41 to 43
Oh, it's dollar not
Okay, and you can remove the line 56 and line 55 modify it to send just titles
You can you can remove everything and just
Send title, yes, you can even remove the
The object yes, you can remove the
Yes, the curly braces here. Yes. Perfect
Now you can run the your server and it should be good control c and
Do not
use
the slash
Backward slash on on your terminal
You inserted a backward slash
Maybe you did not install express so npm install express. Yeah, I installed it
But maybe I need to reopen this package
Yes, uh in your terminal press control c and then npm install
Npm
It's just that yes, okay and rerun your server
Uh, it's express not express it's an x
At the start of your module
Okay
Okay, go to api rest and send me request now go to api dot rest the file
And click on send request
Okay, oh
um
The dollar sign should be outside the curly brace not in
Uh, well
Oh
So now, uh, i'm going to tell you a bit more about
Uh
About refactoring in bs code. I already showed you how you can transform
a
a old school
Concatenation with template string. Do you remember?
I clicked right
Yes, you remember I clicked right and then refactor and then convert to template string. Okay
There's much more you can do while refactoring with bs code. The first thing to know is when you press alt
and then
the
Arrow up and down you can move a line you see
Um
Uh, if you are on the line and then you press ctrl c without any selection
It copies in the um in the clipboard
the whole line
So you can anywhere in any line you can press ctrl c and ctrl v
And then you copy
the line
You copy paste the line. Okay control c control v and then you okay
There is a shortcut unfortunately
Linux has the same shortcut for the window management
So maybe you want to change it
But it should be
shift alt
It should copy
a line
Shift alt and then um arrow down it should copy the line and
And put it at the next line
And shift alt
Arrow up
It should copy it
above
Okay, does it work for you or is it
Oh, yes, but this it's it's
it's
important to know so
maybe
And try control shift
Uh arrow down, what does it do?
It it also makes um
Several cursor
Multiple cursor
Ah, yes, and this
This okay, i'm sorry about that
This is uh, this is from uh, you are Ubuntu. Okay, this is not uh in vscode so
uh, you can um, what I do in Ubuntu is I
I change those
native keyboard shortcuts, but what you can do
which might be
better
Is you press ctrl k and ctrl s?
And then you go to keyboard shortcuts ks keyboard shortcuts and then
You can add
Copy line copy line down. So ctrl k ctrl s
Sends you to
the keyboard shortcuts and then you can change the
the shortcut to
For the copy line down action
Or the copy line up action
Okay, so
I had this
and
Uh, I had
And I had
Okay
And I had this
So what I need
Is this I don't need anymore
Okay
This I need
So I will use it
and
Yes
Yes, you're right and
No, um this API base URL should not be used anymore because you're not using this line anymore
API base URL should not be used
Yes, those are those are still uh used
I want to show you where so this is
transformed into just this
Okay, these these two lines
Are transformed into this. Okay, so I don't need them anymore
Okay
This
I still use this line. Okay, and this also
And these titles I still use it use them here
And these two lines
Are just
Becoming this line
So this is used here this is used here and this is used here so they are all
used
All right
I have just one question before uh line 27. It shouldn't be send the status code back as well
Before before what line before line before line 27
Should not be specified the status code like as that status 200 or something like that. Shouldn't we do that or
You can
You can but by default
It's a good question really
And thank you for writing it
um you can
here
that is
And then you can do this
Okay
but
If it's 200
You don't need to
If json does not have any status, uh numeric, uh status code it will send 200
So it is important only for posts and errors, okay because for post I repeat
For post we want to send the 201 status code so that it is created
Meaning that whenever you do a post
Whenever you do a request you make a request with the post methods
You create a resource and you want to notify your user that you created
um appropriately the
The you want the server
To tell the client that the resource was created has been created. So you send 201
I see and that means that the rest of json is enough. We shouldn't put rest of n or anything like that. Yes
Yes
Yes, uh good question. Yes, uh, this this means
The app dot get means that this this handler
Is a handler for this right this route. Sorry only for get method. I mean only for requests that was were made
That will be made made
With the get method
So
Sorry, could you repeat
Exactly, yes
Not necessarily you can it can be a put method or a patch method
We will see we will see all of that
But post if for creating resource and put and patch are for modifying a resource editing a resource
But technically you could also use the get but not be able to
Practice right you you could not because at least for now
there is a specification in
In discuss in discussion
But to make it possible, but for now it is not possible to send a body in the get
Method in a request
With the get method you cannot send the body you can only send some things in the url
Meaning in the query stream
Um, but for it for example
Uh what
Why why would you want to send the body to read something?
it
There is a use case famous use case
in
In that if you want to read some results of a big table
And you want some filters
in that table
You will have to send you can send multiple information about
The column that you want in your table about the sorting of any of the column in the table
and then maybe
That for this table you want all this column you want only
Date from
2021 to 2023 and for this column you only want name that begins with
Okay, and still you just want to read data you don't want to post anything you don't want to create a resource
You don't want to modify a resource
Okay
So in this case it's okay
Yes
Yes
For now, but maybe someday we will be able to send the body in the get request
Um, I just want you to know
that
Um
Please please watch my bs code editor
And if I do that and here I just return
Message
The world and I only want
If I only want to search for media and so to call open
Open movie database only when the client requests
Makes a request to media
I want to do this
Okay
I want to create a route handler only for the media route
Okay
And what will happen is maybe not what you expect
meaning that here I
add media
And I click on send request
To 310 okay. Yes
Okay
What in the name
Okay, that is strange that is not what I expected
Sorry
Anyway, we're going to move forward
So that was express express is
Was the de facto standard for
Web applications in node.js
But unfortunately, it has not evolved in the past five or six years
And
It is not really promise ready promise friendly and furthermore it's not really
Performance
And that is why there are numerous
frameworks that
Were built upon HTTP module also
Like fastify and fastify is much more
performance and
Uh is really really similar to express in in its api
Okay
So we are going to take a break maybe five minutes and then we go and refactor our code to use fastify
Okay
See you in five
Or maybe you want more
Five is okay five minutes. Okay. See you in a bit
Oh, yes, here
Okay, everyone's back five minutes is not very long, you know
Okay, so everybody ready
Um
Oh, I am sorry, um, I made you create a git but I
Not make you use it. So maybe what you can do
Is
Uh, sorry, no, no, no, no, no, no, yes, maybe what you can do
Is add all
Oh, no, no, don't do that don't do that. Oh, I know why I didn't please do not do that
Okay, now I really want to talk to you about that so please pay attention yes
Okay, but just a minute it's really important that you know that node modules should not be
Tracked in your git, okay
So you should create a git ignore file and this is what we are going to do and it will take
Oh, I hope I
No, I think I did not so please install the extension which is called git ignore
I don't think I
Get ignored generator from piotr piotr palasz palasz
Palasz I don't know
Yes install it and then
Here if you
If you click on the right in the explorer
No, it's not there okay, sorry so shift control p or f1
Then you go git ignore
Or git ignore would suffice
And then generate git ignore file
Git ignore generator
I think there is just one which is called git ignore this one
From piotr palasz
And then shift control p
And
Then generate git ignore file and then it automatically
Selects for you visual studio code and linux
And please add node and that should do it and then okay
And then you can see that it creates a complete git ignore file for
Armand macos, so
I added it
Here but so some thumbnails of macos and some special
Directories and files that are macos specific
And then here for node it adds all of that and
Here node modules
Okay, because this should not be tracked in your git
Okay
and
And then if you go git status again, you see that I don't have anymore
I don't have the node modules anymore
This is perfect. So now I can git add all
And commit
Dash m
fit
Sparkles
Express server
Okay, please add node in
before
Setting. Okay, please add node. Yes
So now we are going to use fastify
So
We're going to install
fastify with npm i
Fastify we are going to remove express npm remove express
Maybe I should add this. Oh, yes, it is in the course
Okay
Is there any big difference in regard to how the developer should use any of these packages express or fastify?
Yes, you don't want to use express you don't want to use express this is old school this is not performant
Now you can use fastify or restify or nest nest is really complicated in my opinion
Yes, in my opinion, it's
Uselessly complicated really complicated
and
To understand nest you must understand
A whole lot of concepts that I don't have time to talk to you in three days
Under the hood nest uses express by default
And I think this is a mistake and you can use fastify instead but still
Still it's really complicated to use nest
Okay, so
Please just follow along
And you must know what?
What I tell you before you can go to into learning nest
It's really important
Okay, this is the basic and you really need this to understand nest
Okay
So
Here where is my browser
So here we removed express and we installed fastify right
So just like express we import fastify from fastify
And then we create a fastify application with fastify and by calling fastify
Then you add a route handler here
Just like express with fastify.get and then the route and then the handler
And then you run the server by starting to listen on a particular port
So
I don't want you to look at the solution
So now that you have the the hello world in fastify
Try to refactor your code
So you use fastify instead of express. It's really simple. It should be really simple. So please note
That the real difference is differences are this rather true
here
And that you don't need to
Request sorry response.json. You just return an object
Great it works for who? Gold? Stefan. Stefan. Perfect
Yes, and you see
That you have logs and the logs are in json
And they are in one line and this is really important and that's what you want to do
That's what your dev apps will want you to do
It doesn't need to
I don't think it needs to you mean you mean fastify does fastify uses beautify
Yes, but
This is what you want to do in production
maybe
In dev you don't want that and we will have
We will find a way
To make it more readable for us developer
In the dev mode but in production that's what you want to do
You want to json in one line
Sorry for interrupting. I have a question
How come we we don't specify the whole thing because I can see that you only need to specify the port
And it just works
Yes, because by default it runs on localhost
But you can
But you can
You can you can you can specify it
Um, I will show you how
So, um, it's uh, it's good for everyone
Okay, so let me just do it here fastify oh by the way
Um, if I double click on express here it selects the whole world the whole world, okay
This is important to to
To save time, okay, do not do this please
No, just double click on express and it selects express the whole world, okay the whole world
And now you can press on control d
Several times and then everywhere it sees express it selects
The the the next occurrence, okay, and now I can
Transform it to fastify
Okay
Now I can do better than that if I I am here in fastify and then I press f2
I can modify the name of this
um of this variable
to
To make it within a capital f
Okay, and it only
Modifies the the occurrence that are in the same scope
So this is really safe
Okay, this is f2
Okay
Now I want a logger to be true
And then uh
Here the listen
The signature this signature of listen
is
deprecated
So what I have to do is
To make it an object, okay, the first parameter argument should be an object
And host name should be named just host
Okay, and so the first argument here
That I give to app listen is an object
with the port
property with the port number and the host
With the host, okay, this is how you do it. Okay, Martin
You don't have to add this callback because fastify will do it anyway
Npm
Node src
Okay
Here I have the server listening at
Okay, this is done by fastify. I don't have to do anything and this is great. Okay, this is the most
Sensible default and that everyone agrees on okay
That the server should log whenever it's ready and is listening and where and on what port, okay?
so
Now I want to add
Just make sure just make sure it
It works as expected rest.json is not a function. Yes, I forgot
That I just had to return
And also by default express fastify
Fastify sends the 200 status code, okay
If I want to change it
In reply you can make
You can call it status also
Okay, so this is really similar to what express to the api of express. Okay?
Now
This is all good
But I would like to
Instead of just doing that I would like to
Catch if there is an error when I try to start or when the server
crashes
Okay, and I want to exit with an error
process exit zero will
Exit without an error process exit one will
Will exit with an error, okay, this is enforced
Now what can I do
Okay
Maybe now
We can
Several things we can do for now first is that i'm fed up with
Um, um, I don't want to
Cut the server and then restart it manually each time I change anything in the code
I want this to be automatic
Do you know a way to do it?
Maybe we should use the dash dash watch flag instead of notepad
I guess it's available from version 80. Yes, you can do that
Yes, you can do that
Yes, we are going to use notepad and I will tell you why later but yes you can do notepad
Watch, okay
But I want to make it first I want to make it simple and second
We will not use it no directly
In the near future, so I will try to
As soon as possible use a node mon. Okay, so node mon
as the name says monitors
any file or group of file or folders
That may change
and when it detects a change
It automatically
Re-execute the command that you specify to node mon
So here in scripts in the scripts
Property of the package json
What I want to do first is to create a start
A start script that runs node src index.js which means
that instead of
Writing
sr node src.js all I have to do is npm start
And this is really common. Okay, so in production
You want to use just npm start
So that you don't have to know
the I mean the
the person who
runs
the
The ci and the cd and the the devops team
Don't have to know
which
Um file is the entry point
I just want to know that it starts npm start. Okay
That it runs the script npm start
Now for development
I will have a script named dev
And
It will
Launch
node mon
with
src index
and
We want to we want him to
Restart every time either any file of the src folder changes
Or
If the .onc file changes, okay
Since dev is not a standard script like start
We have to use npm run dev
And I have not installed node mon so I will add it but as a
as a
developer
Development dependency so dev dependency to do that. I would add the dash
capital d
After npm install and then node mon and you will see that in package.json. I will have a new property
Called dev dependency. Sorry. It's really too slow here
Okay. Now I can run npm run dev
And
Here you go
It watches
every file
in src and
the .onc file
It is watching the extension
js micadjaxson cgs and json and it starts
node src index.js
Okay, and now if I modify something in
index.js
And then I see here the
The disk here meaning that it's not safe. I'm going to press
ctrl s
And it detects automatically the change
And it restarts index.js from src
This is because we added the watch
Yes, this is because we added
Dash dash watch
Here
These two these two watch is because it becomes that here this line
And if I change the
Up it detects the change and we start index.js
Okay
So this is great now
Uh, what at what time do we end
In five
In 10 minutes, okay, perfect
So i'm just going to tell you about other
registry clients
So now you know about npm npm is one
what we call agent or
npm registry clients
And there are more maybe you know yarn, do you know yarn?
Um, I don't like it much but it has been quite used
Much less now, I think
and
There is another that I really like
Which is called pnpm. I will go back to this in a minute
There is
Another which is bun and bun is not only an a client for npm registry. It's also a new
JavaScript environment
Just like note
And just like dino, maybe you know dino
And dino is
Yes, exactly dino was also created by ryan dal
and
He
He at first he didn't want to have any compatibility with npm but
The the community really wanted it. So now it's compatible and any npm package is compatible with dino
And there is quite a good spot for it
and
And bun is also
a javascript runtime environment and
An npm registry client, okay?
Pnpm why it's my favorite because it supports by default mono repo
Yarn and now npm also supports them
But I think the support of pnpm is much much better
I will I I think I won't have time to talk to you about mono repo, but it's a really good
feature
Pnpm
It reduced reduces this space
How because it uses?
Sim links
And especially for mono repo
You don't download
And the same package twice
unlike npm
So it really saves this space if you have several projects in in one
one
Repository and they all use the same package you won't have
um, you won't have
copies of the same
npm modules
That will just be one and some sim links
And uh and last it's faster than in npm
Okay
There's also another registry which is which is quite new and why and all?
Launched it publicly a few months ago
It's called jsr for javascript registry
And it it looked very promising to me
It is made for typescript and really with typescript in mind and
ECMAScript module
It auto generates docs if there is jsdoc in the
the code
And it auto transpires ts code
This is this is really great
And can also be used in any project with the node modules with any clients
Which may be npm or yarn or pnpm
And can be used in any runtime
Meaning node.js dino van or whatever
So this is really promising for me. It's not quite
It will take time to
To to get traction, I think because npm is really really big but it's really interesting
The package.json file we also
We saw that okay
I will
You can either see my browser or your browser with the course, okay
So the the important properties in package.json are name type version and main
Okay
Main is not really important for you. It's just important for libraries
it's not important for apis and
And frontend it's really important for libraries
The npm scripts we saw start but there is also standard scripts like stop and install and test
And
I talked to you a bit about semware, but I will not talk much about it if you have questions
Don't feel free to to to ask me
And oh, yes, I did not talk about package.log.json
When you run npm.json npm install you created a package.log.json
As the name suggests it blocks every
version of every dependency
Used in your project
And it's really really important that you track it in your in your git
That allows
Every developer on your project to really use the same packages with the same exact version
This is really important
Because if you don't have it
You may use a different version of the same package and so
and and
And so maybe you have bugs that others don't
And maybe you don't have bugs that others do
so
In the same team, you must be sure that you have the same versions of all the package in your
dependency graph
And this is what package.log.json is meant to do
Okay, we saw node man
And
That's it. That's a wrap
Please feel free to ask questions
I hope you
Understood everything. I hope you learned some
Numerous stuff
And
I hope you will be able to understand more and learn more tomorrow
Well really you should
Really use
Logger true. Okay, put every log of your
Please see my vs code
every log
should be
in
You know elk
elastic search
Kibana logstash
elastic search logstash kibana well
every
every log should be
in a database that should be indexed with elastic search and
searchable with kibana
And
And so with that you can monitor every request you make and if you log properly
Things in the your route handlers you must
You will have
Information about what request takes much much much too much time
and
And if you go precisely you can maybe
Get information about some of the requests to the database that are
That take too too too much time
And this is a configuration that we need to do
Or fast if I know that you say this is not that right now we see the terminal
so
what I
what I
what I
Why I told you that you must use
json log
Is that normally an an early player reads all these json?
And knows
Automatically how to transform it to be searchable
Okay
And if you put this in a docker
And this it should be in the docker. I mean in a container
Okay, do you know what container is docker container? Do you know their docker containers?
Well, I hope your clients have a devops team that can
Leverage the power of docker and the containers and the elk
uh the elk stack stack
Uh so that
just by
Logging you have much information needed
and can be
every log is
Saved into a database that is indexed and searchable
If you see my browser, uh, this is french
What language do you want?
So it can
Also make create a graph like this just with the log that you just saw
Well, really this is this is a different
I mean
So you see here's um
They have all the logs and then here
They search something
Okay. This is a key kubernetes labels app kafka and era
Okay, this is search
so
with this search
Appears here only the log that are interesting
For for for him, okay
so
So, um, so as I was saying, this is really a different
Uh a different job. Okay
The this is this does not enter
into the
developer functions
Okay, this is uh devops
Stuff this is not for developers
I know a bit about it. I know a bit about how to use it, but it's not really my job
Okay, and I work with devops and I work with people that really use this and knows how to use this and knows how to
detect some
some uh some errors or some long requests and long queries in sql
and then I I
We talk
Talk together and then I can modify and uh refactor and optimize my code any other questions
On the vue gs is also three days in one month
Okay
Yes, yes and as you can see here in my browser
We did the introduction hello world concepts npm and that's it
We still uh, we still have
All this to do, okay
Well npm we didn't just see npm but
I
I kept it in the npm chapter because
we tried
we used it to create the package json and then to
add some
Some modules from npm and then we used it to
run some scripts
like start and dev
and
We also saw some other registry clients like yan bun pnpm
and another registry
jsr
And so that is why we are still in npm, but we did not just see npm in this chapter. We saw much more
and uh one final question should we commit to the gift
of our current person?
Yes, you should
Uh
No, not for now
But you can you can you can create a github a github for your project and and push it
Yes, you should maybe you should do that if I were you I would do that
Yes, you don't you don't yes exactly you don't have the
The vm afterwards, I think you're welcome. Do you want my?
Code in a github
Okay, okay, I will uh, where where do I
Okay, it will be
Use first
Okay
Yes
Okay, so you can find it in github.com
Here
I put it in the chat. Oh and by the way, you can see that
There are some emojis
in the
my commits
and that was the point of when I
When I did that commit yes, these sparkles here
Creates the emoji that you can see on the second time here
And I installed for you the
The conventional commit extension
And so
If you want to use it it's quite simple it's control control shift p and then you write
Cocoa then you click on convention comics here if you see my vs code
Okay
Control p then
coco
Conventional commits
I click on it
Then it asks if it is a feature a fix or docs
Or whatever then let's say I I create a new feature in that commit
I put no scope. There is no specific scope in in my commit
and then here I
Can put any emoji and I put sparkles because it's a feature
Now I can
create a new
Route for media for example, this is the message commit
And then you can have a longer description if you want if you want details in your commit and this can change
This can have multiple lines the previous one must be in one line
And the the sixth
step
Is really optional
And it should be used really scarcely
rarely rarely
If if it is if the api
Has this commit introduces breaking changes in the api and then you go
Breaking I think this is uh, I don't know. Maybe it's
The predicate
Move
And you see here that I have feet colon and then the emoji and then the comet and then
the the breaking change
So this this would be as I was saying
So conventional commit is a
You see my browser now
it is a standard way of
Uh for the message commit commit message, sorry
Okay, and the emoji is completely optional. I really like it, but it's completely optional
And this is the way to create breaking chain
This is another way with the exclamation mark here this tells that
It has breaking changes and this can be used
Oh, yes, really important
Why do I love conventional commits it is because this can be used to automatically generate
change logs
A change log
Uh built automatically can
Read all the commits from the last release to the the last commit
And
List every fix list every fit feature a new feature and and list every breaking change and create it
And create a text file
Um that you can add to the changelog and this changelog can be modified also automatically
There are several ways to do it. I use semantic release
But there are other ways
You can you can you can find changelog generators on the internet this go way beyond the
the course, okay, but
I was just trying to
To answer the question
Okay
Well, see you tomorrow 10 o'clock for you nine for me
Okay
Okay, thank you. Thank you very much. Thank you. Thank you. Bye. Thank you
Bye
on 2024-07-08
language: EN
WEBVTT
Of course, right?
Is it working still?
Yes.
Okay, perfect.
And you have it.
Yes.
Oh no, it's not working for me.
Okay, it's back in.
Okay.
Now a bit about TypeScript.
So you remember you have eight types in JavaScript.
And so these are available types also in TypeScript.
And the problem, as I said yesterday,
is that for object,
we need something much more specific than just object.
We need to have the shape of the object.
And so the first seven types are perfect as is.
All right.
We want to know if the object is either a native object
defined in the spec or a host object
provided by the environment, just like console.
You remember yesterday?
Or process or window or document for browser.
Those are a host object.
They are not defined in the JavaScript specification.
And fortunately, TypeScript allow this.
I mean, allow us to be much more specific about object.
Now, a quick word about TypeInference.
Maybe I can share my two screens just like yesterday
so that you know where I'm at.
So TypeInference, do you know what TypeInference is?
Who knows what TypeInference is?
Am I the only one?
Okay, so you can write this
and TypeScript will automatically deduce me
and we say infer in TypeScript that foo will be a string.
Then if you write afterwards foo equal 42,
you will have a TypeScript error.
Okay, so this is TypeInference.
It's very important.
Now, if you want to define the shape of an object,
for example, for this one,
you can define by using the interface keyword
and define that the interface face user is an object
with an ID property for which the value will be a number.
Email is a string, first name is a string.
And roles, for example, is an array of string.
Here, the question mark is not a typo.
This means that newsletter is a boolean
and can be undefined or can be not present.
It can be absent of the object, just like it is here.
It's not present there in the user.
Okay.
What?
You're showing a different screen.
Oh, yes.
Okay.
Okay, sorry for that.
Not this one.
Okay, you have it?
Yes, yeah, much better.
So there is an error here.
Sorry.
Maybe I did it on purpose, I don't know.
Yes.
So here you have ID, email, first name, last name, and role.
And role should be roles and should be an array.
Okay.
But now if you want to use the interface,
this is how you do it in TypeScript.
You say user one, colon, and the type,
and then the equal sign and the object.
If you write this, you will have two error, TypeScript errors.
First, the full name, which is not present on the interface.
Then second, the roles here is a string
and you defined it as an array of string.
So this will also throw a TypeScript error.
And in your editor, it will underline this
and this with red.
Okay?
Now, if you have this, there is one property
that is not present and that is missing.
And so it cannot underline the property that is missing.
So it underlines this, okay?
And so the TypeScript error will be here
because user is missing, this user too is missing last name.
Okay, everyone, you can also use these interface
in functions.
You can use it in the parameter of a function here.
So the name of the parameter and colon, then the type,
and you can use it as a return type,
meaning that you write function, then the name of the function,
then the parameters in parenthesis, then colon
and then the type.
So this means that this function will return
an object of the type user.
Now you can compose types with a union,
meaning that you can type this,
this is a roles type and it can be a string
or an array of string.
See here, you only have one pipe character, only one.
And you can also use it to restrict
to a limited list of values.
For example, you can say the type role is either
the string admin or the string owner or the string user.
And roles is either one of the string
or an array of those strings.
Yes, almost.
Yes, only with interface, you see here
that you don't have the equal sign.
Okay.
And so you cannot compose types with,
you cannot define an interface
that is a composition of types.
If you want to compose types,
you only can use the type keyword.
Is there any advantage of using interface instead of types?
Because as far as I understood,
types can do everything that interfaces,
but even more.
So why should be using interfaces?
Unfortunately, that is not correct.
The TypeScript community prefers the interface.
No, it is not what I wanted.
TypeScript,
int,
interface.
And here, interface.
Well, I will find it when we have a break,
but the type,
Okay, it's not very important.
The type, I think it's quite important,
but the TypeScript community recommends to use interface
whenever possible because it is,
it is more flexible and you can override it.
You cannot override type and can override interface
and you can extend interface.
So I hope I have some examples,
but it's not a TypeScript training, I'm not sure.
It's okay, it's okay.
So the type of operator,
you remember it's a unary operator in JavaScript
and it can lie, meaning that the type of no returns object
and the type of a function returns function.
It returns true, so this returns true,
but a function is an object.
Okay.
And why, you may ask why JavaScript returns function
for function because it is usually helpful
to know that one object is a callable object.
So I mean, you can use parentheses
at the right of the variable that contains that function.
Now typeof is also understood by TypeScript.
What does it mean?
It means that in a function,
if you wanna check if a person has the admin role
and since roles can be either a string
or an array of string, if you write this,
if you write this, you will have a TypeScript error, why?
Because even though this is correct
because you can compare a string
or an array of string to another string,
you may not have some on roles
because roles can be a string
and some is not a property of string,
it's only a property of arrays.
So if you write this, you will have a TypeScript error
because some does not exist on TypeString, okay?
When this term?
If you choose that roles can be either a string
or an array of string, you cannot-
I mean at which moment?
Compilation, runtime?
Oh, okay.
TypeScript is build time only.
The check of TypeScript is build time only.
This is really important and we will try
to mitigate this limitation with a perfect library
that is called Zod and I will talk about it.
Maybe, yes, I think today.
And so TypeScript is only at build time
and the check is only at build time.
So for you, it is in your editor, okay?
The editor, the VS Code editor has a TypeScript server
that checks on the fly your open files, okay?
The files that are open in your VS Code
will be automatically checked with TypeScript.
And this is where you can use TypeScript.
Sorry, the type of operator.
So if you refactor this function into this function,
you will not have TypeScript error.
Why?
Because here you have if type of roles is string,
then you check if roles is admin.
And if you are here, TypeScript knows
that roles is not a string.
Since it is either a string or an array of string,
if it is not a string here, here it is an array.
So TypeScript knows here it's an array
and the sum property will be present, okay?
Now generics, do you know generics?
Maybe some of you know Java.
Okay.
So generics provides variables to types.
This is what the official doc says, okay?
So you can create a string array
and tell it that it is an array
with that anger bracket here.
You say it's an array of string.
So this can be rewritten, refactored to this, you see?
And if you do one of them,
I think in your VS Code, you would have,
I think if you write this, VS Code will write this.
I mean, if you create a variable
that is of type roles and you define it like this,
when you hover over the variable that has this type,
it will write this.
So it's the same, okay?
Now be careful with generics.
And what does it mean to have generics?
Why would we want to have generics?
Imagine this code that foo is an array of elements
that are either A, the string A,
or the strings B or the string C.
And this is correct, right?
This is an array of elements that are either A, B or C.
And if you write this,
we can define the function last one of the two ways.
Either you create this or this.
During the at, you know, the at method,
it appeared, I think in ES202022.
And it's almost like, almost.
So those are equivalent, okay?
You see here the bracket, angle bracket.
Yeah, clear.
And this is a way to get the first element of the foo array
or the first UTF 16 character of the foo string.
And this is an equivalent,
but the superpower of at is that you can
put negative indexes here.
I like it by the way.
And so here, if you just write that,
you can try it on your VS code.
If you can copy this and this.
And if you put your,
if you put your mouse over last foo,
tell me what you have.
You must put it in a file that you named .ts and not .js.
See here, if you see my VS code,
foo, it rewrote the type.
It rewrote the type,
array, angle bracket, ABC.
Just like I said, ABC and then square brackets.
Now, if I over on last foo, it says any,
the type is any.
Because I did not,
I cannot tell what foo will be in given,
what, yes, what argument will be given to the last function.
But if I tell last that it is a function
that depends on the T type,
and foo will be of the type T.
And will be an array of type T.
And last foo, sorry, why?
Oh yes, yes, perfect.
Okay, you see here that at is underlined in red.
Because as I said, it was,
it was in, it was introduced in ES 2022.
And by default, TypeScript does not have the lib of ES 2022.
So you will, we will have to have a TypeScript config
and tell it that we want to use ES 2022 at least.
ES 2022, 2022 syntax, new syntaxes.
And this is done with tsconfig.json
that we will see in a minute.
I have this in my organization before.
It underlines the T, the type of the function argument.
And you add this also?
Yes.
Okay, let me see what you wrote.
I know, I know, I know where I made a mistake.
I forgot to put the angle brackets.
Yes, this is the generic and this is really important.
Okay.
And this is why the official docs says
that generic brings variables to the types
because this is a variable.
This is a variable types.
You don't know the type, okay?
Just know that the type of the elements
of foo, it is a type of the elements of foo
that will be returned by this function.
And so it deduced that, it infers that foo
since it is an array of T and you return just one index
or just one element of foo that it will return a T.
So when we have a complete tsconfig ready,
this last foo will be A, B or C.
The type of last foo will be inferred as A or B or C.
We will see that in a minute.
Shabin, I did something wrong,
but the error here doesn't appear.
Sorry, I did not understand.
Please, please talk louder.
And this error doesn't appear at my LVM.
Where are you?
Who are you?
Who's talking?
Fanence.
Fanence, yes.
So if you put your mouse on last foo, yes, perfect.
Yeah, but I don't think that I don't have the error.
Yes, yes, I'm trying to know why.
I'm trying to understand why.
I don't know.
But I don't know.
And we can't say for the others that it was on my computer.
Okay, but so now I just scratched the surface of TypeScript.
Okay, you can do much more than that.
But I think it will be sufficient for now.
And now we are going to create a tsconfig.json.
I hope that I, yes, yes.
Okay, now TypeScript with Plastify.
So first thing first, you will have to install TypeScript.
So you know how?
Since it is a development dependency,
please use either the dash capital D
or use dash dash save dev.
Okay, it's the same.
So I will do it.
Oh, for you I installed,
I talked about it in the course,
but I did not talk to you about it yesterday.
But I installed for you,
on foo any,
and I, shall I say,
and it can be seen as just a shortcut for NPM
install, but it's much more powerful than that.
And that is why I wrote here,
and I dash the express,
because it automatically detect what the log file is
and uses the appropriate NPM registry agent.
Meaning that if you have a package log JSON,
it will use NPM.
If you have a PNPM log dot YAML,
it will use PNPM.
And if you have bunlogged, it will use bun.
And if you have a yarn log, it will use yarn.
And you don't have to know about it.
You just write ni and the module you want to install.
So you can use it,
because I think I installed it on every,
on my VM that you clone.
So how to create a TS config?
You can use this, but please don't.
You can use npx tsc dash dash init.
This will create,
well, you can do it.
Let's do it.
npx tsc dash dash init.
And as you can see, oh, sorry.
First,
so now that I have TypeScript installed,
I can do npx tsc dash dash init.
And this will create here a TS config JSON.
This is not really a JSON.
How do you, how can I say that?
Why do I say that?
You don't know?
JSON does not allow comments.
So this is not JSON.
This is a JSONC as in JSON with comments.
And this is used internally by VS code
for any of the settings files.
Just like settings that I think I told you about,
or maybe not.
This is the settings JSON.
So to go to settings,
it's just like almost any software.
It's control comma.
Control comma.
Comma, I mean,
I'm just like this character, okay?
And if you click here on this icon,
you will get the JSON version of the settings.
And this is also JSON with comments here.
Because you have comments and you can put here,
you see the trailing comma.
This is not allowed in JSON,
but it is allowed in JSON with comments.
So this JSON has all,
almost all of the TypeScript configuration
that you can have in a TS config file.
And it only has uncommented the main one, okay?
And what do you think we'll do with this?
We'll probably change it to.
Exactly, exactly, we will.
So you can keep this file by renaming it,
like TS config example or default JSON, okay?
We will not use it,
but it can give you a quick overview
of what can be configured in TypeScript.
Okay, and you see here the lib
that wanted me to change lib compile option to es 2022.
So what we will do is,
so you can keep this and change the target to es 2022
and module to node 16 and module resolution to node 16.
You can do that if you want
and keep the name tsconfig.json.
But I strongly recommend that you install first
the recommended config for node 20
this way by installing tsconfig at tsconfig slash node 20.
And then,
just write this tsconfig.json.
So we create here a new file named tsconfig.json
with those three lines.
And you can control click on this
and it will show you that this JSON
satisfies this JSON schema.
This is the version and this is the default option
for the tscompiler.
And you see here that I don't have lib es 2022,
I have es 2023.
Why? Because on node 20,
node 20 implements all of es 2023, okay?
No, no, sorry, sorry, sorry.
No, this means, I'm sorry.
This means that we can use in our code
any of the syntaxes and new objects created in es 2023.
And the target here
means that it will be compiled and transpiled
in JavaScript es 2022.
Meaning that anything in es 2023
that is not in es 2022 will be transpiled
to a code understandable by node 20
that only implements es 2022, okay?
So we have this simple tsconfig.json.
And now I don't have the at underlined in red.
And if I hover on last foo,
it says here it is either A or B or C or undefined.
Why does it say undefined?
Do you think?
It's your array is empty.
Exactly.
So it can detect that the array can be empty
and so that at can return an undefined value.
Yes.
No, not directly.
But TypeScript knows that at returns an element of foo.
So TypeScript here is inferring
that foo at will return the type T.
And so this function last will return a value of the type T.
So last foo is of this type
because of the type inference of TypeScript.
So this is why TypeScript inference
is really, really important.
But you can do it explicitly here like that.
But it is inferred by TypeScript.
So I don't recommend putting it
because for me it's a visual pollution.
It is not needed.
So I really don't want to be in my code.
Okay.
Now,
just one question.
I created this file, both of these,
by the ts-compic.json and pasted the three lines
of the JSON object that you provided.
And I got red underlining.
Yes, is it at the root of the project first?
Yes, I think so.
Okay.
I think so, yeah.
Yes, it's at the same level with normal use and SRC.
Yes.
So where are you here?
This is my ts-compic.json.
It looks like a folder.
Yes, just save it.
Okay.
Okay.
It is saved.
I pressed control S a couple of times.
Okay, and put your mouse on the first line, please.
On the bracket of the first line.
We're not found in config file.
Did you install the ts-compic?
Yes.
I have that.
Command line.
I'm doing something wrong, but I am not sure what.
Okay, no, no, no, no, no, no, interactive.
I need.
Yes, it is.
Oh no.
I also have an underlying for at,
in the day and then to, not at, please.
But they installed everything.
Mm-hmm.
Don't move, don't move.
Ah, yes.
I know, sorry.
Because you don't have any file named ts-boty.
So just rename this to index.ts and it will find an input.
And Melina or.
Melina?
I have file ts.
Yes.
It's index.ts.
Yes.
S word is underlined.
But over, over it says property that does not exist in type t.
Yes, okay.
So this is okay.
Let's move.
Sounds better.
No, no.
It's very second.
Property.
It's in the wrong folder.
No, I don't think so.
It can be.
Ah, no.
Why?
I don't know why.
Okay, this should not be here.
I don't know.
Tuck, tuck, tuck.
Dot old.
Hi.
Ah.
It is un-taking the thing for no state of this.
Yes, I'll come back to you as soon as I can, okay?
You said you were gonna do work, so I don't know.
Okay.
When we take a break, I'll come back to you.
So where were we?
Okay, so for Fastify,
Fastify relies on the types of nodes.
So we have to install the types of node.
And this is done by adding the module
add types slash node, okay?
So any slash d at types node.
And I hope all of you renamed the file index.js to index.ts.
Yes.
Okay, perfect.
Put it in the sources folder.
Yes, the one in SRC's folder.
So now that it has the types of node,
if you hover on process,
you will see that its type is node.js.process
with a capital P, okay?
Types must be in Pascal case.
You know Pascal case?
Everyone know Pascal case?
Okay.
Yes, this is Pascal case.
This is camel case.
This is snake case.
And this is kebab case, okay?
So camel case, Pascal case is almost like camel case
only the first letter must be in capital.
Okay.
And this is screaming snake case.
And all by convention,
all of the environment variable
should be in screaming snake case.
Okay.
Screaming meaning all in capital, okay?
So snake case is not for JavaScript.
It's heavily used in Python,
but in JavaScript we prefer camel case.
And all of the types must be in Pascal case.
Please respect this convention, it's really important.
Okay.
So process here is not defined anywhere.
And even though it is correct,
I strongly recommend you to import process
from node process.
Now you see that since we are in TypeScript,
rec query here is of type of unknown, okay?
And body also is of type unknown.
Jason here is of type, Jason does not exist on res.
Yeah, this is my fault, sorry.
Should not be here.
This is, this should only be a return.
Okay, so what we need to do is to define the types
of all of these unknown types.
For that, before we do that,
I just want to test the compilation.
And we compile by using TSC,
TSC as in TypeScript compiler, okay?
I have not talked about NPX.
Do you know what NPX does?
Okay, this is quite important.
I should have told you about yesterday.
It's quick, but it's really important to know.
NPX will first see,
will first check if in the node modules.
.bin, if there is an executable
that has the same name as what you put behind the NPX.
And here it exists and it's linked to TypeScript bin TSC.
And if you,
okay, if you try to see what is in this file,
it requires the libtsc.js, okay?
So libtsc.js.
So it will call this, this file, okay?
Now, if it does not exist,
it will try to look in the registry
if there is a package that exports in its executable,
an executable with that name, okay?
And in TypeScript,
in TypeScript, you see in a package JSON,
here you see you must have bin, okay?
Bin just like binary, even though they are not binary,
most of the time, they are executable.
And there are executable files.
And so here it reads in the registry,
all of these bin property of every package JSON
of every package in the registry.
And if it finds one, it downloads it,
installs the package globally.
And I mean, globally, I mean, not in the project,
but globally in your system,
and then runs this executable, okay?
So since we already installed TypeScript,
it does not have to download it.
It just needs to check the TSC file in node modules dot bin
and uses it.
So npx.tsc will compile everything that matches this,
where is the JSON,
everything that matches the include, okay?
So we will search for every TS file in those,
in the SRC directory.
And first thing you see is that it shows errors.
Okay, exactly the same errors that are pointed out
by your VS code, exactly the same.
Red query, body, and what is the third one?
Want me to?
And here, okay?
So first thing you notice is that it prints some errors.
It tells you where and why, okay?
So you really have to know to understand and read
and understand all the errors that the compiler tells you
and warns you about.
So when you,
and the second thing you see
that it created an index dot js.
This is generated by the TypeScript compiler.
You see that it preserved the comments,
but not the blank space, okay?
Okay, so what do you think we should do?
Fix errors, yes.
And before that, what could we do?
Before that, do you want to transpile if there are errors?
You see here that we have errors, okay?
TypeScript errors, but still we transpiled our code
from TS to JS.
Do you think it's a good practice?
We should not want to transpile our code if there are errors.
We should not allow any error, any type error,
to pass our CI and index CI.
Do you know what CI, what I mean by CI?
Continuous Integration, no?
Oh, okay.
Okay, when you develop an application,
you must write tests.
And the first test that you will have to do
is to link your code.
The second test is the type checking.
And the third test, and there are multiple tests
that you can do, and then you have unit tests,
and then functional tests, and then end-to-end tests, okay?
We will not have time to do all of this,
but really, before putting your application
to a production environment,
you should run a lint of your code
and a type check of your code.
And if the type check render throws any error,
you should not transpile,
and you should stop your deployment.
Okay, so I really don't want to transpile
if I have error.
So to answer that, I will, what?
I will tell TypeScript,
that I don't want to emit an error.
To emit means to emit JavaScript files
from TypeScript file, okay?
So now if I delete the index.js,
and I rerun npx.tsc, I don't know what is this,
why it is so slow.
So I still have those errors,
and you see I don't have the index.js generated, okay?
And second, yes?
Tell me.
No, no question, it's here.
Okay.
A second thing that we want to do
is not to have to type npx.tsc,
and we will create just a build,
a build script in our package.js.
So in the script property of package.json,
you add a build property just with tsc.
And you see here that tsc is not a command,
but when you rerun np run build,
what it does, it adds in the path
just during the command,
all that is present in node-modules.bin.
So the tsc present in the node-modules.bin
will be in the path while running npm run build.
So tsc will be in the path.
So now we have the same result, okay?
And it was the same with node-mon,
because in node-modules.bin, here you have node-mon.
This is the same.
Node-mon is not available here,
but if you do npx node-mon, it is available.
And if you run npm run dev, it is also available,
because during the command,
it adds all the .bin folder of the node-modules in the path.
Okay, now we have a problem with node-mon.
Why?
Because we don't have an index.js anymore.
We have an index.ts, okay?
We'll go back to this in a minute.
The second thing we want to do is that when we compile,
we don't want our js to be along our ts files.
By default, TypeScript will transpile the ts file
into a js file and put it in the same folder as the ts file.
We don't want that.
We want a separate directory.
And to that end, we will add the outdir property
of compiler options and tell him to put it
in the dist directory.
This is a convention.
It can be also built.
Those are the most common folder name
of the transpiled files from TypeScript.
And usually it's really dist.
Most common is dist.
Okay.
So in the course now, we add that, okay.
We added no emit on error and we added outdir.
Now we want to add types to our request.
Okay.
This is our next assignment.
So here, we want to tell Fastify that our rec
will have a query and in that query,
that we will have a s property that will be a string.
Okay.
And this is done with generics here in the get.
I will give you an example and the exercise will be
for you to fix the code.
So here, if you see my browser, my Firefox,
how to add type to request and how to type the query string.
You have the Fastify app, then you call the get function
and you tell it by adding a generic to the get function
that the query string, here mind the capital Q,
the query string will be an object of foo,
containing a property foo, which will be a string.
And that way with this route,
the request will have a query which will be an object
with foo, which will be a string.
So I'll give you two minutes.
Okay.
Perfect button.
Okay.
Malina, what?
You can do it.
Yes.
I think you can do it.
It works in this file at least.
And Vlad.
Yes.
Do you want me to repeat something or?
Oh, okay.
Okay, perfect.
So where is it?
Here.
Fastify app for you, it's just app, okay?
Yeah, this is clear, but I don't understand
what is the query string.
Okay, perfect.
Okay.
Yes.
So do you remember that a query string
is a part of the URL?
Okay.
And you remember that I wanted to check
console.
I wanted to check that
here.
I wanted to get the string that were behind S equal.
Okay.
This is the query string, this is the S parameter
and this is the value.
I wanted to have this value.
All right.
I want to tell Fastify that for this route,
route, okay?
For this route, there will be
there will be a full parameter in the query string
that will be a string.
So this is the query string.
It's,
okay?
I see, I see, but I don't understand
that keyword, query string, what is it?
Okay.
So this is a generic and I am telling you,
I am telling Fastify that for this route,
this handler, we'll have to deal with a query string
that will be an object with a full property,
which will be a string.
But shouldn't query string match,
should also be then the query string that will?
I am,
you mean,
yes.
So this is how you see here, there's an object, right?
There's a,
brackets.
You see this bracket here means that this will be an object.
In this object, you will have many,
many,
many things that you can
type.
Amongst those properties that you can type
is the query string.
For this exercise, I will just ask you
to type the query string,
but you can also type the response,
as we will see in a moment,
and some parameters in the route
that we will see in a moment also.
This is just type the query string
and this is just the exercise for now.
Basically you could rename query string for
an input or some group.
Oh, no.
This is really specific for Fastify.
It accepts here a generic
and in this generic,
you can define params, query string, response, and headers.
Okay, now I think I understand.
Yes, I'm sorry.
This is not from the top of my head.
It's from the Fastify TypeScript documentation.
Okay?
Query string has to be that name,
exactly with a Q, capital Q,
and everything else in lower case.
Okay, but in Fastify, we'll be able then to match
the properties on the query string
with the properties under the query?
Exactly, yes, exactly.
Okay, now I understand.
Yeah, sorry.
I don't understand why they don't match
query string and query.
Ah, okay.
This is a type, okay, and this is a property.
So you can see it as,
maybe I can show you.
No, no, no, no, no, no, no, no, no, no, no, no, no.
Yes.
Maybe you can see it as interface
handler
and query,
query string,
query string.
Full, okay, and then,
Mr. handler.
No, this is not correct.
No, it's a,
Yes.
I can,
I can,
maybe not.
Query,
query string.
Okay, maybe it's clearer that way.
Okay.
And,
handler,
and then you have
this.
A massive language,
time script.
See, maybe it's better that way.
You can see it as this.
Your handler here
will have a property that is query
and correspond to the query string interface.
And your handler here,
meaning the request actually.
Why?
This is a,
this is a,
a reserved word.
So, so the, your API request,
we will,
will have a property that is query
and that must match the query string type.
Okay, maybe it's clear, I don't know.
But,
so,
here,
the answer was,
I put a generic, then I add
an object, like not an object,
type definition.
And the query string will be
will be an object
with an S property
that will be a string.
And just with that,
you should get rid of the,
of this.
Just wait for a minute.
Yeah, okay.
Now, this is quite difficult and we will
go back to it in a minute.
Yes, now I wanted you,
I want you to understand that
we can add
parameters to the route.
What do I mean by that?
I mean that maybe you want to go to a particular media.
Okay, with an idea,
an idea.
Okay.
An identification of media.
And,
this is dynamic.
Meaning that I want to call HTTP,
localhost media
and 123.
And this is an ID.
And I want to get that ID.
Okay.
Which can be a number or a string.
Doesn't matter.
Okay.
And
to do so,
I would have to
to get the ID from the parents.
Okay.
The parents here are not the query string.
Those are the parents of
the route.
Any parent will be prefixed by the column.
Okay.
And the name that are
behind the,
I mean, after the column
will be exactly the name of the parent.
Okay.
Now, how do you think we can type that?
It's pretty intuitive.
Maybe we should put parents with capital P
instead of query string
and ID instead of S.
Exactly.
And here, if you
put your
mouse over ID,
I hope it's much,
much faster on your end.
It will give me string.
We should make a different F get
for the media ID route, right?
Yes, exactly.
Yes.
Yes.
So,
if you,
we will,
yes, we will,
we'll use this in our API rest.
Okay.
In a minute, I just want before to,
yes, yes, I will talk about this in a minute.
First, I want to create a route
I want to create, sorry, a URL
to go to a specific media.
Okay.
If you remember the open,
the open movie database API,
we can do this.
We can do ID URL.
It's API URL, meaning that it's open,
omdbapi.com,
question mark API key with your API key.
And then E equal 90
from omdb.
Okay.
And so instead of here,
search URL, I will add ID URL.
And I will,
I will
concatenate the ID that
we get from the parents.
Okay.
Maybe
we can console log body.
Okay.
So that we understand what we can do here
and what we can return.
I think we can just return body.
Okay.
Maybe you want that.
I think I have it.
Okay.
And I will add an example here.
Example.
I'm not sure if you can hear me.
And
here I added, of course,
the example will appear in a minute.
Yes, here.
So
now we want to,
we want to type the body of this,
the return of the OMDB API.
How do we do that?
Is anyone lost?
Am I going too fast?
Yes.
I'm still having issues with the body.
Yeah.
Who talked, who just talked?
Who's, yeah, Stefan.
Stefan, where are you?
Where are you?
Yeah.
Yes, tell me.
Yes, this is what we are going to do.
Oh, sorry.
Yes.
I have a strange issue with the
the API, for some reason I'm receiving the message.
At the time I tried to trigger.
I don't see the return.
Oh, yes.
Yeah.
Yesterday I don't know what's working fine.
Now every time I click on the send request,
it's returning the same.
Okay, maybe I just,
oh, instead of localhost,
in the API rest,
put 0.0.0.
I'm not sure it will work.
No, it's working.
Okay, you're welcome.
So everyone is okay?
Okay.
So we now want to
to type the body.
And the body of the body here
is the response from the OMDB API.
Okay.
And
and now since it is in TypeScript
and we are not transpiling it because of errors,
we cannot develop anymore.
This is a problem.
Okay.
So I will talk to you about VIT.
I will talk to you about VIT in more in after
after we typed all of this.
Please just install VIT-note
as a dev dependency.
So ni-d VIT-note.
Okay.
Everyone has it installed.
Yes.
Tell me, show me.
Yes, yes.
I see.
Please ensure.
Oh, you have an error.
Open your package JSON, please.
Okay.
It's not saved.
It's not saved.
Please save it.
Okay.
And start it again in your terminal.
Okay, it's working now.
Okay.
Okay.
Now that I have VIT-note, I can,
so I hope you guessed that VIT-note,
no, you cannot guess, but now I do npx
vit-note
src slash index dot ts.
And oh, miracle, it works.
How does it work?
Well, vit-note uses esbuild,
which is a tool that understands natively TypeScript
and ESM and JSX.
If you don't know what JSX is, don't worry.
Okay.
You really need to understand that vit-note
understands natively TypeScript,
transpiled it on the fly and gives it to node.
So even though there are some TypeScript errors,
you can still have a working development environment.
Okay.
Development application.
Now, if I send a request, it works and I get all this.
Okay.
But I'm gonna talk a bit about REST clients
and how we can use it more wisely.
First, you can use variables in REST clients.
So the base URL will be ftplocalhost.3000 for you.
Okay.
And media URL will be base URL.
And this is how we use the variable defined before
with the double curly brackets.
Okay.
And now if I want to go to media URL,
this should not be media URL.
This should be search URL.
And this should not include love.
And now search URL and love.
Okay.
And now you see that I still have the send request,
but link on top of above this.
And it still works.
Okay.
Now I can also use oomdpapiurl.
And this is.
And the search URL.
Will be that.
Okay.
And to separate the request,
I need to put three hash characters.
Okay.
Maybe you want this in the course, I will add it.
Or api.
Oomdpapiurl.
So here you have the REST client file.
Okay.
And so why do I do that?
It's because I want to know what the result is
of the body of the response of oomdp.
It is this one.
All right.
So what I'm going to do is copy all,
copy this and put it,
copy it in the index.
Okay.
And I will declare a response.
Okay.
Why do I do that?
It's because if now I hover on response,
VS code will infer the type.
Hope it's quicker for you.
Oh, I know, I know how I can.
Yes.
I hope now it will be faster.
Yes.
Vlad, please.
Oh, you cannot show everybody,
everybody, but just for you.
Please hover on the response variable.
And you see that VS code inferred the type.
And you can copy paste this.
Yes.
So I have that.
All right.
And I can copy paste this.
Okay.
And now I have type oomdp search response.
And that's it.
It's much better than to type it on your own, right?
I didn't get that part.
I was messing with the URL.
So, but what research is for,
how can you copy that?
How did you open the?
Yes. Okay.
So first in API rest,
I added a request to go to the oomdp, right?
I click on send request,
and then I had the response, right?
So.
Yes, that was the problem.
My send request does not appear for some reason
for the oomdp URL,
I'm important search URL.
Okay.
It's Stefan, right?
Yes.
Oh, yes.
I told you that you wanted to,
you must separate any request with three hashtags.
Oh yeah.
No, this is slash.
Yeah, yeah, yeah, yeah, slash.
Yes.
And now you have, yes.
Oh yes, I'm from here.
Okay.
Is everyone okay?
Perfect.
Now.
So I have the search response here.
Okay.
How do I use it?
There is no way that fetch is going to,
you cannot tell that fetch will,
sorry, will return a certain type.
So what you must do in that case,
and this should be used very rarely, okay?
Very scarcely and cautiously.
You can tell TypeScript that this function will return,
will return an oomdp search response.
And so now if you click on body,
and if you hover body,
it will have oomdp search response.
You see it?
Here I added, at the end of the line,
I added as and then the type returned by oomdp.
And if I hover on body,
I see that body has the type oomdp search response.
Since it has this type, it knows what search is.
So it knows it's an array of this kind of object.
It's an array of object of this shape, okay?
With title, year, imdp, id, type and poster.
And so it knows that every element of the array
that is in search is of that type.
And so it knows that el has a title that is a string
and a year that is also a string.
So this is all type inference, okay?
Now, we are still not defining that
the response of app get slash media
is an array of string, okay?
Title is an array of string.
So what we are going to do is to add
reply and in the reply,
we say that the reply is an array of string.
Can you show me the declaration of the point
in search response?
Yes, yes, just a minute.
If you, I want you to know that if you put number,
you say that the reply is an array of number,
then you have here a TypeScript error, okay?
So I put back string and now the error disappears.
And this is that type.
I think it's not copy this.
Stefan.
Okay, so.
Yes, here, you click here, yes.
Then you, yes, you can copy all from the 1993, yes.
And you can go up, yes.
1993, I go up.
Yeah, go up, go up, go up.
It's not responding, yes, it's slow.
Okay, up to.
Yes, up to here, okay.
Then Control C, then in TS file, TS, index TS file.
And it is a complete.
There is still a between.
Yes, because this is not a type.
This is an object.
This is a value.
So go up, go up.
Copy, copy the line 27.
And copy and paste the line 27.
Now you don't have to select anything.
Just put your cursor on the line
and then Control C, Control V.
Okay.
Okay, there.
So instead of type on line 28, just type const.
No, no, no, no, no, no, no, no, yes.
Here, type const and remove type.
Yes, yes.
Okay.
Now put lowercase O, line 28.
The first letter O must be lowercase.
Oh, lowercase, yes.
Okay, now close the bracket on line 27.
27.
The red one, close it.
Okay, perfect.
Now put your mouse over OMDB search response on line 28.
There.
Now you can, no, no, no, no, no.
And go with your mouse up and you can copy.
You can select what is.
What is this one?
Yes.
And no, no, take the first curly brackets also.
The first curly bracket, yes.
But you can, don't you have a mouse?
Yes.
Okay, perfect.
Now you can copy and paste it, Control C
and then Control V on line 27.
Yes, and now we can get rid of this, yes.
Now what we are going to do is the same,
but for the response for a media, right?
So in API.REST, I want a media OMDB URL
with E equal and then something.
And now I'm gonna show you a superpower of a REST client.
Here, I get this one, okay?
Thanks, Co-Pilot.
It's Co-Pilot that gave me this ID.
But what I want is to have this
and then to go to the first and get this value.
I want to get this value of this request of REST client.
Does everyone understand?
I want to get this value of this request.
Yes, it's clear.
Okay, to do that, I will have to name,
to name this request
with the special at name keyword and then a name.
In one word, okay?
Then here,
then here, I will have to use double moustache
and then I can go to search.
Okay, search.
.response.body
and in the body, I want search.
And in the body, I want the first element of the array
and in that element, I want IMDB ID.
So now if I click on this,
I will have the response.
And if I click on this,
and even though if I don't click on it,
if I over on IMDB ID, I get TT157728
and this is exactly this.
Oh yes, what did I do wrong?
This is it, maybe moving not found.
What did I do wrong?
Incorrect, IMDB ID.
Manager.
Oh, there is a double,
there was a curly brace
and there were one too many curly brace, okay?
So now I get what I wanted, crazy stupid love.
If let's say I want the second one, love actually,
I just have to put this one here
and then I click on send request, I will have love actually.
When you trigger the last request,
it will automatically first trigger the dependent request.
Oh no, no, no.
If you put here, for example,
wire, it will still have the same, see, love actually.
Oh sorry, it works with the cache.
Yes, exactly.
So now if I say wire and then I take the second one,
now I have made max two.
So yes, I will have to request,
make a request every time I want to change this,
a request of the dependent request
before I make this request, okay?
So this is one of the superpowers of a REST client file.
First is the variable and then you can name a request
and get any of the response, either body or header
and also the request, okay?
Sorry, I'm still receiving incorrect IMDB ID
for some reason.
Yes.
I'm not sure what am I doing wrong.
On the meantime, can I have a question
related to the API?
We use from the end, API key here in the file as well,
as we did on the next one.
I'm sorry, just a minute.
The IMDB ID is on capital.
I mean IMDB I capital and D capital.
Oh, thank you very much.
And sorry, who's talking?
Stefan?
My past friend.
Oh yes, tell me, Ferenc.
My question was can we use from the back end side
the API key?
No, but you can do something.
You can, if you don't want
and you should not have this API key in this file.
So you are absolutely right to ask this question.
You can in your settings of VS code.
Where is it?
In your setting of VS code
to a reminder it's control comma to get to the settings.
Then you click on this icon
to open the settings in the JSON view.
And then you can go to rest client environment variables
and then you can add local just as I wrote here.
And then you can add OMDB API key.
Then you can write your API key.
Where was it?
Okay, and then here you can use
the OMDB API key.
And if I am not mistaken, it still works.
Okay, maybe I did this too fast.
So in settings, I will copy it, okay?
I'll copy it.
I am looking for this rest client
but I don't have it in my...
No, no, you don't.
You don't.
You have to create it.
But I will give it to you just in the course right now.
Add JSON, JSON, JSONC.
Add to your settings JSON.
Here.
Here, I put it here, okay?
If you see my browser or if you see your course
at the end of the page, you have settings.json.
Oh, this should not be it.
And I fixed here.
In a minute you will see it.
Yeah.
I use it here.
Okay, everyone.
Do we need to restart or something down?
Yes, for because it is the error.
Saying that the API key is not found.
So this is not a problem.
Okay.
API key is not found.
Where?
Sorry, who was talking?
Yes, Ferens.
Okay, just let me see your settings JSON.
And give me API key.
It should be good.
No, it should be good.
Maybe we need to restart the,
we are still trapped in the settings.
Should not be.
Okay, Alita, let me see your settings JSON.
I think you made a mistake.
No, it seems to be good.
But please in then correctly, Attila.
Yes, it's not indented correctly.
The line 133 to 136.
They need to be indented once.
Yes, that one.
Yes.
No?
Yeah.
Okay, is it working for you?
No?
No, it's in the .
So I'm.
No.
Yes.
No, I just want to reload.
Is it working for anyone or just me?
No, it doesn't seem to find the API key.
Yes.
But.
It's a pity.
Really?
Rest client environment variable.
Maybe we need to restart the escrow.
I already did to check it out,
but you know, I still have the same issue.
I also typed it again and it doesn't find the problem.
Okay.
No.
Maybe we should do something like this.
We can go with the hard floating version.
Okay.
Okay.
Let's go back to this when we have a break.
Maybe you want to have a break right now?
Okay.
Or not yet.
I don't know.
For one or more.
Sorry?
You want five minutes, 10 minutes, 15 minutes?
Five minutes is okay.
Five minutes is okay for everyone?
Yes.
Okay.
Okay.
Was it Malina that had a problem?
Or was it?
Yes.
Yes.
Are you better now or?
I read that code because it wanted the
for an exercise codes.
I read it.
Huh, okay.
Now I have a problem with
we have to put some code in settings for JSON.
Yes.
This is my API key.
This is yours.
You should use yours.
Okay.
And in settings.
This I created.
Oh, no, no, no, no.
It's not this one.
I didn't in the part.
Okay.
So here are the settings.
Okay.
Of VS code.
And if you click here,
we have the JSON,
JSON-C actually version of the settings.
And if you go down,
we try, I try to make it
sorted alphabetically the properties.
So rest client environment variables.
And oh, shared.
And then,
OMDB,
OMDB API key.
And there, your.
This is mine.
Yeah, yeah.
This is yours.
Okay.
And now.
From where did you go here?
I didn't see.
What do you mean?
How did you get in JSON settings?
Oh, yes.
So I pressed,
I pressed control, comma.
Okay.
Or you can go file,
preferences.
And then,
profile defaults.
Or settings here.
Okay.
Preference settings.
Okay.
Control, comma.
Okay.
It says here the,
the, the shortcut.
Yes.
And then to have the JSON version,
I click on this one, this icon.
Okay.
Okay.
And now,
in your API rest,
can I have,
yes, I do have access to OMDB API key.
So let's get rid of the,
the curly brackets
that are too much.
And now, I think we're good to go.
Yes, it's working.
Yes.
Thank you very much.
You're welcome.
I'm gonna try to,
I'm gonna,
no, you can get rid of this file.
Of this file, yes.
Yeah.
Don't say.
I had some second thoughts.
And this is,
okay.
Dollar share.
Okay.
Thank you very much, Maria.
Everyone is back.
Hi, Andy.
Yeah, I'm also here.
Okay.
I have one question.
Mm-hmm.
For me, it says that,
okay, the ID is okay,
because if I click send request,
then I'm pushing.
Wait a minute.
Yes, yes, yeah, I know.
Now I know how to,
I know, well, anyway, yes.
Tell me.
If I send this request,
I don't have all the movies.
And I have the ID here.
And if I hover and click here,
it says the ID is this one.
But when I click send request,
it says the movie not fault.
Why?
Oh, because in your media,
OMDB URL,
you,
you.
Yes.
Okay.
Please, for the one,
yes, you have another question, Christian?
Okay.
Yes, for those who have,
who did not succeed in,
in using the,
the set, the, the,
the variable in the settings, Jason,
please try with dollar shared instead of local,
because it worked with Malina.
So I replaced it in the course here,
dollar shared instead of local.
It's working that way.
Oh, okay, perfect.
Maybe it's because I don't have the same version
of the, of the extension.
I may have an older version than you.
Okay.
Okay, perfect.
So we,
so did we type the response for every,
no, we typed the response for the search.
Now,
we will want to type the response for the media,
for the media ID.
Okay.
This is quite more difficult,
but not that much.
Okay.
And so in,
here I want to
request,
and then request a particular specific movie.
And then I can also copy paste the response.
Okay.
And I'll go back to my index.ts.
I will,
media,
I will copy paste the response in media.
I will ask for VS Code to work for me again.
And here you see that I have a problem
because it shows this instead of everything I want.
Okay.
So what I will do is just copy this until awards.
Type media,
equal, and then
what I discovered,
what I,
what VS Code inferred until awards.
Then I can get rid of what I already have.
And if I go on media again,
then I have all the rest.
All right.
So I have the media typed now,
and I can use it here in reply.
I can,
could you just
show us one more time,
how did you get the dots with the more?
Yes.
So I made the request,
the first request for the search,
then the second,
then I get this answer, okay?
This response.
I copy all this response in index.js
with a movie, media,
media because it can be either a series or a movie.
Then I click,
I hover on media,
and I get all of this,
and then I get 11 more and I don't want this.
Okay.
So I just,
that was my problem.
Yes.
So I just copied the first until awards.
Okay.
Okay.
Then I add it here.
Okay.
So I only have this.
I only have this, okay?
Type media, title until awards.
Okay.
Okay.
Since I already have it,
I can get rid of this in my object.
And so,
I see.
And afterwards you type the video,
object, oh I see, okay, okay, okay.
Okay, clear.
Okay.
Thank you.
Okay.
So now I can get rid of this object,
which was just an example,
and I can use media in this route to type the reply.
And then you see that I have an error here,
because here body is unknown, okay?
Because fetch returns an unknown type.
So just as before,
I have to use the add keyword
and tell fastify,
I mean TypeScript,
that body will be a media, okay?
Different, even,
body is speaking,
the same function.
Oh yes, because look at your return.
What do you return?
Oh, didn't.
No, you do not return body.
You return an object with a body property,
which contains the body.
So, wow.
Okay, perfect.
Now, this is great and good, okay?
But maybe we don't want to have those types here.
It should be a better practice
to have all the types in another file, okay?
And this is what we are going to do.
Just so you know,
you can also type the headers of a handler, okay?
And this is done with header, okay?
I don't use it,
but you can have a use of it.
So I'm telling you that you can.
Now, what we did was,
was to type all the requests.
Now, we can go back to Node-mon,
because in package.json,
Node-mon still tries to launch node-src-index.js,
and this doesn't exist anymore, okay?
So what we want to do is first
use vit node-src-index.tf.
And here, since we are not launching node,
we must tell Node-mon
that we want to use a specific command,
which is that one.
So I put the command into a single quote.
Before that, I called dash dash exec,
and hopefully this works again, okay?
But beware, everyone is at the same step.
Me, I guess.
Okay, so what did I do?
I modified this line in package.json
so that it does not launch node-index-src.index.js,
but vit node, the command, vit node-src-index.ts.
This is done with the dash dash exec target on Node-mon.
We still have an error in our index.ts file
in the try catch block.
In the catch block, we have a specified uplog
or app.log, in your case, I'm not sure.
The try catch block, yes, there.
No.
Oh, it's fastify log.info, or dot error, sorry.
Yes, it's uplog, and log is an object,
which has many properties amongst them,
error, warning, info, debug, trace.
Now it works, thanks.
Okay.
The problem is now that if I modify this, okay,
let's say that, can I do?
I add a line here, and then you see the disk,
let's do disk here, means that I did not save this file, okay?
Now I'm gonna press Control-S.
Oh, it doesn't restart, node.js, vit node, why?
It's not executing the dev script?
Yes, I did here, Node-mon.
It's because it's watching only extensions,
js, mjs, cjs, and json.
So there is one way to tell Node-mon
to watch for ts extension, which is this one.
So if I relaunch NPM run dev,
you see watching extension ts.
And now if I modify again,
this file, and then I press Control-S,
now it restart, okay?
I added dash dash xts in the here.
There is maybe a better way, which is a Node-mon config,
which must be Node-mon,
which must be called Node-mon.json,
and in it, a JSON with purpose true,
this is totally optional,
and xts.json.js.
Okay.
And here I don't need this anymore.
And if I put NPM run dev,
you see here that it's watching extensions ts.json.js.
So it has read this file, and it says here
it's reading config Node-mon.json.
Is Node-mon this one which it creates?
Yes, Node-mon.json, you should create,
yeah, sorry, I was maybe too fast.
Node-mon.json must be created by you
and put at the same, at the root folder of the project.
I'm not sure if I'm the only one,
but I think I'm going to be too fast.
Okay.
I'm a bit too fast.
So who's behind, okay?
A little bit.
Okay, where are you at?
I think there are no more questions.
I have an issue with the,
see that's the file,
and that's why I'm behind because I can't fix it.
So this is true, this is me, sorry.
And then,
xts.json.js.
Okay, now you don't need this anymore.
And I think you're okay now.
Okay, you're okay now.
Yes, okay, return 40.
Oh.
This is search, so
this should be
om.db.search.
Oh, I have this down below,
but it's for the media ID route,
and we see the media,
and I was confused about it.
Yes, media is for the search.
But down here I have the code,
the media ID and the version.
Yes, and this is as media.
And now you must
return titles.
No, no, no.
Yeah, well, that was for the map.
No, I think you're good.
Oh, you still have two errors here.
40.
Get, oh, this you can get rid of because.
Okay.
Okay, indentation is really important.
Please be aware of that.
But we will have in a few minutes,
maybe an auto correction of the indentation,
but please do not rely too much on it.
So everyone is okay?
Move on.
All right.
So that was TypeScript with Fastify.
So now we know how to type all the routes.
We know how to make,
we know how to have a development environment
thanks to Vidnode and Node.mon that we configured.
And we know how to make complex
API REST client file to test our API
and even other APIs like OMDB APIs.
Okay.
We know how to type.
We know how to use VS Code to type instead of us
and make VS Code and TypeScript infer types
and so work for us.
And now we can go further
and we can use the plugins of Fastify.
This is typical, this is really specific to Fastify
and it's really great.
You can put some,
several elements of code in just one plugin.
And that's what we are going to do
with the route of OMDB.
So plugins in Fastify are really important
in the ecosystem.
You might find numerous plugins for Fastify on GitHub
and then on NPM for sure.
And it's a way to reuse code
and also to organize your code of your application.
So basically, Fastify is a function
that adds features to a Fastify instance.
Okay.
And you can put routes into a plugin.
That's what we are going to do.
And you can also put decorators and hooks
and some utility tools.
So you can compartmentalize different functionalities,
different features of your application into plugins.
And so that it makes your code more modular
and more easily maintainable.
And you put some consistent,
you put features that are consistent
that make a whole into one plugin.
So how do you create a plugin?
It's really easy.
It's just a function that takes a Fastify instance here.
Fastify.
We might call it app and that's what we are going to do.
And an options object.
Okay.
So for example, this is a plugin
that adds just the route hello to your project.
And this is how we are going to add it
and use it in our application.
You just call Fastify.
Actually, it should be app here.
Let me fix it.
Okay.
So you just call app register
and your plugin that you imported here.
Important, your plugin must be exported.
Okay.
Here is a default export.
So you must, this is the default import.
So you must export default to your plugin.
This is ESM syntax.
If you are not familiar with it, tell me.
Okay.
So this is how you create plugin
and this is how you use it in your application.
There are different types of plugins.
Just as I told you, routes,
you can put a consistent set of routes into one plugin.
That's what we are going to do.
You can put decorators that add methods or properties
to the Fastify instance that allows you to create,
to use app.the decorator,
the name of the decorator.
And most of the time it's a function.
You can put hooks and we did not see hooks yet in Fastify
and I think we are going to, I hope.
And you can put also integration with external services
like a connection to a database.
That's what we are going to do also, I hope this afternoon.
Yes, this afternoon, definitely.
Okay, any question?
Okay.
So the benefits of plugins, I told you before,
but I really want to insist on it, is modularity.
Since you put different parts of your code
into a whole set of things that are in one plugin,
that makes your code more modular, more easily maintainable,
more easily understandable by the whole team.
You can reuse any plugin.
So you can use, that's what we are going to do
because some plugins are made available to anyone
thanks to NPM.
And so it can, your plugin can enrich the community
and since a plugin can be isolated,
it's really easier to test.
So plugins are really essential in Fastify
and you must know how to create one
and that's what we are going to do.
And so your exercise now is to refactor your code
so that the index file only has this one, this code.
So this must be in,
or maybe not plugins, but routes.
So you must create a folder named routes
and you are going to put a file in it named omdb.ts.
Please remember, even though you are writing in files
that are with the extension ts, you just import js.
Why?
Because the code is transpiled, yes,
but it will not replace ts with js.
TypeScript will not replace this, will not touch this.
So in node, you cannot import ts files,
so you must import js.
Okay, so always import something from a js file.
Okay, even though you are writing an omdb.ts file,
just import the js file, even though it does not exist.
Okay?
As you wish, yes.
Okay, perfect.
Okay, perfect.
Fine by me.
Yes, okay, perfect.
See you.
See you then.
See you, bye-bye.
Okay, thanks.
See you.
Oh.
You just found yourself here.
You found yourself here.
Oh, the gentler.
That's enough.
I can no longer stand our women and diseases of the elderly.
Our children are not in good health.
You are mistaken if you think that children are in good health.
That's enough.
Okay, so I see you are trying to do the exercise.
I am, but I'm feeling that we have one basic.
Okay, let's see.
It's working version.
I have no error, but I cannot process the same.
Okay, let me see omdb.ts.
And so you are just registering the route.
Hello.
What happened to your route media and the ID?
I just want to make this one work.
Okay.
Okay, and so in API REST,
you are calling localhosts slash hello.
Yes.
Okay, please add,
well, first you have two couples of curly brackets.
On 9, 11, you have.
Yes.
Second, you must separate the hello request
from the morning request with three hash.
Oh my God, but why doesn't this work also from here?
From where?
From browser, oh, you don't see, from browser.
Should I take also one?
I'm trying from my laptop browser.
Oh.
Very nice, good job.
Yeah, maybe this one works.
Perfect.
Okay.
The browser, the desktop, yes.
Okay, who else encounters difficulty?
Sorry, I did not have time to eat.
So, Jolt, you did not save your index to.ts.
No, Jolt.
Yes, I know, I'm reading the documentation.
Okay.
Is Malina back in Florence?
Yes, Florence.
I'm back.
Okay.
But I'm looking, no, I just came back.
Okay.
So, I had an attempt for this.
So, I think that I have to install the plugin
to import it, right?
Yes, you import it here on 9.2
and you registered it on 9.17.
Okay, but you created omdb.js, you must create omdb.ts.
Okay, very good.
I'm sorry, I think that the internet is .js,
so that's why I thought in the import,
it says that it's .js.
Yes, yes, I talked about that, yes.
Even though you are writing a .ts file
with extension ts, you only import .js.
Why?
Because it will be transpired and when transpired,
it will not change the extension of the file.
For me, it seems to be working,
but everything is on the line with the thread color
in my omdb.ts file.
What do I import into the file?
I export it from the index.ts
Okay, it is because here,
lastify instance.
Here it's much better, you see?
Now you must define API URL.
And ID URL.
Oh, okay, okay, okay.
I just added the type here of pastify.
Thank you.
You're welcome.
You need to run the plugin ts, right?
To have the JavaScript file.
What do you mean?
You mean the .mpx, no?
Which the file?
Yes, yes, you have a problem with your package JSON.
Seems so.
No, no, it's okay, okay.
Now...
It doesn't exist.
I think it's normal.
So what does not exist?
The javascript file.
No, because you put the routes folder at the root level.
It must be in SRC.
In SRC, okay.
Oh yes, yes, yes, because it's .roles.
Yes.
Okay.
And this should not be here, the index.js.
And now you did not,
you don't seem to have modified your package JSON.
Here, okay, with no, yes.
Okay.
It's hiding, no?
What?
It says because it didn't work.
Mm-hmm.
Okay, now I think you're okay.
Yes.
Thank you.
So we lost Enneke and who else?
I think she didn't join from the beginning of today.
So it's working for everyone or...
Melina, where are you?
I'm here, trying.
Yes, I mean, where are you in the exercise?
I'm just creating routes.
So it's a folder named routes and...
The file should have a name omdb.ts.
We are only writing ts from now on.
Node-mon JSON should be at the root level, not in SRC.
Index.js should not exist, so get rid of, yes.
Node-mon.json should be in the root folder.
So at the same level as, yes, here, here, yes, yes.
Down, down, down, down.
Here, right?
Yes, exactly, here.
Okay, move.
And routes should be named omdb.ts
and should be in a folder named routes.
Okay, okay.
I have an arrow message here.
That's how it's, yeah, what's wrong.
Yes, perfect.
Show me your omdb.ts, please.
Okay, perfect.
And show me your API rest.
So you send a request to localhost 3000 slash.
So the root route.
And in index.ts, you're...
No, I mean the, by root, I mean, R-O-O-T,
I mean the root route.
Okay, yes.
So if you don't write the slash here at line 27,
the API rest, it still goes to the slash route
of your application, okay?
And what do you have?
You have the route handler.
You have a route handler for the root route.
No, you don't because you prefixed it with omdb, okay?
So if in API rest, you add slash omdb at line 27,
you will receive your hello world.
Well, you should.
Okay, go back to omdb.ts, please.
Okay, so it's omdb slash hello.
Okay, so now please add the media and media ID
in your plugin omdb.ts.
Jolt, you're okay?
I'm trying.
Okay, what have you tried?
I'm not sure if it's okay.
Okay, first your routes folder should be in src.com.
Folder, yes.
Okay, why do you have index and index two?
Okay, okay.
And well, you should use git for that, but nevermind.
And what is the actual, now you are using index two, right?
Yes.
Okay, so you import the plugin 95
and you register it on line 18.
And the prefix should be omdb, not hello, perfect.
Now show me your omdb.ts, right?
And up, up.
I'm just trying to find the plugin.
Okay, what are you exporting here?
Omdb plugin, perfect.
Okay.
Please indent correctly your file.
Where was I?
Well, the question is should I have migrated all these
inside the plugin?
Yes, yes, this should be, yes, this should be in this file,
omdb.ts, yes.
I moved the types from the omdb.ts.
So I'm from here and from here, maybe.
Okay, perfect.
Now, so just like, I think this is good.
Go up, please, in this file.
To down?
Yes.
Now you must define the type of app.
And app should be a fastify instance.
So after app, you type colon, space, and fastify instance
and it should fastify instance.
Yeah, click on enter, please.
Yes, it should import directly,
automatically your fastify instance.
Okay, and now we can see that you have less errors.
Okay, now you need to add the types
for the query and the parents.
Maybe you did not do this before.
No, I didn't, I just moved.
Oh, okay, okay.
So everyone has a functional plugin?
Okay, where are you at?
This is Vlad, right?
Yes, but I don't know.
I just thought that I should be able to
understand how to configure the plugins.
Okay, so show me your index.ts, please.
So you imported the omdb routes on line four
and then you register it with the prefix omdb, right?
On line 15.
Show me your omdbts.
I just left the very basics.
Okay, perfect.
Now you have a plugin, which is a function
that takes two parameters, a fastify instance
and a fastify plugin options.
Okay, and you export by default your plugin.
That is great.
Now in API REST, you should be able to
request omdb slash hello, omdb slash media
and omdb slash media slash 123.
Yes, but I did not enter it for those.
Okay, but you should just copy paste
what you had in index.ts.
Yeah, but I lost it and I...
Well, I think you have it in the course.
Here.
But for me it's okay, Stan.
I understood the steps until now, so I understand.
Okay, okay, perfect.
But I should add here.
I will add it tonight.
I'm just making a note, a to-do note,
which is in fastify typescript.
Type script fastify maybe.
Type script fastify.
And then to-do.
To-do.
Who was talking, sorry?
Yes, thank you.
Yes, go back up please.
Yes, you just have to type fastify for online 51.
After a fastify, add colon space fastify instance.
Yes, type colon.
It's two points.
Yes, fastify instance with fastify instance.
Yeah, go enter please.
Yes, so it's important to type fastify instance.
Okay, and you can, for now we can get rid of options
because you don't have options.
You're welcome.
So I'm gonna do what you did, hopefully.
So first, in SRC, I'm gonna create a file
in the routes folder named omdb.ts.
In omdb.ts, I will add these two functions.
In a function named function omdb.routes.
Okay, the name is not really important for now.
And it will receive a fastify instance.
Fastify instance.
Oops, yes.
And we will call it app.
And I copy and paste.
Sorry for the, really slow.
And so now that I have this plugin,
which is just a set of routes,
I can export default omdb.routes.
Now I will have to register app register.
Omdb.routes, all right, it's too slow.
So omdb.routes.
Prom, routes, omdb.js.
And now I'm gonna test it.
I registered it and I want to prefix all the routes
in this omdb, in this omdb.routes with omdb.
That way in API REST, if I want to make a request,
I will have to add omdb.routes.
Omdb.phase URL, which will be omdb.
Okay, host 3000 omdb.
Now, and search URL will be this one.
Will be concatenation of this with slash media
question mark as equal.
And so search URL should work as before.
Why was it rejected?
Oh yes, I forgot something.
It used to be.
I can't even start in time.
I'm gonna have to wait until the call is done.
What?
I need to copy some variables in here
to hold the omdb URL,
but it did not put them in the omdb.ts file.
Oh, I don't know.
I don't understand the problem here.
An easier way maybe should be to,
let's just fix that.
Search URL, search URL.
All of this should be in plugin.
There's also a type that is missing in the plugin.
What is missing?
A type.
You use a type in omdb.ts has omdb.search.
Oh yes, yes, but that should not.
You are so sorry, Ryan.
It should be on the other file,
but it should not be a problem for,
plugin did not start in time.
We're going to call it on.
Oh yes.
I forgot to add async,
meaning that it does not return a promise,
and this is wrong.
So I think this is correct now.
Yes.
API rest.
Here you go.
Okay, so remember a plugin must return a promise,
and so must be an async function.
An async function is guaranteed to return a response,
a promise, sorry.
An async function is guaranteed to return a promise.
And here when you say register,
here it must be a function that returns a promise, okay?
So API rest,
I'm calling localhost 3000 slash omdb
slash media question mark s equal,
and then the search,
and it's all okay.
All right.
Now,
here I'm testing the real omdb API.
I'm not testing my API.
So I'm gonna modify this
to create
slash
here,
ID URL,
and for example this,
and this is working.
This is the X, triple X,
okay?
And I can do also this.
And here I have Mad Max 2, the road warrior.
Okay, does everyone has this?
Okay.
Can I see your index.ts file, please?
Sure.
So once you have this, this is really simple.
This is, I think this is really the one
that you have in the course on my browser.
I think.
Yes, this is really exactly.
Yes, this is exactly, but with this.
After finishing this omdb?
Yes, yes.
Okay, so,
I'm gonna put it in
the course also.
So ts,
answer for,
so here you go in the course you have the answer for the
omdb,
src routes,
omdb.ts.
Okay?
So now you have all the types,
all the variables that are need only for omdb,
all the types that are needed only for omdb
and all the routes that matches only omdb
that may request for emdb in the same plugin.
Okay?
So this is a whole.
Yes, George, what?
Yes.
Yes, sure.
And,
API,
API rest.
Now it's on the course here.
Maybe,
3010, but just 3000.
Okay, everyone good?
Yes.
Oh, there was a solution.
Yes.
Now,
this is not a good solution
because it involves Zod that we did not see yet.
Okay.
So now we could be satisfied with what we have.
Okay.
But we want to go further,
meaning that we want to check not only the types
at runtime, at build time,
but we want to check the types at runtime.
And to do this and not to do it twice,
I mean, not to check on with TypeScript
and in the code,
we are going to use Zod that allows us to write
once the schema of the shapes of any of the object
that we want to validate.
And then also the,
in first,
it's a tool that also infers the types,
I mean, in TypeScript.
Okay.
So this is Zod.
Oh yes.
Before that, just a word about Vidnode.
We're gonna talk real quick about it.
Yes.
Well, I already talked about it.
So I'm gonna move it
to another part of the course.
But anyway,
it's okay.
So now Zod.
What is Zod?
Yes.
Well, am I going to talk about Zod before Prisma?
What do you want to do?
Do you want to talk about database
or still TypeScript and then go to database?
Maybe still TypeScript and then-
Okay.
So Zod, as I was saying-
Yes.
Okay.
So Zod, as I was saying,
is a TypeScript for schema declaration
and validation library.
What in that means?
It means that it's a library
that was designed for TypeScript and in TypeScript
and allows you to create,
to declare a schema of all the object
that you want to validate
and then validate it at runtime.
So this is quite useful for validating
the inputs and the outputs of your API.
Okay.
So we will define schemas
that validate the shapes and type of data at runtime.
Okay.
Those data are the client inputs
and the server outputs.
Okay.
What I mean by that is what the single page application
that we will build in Vue next month
will send to the server.
And this is the client inputs.
And the server outputs are the JSON
that will be served,
returned to the client from the server,
from our API, from our web API.
So the key features of Zod
are first TypeScript first approach.
This is really important.
And this is how it shines.
You make declarative schema,
you will see the API is really intuitive
and it's easy to read and write.
All the type support are really comprehensive
and it's a chainable API.
It's really a really agreeable API.
And since it was designed for TypeScript,
it integrates perfectly with TypeScript.
So you can infer the type with the schema that you created.
So I'm gonna talk to you about basic of Zod internal.
So there are some key methods,
just like z.object.
So you import z from Zod,
and then you declare that the user schema
is an object that has three properties.
Sorry.
The first one is name and is a string.
The first is age and it's a number
and the minimal age is zero.
Well, here it could be 18 or 21.
And an email is a string that is an email.
So you don't have to create yourself a regex
to validate that an email is really an email.
It's done for you in Zod.
And then you can use the safe parse method on the schema
to validate this data against this schema.
So here you will have valid data.
So result will have a success that will be true.
Result will have a success property that will be true
if this object validates this schema.
Okay, everyone?
Yes, tell me.
So in a way, Zod is just sugarcoating interfaces
and types?
It's much more than that because with type interface,
as I told you this morning,
it is just on the build time that you type check.
Yes, and this is more because it's a runtime.
Yes, it allows you to check and validate at runtime.
And that is what you really want and need to do on your server.
If we receive a response from database,
we can check that it follows a certain structure.
Yes.
For example, another example,
you can validate that when a user sends a password,
an email and a password,
when email, username and password,
when it creates an account,
you can check that the email is really an email
because in TypeScript, it's only at build time
and you can only check that it is a string.
You cannot check that it is an email.
Okay, and with Zod, you can.
With Zod, you can.
Also, with TypeScript,
you can only check at build time and not at runtime
that the password sent to you is complicated enough.
You cannot do that in TypeScript.
You cannot tell that the password sent by the client
when it creates its account,
his account or her account,
that it is a complicated password.
You need to validate it against more complicated validation
than just string.
Okay, and Zod allows you to infer a type from schema,
meaning that if you use that dot infer
and then in the angle brackets,
you type of user schema, user will be this type.
It will be an object with a name, string, age number
and email string, okay?
So I just told you that,
but I really need to insist on it.
The use cases are form validation
that what you receive from the client,
API responses that you send to the client from the server
and other use cases can be configuration files
and JSON parsing.
Now, what I want you to do is to create Zod schemas
for media search response and a user.
User, well, this is not for now.
Just media search response.
Good question.
Where do you think it should be done?
Somewhere separately?
Yes, you can.
You can do it either in the OMDBTS file,
which is a plugin.
Maybe you can create a folder inside routes,
which is called OMDB and inside it,
you can create routes.ts and schemas.ts.
So you have multiple options.
This is where you have some freedom
and please create a document
where you write all the conventions
that you decide collectively, I mean, as a team
and respect it.
It should be on a readme in the project.
In the readme of the project,
you must have all the conventions that you agree on,
that the team agrees on, okay?
For now, we are just making it simple
and I think it's best to create it in a different file
and I'm gonna name it OMDB schemas.ts.
Do you have GitHub copilot?
Try to, just for fun, try to install the extension
GitHub copilot in your VS code.
Sorry?
This GitHub in one word and copilot in another word here.
Yes, do so.
I hope you have a GitHub account.
Maybe I have a GitHub account too.
I'm not sure.
Where would be the best to override?
Here maybe.
So where are you Vlad?
Let me.
I found the phone, sorry.
Okay, perfect.
Is this the first from the top?
Yeah, I'm on the-
Yes, yes, yes, it is.
From Microsoft, should be from Microsoft,
or from GitHub, sorry, from GitHub, yes.
Yeah, and I think I'm the only woman here
so I will not present anymore.
When you hear my voice, it means Malina.
Yes.
But it says that I don't have access to GitHub copilot.
No access to GitHub copilot found.
Yeah, absolutely.
Although I am locked in.
Just.
Oh, so it's only for paid.
Okay.
Well, maybe you should ask your superiors
to buy you an access to GitHub copilot.
Let me show you.
Here I right click on this type.
Okay.
Then I go to copilot, add file to chat.
And I asked him create a sort schema from this type
and it created for me this.
And this is quite correct.
And so, well, you don't have this.
So we're going to build it together.
Okay.
So this is your first sort schema.
So the search here is an array of this.
Okay.
And this could be good to have this in a different schema.
So to create a schema,
const,
ombb search,
media schema.
It is an object.
It is an object, right?
Yeah.
It is an object with title, your MBP ID type and poster.
So I'm going to add title
and tell him that title is a string.
Okay.
Same thing for year.
Same thing for IMDB ID.
And type.
And poster.
But type can only be one of two things
that are movie or series.
And Z also has an enum.
And you can give it to him the
an array of movie and series.
Okay.
That's my question.
Should we install Zod with NPM first?
Yes, you should.
You're absolutely right.
This is not a dev dependency.
This is a real dependency
because it will be needed on runtime.
So any Zod or NPM IZod.
Okay, everyone.
Yes.
Sorry, I missed the last part.
How do I install the Zod?
Yes.
Yes, install that with NIZod or NPM IZod.
And that's not a developer dependency?
No.
Okay, cool.
Thank you.
And so you can go on with the
const omdv
search response schema, which is an object.
And this object will have three properties.
The first one will be search.
Okay.
Which will be an array of this schema.
All right.
And total results will be a string.
The response will be a string also,
but it can only be either true
or false.
And both with capital first letter,
uppercase first letter.
I have a question.
Total results is here in these Zod objects.
Why are they strings instead of numbers?
Because that's how we get them from the API?
Exactly, yes.
Okay.
Here in the year is a string.
Why?
Because if it's a series, it expands on several years.
And so you will have 2008-2012, for example.
If a series was on air between 2008 and 2012,
you will have year in year, you will not have a number,
but two numbers split with a dash.
Yes.
So I put a capital O here.
I'm not sure I should have, okay.
Because capital Pascal case should be reserved
either for classes or constructors or types.
And schemas are neither.
So I renamed this type with old.
Okay, I'm gonna show you why.
First, OMDB search response.
I will create a type that will be
Z-infer type of this schema.
Okay.
And if I create an object called response
and I create an object here,
I will have smart completion.
Well, I hope so.
I hope this is much quicker in your...
Yes, you see how I have search and total results.
So total results, let's say just one, okay.
And then response.
Here, you can see that I have smart completion
and it allows me only true or false.
Not any string, but only those two, one of those two.
Okay, and the last one will be search.
And it will be an array of objects.
And also I will have smart completion here
with title, type and year.
And EMDB ID.
And for poster, yes, anyone.
And for title, yes, Black Knight, perfect.
And for type, also I will have only two choices,
either movie or series.
This is thanks to the enum.
All right, with this one, this one was less strict
because here the type is just string.
It's not specific enough and response also is string.
Okay.
So this is much better, all right.
I will add it to the course.
And also we could make them sound
like the properties optional, right?
Yes, exactly.
How do we do that?
Well, this is really easy.
You just add dot optional after a string.
And in that way, when you hover on, sorry,
on EMDB search response,
you see here that it added a question mark.
This is because of the optional.
Everyone see that?
Here type, I have a question mark
because I made it optional.
And so this property could be either absent or undefined.
Okay, now you can do the media.
I give you five minutes to do the large schema for media.
We do five properties that
also from the long one that we have before the old one.
What do you mean by the old one?
The purpose is just to create a sound schema from this type.
Oh, you had five minutes.
If it's not, if you are not finished,
please pay attention to what I'm gonna do.
I'm gonna show you how to use VS code
and some shortcuts to really,
I mean, to really make it easy to transform a type
into a Z object.
So first I'm gonna select all of the lines of the type.
Then I'm gonna copy it here.
Okay, I have the thing two, twice.
Okay, I'm gonna create a const here
and call it media schema.
Okay.
Then I'm gonna select double click on string
so that it will select my string.
I mean, it will select the string string.
And then we do to create with short the schema,
only one schema without creating the schema for the ratings.
Yes, yes, sure.
I'm gonna show you.
So I selected string, okay.
Sorry, what?
Oh, sorry.
So, okay, let me start from the beginning.
So I'm gonna show you, if you're not finished,
please, please bear with me.
I'm gonna show you how to use VS code
and some shortcuts to easily transform a type
into a Z object.
So I'm gonna put myself here
and select all the lines of this type.
Then I'm gonna copy it, copy all of it
with the shortcuts that Linux takes advantage of,
unfortunately, but anyway, you can copy and paste it, okay.
Now, instead of type, I'm gonna write const
instead of media, I will just write media schema, right?
Then I'm gonna double click on string
that will select string, okay.
And then several times until the end,
until the end, the line 50,
I will press Control D, for me it's Command D
because I'm on a Macbook,
but for you it's Control D.
Then you see that I have multiple cursor, okay.
I can press the left arrow
and so that I am at the end of string.
And then I can put parentheses,
then I go back and add Z at the beginning, okay.
Then I press the end key on your keyboard
and then I get rid of the semicolon
and I replace them with comma, okay.
Now I just have to transform this into an array.
So I select all of it, I press the parentheses
and then before it, I just add array, Z array.
And that's it.
Okay, so I don't need this anymore
and I can infer the type, yes,
it's quite right to name it OMDB media schema
instead of just media schema, okay.
So now you have the response in the course, okay.
For the first one, we first define the search
and after that we define the total results and the response.
Shouldn't we just define in one as we did here with the array?
This, yes, sure, you can just have this,
cut it and put it there.
Inside the search field.
Yes.
But that may not be a good idea.
This is much more readable.
This is much more readable than this.
This makes it quite complicated
and not easily maintainable and easy to read.
But you may, but you may, you, once again,
you have to define the conventions and stick to it.
Last thing, because here in the second example
for the media schema,
we haven't created for the ratings separately
but we have source and value.
We added inside, so that's why I must say,
if it's okay or how should we do it.
But this is the best practice
and we have to be under the rules.
Yes, I think when it's simple like that,
it's okay.
This one has just two properties,
but this one has five.
Okay, so this makes it not clear what is what.
My opinion, you may have a different opinion
and I respect it.
I have an error in the ratings array.
The source key of my object is underlined with red.
That is why.
Yeah, I have this.
And do I?
Or do I follow?
No, I don't have the same.
And if you put your object literally,
my only specifying known properties,
I'm sorry.
Oh yes.
Yes, this is not right.
This is an object in the array.
This is not right.
And this is an object array of the object.
My mistake, sorry.
No, it works.
You're welcome.
And why is that red?
Cannot think there only this key.
What?
Take some things, okay.
Okay.
You have one, Glenn?
Yes.
And put your, yes, thank you.
Oh yes.
My mistake also.
Sorry.
This is, maybe you can see where I did wrong.
I did something wrong.
I fixed it here, but not here.
This is also as the object.
Yes, sorry.
I used different names initially and I was confused.
So I should have from CRA
from search response, right?
Did I delete that?
Yes, you can delete the type, yes.
Or why is it?
No, no, no, no.
937.
You don't want that.
You want,
no, you want, just a minute.
I'm going to take, this is Stefan, right?
Yes.
Okay.
Here.
You can get rid of that.
Don't need this.
And this is on search
media response.
And this is another schema that you did not write.
I think I deleted it by accident.
Okay.
Yes, I have this before.
I think you're good now.
Yes.
Yes.
Yes.
You just, you just get rid of Z dot array
and just put OMDB search media.
Yeah, exactly.
Remember everything in JavaScript is a value, right?
So when you write this,
this is a value.
Okay.
So you can put the value in a variable.
So if you do this, you can type this.
Okay.
So here you can replace this variable with this content.
No problem.
It's also here a value.
And it's better when you have to define multiple places,
right?
To have the same,
where you don't make mistakes, for instance,
if you have minimum, maximum values.
Yes.
Yes.
For the same values.
Exactly.
Yes.
Now.
What do we do with this?
How do we use them?
Oh, yes.
Yes.
You're right.
Since we created the,
media, the type media from the schema
and export and the OMDB search response
from also the schema,
we can export this.
Okay.
We will also export this,
the schema.
Okay.
And pay attention that there is no default export
in this file.
Okay.
I repeat, there is no default export in this file,
meaning that never in this file
is there export default something.
Okay.
Only export const something and export type something.
Okay.
Never export default something in this file.
This one for now, at least we won't need it
in another file.
So we don't have to export it, but you can, you can,
but it's not needed.
Now here, we don't have anymore,
the search response.
Okay.
If I press control space here,
at the end of this,
of this word,
I get a smart completion.
And if I click on it,
it adds an import.
Okay.
This is only a type.
So I strongly recommend you to add here,
import type, import type,
to make it clear that this is only a type.
And this will get be the TS script compiler
or any bundler will get rid of this
when it is transpiled into JavaScript.
So making clear that an import is only a type import,
and I strongly suggest, strongly recommend
that you indicate that this is only a type import.
This will make your build faster.
Okay.
Now I can do the same with media.
See here, it added automatically an import
thanks to my smart completion.
Control space, control space.
It should be automatic.
You should have it.
No suggestions.
Maybe you did not export it.
Did you add the export keyword here?
Before the type.
And here, yes.
Okay, that's okay now.
Voked?
Yes, yes, yes.
Perfect.
So now I want to notify,
fastify that I am using Zod for my types.
Okay.
For that, we will need to use fastify type provider Zod.
So we are going to install
fastify type provider Zod.
Where, oh, it's not on the course.
So I'm gonna edit.
So make sure you
don't make any mistake in the name.
So it is on the course.
Here.
Where?
Here, npm install fastify type provider Zod.
Every word separated by a dash.
Okay, everyone has installed it.
Perfect.
Now that we have it,
we must import it in our index.ts file.
Okay, go.
Index.ts.
So here in fastify,
we are going to add,
just don't write it yet.
We are going to make it better and simpler.
But in app, you can set a validator.
I'm gonna go faster, okay?
So yes, please do it with me.
Here in app, I'm gonna add
set validator compiler.
And it is a function, a method,
that requires a validator.
Validator compiler.
And this comes from where?
It comes from fastify type provider Zod.
Okay, so import.
Validator compiler from fastify type provider Zod.
All right, everybody?
And not only that, we will need also a serializer compiler,
which also comes from fastify type provider Zod.
And last but not least,
we will have to notify,
fastify that we're using the type provider Zod.
So this is a function, and here it's generic.
We use a generic.
And Zod type provider comes from fastify type provider Zod.
I've got some other speed validator compiler
and serializer compiler, even though they are important.
Okay.
Okay.
Type provider Zod and here Zod.
So who has problem?
Stefan?
Yes.
Oh, yes.
Please pay attention that those are not default export.
All right?
What does that mean?
That means that here, this is a default export.
Okay, and so you don't have curly braces.
Okay, okay.
And here you have curly braces
because they are named exports.
In my case, we run the Zod type provider
was automatically added to this list.
And I see it created a different thing
for working with type.
Or it's a back-rider.
So if you could check my screen, I have it.
Yes.
So either you use this, oops.
Sorry.
I was just asking if it's needed to be in separate import.
Either you do this, you can either do this
or at least do this.
Okay.
Now you're good to go.
Fortunately, I still have some red otherwise.
Yes.
That my app can be undefined
if I have a word that is specified.
This is not needed.
I know, but it doesn't work.
Same mistake as me.
What the last two code,
which type should be functioning.
I have put the parenthesis.
Yes.
With type provider, yes.
I call it as a function and the import is,
seems to be correct.
Can I run the possibly undefined?
Why?
I don't know what is wrong.
It seems to be the same code that used.
So I don't see any difference.
Now it works.
I don't know what you did.
I copy paste my code.
So I don't know.
Oops, sorry.
Probably I had an error somewhere.
This is your code.
And this is mine.
I don't know where.
Anyway, you're good to go now.
It doesn't matter.
Okay, thank you.
Thank you for your help.
Okay.
Just check please if it's still working as expected
with my code, with a part of my code and your code.
Okay.
Now, unfortunately.
It works, thank you.
Okay, perfect.
Now with app here, since it is called from here,
here app is already and always with type provider,
Zot type provider.
Okay.
Unfortunately, there is no way at least yet
to indicate that this plugin should receive
a fastify instance with the type provider of Zot.
Okay.
So,
oh yes.
Now with, first, first, maybe I can show you on the course.
Yes, we will see deep customization of,
yes.
Okay.
Okay, we created Zot object for all the requests.
Okay.
So the takeaway is that Zot is a schema validation library
designed in and for TypeScript.
It allows runtime validations,
validation of inputs and outputs
and automatically first TypeScript types from schemas
and so after auto completion and build time
and runtime validation.
So now Zot in fastify.
Well, I already told you all about this.
The key concepts of type providers in fastify,
it allows for schema validation and TypeScript integration.
And so you have type safety, auto completion,
validation and consistency.
Consistency because all your types are correct
in any way, everywhere in your application.
So we install fastify and
here you go.
So this is the way to use
now schema, Zot schemas in your route handlers.
This you won't need because you had it already on the app.
So this you won't need.
I put an example of a post access of a post route handler,
but this is just so you have an example
of a post route handler.
But the real important thing is here,
instead of just a function as we have in our quote,
we will now put an object with two properties.
The first is schema and the second is handler.
The handler will receive the same function.
You don't touch the function.
And the schema here will be an object with a body
or the object of the body for a post route handler.
We won't, this is not for us because we are coding
a get handler, a handler for get request.
But the response here is a property of schema
and is an object.
And here you have the code status,
the status code in number.
And here you have the matching schema
that you want to send if the response is
of that status code, okay?
So here I declare a route handler on access token,
the schema and in the response,
if it's 201, meaning that everyone,
everything went well, I send to the client an object
with a token property that is a string.
So in the handler, I received the request
from the body of the request, I get username and password.
I generate a token and then I return an object
with a token with its value that will be a string.
So this will pass the validation and the type checking, okay?
So what I want you to do now is two things.
First,
first, this will not be needed anymore.
Okay, hope you can see my VS code.
The generic on get will not be needed anymore.
Okay, so we'll get rid of them here and here.
Then-
The schema.
So you get rid of this,
then you create an object here instead of just a function.
In this object, you add a handler property.
And above the handler property, you add a schema.
And in the schema, you will have query string,
which will be a Z object
of ID, which will be a string.
I'm seeing the search here.
This is, yes, this is the search, yes.
This is the media, yes, this is the search.
Okay, but then why do we-
Say it's an ID, the query string.
Sorry, it's not ID, sorry.
Yes, thank you, thank you.
It's S, okay?
It's S for the query, the search.
Yeah, sorry, thank you.
So I don't need this.
Can I help someone?
Should we also import in this file
in this OMBB.ts, the Z library?
Yes, yes, obviously yes.
I forgot that, thank you.
Import Z from Z.
I modified the schema, both of my routes.
I still get the underline on best.query.s and-
Yes, that is perfect.
Yes, that is perfect.
Wait for me.
That is just what I wanted.
I will try something, Boti, okay?
Just to make sure.
Something, no, no, no, no, no, no, no, no, no, no.
Yes.
Yes, so.
Is it Z?
Yeah, Z time to find out.
So you fixed it?
Yes.
The basic function must be saved in a constant,
and the constant should be typed
with this generic complicated type.
Yes, exactly.
Okay, okay, okay, so.
Thank you.
Now we can add here the response.
But it's better to be done,
because I need the same issue that I said.
Read for the investment.
I'm not understanding you.
Please talk louder.
I said that I have the same issue as Boti mentioned.
Yes, okay, okay, perfect.
I will-
Something that you could do well.
Yes, okay.
Please get rid of online 12.
Please get rid of Fastify instance.
Just write app online 12.
Yes, perfect.
Then everyone is with me?
No way, I have the same issue.
I got rid of-
Yes, okay, perfect.
If you are all at the same thing,
meaning that you have an underlying red here.
Yes.
So this is perfect.
Why?
Because here you have a Fastify instance, okay?
And what you will receive here
is not a default Fastify instance.
It will be a Fastify instance with the type provider.
Okay?
So you will have to notice in your,
indicate that in your code that this is,
omdb routes equal.
This will be a type of Fastify plugin async,
and it is a generic type,
which will receive a Fastify default,
Fastify plugin options.
Okay?
Then a raw server,
server base,
and then the Zod type provider.
This comes from, yes, yes, yes.
Raw server base,
and all of those are just types.
Okay.
This type comes from the,
first type comes from the Zod.
Yes, all of these come from Fastify,
and only this comes from Fastify type provider Zod.
And if you,
this won't work for me because my computer is really slow.
It will work in like five minutes.
But if you,
if you modify your code that way,
if you hover on app,
it should tell you that it is a Fastify instance
with Zod type provider.
Here it works for me.
Okay?
Do you see my screen?
So I hovered on my app here,
the first parameter of OMDB Rounds.
And it's not a default Fastify instance.
It's a Fastify instance with Zod type provider.
Yes.
Okay?
And if you add here, open,
it is also inferred as a Fastify plugin option,
which comes from here.
Okay?
For now, we are not using options,
but maybe someday we can.
Okay?
So this is correct.
And we still need to add a response schema
for the 200 status code response.
So how do you think we do that?
Remember that titles is an array of string.
We have the status code as the key of the object
and afterwards the Z of the array.
Yes.
Maybe we should specify,
I don't know, maybe a type of object, I don't know.
The array, I'm not sure.
So you're right.
So I put 200 here because this is the code I will return.
And titles is an array of string.
And that's it.
Oh yeah.
Yeah, because we mapped through all the elements.
Mm-hmm.
Now, how about this one?
Have you done this one?
Has anybody done this one?
You want some minutes to do it yourself
or do it together?
Okay, do five minutes, okay?
Who is this?
Who is this?
Yes, so Ferens, are you listening to me?
You're hearing me?
Yes.
Yes, online 24.
Online 20, you see that you have a red
because there's an error, okay?
What does this handler,
what does the handler of this route returns?
It should be done with bypass.
Yes.
Here, you are telling Fastify
that it returns an object with a property named titles.
And titles is an array of nothing.
It should be done with.
It should be an array and inside.
No.
Please go simple.
This should return an array.
How do you define an array in Zag?
Without array?
Yes, yes.
No, no, array, array.
And an array of what?
No, no, no, no, no, no.
No, no, no.
An array of what?
Answer me.
Of strings.
Yes, so just write, no, no, without curly braces.
An array of Z string.
Here you go.
Okay.
Okay.
Melina, are you okay?
I'm okay.
I'm not okay.
Yes.
Let me.
So I will add it to the course so that you don't get
so much behind.
No, no, no, no, no.
Voila.
No, no, no.
Is there any reason I still have the error message
for the programs?
Let me, give me one minute, please.
Okay.
Melina, please copy and paste at least the beginning
of the file that I just added to the course here.
Yeah, after hands-on refactor the existing code
to use Zot for validation,
we have all the beginning of the file of the OMDB.ts file.
Okay.
Okay, so it was parents, right?
Yeah, so the first one is okay,
but for the second one I see error message.
Yes, you need parents.
And here you are only defining query string.
So it's just parents instead of query string here.
Also, that you know, you get the error,
and you have to put back the initial.
Yes.
Yes, Stefan, tell me.
I get an error, but I don't get.
Yes, this is correct.
One before.
Okay, let me go into interactive mode.
So here, ID and the response,
what does the handler returns to the client?
Yes, and what is the type of the body?
OMDB media.
Okay, and here you are telling first.
Oh, the response.
The response should be an object with a key
with the HTTP status code, okay?
Okay, so I don't need this.
No, this is wrong.
And no, no, don't do that, don't do that, don't do that.
No.
But yes, this is the exercise, okay?
And so what I wanting to put here,
since you want an OMDB media and you want a schema,
you want a Zod schema, what do you think should be here?
I'll let you think a minute, okay?
And I'll get back to you.
Who is that?
Attila, I think it's Attila.
Yes, Attila, this is, oh, sorry.
At line 80, media is a type.
You cannot put a type in what is expected as a value.
Here in Z object, Z expects a value, not a type, okay?
And yes, you want an object.
And what object do you want?
Yes, you want a schema, not a type.
Where is your media schema?
Exactly, exactly, yes.
No, you don't want an object with the schema.
You would just want the schema.
No, what I mean is, that was Attila, right?
You really just want...
Without the object.
Yes, yes, exactly.
Perfect, remember to import this.
You must import this.
Okay, now you're good to go.
So, Terence, here, what do you want here?
Here you want a schema, not a type.
Where is your schema for media?
Yes.
No, no, this is the type.
Where is your schema?
Yes, here.
So import this and use it wisely, where it should be used.
Exactly.
So, no, here, make it simple.
Here, please press Control Space at the end of the word.
Control Space.
And then enter.
Then you go, it automatically added this.
Okay, so perfect, you're good to go.
Everyone has finished?
No, I see red and yellow.
What should we change at the export part?
Because we changed the structure and not the export.
You should not, oh.
Because we don't export with people.
Yes, yes.
We don't need anymore.
So here you export OMDB plugin, right?
Yes.
And so you just have to name this OMDB plugin
and you're good to go.
We are using the local outs from the template,
so we have to rename it to the one that we want.
And now, media ID, the response is not in the real string.
This is the media schema.
So I'll let you think about how it should be done.
Okay, who has not finished yet?
Button, you're good to go?
Yes, I think so.
This seems to be correct, yes.
And please go up, but okay.
Yes, perfect, thank you.
And Christian, you're okay?
No, not yet.
Not the second one.
Okay, first, line 44.
Why is it red, do you think?
Have you defined the types for the parents of the route?
I don't think so.
No, no, no, no, don't go up.
Everything is on your screen.
No, I don't think so.
So how do you type the parents?
I remember that I had it, but I guess I...
So please be careful with copy paste, okay?
I think you copy paste the schema from above
and read carefully the line 38.
Yes, this one.
This one is the problem.
Yes.
So I guess here should be the parents.
No.
No.
What is query string?
I think the thing for this for...
I just had it...
In the URL, what is the query string?
It's the thing with the ad, the API, the thing with the ID
and how we find the movie.
Not necessary, not necessary.
The query string is the string behind the question mark.
Okay.
Okay, here we don't need any query string.
We need the param from the route.
The param from the route is on line 36 and is called ID.
So you need to define in your schema the parents.
Yes, the parents.
And so now you're good.
Now the response.
Well, I will give you the answer for everyone.
I gave you seven minutes instead of five.
So I think some are waiting.
Some of you are waiting for the next part.
Just one question.
Yes.
Yes.
In line 15, we have defined the cost, OMBB routes
and afterwards, this cost receives as a value
erasing function that's also called OMBB routes.
Yes.
Shouldn't we rename anything or can we leave it like...
Okay, this is JavaScript.
Okay.
So please bear with me just a minute.
So what is the difference between function expressions
and function declarations?
Do you know?
Does someone know?
Function declarations or hosted?
Yes, what do you mean by hosted?
You can call a function before it is declared.
Exactly.
Yes.
The second one, the arrow function that you declared
cannot be called before 9.5.
Yes.
So here, if you see my VS code.
Yes.
So the first one is called function declaration.
Okay, a function declaration is an instructions
starting with the keyword function.
If you have an instruction that does not begin
with the keyword function,
it is not a function declaration.
It's a function expression.
Okay.
Meaning what?
Meaning that if I do this, for example,
this won't be a function declaration
and I cannot call my foo.
My foo here is undefined.
Because there is a token here,
which is the exclamation mark
that makes this instruction not a function declaration.
Okay.
So here's a function declaration.
And yes, this is hosted.
Meaning what?
Meaning that if I do this,
this has no implication
and if I do this in my code,
if I execute this code,
I will see my foo in the console.
Okay.
But if I do this.
Yes, that's not gonna work.
What, how does, how will it not work?
I think that the function expression
is a voice into the temporary dead zone
or something like that.
So it won't be available on the global object
or on the window object as the function declaration is.
Okay.
That's really interesting.
I didn't want to talk about the TDC,
but yes, that's correct.
Here the my bar is a variable declared
with the const keyword,
meaning that everything above is in the TDC
of this variable,
meaning the temporal dead zone.
The TDC is not in the specification.
Okay.
It's a funny world word for to describe the fact that
from the specification,
it is not possible
to use a variable declared with const before its declaration,
which is not the case with,
with var.
Okay.
Here I am in the TDC of my bar.
Okay.
But here I am just,
I can use this and this will return undefined.
Okay.
But if I do this, will this work?
I don't think so.
Why?
It defined the function as a function expression.
Yes.
So it's not available as a function.
It's undefined.
It will return undefined.
Exactly.
Exactly.
So this is an instruction.
Does it begin with the keyword function?
No.
No.
So this is not a function declaration.
It's a function expression.
Okay.
And so this is the declaration is hoisted
and it's not in the temporal dead zone
because it is declared with the var keyword.
Okay.
But my QX is undefined.
Undefined is a value that is not a callable object.
So if you put parentheses after a value,
after a variable and the value of this variable
is undefined, you will have an error.
Type error.
Undefined is not a function.
Okay.
Makes sense.
And here it's worse because it's declared with const
and so here my var will be not even undefined.
It will be unable to use.
Okay.
So here you won't have a type error.
You will have a reference error.
Okay.
And this is an arrow function expression
or arrow function in short.
Okay.
So whenever you say arrow function,
you should say arrow function expression
but let's make it simple.
This is an arrow function and it's always anonymous.
I mean, it has no name, but at runtime,
the engine gives it a name
and it will be my bus here,
but it can be very complicated to give a name
to that anonymous arrow function expression.
So is it okay for everyone?
It's quite complicated.
It's not really, a bit important,
but not really, really important.
Okay.
But just remember here, I cannot access my var
because it's a function expression and it is not hoisted.
Technically, this decoration is hoisted,
but we are in the TDZ and cannot access the myvar.
Even though the declaration is hoisted,
it is in the specification that you cannot use it
before its declaration.
Okay.
But here, this is hoisted.
Again, hoisted is not in the specification.
It's just a way to see it.
Okay.
And it will be read in the engine as this.
So this will be hoisted.
Hoist means to lift up.
Okay.
Now, why do I talk about this?
Yes.
So this is a function expression.
It is not a function declaration anymore.
Okay.
Yes.
And you can give this a name
and I strongly recommend you to give it a name,
but you can remove it.
Why?
Because this is the name it will have.
Okay.
Okay.
It has no importance,
but I think it's better to name your functions.
And it would not make any sense
that they don't have the same name.
Okay.
Okay.
And why do I not,
why don't I use
this maybe,
I don't know, maybe,
I'm not used to
JS dog, but maybe if you do this,
how was it?
Maybe if you do this,
you will have the same result.
No.
No.
You know this is JS doc, right?
Maybe you don't.
Import.
We don't know,
you don't know JS doc?
Well, let's move on.
My computer is too slow, I'm sorry.
I'll try and maybe I'll add it in the course
if I find a way.
Okay?
Okay.
So the takeaway is you can leave it anonymous,
this function.
I don't recommend it, but you can.
Yes, I put the same name here,
but I can leave the function without the name
or I give any name.
It has no importance.
Okay?
So,
I don't know why it's red.
I hope it's because my computer is a bit silly.
So I want to get rid of this.
I want to transform this into an object
and the key here will be handler.
And above handler, I will add schema
and the response for 200
will be the schema of media
and the schema of media is OMDB media schema.
Hope.
Oh my God.
Slow, okay, OMDB.
And it will be OMDB schema.
Up and.
You should all have this and this should be good.
What did I do wrong?
And type function code.
And I type elements.
Button, you have the same code as me, right?
Exactly.
Okay, so.
The only difference is that I didn't have the red.
Okay.
I think you are missing the semicolon from the line 34
or something like that.
I don't need semicolon, I don't need.
No, it's just not a mandatory.
No.
Ah.
Okay.
Maybe I just need to save it.
Okay.
I will give you then all the,
all my file on the course.
Here we go.
Now.
So maybe go back.
Okay.
What do you think about five minute break?
And then we talk about.
Okay.
Swagger.
And Docker and Prisma.
Okay.
See you in five.
Who's there?
Who's back?
Okay.
So.
What have we seen today?
We've seen TypeScript and how to use it in Fastify.
Then we saw how to divide our code in plugins
and to use those plugins.
We have not yet used plugins from the community,
but you, there's many that you can use.
Okay.
And I will talk about some tomorrow.
And we saw also how to use VITnode
to use TypeScript directly
and not build our project
every time we want to test our project.
And we saw Zod, which is really a great library
to validate.
And we will see maybe, yes, maybe today
how we can also serialize our response
and what it means to serialize.
And now we are going to see Swagger and ESLint.
And tomorrow we will see Docker and Prisma.
Okay.
And tomorrow we will end with how to debug in VS Code.
So.
Swagger, does anyone know Swagger?
No, okay.
Okay, it's really great to, for,
particularly for the develop,
the front end developers of,
and the consumers of your API training.
So Swagger was first released in 2011.
So it was created by Tony Tam
and he was looking for a way to help document
and design APIs very effectively.
And he succeeded.
And so in 2000, so it's really,
it really gained traction.
And in 2015, the Swagger specification
was donated to the OpenAPI initiative.
So everything we are going to use is open source.
Okay.
And it's completely free.
So what is OpenAPI?
OpenAPI is,
was originally known as the Swagger specification.
So it's a specification and it is for building APIs.
So it defines a standard so that anyone that can see,
that see a Swagger, an OpenAPI specification
knows how to communicate with an API.
And it's really, really simple.
And the document,
when you specify how your API works,
it is readable by a human
and really easily readable by a machine.
And Swagger is a set of tools
that works with the specification.
And it can simplify development of your APIs.
Okay.
So it helps designing, building, and documenting
and consuming RESTful web services.
This is what we are building.
We are building a RESTful web service.
Some key components of the OpenAPI specification is,
key components of Swagger and OpenAPI
are the OpenAPI specifications.
It's written in YAML or JSON.
And it specifies endpoints, operations, parameters,
the formats of the request and the response,
the authentication methods, and much more.
You also have the Swagger UI, and we will use it.
Sorry.
It is,
it's generated from the JSON or the YAML specification.
And it turns into a web application
that you can use to test the API
and to really execute real requests.
With any documents on the web application,
you will see all the requests, the response,
and their shapes, the shapes that are expected by the API.
We also have the Swagger editor.
It's a website,
and it can also generate interactive documentation.
And since it's in the web, you have real-time feedback.
And you also have Swagger code then
that you can use to generate client libraries.
But we will use other tools when you will use,
when we will build our SPA in Vue,
maybe we will not auto-generate
the API library, I don't know yet.
And this is an example of a YAML format specification.
So you start by declaring the version of the open API,
its title, its description, its version,
the servers that serve this API, and all the paths.
Here I just put two, I think, yes,
the users and the users slash ID.
Okay.
The users is a get method,
but it's a request that you only can,
it's a route in which you can only request
with a get method.
It returns to you all the users,
and the response is a list of users,
and its content is JSON with this schema,
which is an array, and each item of the array
is an object with the property ID and the property name.
Okay.
This is where you can also have a parameter
for the user's ID,
and it's also a get method that allows you
to get one user by its ID,
and its parameters are ID.
And it's in the path, not in the query,
not in the body, it's in the path.
It is required, and it should be an integer.
The responses, if you have a 200 response,
should be a user object in JSON,
and it's an object with an ID and a name.
If the response is a 404,
the description is user not found,
and it should be a content with application JSON
with a schema object, and its properties should be status 404
and the message user not found, for example.
Okay.
So this is how you define a Swagger specification.
Okay.
Well, an API specification using the Swagger specification.
So now, I don't want to write myself this file.
Unfortunately, with Fastify,
there is a way, easy way,
to auto-generate the Swagger specification
just by using the proper plugin.
Okay.
So I want you to add these lines
that you see with a green plus,
and of course, to install those two plugins,
use them, so you have to register Fastify Swagger
and Fastify Swagger UI.
Wait for the app to be ready,
and inform the user that there is a documentation running
at the same port with a Swagger specification.
So you have your docs prefix that I defined here
as API docs.
Okay.
So please do so.
I'll give you five minutes.
So first, install those modules, packages,
then add those lines, and those.
This one is important.
Should we install with FPMI, Fastify Swagger,
and Fastify Swagger UI or?
Yes, that's what I told you.
Yes, yes.
You should first install those two modules, packages,
and then add the lines in the index.ts.
I tried to install it with FPMI,
and I received some 404 errors, some NPM errors.
If you can never look at my screen.
Yes, because it is at Fastify slash Swagger.
Okay, thank you.
It really has to be those names.
I didn't tell you, but.
It's for them?
Yes, sorry, what?
No, no, no, it's not dev.
Yes, yes, no, yes, no, yes, no, I don't know.
It can be, but if you want it to be dev dependency,
it must be more complicated,
and you cannot have these two lines,
because these two lines should be in an if,
if block, and you cannot have static import
in an if block, okay?
So for now, you just want to have it
in your production dependencies.
I have 38 100 bit, when I tried this.
Yes, don't worry about it.
Show me.
Okay, and run NPM audit fix, please.
Audit fix, and check.
Well, I don't think you should worry about it.
It's official plugin, and it's a very simple plugin.
And so since, where are you?
Maybe because I ran it before at fastify slash.
What?
So I started first without being at fastify.
Ah, okay, okay.
Show me what you did.
Oh yeah, do not install those ones.
Just fastify swagger and fastify swagger UI.
Should I remove this?
Yes, none, NUN.
Yes, and do the same with UI.
So when you see,
so when you see this import fastify from fastify,
is published with no scope, okay?
And this has a scope of fastify.
If you create an NPM package,
and you wanted to make it quite official
for your company, for example,
then you should publish it in your company's scope.
And for example, if I had a company,
my company is called Stormier, okay?
If I wanted to create an application
that is called Stormier,
and then I would want to put some plugins
or some additional software,
I should publish it under the at Stormier scope.
And then I will go with at Stormier slash
my utility functions package, okay?
So when you see at fastify,
it means that it has the scope fastify.
So if it is scoped with at fastify,
it means it's an official plugin, okay?
So any
fastify swagger and swagger UI.
Okay, so since Vlad mentioned it,
you can do as I put it in the course.
So here I will add fastify,
sorry, JSON schema transform,
then import fastify swagger,
swagger from at fastify swagger and UI, okay?
And then I will add
here this,
and then this,
okay?
Yes, we added these two blocks
and this JSON schema transform
and this variable.
And also we need to await for app to be ready.
This is important for swagger
and we can log that the documentation is running, okay?
But what we can do Vlad is even though we import this,
we can put this in a new block, okay?
And if process of node of is not production,
then we can add this, okay?
So now when you build,
no, sorry, when you start the application,
you can add here node of equal production, okay?
And this will be dist by the way.
You remember why this will be dist?
Because in tsconfig,
we told that the output directory of the transpiled code
should be in the dist folder, okay?
So if I now run dev,
I have here my documentation, okay?
Now why I don't have the,
what is happening?
What did I miss?
I don't know what's happening.
Do you have the same result?
No.
Okay, perfect, show me.
Yes, that's what I wanted.
Yes, perfect.
Absolutely beautiful, yes.
So if you click on any, you see you have,
you have more details about the route
and what is required in the route
and you forgot the slash, who's that?
I think it's buttoned.
Yes, you forgot the slash on the media ID.
I don't know how it's possible.
Show me, yes, it's media slash ID on 936, yes.
That's better.
Okay.
I don't need the same math for you.
So what did we miss?
Stefan, Stefan is doing worse than us.
Stefan is doing worse than us.
Okay, oh, you did not do this, you must do this.
And this should be, oh yes, I took it out.
This should be here.
Should be that way.
And this should be here.
Now, and if you click on here.
Yes, okay.
So can, yes, for who is it working for button, right?
And some others, please to show me your,
yes, good, please button.
Okay, which file?
The index, yes, the index please.
Yeah, oh, because you did not put it in
if maybe that's the reason.
No, I haven't checked the, I think Jason.
Yes, yes, it's not production.
So let's see.
And so I don't put it in if no, just not there.
I investigate tonight and we only have 10 minutes, right?
Yes, okay.
So we are going to talk about ESLint.
Does anybody knows, anybody knows ESLint?
No, okay, perfect.
You should always use ESLint.
What is ESLint?
Where is it, where is it, where is it?
It's validating the open, I think.
And checks if you have any,
if you are not expecting some predefined,
Exactly.
So first it's a linter tool, meaning that a linter
analyzes statically your code and is able to identify
and report either error or stylistic inconsistency
or potential problems, potential errors, okay?
And so the primary purpose of a linter is to help
developers write cleaner and more consistent
and maintainable and error-free code, okay?
And it is also just like Fern said, I think,
thank you, Prisil.
It can enforce the,
to respect certain conventions, okay?
So it does a syntax checking, okay?
And checks for syntax errors.
Style enforcements like blank space and how you,
do you always use curly brackets after if,
even if it's one line if, and stuff like that.
And it detects errors, like programming errors,
and such as undeclared variable and unused variable,
and also enforces best practices, okay?
And therefore enforces a good code quality.
So basically if you use a linter,
you will have a consistent code base.
You can have early bug detection because the feedback loop
is really quick because it happens in your editor.
And then you have improved code quality
and better team collaboration.
Why?
Because we're all using the same style.
There is no debate about whether we use or not
the trailing comma or the semi-colon
in your JavaScript and TypeScript code.
It's one convention and everybody respects it, okay?
So linters are essential now
and every project has a linter.
The best linter nowadays is ESLint.
And ESLint is used in almost every JavaScript
and TypeScript code.
Some exceptions are the one that uses JSLint,
which is really old, and JSHint, which is even older.
No, I think JSLint is the first one
that was created by Douglas Crockford,
and then we have JSHint, which was a bit configurable,
but ESLint is really heavily configurable with plugins.
And it allows auto-fix.
That is what we are going to use right now.
I will show you.
And it integrates perfectly with various code editors,
just like VS Code.
Recently, ESLint made some important changes.
First, the format of the config has drastically changed
from the old config to what they call the flat config.
All the style rules, meaning essentially all the blank space,
all the rules regarding the blank spaces,
have been deprecated.
A new really important plugin has been created
and is maintained by a really great developer
called Anthony Fu,
who is in the Vue JS coding,
the Vite.js coding.
He is also one of the two co-creators of Vite test
and also of ViteNode that we are using.
And he also created, so he created ESLint style.
Which is a plugin to ESLint
that integrates all the rules
that were deprecated in ESLint.
He also created an Anthony Fu ESLint config
that I use every day in every project.
And it has all it requires,
all it is required for TypeScript and Vue
and even UNO CSS.
And of course, it includes stuff for React
and some many other stuff.
I only changed a few rules
because it is an ESLint config,
which is still configurable.
So we're going to add ESLint
and un-fue ESLint config.
And this is a dev dependency.
So ESLint and un-fue add un-fue ESLint config.
What?
This is not working either.
Okay, is it working for you?
If it's not working, just add.
I received some error messages.
I'm warning you, error messages is given.
Okay, so just write this, please.
I put it in the config.
I just added legacy peer depths,
dash dash legacy peer depths.
Okay, and now if you run npx at un-fue slash
ESLint dash config, it should ask you
if you really want to continue,
you say yes with the arrow.
Arrow arrow key and then enter.
Then you won't use any of the frameworks.
So you just hit enter, press enter.
But view is selected by default.
I just hit enter.
Okay, it's not, yes, you can leave it.
It's not important.
Then also enter no format and no CSS.
And it asks you if you want to update
VS Code Settings JSON and you say yes.
Okay.
Sorry, what format should we use?
An extra utility like format or a new one?
No, no one, no one, just hit enter.
Just press enter.
So it created an ESLint.
Okay.
That export, that has a default export,
which is the result of calling the function un-fue.
Okay.
Okay, you all have the same.
Modify the, yes, un-fue config.js.
And please modify your ESLint.
So no, this is not needed.
This is not needed.
Yes.
So you can copy paste this content.
Oh, this is not needed.
So all of the style here,
all of the rules beginning by style slash
come from the ESLint style plugin.
And all of the TS slash rules
come from TypeScript ESLint plugin.
Okay.
And now if you press NPX ESLint dot and enter,
you should have all these errors.
Okay.
Now, if you go to index,
you can,
you can click on this file with,
if you press control, okay,
you can control click on this file and it will open.
Okay.
And if it's not red, it is because ESLint was not ready.
So now that you have an ESLint config,
and I think I installed for you the ESLint extension
for VS Code.
First, restart ESLint.
So shift control P and you type ESLint
and you click on restart ESLint server.
Okay.
And please, please see my VS Code.
Here you see in the rule,
meaning in the same space here as the source code,
the scroll bar.
This is called the rule.
And if on the right, you see red,
it means that you have an error at that specific place
of your file.
Okay.
If I hover on the,
this line, which is underlined with red,
it tells me that it does not respect the ESLint
sort import plugin rule,
because serializer compiler of the import declaration
should be sorted alphabetically.
So it should be before the V.
Okay.
I can move it myself.
Okay.
But that is because I am lazy
and maybe there are other errors here.
I can press control S or command S for me,
because I'm on Apple book,
a MacBook, sorry.
And it fixed for me,
all of the errors.
And now if I rerun NPX ESLint,
all the errors that I had here in index TS,
I don't have them anymore.
It does not appear here.
Okay.
Because it works for you or not?
What's the shortcut?
Control S, just control S.
Yes.
I didn't say yes.
I managed to fix for one file,
but how do we do for all of them?
Yes.
Good question.
You can go with NPX ESLint dot dash dash fix,
and it will fix all that is automatically fixable.
It may not be all the errors.
Okay.
It fixed all the errors,
except those ones.
Okay.
Because it cannot auto fix them.
So I'm gonna write a control click here.
And I see here that I have three errors,
because I have three red squares here in the rule.
So this is for process,
and I want to import process.
And I'm gonna show you another error.
Process from process.
Okay.
And this is red.
Okay.
Why?
First, because process import
should occur before import of Zot.
Why?
Because I want the built-in module
to be imported first.
And process is built-in node.
Okay.
It's a node built-in module.
So I want it there.
Still it's red.
Why?
Because I should use node column process.
Okay.
And if I just save,
if I put it here,
and I just hit control S,
it does it for me.
Okay.
Now for this one, what happens?
Yes, options is not used,
so I can get rid of it.
And reply is the same.
And now if I run npx-eslint,
I have no error.
Okay.
And last things,
last thing I want you to do before you go home
is to add a lint script
that does exactly this, eslint.
Now I can run npn run lint.
Okay.
Well, we'll leave you now.
Tomorrow we will learn about Docker
and how to use Prisma to make query
to a PostgreSQL database.
If possible, more example of Prisma than on the Docker.
Sorry, what?
More focus on Prisma than on the Docker.
Yeah, sure, sure.
Docker, yeah, sure.
Docker, yes, sure.
Do you have any questions
or do you want me to explain something that I...
I have a question.
Yes.
You showed earlier how to restrict
the register of the swagger
when we start the application in production mode.
Yes.
But I couldn't make it work.
Can you show me how to use it?
Yes, sure.
No, no.
So where are you?
Blood, blood, blood.
Yeah, I have an error.
Oh, it's a process dot env dot node env, yes.
And this is the standard property?
Yes.
It's a standard convention, but it's not standard.
So it doesn't exist on this?
I put it here.
Yes, exactly, yes.
So now when you run npm start,
it will start node dist index.js
with the environment variable named node env
with value production.
Do you...
Please control S, doesn't work for you?
Please let me see your VS code settings.
Yeah.
This one is for the project, but yes.
Format on save, false yes.
And source pixel ESLint.
Yeah, this should be good.
Please restart.
Make, how do you say?
Control, shift control P and restart ESLint server.
Yes, and then control S please.
Okay, strange.
And if you over on serializer compiler,
it says sort input, okay.
That is strange.
It should fix this automatically.
Also see some interesting.
Yes, tell me.
Stefan, do you see that we have the OMDB roles constant
and the OMDB media?
And one of them, it says it's on you.
Yes, because you are not exporting it
and you should not export it.
The two handlers should be in the same plugin.
Yes.
So the line 41 should not exist.
Please get rid of 40 and 41.
Oh, I understand now.
Yes, the two route handlers are in the same plugin.
Yes, yes, yes, yes.
Okay, so that's the point.
Now it makes sense this was the only name.
Mm-hmm.
I was going to choose the word list.
Okay.
Great.
Thank you.
I think that is my issue.
I would have a question if you have some time
to have a look online.
Yeah, sure.
Just for a second.
So basically I wanted to interrupt,
I have an issue.
I'm not sure if here in the package.js or somewhere else
I probably made a mistake.
But I can't remove the .js file.
For some reason when I run the...
Oh, this is not correct.
Okay, okay, okay, okay.
I'm not sure why it's...
Okay.
It is only around this white nodes
and the type script.
Yes.
I'm going to go in interactive mode.
And first, this should be dash dash exec.
Okay.
Okay.
And this is okay.
This is okay.
This is okay.
Yes.
I think that's what I need.
Try to run the thing.
And I don't need it.
So I have forgotten the dash dash.
Mm-hmm.
I think that's all.
And it's not working for me as well.
I'm not sure what is the reason.
Yes.
Well, the 2014 produce maybe be the same issue.
Yes.
I'm going to try something evil.
I'm going to copy and paste the bottom code.
So you are a parents, right?
Yes.
Index.
And there.
What a...
Here you go.
Okay.
Well, I will just create another version
and then you check the positive.
Okay.
Thank you.
You're welcome.
Yes.
I know.
I know why.
Did somebody had the same problem that I did
or just me and Ference about the Swagger API?
Okay.
So Ference, did you touch this file?
This file?
No.
Oh.
Yes.
No, don't worry.
Please do some control Z here.
Just a little bit down.
Ah, okay.
Okay.
No problem.
Yes.
The problem was that we...
Yeah.
We must register the routes
after we register Fastify Swagger.
And that's not what we did.
Here, we registered the routes and after Fastify.
So it did not have time to see the routes.
That was our problem.
Yes, it does.
So everyone is good?
How was the pace today?
It was okay.
Okay.
Only two.
Okay.
Maybe tomorrow,
I will ask you to develop a lot more,
especially in the afternoon.
Okay?
It will be good.
Okay, perfect.
So tomorrow morning, a bit of docker
and then Prisma.
And then we will try to make some stuff
about the API so that it can really serve
and so that we can really create a client
in next month with Vue.
Okay.
Okay, have a good night.
One more question.
Yeah, sure.
Tell me.
For how long will you be able to access the course
with all the data that you have?
Oh, I will give it to you.
I will give it to you.
I will give you the site, the built site.
Okay?
So it will be a zip file with everything
that you may need just to display the site.
Okay?
I will show you this tomorrow afternoon,
but you will all, for life, for life,
you will have it.
Don't worry.
Thank you.
Yes, bye.
Thank you very much.
Have a nice evening.
Bye bye.
Bye bye.
Bye.
on 2024-07-08
language: EN
WEBVTT
I was expecting that, but is there anyone that really feels like left behind?
Maybe they have to, to highlight this.
I mean, don't be shy. It's not a problem. It might be a way to make sure we keep everyone involved or engaged.
Otherwise, you might just spend seven hours here with no benefit at all.
Okay, apparently not. The point is everyone is comfortable with this space.
So I guess we'll stick to it.
Stanley, are you with us? I'm not able to see you.
Oh, yes. Oh, yes. Yes. Sorry. Sorry.
If you have any chance to turn on the camera, that would be great.
And some of you guys.
Where is? Yes. It must be here. Yes.
My. Sorry. I think we still have a couple of participants missing.
Is there anyone that you can notice is missing?
I'll have to check the list.
Stefan. Anyways.
Oh, I don't see you in the training room of that desktop.
Okay. Yeah, no worries. I'll check the list.
Okay, guys, Stan, is everything working properly with the desktop?
I think we have some problems with the server. I think it's okay. Yes.
Okay. I can see almost everyone, not Stefan and.
on 2024-07-08
language: EN
WEBVTT
it probably takes no more than five minutes, 10 minutes tops.
But it's very important because your colleagues
are also expecting from us to deliver
these kinds of instant feedback after the courses,
just to make sure everything went smoothly.
That being said, thank you very much for joining us.
I hope I'll see some of you in the future
in other notebook courses.
And have fun.
Thank you very much, Stan.
I'll also send the link.
You received the link by email,
and Stan will probably put it in the chat as well,
just to make sure everyone has the chance
to properly fill out the form.
Thank you very much.
Thank you.
So yesterday I told you that I would talk to you
about Prisma.
What is Prisma?
Prisma is an ORM.
Recording in progress.
I hope you all know what an ORM is.
So basically it simplifies database access for developers
and it makes query from easy to write and read code
that you would write in JavaScript.
Okay.
Since Prisma has TypeScript in mind,
you will have auto-completion and type-safe
for every schema of Prisma that you will create.
Prisma can be used with PostgresQL
and all other major database system,
and we will use PostgresQL.
Now, the key features of Prisma are...
I'm sorry, you're not getting the screen,
so we want to...
Oh, yes, sure.
But it's still on the same...
You can see it on your browser if you use...
Can anybody put the link on the chat?
Yes, it's a bit...
Yes, yes.
I will.
I will.
So where's the chat?
I put it in the chat, okay?
And I am sharing my screen.
I'm sharing two windows,
my browser and my VS Code.
Okay?
So the key features of Prisma, first is type safety.
As I just told you,
it uses a generator that generates TypeScript types
for your database schema that you would write
in a really simple way in a...
Special file that we will call Prisma,
schema Prisma.
You have a Prisma client that we will use,
and you have Prisma schema that is a way to...
Is a declarative way to define your database models
and their relations.
There is also Prisma Studio,
which is a web graphic user interface
to view and edit your data.
And it can also introspect your existing data
to generate the models in a Prisma way.
How are we going to use Prisma?
So first, we will use it to define our data models.
Then we will generate our Prisma clients.
Then we will run migration
because it can also handle migrations.
And then we will use the Prisma client in our code
to query the database.
So now your turn.
You are going to install the Prisma dependency
in your project.
You already have the VS Code Prisma extension
in your VS Code, if you are using the VM.
Prisma is just called Prisma in NPM.
So just run NPM install Prisma.
And when this is done,
you will generate a minimal schema.prisma file
with this command.
Tell me when you are ready.
I have some warnings.
When you start Prisma, you have some errors.
I have those warnings.
Something from ES linked.
Oh yes, just put like before, dash dash,
legacy pldeps.
No, when you install it,
you add dash dash legacy dash peer,
P-E-E-R dash depths.
D-E-P-S.
So maybe I will add it here.
Legacy peer.
Yes, this is the peer.
Yes, just add this part when you install Prisma.
And if you run this, you should have this file.
This contains in schema.prisma file,
which would be in a Prisma folder.
Perfect.
Now I will ask you to edit it
and just add one line,
this line,
the line that is highlighted.
The Prisma folder should be created by us.
No, it will be created when you run this command,
npx prisma init dash dash data source provider
post-prosperity.
on 2024-07-08
language: EN
WEBVTT
like I did yesterday, so I'm sorry about that.
I should try to.
Actually, I'm seeing a little bit different.
I mean, yesterday and the other days I had two screens
and now I see just my screen,
but for me it works better because I see bigger.
Oh, okay.
But I don't see your screen.
But I run it as you know.
I don't know what is different.
on 2024-07-08
language: EN
WEBVTT
Anyway so everybody has the file, the schema.prisma file and has edited it.
Okay yes yes okay.
Prisma will read the .en file automatically. You don't have to do anything.
It will read the .en file. So in the dot you see here in this file that we will use
two environment variables which are database URL and shadow database URL.
Shadow database URL is used for migrations and it is needed and I don't want my user of PostgreSQL
to be able to create new database. Prisma internally needs to create to use a shadow database.
So I will create it and tell Prisma that it is this one that it should use for a shadow database
so that I don't have my user able to create any database, new database in the PostgreSQL server.
So I will need in my .en file to add those two environment variables and what you should do
is add those two lines. I'm going to highlight them.
Please add those two lines.
What it added a
So in database URL the first thing is the protocol so it's Postgres.
After it's Stan is the username then colon and Stan which is the password then
at then localhost which is the host and it should stay localhost for us then colon then the port
number then slash and then the database name. So you can change the username the password and
maybe the database name. If you do so you will have to
you will have to modify the Docker compose file that I will show you later.
Sure you can leave it as is.
Yes actually not not only the Docker compose yaml file but also another file that I will show you later.
I'm just going to show you the basics of a schema in Prisma then we'll go to Docker and install
Docker is already installed but I will use a Postgres image to build a new container just for us.
I will show you that in a moment. I just want to show you how simple it is to create a schema in
Prisma. So in the same file in the schema.prisma file so in the same file where you have the
generator client and database data source db you can add model then the name of the model
I just put user here then curly brace and inside the curly brace
you put the name of the of the column then its type then some option. ID means it will be
the primary key and default increment means that it will auto increment as an integer
every ID of this table. Every time you I hope you know that.
Do have you have you already developed a backend before? Okay so you know a bit about how
database works hopefully if you don't please tell me now.
Email is another column and it's a string and it should be unique in the whole table.
Username is also a string and also should be unique in the whole table. Password is a string
and those are those are dates with the time okay so it's daytime in in SQL.
The default is now for created at and this is a special keyword in in Prisma which
allows the Prisma to automatically update this column every time this every time the record
is updated is edited in the database. This special keyword at at map means that I want
this model to be in the user's table so this is the name of the table
those are the names of the column and this is the name of the table because by default it will take
the name of the model and I don't want capital I don't want uppercase in the name and I want it
plural okay this is totally optional you can still let Prisma call it user with a capital U
and without plural but I really like to have my table names in plural and with all lowercase.
Okay good for now yes I will come back to Prisma in a moment I will just show you about Docker
a bit
so does anyone know Docker no I know the idea before but I never worked with it before
okay Docker is really popular it's a way to have an application as a whole
inside the inside the file that we call an image an image okay so it's an open source platform
designed to make it easier to create deploy and run applications using containers so you have an
image and then when you create a container from that image you run the container and it's an
operating system with a file system inside it that can live inside a host what I mean by host
is another like a parent operating system so you have your VM in the desktop which is like Linux
and we will run a container that will include a whole file system and PostgreSQL
and this is the PostgreSQL we are going to use
so containers are a way to package an application and all that is needed to run the application
so you can see a container
as a virtual machine but it's not a virtual machine but you can see it as a virtual machine
the difference between a virtual machine and a container that is that the container shares the
the kernel of the host and also the the RAM and the CPU
and since it's really lightweight it has a significant performance
it's significantly significantly better in terms of performance from a virtual machine
to run a container we need a Docker engine and a Docker engine is a way to
wrap the application and its dependencies inside a container the container communicates with the
host okay and all of your containers are perfectly isolated from one another and they can run
independently and this is a great way to isolate all the parts of your application
and this reduces the the it works on my machine meme in that if it works in a container and then
you use the same image anyone using the same image will have the same result
and you can see Docker images are as templates or blueprints and they can be shared
and there is a big repository that is called Docker Hub that shares
images that we are going to use well you can read this when you
when you have time i don't want to lose your time with this
but really an image is like a photograph and a container is like a movie okay
meaning that the image is not living the container is living
and if you want to know a bit about how it works on Windows and mac os
basically it uses virtual machines and it uses the real Linux kernel and in which one of you
uses Windows at work i mean
oh okay so to use Docker you will have to i strongly recommend you to use WSL2
a lot of improvement in in this and Docker uses it but basically it's
Docker on Windows and on mac os uses a virtual machine to build to have a
virtual machine using Linux and this is the kernel that the Docker containers will use
so now i will ask you to create a Docker compose.yaml this is where i want you to create it in
a folder that i recommend you to call .docker this .docker folder should be at the root of the
project inside it i will ask you to create a file named um sorry a guess a file named Docker.compose.yaml
and with this content so this is where if you change the username or the password
or the db name you should also change it here
sorry
i'm sorry just a minute
okay for the connection i'm sorry i'm not understanding what you are saying
please talk louder who talked was it Stefan first no it has me that i asked if i
you can but you should not this is the user of the database and only one user should use
the should have privileges to create tables and to modify tables in your in your database
this is just for development okay now i use another those environment variables are for
inside the container it's not for your host it's for inside the container okay
here the ports is this means that the port
50 5432 in the container will be mapped to the host port with the same number 5432
and i will show you why it's important in a moment then i have volumes the first volume is
db-data this is where i want in your host to map this directory inside the container
so inside the container this file this folder will be the content of the host of this this was
the content of this folder inside the container would be the same as the this folder in the host
and same here this folder docker entry docker entry point in the db.d will be mapped to
the docker entry point in the db.d in the dot docker folder so this is the service postgresql
and i add another service which is called adminer and it allows me to connect
to the postgresql and have a web user interface to see all the the database
yes yes exactly
and so in in the
in the dot oops in the dot docker folder i will ask you to create a docker entry point in db.d
dot d folder and inside it a file named
init-user.db-db.sh with this content the name is really important so really pay strong attention
to the name of this but so the this is just a dot name what
so the first folder's name is one dot yes docker dot docker
then docker dash entry point dash in the db.d this name is really important
so so don't miss it this name is not important the sh is important
both both this name is not important because in this folder the container docker docker
will run every sh file in this particular directory okay so this name is not important
whereas this name is really important at least this one is really important
because this is where the the image expects any sh file or sql file to be run
the first time the container is started is created really okay and so this name should be exactly
this name and this name can only be this name okay so this and this is exactly the same
and this should be exactly slash docker entry point in db.d so once you have all that
you have one
one thing one thing more to do is to
change the permission
user
to make it executable
so change mod plus x
so in your terminal go to the the root folder of the project and run this command
and this is the only way if we can interact with the with the OS of the
container through sprites or is there also some interface
yes there is an interface i will show you
and that is that is what the adminer is this is adminer is another service that gives you access
to the database with a web user interface
yes it's a yes it's a it's a convention
adminer always runs on 8080 but you can change the first port the first port here
yes yes you can do you can put whichever you want okay everyone has done everything
everyone has make it has made it executable yes okay yes now i could show you how to run
docker compose using the cli but since we are all lazy and we want to go quickly i installed the
docker extension as i told you yesterday so you can right click on your docker compose
dot channel and select compose up was up yes this is just doing the same thing like you would
type in docker compose right yes yes
yes i can see your desktop yes
compose up means that it reads the docker compose file select all the services and
turn them on so it creates the containers from the image that you
that is indicated in the docker compose file and runs all the containers
in db you see
in if you open your docker compose yaml you see version then services then db db will be
the name of the the host for this container then you have in db you have image and image is
postgres 16.2 bullseye okay where does this come from it comes from docker hub
all the images need to be forwarded on docker hub no you can you can have your own registry
for images and and oftentimes a company have a nexus for that
so here is the the docker hub if you see my browser and you can look for
postgres and then you go to this particular documentation for this
image and you have all the versions here we could have used the 16.3
i when i wrote the the training it was still at 16.2 and so you have all these versions available
and then you have details about how to run it and you have an example of a docker compose
file to run it and how you can extend this image and this docker compose yaml with all the
environment variables here and you have a note about initialization scripts and that is what we
used this this is exactly what we use okay and maybe i can put this link in the course
and also
and also you can search for admina to know what it is
so we load an image and we create the container right but the image is just
it just provides with the empty with a running
so yes which has the postgres is for yes if you add some data and some tables yes how do you keep
the data that you add on the container if you close that container you will lose everything right
yes you're right and that is why i
that is the purpose of let me show you
that is the purpose of telling where the data in the container should be and then map it to a
to a to a real folder in your os in your host on your host see my browser
yes here and the files will be stored on the host yes the file with this line all the
all the the data will be stored on the host this is the point of this line okay vlad
so if you restart or create a new container but can we use the same folder from the host in
order to continue from there yes exactly you can even do some changes and then build up a container
sorry sorry there's a there's a truck in in my street i didn't hear you just a minute
yes it's gone now please please repeat yeah you can also modify the configuration and build it up
again and you will still be able to use the same for the site yes when we start you can even modify
i don't know what you mean if you with this line if i kill the container if i stop the container
and if i remove the container then if i reuse the same docker compose to docker compose up
this with this file it will still use this folder where the data have been stored so it will keep it
so i won't lose any data i can create and delete my container and
it will it will use the same data is that your question i may not have answered your question
okay so i think we're done with
the docker so how you use it in the project is just install right click and compose it okay
now i did not do it myself so i'm going to do it
now you can go in with your browser in your vm to localhost 8080 even if docker is still going
ah no no no no sorry i did not know that
but i think stefan is okay right yeah for for stefan it's okay for tila also
and yes and ference so you can please system choose postgreSQL instead of mySQL
then db is really db don't don't change that then you can use the username stan if you have not
changed it or use the username that you put and the password that that you put and the what's the
is the database name and database name should be media where do we access it and then login what
where do we access the localhost 8080 so go in your browser in your vm and go to
localhost column 8080 marina you're okay you can go to your browser my browser where
it's firefox
yes and in the address you put you put localhost column 8080
button are you here with us button yes 8080 8080 of course but for some reason
oh yes too long it's still pulling for 700 seconds okay press press ctrl c and and do it again okay
localhost column 8080
i have to put the hdb no right no column
yeah this character is called column yeah yeah so now postgresql and then stan stan and media
you want to use this container just for a database
and this is just for development okay okay perfect
uh christian you did not connect why i am connected
what i think you see both screens no click on login
what password stan if i put it first then login
db yes stan stan and login but
um
let me see and have you have you started the this yes yes and i come up
and was done and then he says to press anything to close it that's it what
oh okay
um
hi
oh why hey you missed the c i don't know how you did this
okay okay so let's do it again
here you go so everyone is at this yes perfect so now we can start to work
so now we have a functional database server postgresql on localhost and we can link our
server app to it and this is what we are going to do so first i'm going to ask you to create a
okay just keep it simple i mean when i say simple i mean without any relation no no not in sql
in prisma sorry so in your prisma in your schema.prisma you will add model movie
i will i will help you at first okay so please see my
is
okay okay uh no
so prisma
yes
legacy
um so menina told me uh something interesting i think is that you can see what i am doing
in my vm right i'm not doing anything because i didn't know that
yeah yes you can all see okay i didn't know that so maybe i should continue there uh i will
i will try to put all of my code in in the vm and the next break
um okay
so i have prisma
all right
okay
so in prisma you will add model okay you should have a smart completion why because i installed
the prisma vscode extension for you and then media and then curry brace and inside it
i will have a an id which could be an integer and id default auto increment then i will movie
sorry oh yeah you can yes movie yes let's say movie it's better yes then you should have a
title that should be a string and then you can add also the year so it can be a string but
i think it would be better to make it an int and maybe a tiny int i don't know if i can have
other ints no just int okay there is a way to to tell uh prisma that you want a small integer
meaning that it won't take too much memory in the database and so you can you can do the
the rest yourself and tell me when you think you are ready
okay if we don't type in poster but it's very easy movies and attack doesn't matter anymore
we don't have to have those 20 30 properties that uh they have on ombb
no no exactly you're right maybe you can um you can have less than that yes okay
did you put the creator that and
okay perfect
daytime
default
data that
daytime a day to that
where what should i maybe a rating yes um rating maybe should be a relation because you have
rating for imdb and for ripe rotten tomatoes and for another another
some other i don't remember should we also put type as poster as george suggested yes sure
poster i think it's really important to have a poster yes
at least according to ombb schemas.ts file there we have an enough for the type
yeah oh yes yes exactly but here we also store the series or we will create a new table for oh
for yes exactly uh he's right here we are we are um the this table is movie it's not media so it
will only accept movie so the type will be always movie so we don't need the type
okay i don't remember all the other properties okay now
or we will use the id only from the table
i'm sorry i don't understand this is the id that we're going to add the imdb id as well oh yes yes
you're right on the other yes you're right and this should be unique
behind imdb is a string because it always start with tt
one more question at the end should we put that uh that mapping to the movies table with the
yes we should exactly add map and movies yes
are those decorators no no it's not decorators but this is not javascript and so
it's not decorators but you are right in the way that this is how we create
how we use decorators in javascript and typescript but this is not javascript and so
those are not decorators
yeah sure yes yes seeing five
you're absolutely right i did not i did not remember that i put this on the gift
yes yes all right so let me just add here everything
and then commit
again the only thing that we won't have is the file
yes i will the git ignore should be tracked
what i won't have is the dot nv
okay
larvis
okay
okay
so now
um
okay
okay is everyone back
i am yes um i am also okay uh so now that we uh where is
yes so now that we all have ready we have to create a migration because we have now a prisma
we have now this okay
and this is not in the database yet the movie all right
so we will need to run npx prisma generate this is to generate the prisma client
and maybe we can add a script here prisma that will run prisma generate
oh no uh um now i am using the the the vm so you told me you
you could see my vm but we can only see a dot env file open on your vm and your terminal
yeah this is why i told you that in vm we didn't see i didn't see nothing it is just
yes because i was not using my vm but now i'm using it and you should be
you should see my package jason now okay but if you prefer uh like yesterday i will continue
oh okay okay i think it's better because otherwise we will have to
navigate between three screens okay okay okay perfect so um
um
i'm gonna close all what is this
i'm gonna close out then prisma okay so this
this um this table movies is not in the database right yet okay and the first thing we need to do
is to create the prisma client this is done with prisma generate so we can either either
run npx prisma generate or create a script here
prisma
that does prisma generate
and then then we can call npm run prisma
or nr prisma since you have untrue ni
mine works i guess mine too which workshop
uh prisma generate and base prisma generate
and the version with the script
many system error messages some warnings with npx prisma generate
i don't know what this is i never had this why matching version
i'm sorry i i don't know what to do
okay uh for those of you that have problems please use pnpm instead of npm to do so
just run pnpm i or pnpm install see if that works
no i think i installed it for you it's not it says uh for n like mother or n
uh-huh which one they can see it's too small okay it's pnpm it's like performance npm
yes it worked
okay if it worked uh if it worked from now on just use ni okay so that you don't have to remember
if if you're using npm or pnpm just use ni to install a new a new package and nun like
an uninstall if you want to remove a package that you you want you don't need it normally
and and then you can remove the package log json and and then just use the pnpm log
yaml file so track the pnpm log and don't track anymore the package log json
so we created the prisma client and now we need to tell prisma that our schema prisma changed
and to to create all the the tables and or modify uh tables so that it matches what we
what we wrote in schema.prisma and this is done with prisma i think it's in the course
course stopped or what's happening no no sorry now you can see in my browser
that you had to edit dot of and then create migration i'm gonna add
so this is pnpm no sorry sorry my course is missing something okay so before you can use
here the this pnpm prisma you have to add a script in your package json
add script in your package.json
pnpm yes you are using pnpm now yes it's the only thing that works
yes okay perfect if it works use it okay i just don't know how to do it
i'm sorry i don't know what you mean you are you who are you
yesterday i was seeing who was talking now uh it's another okay
so um yes um yes don't don't don't um don't touch this file okay this is generated by npm
just don't pay attention to this file i just wanted you to remove the package log json
and i want you to track this pnpm lock yaml meaning that you want i want you to add it
in your next commit yeah okay that's all when i mean track your file one file
i mean that it should be in your git database okay
if migration works with nba prisma generate we don't have to put in script prisma prisma generate
right no you you are not no you can do without okay but for the migrate it's more complicated
add a script for migration and this should be
and this should be prisma prisma migrate
here i am here okay i'm writing here this is not complete you should add
a script called prisma migrate that should do prisma migrate
dev name okay so please add this script in your package json in the script property
so just like me please
okay so you you run the prismac migrate init right yes okay perfect
so now you are telling me that in admina you are seeing the new table
yes maybe yes yes that's it okay perfect yes for me it worked too
stephan yes because you did not save maybe package json
okay now i don't know i said it three times yeah maybe it's because maybe because the vm is quite slow
and atila are you good i see some
command field oh this yes this i don't know why you put this here
online 15 of your package json please instead of this or please dash dash name
and after the name it needs something and you are giving it it's called in it in your
okay so this should be good so why does it fail show me your show me your schema prism
okay and show me your dot n okay and show me your docker compose so here you
you put this over in the you you user and the path so in of in of replace all the stand with this
yes and this should be better okay
is anyone having problems
yes
yes perfect what is the error validation error
oh show me your schema prism please
uh please please comment on the user the user table
please comment it so select it yeah yeah select it and then um
notes i know you cannot you cannot do that i don't think no you cannot do that it's not javascript
no so select it select all the lines and then and then press control k control c
and then control s yes then you can build uh maybe you can uh have you built your
the the prisma client yes yeah okay so rerun this command
um maximize your your panels so that i can read okay so show me your postgres maybe
online 13 oh yeah show me the dot n file
oh this is wrong i don't know why you have import z from z here you should not be here
and oh no it's um again take this to something
from
here it should be stan
okay and so so now you have to rebuild the prisma client i think
yes you can use the arrow right and it will write it yes okay then and then and pnpm migrate
in it prisma migrate unit yes no just like you yes yeah perfect now it should be good
welcome everyone is okay with the movie database present in the database
i mean the movie table present in the database yes okay
yes
else
no no you don't you don't touch shadow media
it it it is used internally by prisma so you don't you just have to create it and give
give give access to it to the right user and prisma will use it internally and you don't have to
to be worried about it all right
okay i see some of you have also the users
the users data table and that was one of the exercise so i guess
so i guess you you can all use the users table that i created in the course and now i will ask you
to to create a zard schema for this user and actually several schema for this user the first
one should be the user input from the client who wants to create a user so i leave you five minutes
yes if you yes yes if you do not do it yet yes
so so malina yes sorry tell me exactly which instruction
okay yes yes and i'm gonna talk about it just please now add a model user in your prisma file
and when it's done i will tell you what to do
how i can remove the comments yes yes so you press you you select all the line
then you press ctrl c ctrl u
oh it's not working i have an issue with this migration but i also try with the
nr and using the script and now i install the pmdm thing and also try with that and still get an
error i guess because of that dash dash name on the script uh what is the error so the error is
your command failed which i've got one and says option repair argument dash dash name
but i do have because you already used oh it's not dash in it it's the name
and the name should be in it for the first one and then each time you you so now i'm answering the
the black question every time you modify your schema dot prisma file you must run a migration
and so you must run pmpm prisma colon migrate and then a new name oh okay
yes exactly and you will see it well yes tell me so it's not dash movie it's just movie
oh okay so the command should be for migration should be pmpm prisma colon migrate and afterwards
any name instead of in it that we used before so i added the modern user in schema prisma file and
now i want it i want to do do the migration yes so you the command is pmpm prisma colon migrate
yes not exactly a random name this should be a name that that
allows you to understand what this migration is about
okay so in it is really the initialization of the database and now you add user so you can call your
migration add user or user or a new user table or something like that okay clear
i have a few words about the table that was automatically created prisma migrations
yes for prisma to know where it is in the migration it needs to
to record in the database what was the last migration it runs it runs so in the in the
prisma migrations you have all the names of all the migrations and and i think the date of the
last migration that was run with that name or that id maybe you have an id and i also see
on my host i see the marjorie's name data in the table in some separate folders
yes you should see a folder named db-data
inside the dot docker data okay so christian i think that you all that you have to
clear the legacy thing because i have permission denied yes because you your your docker compose
was not synced with your dot of and so in your init user db was was created with
another permission so you have to delete your container and restart
restart oh so let me show you how and then i answer the black question sorry blab
so interactive here so you go here to the docker view then you stop this once it's stopped you can
you can remove it
once it is removed you have to remove the docker db data
okay so now you have stan yes and in your dot you have stan so this is okay
the movie and the what
database for the media which was oh no no no just this one just this one
yes that's my mistake i'm sorry that's my mistake i will i will fix it
just one you cannot have two yes this is important in your dot you cannot have two
variables that have the same name it's just like in js it will be over overwritten so it will be
the last okay so maybe we maybe that was the mistake and we did not have to remove your
container i'm sorry so let's try again
okay now pmpm prisma
and prisma generate
init i don't think i have the script in general than this okay because it's only prisma for
generate i guess so it's just my generate
name init
okay so in here now
no table just migrate on the bs code here we used only generate it didn't use my
all right yes thank you
that's what i have a script and that's what okay okay and here you see you have a folder named
migrations with a folder with exactly the the timestamp where you run the migration and its
name underscore and its name okay so that is why i told you that this was not you christian but
that is why i told you that you should not give it a random name but rather an explicit name
for all your for every of your migration okay so
yes this will be the director writer actors those will be
those will be
relations okay so this should be enough so every time i modify this table do i need to regenerate
yes no no not generate just migrate every time yes just migrate every time you
change the schema.prisma you have to migrate so do i have to migrate again with the same name
or i should use another name you should use another name yes you should not override the
changes on the migrate file no was already created if you give it the same name it will
okay okay this might create some confusion
yes
it should all only alter the data if you just add a column it should only add the column and keep all
the data okay great now i will ask you to create
if you all have the user table i will ask you to create in your project a zod schema for the user
and in routes maybe add a folder for omdb and put the two omdb files in it and create in src routes
user folder with all the route concerning the user and its schema
normally vs code will ask you if you want him to to change the imports for you and you should
select yes so in routes folder we should create the new folder for users yes and then put in that
folder the new schemas and the new js yes file and create also a new folder named omdb with
the the two files that we created yesterday that are omdb ts and omdb schemas ts
um
is it this is what we should do yes uh sorry uh just a minute
a few seconds really so yes stephan
yes that is great so you should not have properties that start with a capital letter
yeah line four and five username and password should not be pascal case just
common case yes and yes i think that this is quite good
user id email id username email password yes okay can we hide the passwords from the
ldb when we generate this from prisma is there some yes that's a good question and i will talk
about that in a minute seems that i have lost all that i had written about the users in my course so
i will have to i have to remember and rewrite i'm not happy with it but can i do
okay
okay so
has everyone uh created the the schema i mean this is good the sod schema of the user
i'm not finished yet okay
since you
let me see
okay so vlad first the the properties of the user schema should not start with a capital letter
and second this should only be the create user schema so what do what does the user
needs to send to the server yes it won't need that it won't have the id yes
yes but this is wrong this is because we we cannot control this this is from
umdb we cannot control this and i really don't know why they did that okay
yes exactly that's what i want to show you now
so is everyone finished with the user schema no yes button is on the right way
malina where are you where are you at have you finished
where is your user scheme here you should create a sod schema of the user
christian
the the you the schema that you are creating is just for the creation of the user so it means
that it will only be the properties that the user will send to the server to create the user
yes exactly perfect okay thank you does it mean that we only need three
exactly that's what i want you to to write should we should we also create a type for this
create user schema object because it's underlined with red uh what is underlined with red
i defined a constant variable create user schema that receives a object
yes it's because you are not using it uh over on on the create user schema and
you just say it's declared but its value is never right yes you're
but you can uh you can export it and if you export it uh it will get rid of the of the error
okay
so now you can export this so malina this is a type
okay yeah i don't want to type i want a sod schema so you create uh create user schema
okay the object which will be a z object yes and if we have
email which will be a z string
a z string
and it will also have
a password yes which will be a string and the email
yes i'm writing and the email should be an email and this is done with the special
email function from string and also you should import z from result at the beginning
we can export this so it should be export come create users key yes export
okay
can we also add other constraints like unique or something to the user
the unfortunately the client that the when when you receive that you cannot check that
it's unique in the database before trying to access the database and you want to validate
this schema before even going to the database so this is not where we are going to put the unique
constraint but we are going to add more constraints even so in the username and the password
so now in our
so this is what you should have right in my vscode you should import z from that
or a gentle reminder this is a
this is a named export okay so that is why i have curly braces here this is not the default export
and then i create a schema which i named create user schema because i only want to validate what
the client will send me will send the server i mean the email should be a string and should be an email
the username maybe should have a minimum length of three and maximum length of let's say i don't
now the password
the password maybe
uh what what do you think should should be validated in the password
okay perfect
okay perfect so how do we do that with zod we do that with super refine i will show you refine
and for the password i will so maybe i can show you refine first because it's
simpler no i don't have an example ready so i'm sorry for the for the username are we sure that
we should put mean and max because we have mean length and max length properties as well and
or methods as well at least according to vscode
should we use mean or should we use mean network is there any difference
yes i want to use mean and i will show you why
yes i'm gonna show you why now because in mean if you hover on mean you see that you have a message
okay so this means that this message
should be in any language by default it will be in english and maybe not in maybe not
written in the way that you want it to be maybe it's not funny enough maybe it's too serious
okay maybe maybe you want to
to to to speak to your audience in a more casual way so
by using mean you can you you can use the second parameter which should be a string with the
the message that you want to display to your user if it's less than three characters
actually a string that message should be something else
it it is an error message or undefined and it should be i think it's a string
the error is your error message i think it's a string
if it were if it were not
uh i should have
oh i was expecting a time script error which i don't have so
i'm a little confused here but let's try we will try
okay uh create user schema parse and we will try okay
for us uh main
name
and user name stand and password password and i just want st okay so this is less than three
i will use bit node to run this file
users
why ah yes ground
users uh users schema
and you see you see here that there is an issue the code is too small and the message is your
username should be at least three characters and this is what i just wrote if i don't do this
and rerun the same file
the message is more less specific okay and it will always be in english
so if you're if your audience is in english speaking there's no problem but still
it only says string it does not say that it is the username that has an error okay this is this is
this is uh indicated here in the path okay but not in the message okay so that is why i want to
use mean and max can you have localization instead of this message sure you can but then in your
in your front end you will have to read the the the internationalization id here and use your
dictionary to to display the right message so yes you can but it adds complexity
the i am yes
yes
okay you can also add parameters here in string because it is required and so you can now so
here i put a an object okay and the required error is the username is required
okay and if it's not a string
i sent to the client the this message this will be sent if username is absent and
this will be sent if username is something else something else than a string
let's say for example that i say 42
and see the username should be a string and if i if it's not present
oh i have it should be a string i don't know how maybe it's no
or undefined
now i don't remember where this comes in it's okay i think we got the idea
so please always use message in your here okay
and also here you have a message
email should be a valid email
okay now for password
the constraints are a little bit more more complex and this is why we use super refined
super refine allows you to really
have specific really specific
validation
so you give super refine a function and that function will be will receive
val which will be the value or you can say value here okay and the context the context i will
talk more about it in a minute and here
there will be a bunch of ifs okay and for example i can say if
if value length is less than eight
i can say i can return
something quite complicated with which is an issue and you add issue like this to the context
and the issue will receive a message and the code i will say that the code is custom
and the message is your message should be at least eight characters okay so as you saw earlier
maybe it's better to use this or this constraint
okay
but maybe you want as i don't know who said it but you want to check that the password has at least
one capital letter and a lowercase letter and a number and a special character okay
how do i what do i put here in the if well i'll let you try and i give you five minutes
okay or maybe 10 okay 10 minutes
yes i'm coming
so this is yes length is a property which is not a function
thank you you're welcome
that was flat talking yes
okay so you just okay perfect but i understand the idea then you can do whatever you want okay
we can match the value against a regex and if it doesn't match then we can return an error message
yes exactly uh i would like to show you a way of doing some advanced
thing with a clear code well i think what i think it is clear and readable that maybe it
will not be for you i'm gonna ask you your opinion so first i'm gonna create an object
which will be a dictionary
okay and
i want the password to have at least one digit okay
so i want to have at least one digit okay backslash d means one digit meaning it is the same as
zero nine okay
i also want at least one uppercase
letter okay i also want at least one lowercase letter
and at least one special character meaning that is not a capital letter nor a lowercase letter
nor a digit okay this is done by this meta character of the regex this character means
not any of these ones okay
now that i have this this is a this is a way to tell typescript that this this is a constant
that will not change okay um and so in super refine i will i will take this object
this object strong enough password date and get the entries from it
do you know what the entries will be exactly this will be an array of arrays with two
with two elements first will be the key this and second will be the value and sorry it's okay
and then i will filter this
okay
i will filter if there is for the regex
i will um return true
if and only if the regex here is not um does not match the value okay this is the value that i
will receive and for each entry i will get the reject so either this or this or this or this
and if it does not match the value it will stay it will be in the in the created array okay
and i will
and i will have i will take only the key meaning only either one digit or one
other letter avocados letter or one lowercase letter or one special character
and i will return the key okay and then if errors
length is positive then i will add the issue with
your password should contain at least and then and then the errors
join
um you know what the join does yes because i saw you use it yesterday so the join will
take the every element of the error errors array and split them and put this between every element
so let's say i only have a digit a this message will be your password should contain at least
one upper case letter and then a comma one lowercase letter and then coma and then one
special character yes because you can add just just a property here and it will
you only have to change this
okay
now what will be the user output schema
maybe five minutes did fine if i just checked it against a long rejects i can't for passports on
the internet and sends into an error the same like for the minimum blank yes you can but you will
also you will you cannot be specific about the errors meaning that if it only has digits you
you have to always repeat it to him that it must have one digit one upper case one
upper case and one special character what are there must be that actually
yes you can do that
i'm not sure about what are we making the output
okay and that that is part of the exercise
okay but what do you do okay it's when when when your user will log in
on the front end you will you may have to display some information about the user or you may have
to treat or to process i mean some data from the users so you have maybe to display it's
the username of the user yes exactly
yes
okay
so you shouldn't have this anymore
you know
in your schema pre schema you should have this okay
hello
yes you want me to look at your
you don't need this anymore
i need to export
i'm
and uh oh sorry there's no need to check so for you
uh
oh you don't need this you don't need this no
now uh what i want you to do is yes you need to export it yes
yeah export uh so this would be yes
so it will be a z object
there you go i leave it to it okay everyone except malina is finished no question
i don't think we should export more than this because we do need the past
exactly yes but maybe we'll need the id
i don't think we need to create it well you can you can
it's not mandatory yes but maybe you want to to to display to the the user that the user
has an account since that date oh okay makes sense
but it's not mandatory and but um so it depends on on your needs for sure and it depends on whether
you want your user are on mobile devices maybe and they are they are not really useful those
data are not really useful so maybe you really don't want to display them and so to send them
through the network to to limit your network footprint okay
and that that is what i'm going to show you now in the output schema
maybe don't want to
to have all the the messages i don't know okay
yes you want validations yes we don't need them because we validate when we put them into the
yes but you never first you never know and second it's the these schema are not only for
validations they are also for serialization and i'm going to show you in a minute why so yes we need
the id the email and the username and never the password okay
maybe shouldn't be a number or it's okay oh yes you're right it should be a number
and it should be an int and it should be positive now i want you to create a plugin with
two routes
well at least one for now let me check no three routes okay
yes yes as you wish yes yesterday we did it after midday so yes but
that's fine by me now is okay with that i agree okay perfect i'll see you at 12 30
see you
hello
is everyone ready
no yes
okay
okay what was the exercise the what
the exercise you talk about making plugins yes yes i'm here i'm if everyone is ready i'm
going to talk about it now so in the routes folder you have now an omdb folder and the users
folder in the users folder you have user schema with the schema that you we just created together
and i will ask you to create a users.ts or a users.route.ts maybe
which would be a plugin just like the omdb routes with three routes the first one
if you see my browser the first one what yes here the first one i'm on the page prisma
with fastifan okay the first one will be a users route for a post method and we will send we receive
in the body the email the username and the password and it will create a user in the database
for now just please create the handler and make it receive make it read the body
and to to have the email password and username and of course i will ask you to type all the routes
the second route will be a get on the same path and this will read the database and send to the
user i mean the client the api client a list of the users and a slash user slash colon id to get
a specific user with this idea okay
the body for the post yeah please please
type the the body and the response okay so how would you place a string with the body right
yes you don't need query query string here and also you should type
you should type the response of
the the type of the response for the other routes are not correct
if an schema should be an object and in schema yeah yes please where you were in line 57
uh yes and the create user schema should be in should be the value of the property body no no
just create user schema no no carry brace you treat the line 60 yes remove it okay
so i'm gonna
create with you the the first route the plugin and the first route so i import
this okay z because uh may may have some use for z from z
pacify plugin ac pacify plugin options and raw serve base and z provider this is
to create something just like the omdb routes
okay
maybe we can type this once and for all
type
my media plugin
okay so that it's more readable
so this is my plugin all right this is my plugin with all the routes regarding the users
i will receive an app which will be a pacify instance with z type provider
and so i'm gonna add a post handler for the path
empty string and in the second parameter the second argument will be an object with schema
which will be an object and a handler which will be a function okay the function
will receive the request and the reply okay now in the schema i will receive for this request i
will receive a body and this body will be the create user schema
that we created earlier
yes import
okay so the user will be in the body and i can console log this user to make sure that i did
everything right for now i don't have any response okay so this is really simple okay everyone is on
the same page make sure your type always are pascal case type names type a type aliases should
be pascal case
because you did not import some of the stuff maybe oh okay but let me just
help stephan so that he's not left behind and then i come back to you
no this is now the
okay so this is a post okay on the
empty string route and i will explain why this is the body you receive the user from the body
and then you just console log the body
okay
and that's it okay the this is not correct
should be good now
so we have one plugin for the whole database
what do you mean one plugin for the database
yes this is just the type of this plugin
okay and yes this should be in another file exported and imported in every plugin
okay we will do that later yes so vlad what what was your question
this is normal you mean this one this one reply is not used yet so it's normal and console log
is not allowed by eslint oh okay okay yes and what is the problem plugin not valid
achieved undefined why why did you import some plugins somewhere
okay i did not do that yet so have you imported user routes
and this is from user schemas and user schemas is not plugged in and it has no default export
so it's not used from user schema that you want to import but from users here here yes here
okay so now that my plugin is ready i'm going to register it in the main instance so just
just below the register omb route i will add user route
with the prefix users
and so here i will add users routes
maybe you named it just users so be so be sure that this is the right the appropriate name
okay now i may want to test this i run nrdev
okay about to be tested yes that's what we are going to do but um
i'm having trouble with my computer because it's too slow and fake to load omb oh yes it is because
it's not in here it's omb
user route
error plugin plugin must be a function received undefined
what oh yes i did not export it so i also have to export default users users
okay this is the name of my plugin and i need oh this is with an s
so now it should be working what okay
i have something already running
okay now it's working it's running and how do we test it so in your
api http or api rest we'll add a request so we're going to separate the last request with
three hashes and then we are going to
make a post request to our
base url
base url slash slash users okay with the protocol
http 11 i don't think this is necessary but
i put it anyway in the headers i will have to let the server know that what i'm sending is
application json
and then we send the body here the body must be a valid json meaning that you must have the
properties the property names set with double quote and nothing of code and not not no quote
only double quote the email here i'm gonna make it an error on purpose okay username st and password
password okay
and hopefully i will get an error
send request and here you see i have a bad request because of the validation
the email should be a valid email and so on okay maybe this is not the best way to inform your
user that there is an error because he won't be able to understand this this whole thing so we'll
we'll get some i hope we'll have time to to fix that but so if i really
give an email and i try again here the validation is has still has errors but
there is no error in the email
the username name should be stan and that is almost okay the password now means
one digit one uppercase etc so
i'm gonna make it secrets
yes
okay and if i send the request oh yes it needs a special character so and an exclamation mark at the end
and it has no it has no
lowercase and what is it missing now yes everything is went great and this is the body i receive
okay this is from my console log since we have a proper logger
maybe it should be better to use it and instead of console log maybe use
console log app log info i send it again and here i have an appropriate log
and here i have the message email username password yes tell me the connection was rejected
either the requested server is running on the requested server
it's called our misfeed record okay so first this should be
here
now you should run first def okay what is the problem now that the file exists src index ts
is here so it's okay oh this is not correct
okay
so index
i'm here in the register
and i also imported it
okay everything is okay here
i think i have an issue setting my file
oh
and
what did this end
it's a tool to configure eslint and eslint is a linter and it will give you
it will make your code really pretty
to lint your code and so
i also have two vendors that i have to solve okay i'm with you as soon as i can
one error is about the import of adfoo it looks like it doesn't find the file but the file is here
okay just
here whenever you save now malina it will it will indent properly your code okay
for example
hit hit control s and see the line 18 just hit control s yeah okay so uh okay now and
but still and there's a problem with
mdb
ah i'm trying to trigger this replacement for some reason i don't
okay
this is not exported so it should
yes
it should be z infer and this key right here
and here it's not used so it should be exported
okay let me find something
yes yes
if you feel this takes too long you can go further and maybe yes i'm just gonna try something and then
why oh understand you put index into routes instead of just src
okay
what
oh my what's happening there i don't know
so now you're good to go i think oh just just one
okay uh who had some problems also
well you did not start your server
oh it's already in use
is there any way i can stop yes yes i'm gonna do it so here with this command lsof meaning list open files and
the port using the port 3000 and so this is the pid that i have to stop seven three
okay and now you can run there and it's good
okay perfect anyone else having problems
yes this one is working but i don't think this no you should not import yeah this is not import that
i don't know why you have it please remove this line okay that's why
okay uh now
please save this file the omgbts file it is not saved
omgbts is not saved
okay now start the server which one and and then nr def nr
okay
so what's the problem
here you see plugin not valid so i think you did not import this correctly users user.ts
should be named users
okay and so here you should
users routes which should be named users
and i think you are good to go now
for me said that the route is not found no one
um for who for who was it that
so like we imported the user routes in the into the ex yes also put the register
yes it's because here you put uh at line 10 you put post and then instead of empty string you put
slash users and since you prefixed the on in the index slash users the route you are looking for
is the path the right path would be slash users slash users that is why i create a route for
with the the path empty string
so i guess now i'm supposed to work
okay
so um so i i showed you the
the validation from the input and now we are going to try to
save it in the database for this we are going to create a real plugin
for prisma so we are going to create a plugins folder and inside it prisma-plugin.ts
okay are you all with me
i'm waiting for everyone to have a prisma plugin.ts created and open then we will import
fp from fastify-plugin this is a new package that is not in our project yet okay
then we will import
the tab type fastify-plugin-async from fastify
then we are going to import prisma-client from
press at prisma-client
okay so we will have to install with ne fastify yes fastify-plugin
and at prisma slash client
so i'm sorry this is in the course okay
but it should be
oh i only have all the answers not the the things that you have to do okay
okay okay so
install fastify-plugin and
prisma-client
okay
and once you have that we are going to
this is a special thing for TypeScript and to make fastify aware
no i want to write it now so i'm going to create the prisma plugin
so i create a const a variable called prisma-plugin which will be of type fastify
okay and it will be the result of calling fp from fastify plugins and here
we are going to
to add a function inside fp which will be exactly as you know
meaning that the the app here will be a fastify instance okay in that instance i will add
two things and the first one will be the client i mean the prisma client and to do so
i will add i will decorate meaning that we add a decorator which is called prisma
and has the value prisma and prisma is what is the prisma client
before i can decorate it i want to make sure that prisma connects to the database
so i create a prisma client i make him connect to the database
then i add the prisma property onto the instance of fastify
and i will add a hook
to make sure that whenever the server closes that i
disconnect from the database okay to not have any memory leak and connection still pending
i'm gonna wait for app prisma to disconnect
do you understand every line of this file i think we should do it one more time
yeah sure i'm i'm waiting for everyone to to finish and when everyone is ready
is it a problem it doesn't see app in this file for me
this is a sync
this is
yeah for me as well
okay show me
okay perfect perfect for me it says that i
could not find the module and when i try to install it says that i saw it
oh because you may you wrote fastify it's fastify and then it's not prisma it's prisma
so here also it's cost
connect disconnect okay
yes because it's lower case p
okay and this is not prisma okay
so now you should see maybe that prisma is underlying red
yes yes yes this is because prisma by default does not exist on fastify instance all right
so we are going to declare that for the module
fastify that the interface fastify
instance has a prisma property of the type prismaclaves
and here it goes
okay i still have a red underline the prisma plugin is underlined but
i think that is because it's not exported or realistic in another way no no it should be
where is it oh prisma plugin yep yes because it's not exported yes
and here we are going to export default prisma plugin
and so what do you think we still have to do
exactly so you can do it with me here before the route
register prisma plugin
and we will import it from
plugins
okay everyone
before we we play with the prisma client i just want to remind you that process
here process is implements the event emitter interface do you remember that
do you remember the event emitter interface yes so we can detect if the process is terminated
for example if someone kills it by by doing by doing kill and then the process id okay
like kill dash nine do you know that command no well in linux you can you can
you can stop a process by killing it with its process id you know every process has a process
id on the operating system and maybe you don't know that if you type ps you have all the processes
that you have access to and and the first column here is the pid meaning the process id
okay and i can kill any of it by
killing this way kill dash nine and then the the pid okay we can detect that and make sure that
you close your app which in turns disconnects prisma that's what we are going to do now so
we are asking him to
whenever the process is killed to wait for the app to close
then process exit zero okay because this is this is what the user wanted so
we won't exit with an error maybe before that you we can log info that sigterm
signal has been received and we are shutting down okay so this is for the
kill or kill now you know that you can stop a process by hitting ctrl c if the if the process
is on the foreground and we also can detect it and so we are going to add an event listener on this
particular event which is called cgint and we can almost copy this make sure here you
you write cgint and make sure that you close your app which in turns will close the connection to
the database with prisma okay if this was too um if i did go too fast i'm gonna put it in course
yes in in prisma with fastify on the page at the end you will have all the data here
okay ready for
for the next part yeah okay then um
now in our user route we will use the the app and prisma
and then user and then create and then give it the user
uh my my computer is too slow i'm hoping
uh i am not mistaken i don't have any feedback but i hope you know that this will be a
um a asynchronous function so you have to wait this will return a promise
in order to be able to use yes yes exactly you are absolutely right thank you and
maybe you did but i did not migrate with
the i think i did not migrate with the model user so that what why it does not exist
so
oh
what
how is it called the
docker
i don't have the docker or allow me i'm not ready yes you you are more ready than i am so
and what happens when you when you let's say yes felons for example here
so you do have the user okay perfect create and then user and what is the problem here
property data is missing in type yes here i'm sorry i made a mistake here uh
user out here it's not create user it's create data with the user okay
okay
entry point we need tb.de slash we need users user tb sh here
yes that's it and then and then
and then i think it's okay so pose up
okay and then and our prisma okay and then and our prisma migrate
unit and we take five minutes right yeah sure so maybe nine minutes yes yes perfect
okay see you see you too
yes what is it
we don't have those double things when you put the
this yeah we got those and we don't have the question mark schema
yes this should not be you should not change anything but let's try
yes
yes and that's what the nr prisma does yeah please my generate
and this is working for you right
that is quite strange
oh right here
how is it
okay user create
and data user
why it is dot user and not users where does it come from
uh i think it come it comes from the fact that in uh where is it in your schema it it uses this
but lowercase yeah so this is only for this is only for the database and this is for your code
yes because it doesn't want to use capital u but in the code oops because in javascript
pascal case means that it's either a type or a constructor yeah
so now that you have that maybe you can take the result and see what is the result
if you create another user
oh sorry uh we're waiting for the one that went on break
yes that's a good question it's because um then i will see the difference between this
i should put that also between this and this because results will be in the info in in the
in the message in the log i will see result in the log so i will be it will be easier for me to
differentiate between this log and this log i see thank you sorry i just came back
no not yet we're waiting for blood and maybe some others
ever since i have the server running i get an error from pacify it says unsupported media
when i ping the server that's all i did
yes because here you made a mistake it's content type okay okay
yeah
it doesn't get underlined in the rest files no because you can have
a header that can be named in every in any name that you have any name
so everyone ready so if i um i add um a const result here to get the result of the
the user create method from prisma i will then go back here and um and create another user
and if i click on send requests which is the problem 3000
okay here send request
what do i get in result result here i have the id that i uh didn't have for sure evidently in
the input and i have the created that and updated that okay i have it now if i return the result
and i say that in the schema part that the response
for 200
yeah i must say that the reply status will be 200
and the response if i tell that it must be the user output user output schema
what do you think will happen what do you think i will get here
yes with what properties
exactly
so we'll have id email and username let's try
so i need to again
change this and send request
what user output schema is not defined i missed the import maybe
oh i did not save
and here send request and here i only have id email and username i don't have the created that
and updated that and and mostly i don't have the password so that is the serialization that i was
talking about earlier meaning that this will be used to serialize the reply
so here if i say that the response should be should validate this schema it will be used
to serialize results results will be the user and
it it is used to serialize this data and even though there is password created that and updated
that in the type it will not be present because i asked him i asked fastify to use zod to also
not only validate but also serialize the the this response
so that answers one of your question of earlier but on in in the sense that you
asked me how i can make sure that the password doesn't get to the client okay
for some reason i'm i'm getting a status code 500 error and i'm not sure what am i doing wrong
these are my user routes yes okay
and maybe you have you have already registered a user with that email
yeah that is right okay so and that is what it is telling you unique constraint fail on the fields
in the message
okay
for email
i did not pay any attention to that
okay interesting yes
now do you want to know how to make relations between tables in in prisma
so one of the way
let's say you want let's say you want what
so the examples i have are i think i think are complicated okay
let's just say oh i don't i think i know
what can do okay let's try with the movie a movie you can add let's say that for a movie
for in the schema prisma sorry
let's say that for a movie you want to add a label i mean labels
okay various labels and a label will consist of a string
and an id okay so i will create a new line in the movie model named labels because there will be
several label there can be several label for one movie label is a new word that does nothing
is elsewhere for now in the file and here the the brackets tell that there will be more than one
label and then the add relation with no with no parentheses
okay and prisma is is nice enough to tell you that it is not normal that the label
is not there is no reference of label okay
so what can we do we will
create a new model with label and then it will have an id which will be an int which will be
the primary key and the default will be auto increment then the name
which will be a string and unique and a movie
and one label can be also related to several movies and of course our
create that and update that
and we want our table to be named labels plural with no uppercase
what does the relation mean in the labels label array it tells prisma that that will that
this label refers to another model and that
there must be a relation okay and then what what will be storing in
labels the primary key of the label order or yes yes good question yes good question
well let's see if i do maybe if i do
format
oh it only does that all right
oh maybe it needs parentheses because the autocompletion of prisma
oh and yes oh sorry so this is an end-to-end relation right because
a movie can have several labels and the same level can be used for several movies
okay so it will create a new table and this table will have a name that prisma will decide
and it will have two columns one for the idea of the label and one for the idea of the movie and
let's try and see if i'm right meaning that i will
generate the new prisma client and
also migrate to add labels
oh i made a mistake
but it's not just in the name it's not
don't worry about it then i will ask you to create a route to create a label and
and then you will tell me how we can find a way to add or suppress a label from a movie okay
i will leave you maybe 15 minutes maybe you won't you won't finish in 15 minutes
just one question should we finalize first the users routes because i'm not sure if we are
yes you are absolutely right yes i'm sorry yes so we create a post
a post route absolutely absolutely thank you thank you thank you and sorry so how do we add a
the two other routes just simply added here with that so we say app dot get
get is a function what will be the first argument i guess again it's a blank empty string yes
and then oops
and then the handler will be a nice function
and the schema
will be an object and you tell me what i put in this object i'm guessing the output of the user
yes so so what do i do here schema what do i add the body should be the
user output schema yes yes what will be so what do i add here is response response yes response
and then response is an object
so 200 and the array
zero with user output schema
and what do i add in the handler we should somehow query the database for all the users
yes so i should
add a variable named users that will be the result of the the the resolution of the promise of app
app prisma user and i think it's fine all
you have what find many i think find many yes find many and then you put an empty or maybe
nothing i don't know an empty object meaning that you want all and and then what do i do
return user exactly
yeah for me
before i had the return it doesn't have an error in it if i had the return users
it works so near i have this error no over
oh yes i think users is a list of users which types are id email username password created
that and updated that and so there is password and you don't know password maybe it's because
of that but why don't
everyone has the same error
okay
okay
schema response
i'm sorry i don't know i'll get back to you in a minute marina are you blocked are you
okay
okay so this is working this is to me working for you yeah yeah okay
so was it stefan or christian that had a problem i have i still have the
problem
i think i picked a call from apis so it says within user and it's this is from here
i tried users and then i will get
somewhere i don't know maybe my database because it's named users or no in your index
on 2024-07-08
language: EN
WEBVTT
first you must
sorry the shortcuts on mac and windows are not the same so
these two lines
should be after the register swagger
and you should register
prisma plugin yeah
now i think you're good try try again
um i still have one left out of the two prisma is still is still underlying in user's routes
maybe because in prisma plugin open prisma plugin ts please
no this is good um
okay try to restart your
try to restart your typescript server with shift control p
shift control p
no shift and control and not not in the terminal click on the the editor first
yes shift control p and then restart ts server ts server the third one
okay let's try if it's better now
yes now it's the users because it's user not users here you go
thank you
okay and then
um and then the last route would be what
yes so what do i put here and here and here
yes so here column id so in the schema what do i put it i'll leave you five minutes okay
and i hope you come up with a good solution okay i already did it it's working okay so that was
a telar right yep perfect no this is not good it's required an array no you don't want an array
you don't want an array and you don't want to find many you want just one
no no the user schema is already as the object
yes it's strange
oh and you write it's slash column id still works
and you get just one yes perfect now now why is it red i don't understand schema does not exist
yes
yes okay until i found the solution
about that so here id
will always be a string so you receive a string and here you must convert it into a number
oh sorry you don't you don't see where i
sorry so here it will always be a string
and then here you will have to either here or here you will have to transform this
into a number so we can do either
you can do either that number and then this or you can do you can do that if you know what it means
here id will be a number because a plus in front of a value will convert it to number
okay is anyone having problem or yes i'm not sure how to retrieve the user by id
i tried to find first passing an object with the id property but i don't know if this is the right
should be defined yes here oh sorry i'm gonna make it interactive
so here you can use
find unique and it will be where id is id
you also have a red here and i don't understand oh yes no no parents here should be a z object
but for some reason it's still
but here you don't have any problem
and here also oh because it can be null yes that's the reason so oh
so you can add it here nullable
okay thank you i will tell everyone because i forgot about that so here for the ones
well let's just develop it together so here for the appgit to get one user with its id i create
a route and the route the route handler for the path slash column id then i must
i must add a parent here and tell that a its schema will be an object with an id which will be a string
why not a number because we are doing for the movie yes yes but this this was
sorry this will always be since it's a params in params you can
only have numbers you cannot have either you cannot you cannot have no you cannot have
undefined you cannot have boolean you cannot have number you can only have string
so it's in the handler that you will have to to convert it to a number okay
the response 200 meaning if it everything went well will be at least i thought
user output schema all right but when you do this so you you try and and so wait for the resolution
and the id comes from the rec
parents id the rec comes from here
and this might be a query that returns no user because maybe there is no user with that id
so user can be no so if you put return user this will not be correct because in the response you
said that it should return a user output schema schema and this may not be the case and so we have
to add here nullable and if you do that this disappears now i still have this which is an
error because this must be a number and rec parents is a string so i can either just put a
plus sign here that makes this a number this is automatically converted as a number
if there is a plus here if it's not clear enough
you can use the number constructor without the new keyword and this will also transform
this the the argument into a number and there i have no typescript error what happens if the
string can't be converted to a number it's no or is no oh does anyone haven't paid the answer to that
it's a good question it returns none
and i can assure you that no user has the id none so it will return no okay so yes if you for example
in your if you have a client that sends
base url slash users slash onto a stand this for example will return no every time because
it will be converted to a number and the string stand will be converted to none and here
oops where am i and so here id will be none
okay so it doesn't crash it just doesn't find the user no yes but maybe you can do something like that
yes this will be converted to a number and not that you know what e1 e2 is
yes
um yes
so this works
and this works
sir yes i still pull three times i think but i do have the same issue i cannot
oh okay
anytime i think it's still does the same i think i have the same issue as well
again something no no no cannot read property as a fun defined reading users
what
okay index
yes okay this is okay oh connect this is a function so you have to call it
that was a trap right just to see if i know what i'm doing
okay who else has a problem
that ends the last one yeah it's still under like the get but for the other part is working
the last one is not working find one where i find unique where it yeah this is
view only
yes this is not needed
oh yes
yes okay okay
so get uh to be slash idea then objects here no no no no no yeah should be good
type
because i added also to run the data on the creation date
i think that's the only difference and when i created the user of the day i did that created
that
oh
oh promise i have the result is returned but i'm not sure why i have this
yes
so if i run the
i received the response i just i'm not sure why i got this
the blind for the post and get
it's fine now
so where is this in
in in but so it's in where you read user reading user of unicam okay
so there must be an error in your prisoner plugin
here the prism of
oh we can leave it at the end because with the api i can still receive the response so it works
normally i receive by ideas
okay maybe
and okay
uh pretty okay no i don't know
i have the important test as long as it works i'm just not sure why it's
arriving and says that it's returned an error i don't
okay well
okay let's try another exercise in our have time to to to try other things with stephen
so
oops so now we are we have
a route to create a user to get the list of users and to get one particular user
maybe what we want to do is to modify a user so i will ask you to create a patch
route with some of the properties of the of the user that can be updated and be careful about
what properties can be updated simply on one route
it will be a patch user route 23
shouldn't we create a new schema for update yes maybe not but maybe i don't know
any user by the user or extended user by the administrator because as a user i can
change my password yes you are right but do you want as a user to be able to
just by one request by one yes by one request change your password meaning what meaning
imagine you are at your computer you are on you are connected to an application then
i don't know you you go you go you go to the toilets for example and you you forget to
you forget to to lock your session and then
um then a bad person an evil person goes to your goes to your computer and
sends a request to change the password how do you know the password has been changed
yes
okay there was a problem with your plasma plugin and what was it
oh you didn't use the fp yeah
uh
so why is it in the line for you and not for me
so basically your files over
yes those are my files yes
so this is working
okay why what is the
has somebody have the had the
the some error in the prisma plugin ts file
well anyway now it works and you will get the my code anyway so you will
you will be able to to compare it with yours okay
i'm sorry i couldn't see where the real problem was well i saw it but now this problem i don't know
nobody has it so it's quite difficult
um so has anyone written the the appropriate
route patch yes
okay this is yes yes this seems to be okay
what is this on the line
so i have the where and the data what needs to be updated
because this is a syntax error why um you must set data in an object so they are missing curry
yes and save it now what what
uh i don't think you you you have to
to um i don't think there is need for data it's just
um so i inspired
oh yes no okay okay okay sorry my mistake i will all i was almost right so data is at the same level as where
okay and data should be just user
okay
now who is that malina
malina are you doing okay
i should just add in the chat that should be away for five minutes oh okay uh button you're
yeah this seems to be great yes yes that is perfect oh for you you cannot change the username
oh yes okay okay okay then okay sorry and so you can you can change the password
yeah
is the problem yes it's a problem okay why can somebody explain explain why because i explain why
15 minutes ago maybe someone can there's a bad person can be at your pc when you're not locked
and can change your password without you know about that i think because we must be
authenticated in case we want to change something yes but you know when you want to change your
password every time and this is a security issue every time you need to ask for a password request
then you receive an email and then you click on it and then you can change your password and
only your password and this is the next exercise maybe we won't have time for it but
this should be the next exercise
well i should leave you with this exercise for the next month for the view app meaning that
well are you do you agree to have some exercise for the next month or not yes yes yes okay okay so
so we are going to to do the patch route and then for the next month maybe we you can have this
exercise that would be that you create a route to request a password reset and
and i'll but i'm gonna show you how to send an email okay we'll do that maybe and
sorry what maybe we'll have us
okay okay so um so one one round to request a password reset that sends an email with a link
available just once and then you you ask for then you click on the link and
that's it okay a route that allows you to allows the user to
to request a password reset that sends an email with them with a link okay then another
another route that receives the new password with the
id that was sent in the email
and that changed the password in the database and sends an email to say that the password has been
okay so two routes one for a password reset request and one for want to really change the
password yes yes shouldn't we also send the current password and validate if it's correct
you could do that in the spa okay but if um so so yes you can create a route that takes two
passwords the the old password and the new password and then checks if the current password is the
real current password and if so change it in the database that could be a third route but the
the route that i was talking about was that you lost your email your password and you want it
reset so you cannot connect okay okay but you can also do this third route for the exercise if you want
so is everyone with me yes i will try a solution for the patch method that i ask you to write so
then slash column id
then an object with a schema
in the parents does the same the object and id the string
the response will be the new
user output
and it can be notable why because maybe the id sense is not a real user a real id for a real
user in our database and then handler
handler is an async
the nasing
function that will
so user to update will be await
prisma dot user dot find unique
where
id okay
and then if there is no user
what should i do then return a 404 exactly so you will return and first here you would use reply
sorry the username what
first we check if the id given is for a real
user okay
then if there is no user to update return a 404 okay with status
or for and the message
no user
okay and if there is a user then we get the
the new data new user data which will be in what it will be in the body of the request
so i will have to add here a schema for the body and what will what will it be
okay but what is the problem with that
yes we have password so
yes we should omit the password
and i think this is the way
why is it in med expression is not i'm not calling it
here the id comes from the rec parent
and i need to convert it to number
and yes so exactly
so i think so it's password maybe it's that
okay since i'm not sure what should a good developer do
read official documentation so if you see my browser i'm going to dot dev and then go to omit
and with omit yes that's correct and so here if we have this then you have we have no id then okay
so i don't want the password what should i do not want what should i should i not accept also the id
exactly
yes you are absolutely right thank you
and so here my body is correct then and the new data is now ready and now i can
user update updated user maybe updated user await app prisma user update
so how is it that way where id and and data is new user
is that correct have you done the same thing then i return the updated user
what
okay and so here i also have to put 404 and then an object will be an object
with stasis that will be a z number
no it will be
it will be exactly
404 and the message
will be a string
okay only this will be reused i think so maybe i'll just try reading a number
and between
between mean mean four and max
and the parents what is the problem okay so now i have no red okay everything is good um
so now i what do you want to do i can show you how to handle relations inside with prisma
or something else that you want to to know and
okay
which one can you just scroll down
it doesn't like the error in my update statement
what
oh yes and now i want to add
sorry i'm not no more cached i want to add to my git ignore the
dot docker db data
okay
yes that's perfect and so
it's
use prisma
okay and then put everything
okay
okay so in the schema prisma file we will add this and this this line and this line okay
and with that we'll create a new
migration
and then please oh i already did it i already did it um and then we can see maybe over here
that in the movie i have a movie table i don't have yet a labels table why
uh maybe it will be created the first time i add a label to a movie
okay okay perfect so um yes so you see that you have a new table that were created
that was created by automatically by prisma which is called label to movie and if you click on it
you see that there are um two columns that are both integers and they are ids of labels and movies
okay so i don't know why i don't have it
and you wrote exactly the same yes right yes oh now i have it okay perfect
and so um maybe uh
yeah i will let you um it's almost done right uh we'll let you five minutes to try to create
uh routes for the to to add labels to a movie first to create a movie and then to add a label
to a movie so this will not be in the ondb folder because it will um it will be for our
database so i'm going to create a folder that will be named movies and inside it movies dot schema
uh movies movies dash schemas dot ts sorry and inside it i will take
a part of the of this maybe just
i will take all this and then oops and then i will
i will take all this and maybe
get rid of some so i will get rid of yes yes maybe so i keep the poster
where are the i don't know anyway so i will keep the title but in the camera case i will keep
imdb id but not with capital d and what else what else did we have i don't remember you remember
oh yes uh uh labels labels will we have labels yes
that will be an array of
things import z from salt
i think my is not yes
um oh yes yes it was in schema prisma so in movie i have all of this
okay so i'm missing the year here and the year
okay and this is
okay and the year will be a number number and number and it should be at least
and max
and no max
okay i'm not sure about the labels but we'll see so now in
in the same folder movies we will have movies route
dot yes it will also be a
dragon
i will do the same
yes what i would like to do here in src is to create a types and
in it an index for now index dot yes all right and in that file i will have this
that will be exports
okay
so in index ts in types in src i will have the my media plugin do you want this in the course maybe
types
here you have it at the end of the of where is my five blocks
this here
you have it at the end here
at the end of the prisma with fastify page
since it is exported i can import it here in every plugin
and user route and omgb which should be called omgb route
and
yes and user route yes and on pp route
and here i don't have any for this anymore
um
okay it's it's below the code that i just showed you so this is i will i will add the file name at the
src users users world dot yes
so my movie is route i will um add a post to create a movie yes
oh yes thank you
okay i will add a post here
and what do you think should be in the data okay i'm not i'm not sure i'm uh i'm clear enough
since we will um request we since we will make a request to omgb what do we need we only need one
thing to add a movie to our database title no
the id yes the imdb id yes
so um so i will create
the the empty string uh route handler then in schema i will just add in body
the
the object with id that should be a string
and
and what and what's out
and the response and the response should be our um our
our movie schema
so 200
okay and then the handler
will be an async function
and the movie will be
first we'll get the the id
which will be a string okay i missed the import of z
and that's why the z here is red and the movie will be
h
well for now
so for now i will copy paste but i will ask you to refactor this to be a cleaner thing
and here
i don't know
so this will be a movie the body all right and this will be a media and i will take
from it i will take only what the title
and the and the id or not because i only have it here
so the title and what else the title the year and
and what else
title the year and the poster
okay
we'll import the media type if i can i don't understand why it takes so much time
oh no this is from
point db
and so this will be
everyone is and uh on the same step almost
have already underlined the api key the process is underlined for some reason and title year and
poster are also underlined just like in your case uh yes because the media is not
uh i have a this is wrong i i missed i missed all of this
poster is twice
all these tractors elements are unused yes um this is normal because i we we
we are still not using them and what what else is red for you uh for me uh in the
definition of api key the process word is is underlined and says that unexpected use of the
global variable process yes so yes it's have i told you it should be imported yes exactly
those classes
so we make a request to the omdb api and we get the three properties that we want to store in our
okay and then
post saved movie will be await app prisma movie uh create beta movie
and then we will return the same movie
why do you have still post on the right that's a good question and data same for me yeah
because i don't have the imdb i need imdb id
and what else poster any why is it poster any poster string and there poster string
why is it any i don't understand poster string okay and jb string is not snaggled
property imdb id is missing what
because the d must be kept as well i am db id
from the i am db id the last character t i guess it must be a capital d but
okay i think i'm confused movie oh yes i am oh okay i kept the
capital d and that was my mistake okay and what now year are incompatible because it's a number
yes so here i will transform here into a number okay and that's okay
now why is the poster red
should all the calls for id URL base URL could be not in that function or not sorry repeat so
home base URL and everything should be in that function in the video plugin even moving in movie
function this these lines yes yes that's what i told you before yes for now i repeated the code
but i will ask you to refactor all of this and and i will talk about it in an old it's already
four o'clock well five o'clock for you i will ask you to refactor all of this and also index
also all of this should be in a config ts file in src and we should pick up the the data from
the config ts file do you understand what i'm saying
yeah do not cover properly it's the file okay so here in src there should be a config file
config ts and this is the only file that should import that of
from that of
and use that of that config
and it should export a
a config that should have the port
so here
you should have this
and
yes process dot of dot port or
okay so this is this should also be a number
so this file should export by default an object that has all the config of the application
so that you don't repeat this in several files the host should be
the host or 000 and the swagger doc prefix should be
or API docs
and so also this
this should be in that config also
and this should be maybe omd
b base base url and this is quite complicated are you aware of getter and setter in javascript
okay so here if i put get here
this is a function and
it returns
this base url and this
api key turned
now i don't think this is needed
yes
okay have you ever seen this
yes this is not really known by most of javascript developers
but this is a way to make this property dynamic and so even though i
this i write it like a function i will
still i will still use it like that API URL without without parentheses at the end
yes exactly
okay now that i have that i can here import config import config from
config and here config.id url
now why is it still red id id id
yes oh yes and here there is no id so i will
is there a way in thought to add a property
yes extend
extend and i will add id which is a string
this should disappear type
oops type id type tagger post to id no it's not signable to type type tagger
so it's lacking what
id and labels oh labels labels we should
we should make label
how do we make it optional
where is no it's sorry it's there so it's optional
number is not signable to string yes okay so this is a string and i need a number no
no no no id imdb industry what
so this should be create
and here
but why why is it still red number is not signable to string id number
oh yes because in id number yes okay and here create oh number
number and
okay so now everything we import media from omdb if you have a type of media in the movie
because what we'll receive here is really the media from omdb
this will return a promise this will return a promise and in it will be a value returned by
the omdb api so this will be really a media type from omdb what we take from it is what we take
from it is only these two properties the three properties then we create our movie okay and this
movie is of type type of type v infer
creates movie type of type of create movie schema
okay and then we create it and what is returned is the same movie with almost the same
properties plus id created that and updated that okay
i will add it to the course
what can you add also the complete file yes sure yes yes absolutely
uh movies
for the movie that infer and angle brackets you got to add other line the data is underlined
oh yes okay
okay so let me let me check i just related to the id when you're using
we agree that the the id from the ymdb is perfect letters no
yes this is the id well this maybe should be called
i m d b id okay or even id okay
all right
so this is a string but the id in save movie with the id from the same movie
will be a number because in our schema from prisma id is an int should we send it
i think we don't have to send it and we create the id no no uh yeah yes we don't send it
um but we need imdb id sorry mistake here
and then why is it type string undefined is not assignable
so i'm seeing only fine master sign about to label create nest in or undefined oh yes um
yes the response cannot be this because it it has to be more complicated because labels are
of a different kind
but we're going to stop for now for for this and try this route
so we are going to post uh first i'm going to search for a movie
why just a question stan yes we have we already registered this uh this no you're right thank you
um so in index
we have to register our
in index we'll have to register our new uh plugin for routes
movies and movie
i'll let you a few minutes
so when you have uh when you're booting this routes movies movies round.ts
don't forget remember to add the rounds to the main instance and this is the config.ts file
okay so i make a search on my api that calls the umdb api i copy this one my mdb id and then i will
try to add here a post request to base url slash movies slash this id
with a content type application json and init and imdb imdb id which will be no uh sorry
so i will post to my movies
remember this must be a json so um so wraps it in so wrap it in wrap every string in
and key in double quote then i send the request id is not defined yes because
uh the schema id is not defined oh yes here id is not defined it's imdb id and so
another try and here i have the warrior and this is this has been saved in my database
a few moments for uh for any questions that anyone could have so so we can try to
wrap up for the day to not over extend so um one question that i have stan
i said that we could create a single connection uh a single client right between the please mind
yes so this means that any communication that we want to do it with the database
either read or write what they need will be done to the same connection is this uh
oh so it will be the same clients but may maybe not the same connection because
prisma can handle a pool of connection and this is transparent for you
yes yes yes yes you can okay so this should not be a button no no you should not worry about that
and in regard of let's say i have a very complex query right and that we already have it implemented
let's say and we want to to build it with this new technology we know jsnq and so on and that query
we should uh be factored in we got we just used here with all these uh
methods from from the prisma yes i think you should do that but if you really have already a complex uh sql
query um i think you can with prisma uh call raw sql something and and make your query by hand
uh so somehow send the query text sorry so we can send the query text yes yes to the connection
yes i think so i have not done it but i'm sure it's possible and for the connection for the pool
pool connection i will send you the where where is the chat
disputing here i don't see the chat oh yes yeah yes thank you so this is the official documentation
yes
so sorry it was not clear for me in case uh in our project we have a very complex queries can we
just somehow stringify them and use them or maybe we should refactor them or what is the recommended
way because there are a lot of queries and a couple of hundreds hundreds of lines of
all right so there are complex queries uh well i don't i don't know this should be be
this should be handwritten i i have no one size fits all answer for that um
but but i think you you should try to refactor all your your sql queries
maybe they are not so complicated than you think uh raw query but here here i'll send you also a
the official documentation about raw queries
based on the last discussion that we had in the plan and the the needs to switch to microservices
and to not mix the data so for sure we'll have to use the standard way to access so i don't think
i think it's for the best but know that if it's really complicated you can
maybe but maybe not if you create your your relations in prisma
i don't think i don't think it will be a long i think it can be shorter in javascript with
prisma than in raw sql and i think it can be much more readable
and okay but if we build the code for prisma do you have any idea if
i think it was built with performance in mind and i i should not be worried about performance
no no really really but you should see who uses prisma
you can store it somewhere in the procedure
uh the old query and call the procedure itself and you get the data and partially
that require again access to data on these procedures and stuff
yes
oh you should not use type or this is dying type or m is dying and it's in maintenance mode for a
long time now and there won't be any feature and there are many things that you cannot do
with type with type or m that you can do with prisma so i strongly recommend you to opt out
of type or m
yeah
yes
yeah sure sure so if you see my my browser here the the the the own creator of moment.js
tells you that there may be modern better modern alternatives so even the creator of moment.js
recommends you not to use it and he created luxon which is um which is much much more modern
and is is is immutable which was not the case of moment and that is one of the biggest concerns
of moment and that was mutable meaning that maybe you don't know what i mean by mutable
but when you when you do something like this it um it modifies the the object returned by this
so let's say you you you store this the return of moment in a variable and then you subtract this
the value inside your variable will be changed that is not what you should want you should want
moment to return a new value with the subtraction of six days and not touch the original value
okay um and so luxon is is is good but i think i don't like the api of luxon there is um the js
the js uh js
so this is an alternative to moment and this has almost the same api of moment but it's immutable
so this is this is better this is really better okay and my favorite is date fns like date
functions dot org and especially that in a way that it it it's really with function programming
in mind and meaning that you have all of the the of little functions like little utility functions
that you can use anywhere in your code and it takes data last meaning what meaning that
you create here a function that you call with an explicit name of add five years okay then you
and in it will be stored the result of add years five okay and this will be a function that you can
use and reuse unlimitedly okay yes and and so you can write this and i think this is great
this is almost english so you have some date and then you want to add five years to each date and
then you want to translate every date into string and make it uppercase and this is this is almost
english take some dates add five years and transform it to string and to other case
so this is a really good api in my point of view because i love functional programming
and let's let's see if uh yes
yes
oh yes yes
yes we have not have time we have not had time to to go into unit test and end to end test i think
we will have time in view in the training view and it's really important to do e2e test i think
for your sba
do you know next does anyone of you know next do you know what ssr is
yes yes that means that you create your application with components in view okay and
it builds on the server the the whole html page and sends the html page to the server
okay i contrast if i let's say oh wait i cannot show you because i don't have
i used it i used an spa and then i transformed it to
next but when you use a when you create an spa all the the client receive first is an empty
and html5 and then javascript is read, parsed, executed and then you have the the client sees
a whole page the whole page
but actually the client's browser generates the page exactly exactly and with next
it improves the performance and the the user experience because the the clients already
received the html the whole html of the page and then the the javascript enters and is parsing
executed and you have interactivity but before the interactivity you you have the page this is
not the case with a normal spa without server-side rendering maybe we will talk more about about it
when we see view fasti5v and fasti5v are almost the same as next because they they they allow ssr
server-side rendering storybook and this is for frontend only and github
i strongly recommend to use them is a way to to urge the developers when they commit
to pass the test and the linter you should not be able to commit if your linter gives you
throws any error okay and the cicd you told me that you have no knowledge about it so i won't
i won't bother you with it but you should have a devops team that that handles the cicd chain
and i hope we'll have time to see you in test when we see you
oh there was that also yes okay and we saw swagger yes i think we saw
we did not see much about cores we'll talk about it more when you see view and everything else i
think i talked about yes any other questions any other comments
okay so i think that's that's it thank you thank you very much for
thank you for your participation thank you so i guess uh
yes yes okay okay thank you then bye thank you good night thank you so much
for
