MAD 2 Revision Session - Part II

追加: 2026-05-16

[00:03:08]Yes. Uh hello everyone. Uh hope I'm audible.

[00:03:14]If I am, please give me. Okay. Yeah.

[00:03:15]Thank you. Okay. So, uh today will be the last session for this particular term.

[00:03:22]And yes uh somebody has raised the hand.

[00:03:32]Okay. So this should be the last particular uh uh session for this term and I believe we have gone through uh the overall content of this particular course. uh so I'll just briefly tell you what are the content we have covered and what you should be knowing by the end of this uh course and then going on to the end term with that knowledge. So we started off with a JS which you have started off with in in the later part of MAD 2 itself uh sorry MAD 1 itself 11 12th week which you have uh so you may know the understanding of how JavaScript works, how their constructor works, how object- oriented programming can work in JavaScript. So those are the thing which you should know because you have already seen it in the week one or two content uh and you have done the programming assignment for the same you should know that and uh after that there are few nuances about how promises works how async and await operation works. So these are the things which are covered in the JavaScript which you should know and uh uh few few are few of them are very basic but and minimal but you you should know the differences between uh those two kind of uh functions which JavaScript creates.

[00:05:05]So one of them is arrow function and a normal function kind of function which you see in the JavaScript. So you may have to differentiate between those two and then uh understand the logic behind it. Uh you might have already seen those kind of question already uh in the later quizzes also.

[00:05:27]So you may uh know that working realistically and then come to the end same uh in that progress and going forward from the JavaScript you should know uh about the understanding of view. So view has separate components mostly. So for first one is a basic view where you uh use a framework using a JavaScript kind of coding format and then get the data and uh move it dynamically.

[00:06:01]Right? So uh JavaScript becomes view in terms of framework. Then you learn about their data property, their method property, how to use v directive, how to use um I would say computed property, watcher property, these are the property which are given by view, you should know them. And when you move from a basic view to some kind of changes in uh changes happening in the pages uh same thing happening in another page and then you have to move around here and there you come up to the view routers. So how view router works you should know that and then when when you are comfortable with that then you should go ahead with viewx store and later part of the things right. So till the view router part you should be comfortable uh with how the working of view router is working and how props emit uh child to parent parent to child communication happens.

[00:07:06]So my ass assumption is uh you have already seen the revision session. I'm not sure when was the revision session but uh might have already gone through till week six content. Uh today uh I'll be teaching around uh from week 7 to week 12. Uh by my voice you might understand that I'm not uh not really comfortable in speaking right now. But yeah uh I'll try to uh give you the topics which you should know uh go through them and as much as possible I'll just explain you those topics uh I'm not well right now uh so I'll try to wrap it wrap it up quickly uh sorry about that but yeah so I'll just give you the context and uh we'll try to do some something in uh in terms of code as well.

[00:08:09]Uh if you are new to this particular class, I uh I use my GitHub uh repo which I've shared in the chat which you can open and see. Uh in that two things are there. First one is a MD file. MD file contains all the content which you should know and uh go through the theoretical content what is given. Along with that there is there are some codes also given and uh when you see a a a folder given by the same name so and same demo there are two folders back end and front end. You might have to use those back end and front end folder to run the files and check uh if if we are making sense in terms of the theoretical knowledge which we have uh given in the MD doc. I have tried to give the numbers of uh in sequence how what what are the numbering uh given in the MD doc right. So, I'll just share my screen and we can start off.

[00:09:35]Okay. So, hope my screen is visible.

[00:09:41]So, yeah. So this is the endm revision folder which I've created in the same repo which we use uh typically week 7 to 12 when I said uh JavaScript view view router these are the parts from the view uh week six till the week six I believe uh uh we have discussed about few of the things during quiz two. You can go ahead and read this out. It might also help you uh hopefully. Yeah. So, these things will help you. So, you may read them uh by the results of previous uh quiz. I believe you you have read them. So, go through them again whenever you are going ahead with and same. So, this will help. and yeah and same here. So it is a re recap mostly because we have thoroughly understood most of the concept uh when we were dealing in the live session. So the basics of it we we'll just try to see. So there is something called as vx store which is given by view to store the data. So when you say data they call it call it state and they call it state management library or central state management library.

[00:11:14]V viewx is in uh view 2. Uh in view 3 you might see pina. Pina is a store which you see in view 3. And uh there are the four things which you should be knowing in vx. First one is state. It is particularly the data which we have seen. Uh getter it behaves like a computed property in the view. Mutation is a synchronous operation happening where you change the data one by one.

[00:11:47]Somebody tells you to commit the change.

[00:11:49]So it will take that it will take that uh fun uh it will take that function call as a commit and then complete it for you. So this will done this will be done synchronously one by one.

[00:12:07]An action is a part where it will continuously take the uh functions or kind of calls from the front end side or somewhere and then it will tell the mutation to do the task. So action will not do anything much but it will just tell to commit. So whenever you are calling uh you are calling action you have to write dispatch. So when you say dispatch it will go to action when you say commit it will go to uh mutation. So these are the component we should know and get is something which will deal with state directly and there is if there is some changes in the in the let's say we want to change something not directly to the state but by the use of the state. So let's say if we have to give a square of number. So data has two. Now I can use that two and multiply it by two and then or square it by whatever the number it made. So we can use getter for it. We don't change directly the state but we will use the state to change the uh the new data which new data variable which we are creating. So that's why I have written no side effect. So it will not affect state or the data which you have already hold in the particular view store. Particular role of view x is let's say you have multiple component in your file and you have the same kind of data. Let's assume it is a username.

[00:13:47]Okay. So uh now username is shown in all the component. Let's say is four component are there.

[00:13:55]If you go to a profile section in one component and then say I will change my end username. So it will change it to let's say something XY Z right it changes. So it will reflect it directly.

[00:14:10]It it won't bother about talking to the API. It will just change it in all the pages. VX store will change it in all the uh components which you have created. So it doesn't have to deal with API all the time only single time whenever there is a change it will just go ahead and you don't have to every time call for each component the API call doesn't have to be happening in the each component it will done only once and it will reflect in all the four pages which you have created uh we have these example uh so how to call uh a store the data how to call it to change something how you can call it from uh the function side as well how you can use them from the function side as well. So these are the thing you should know as as uh you might have already seen this. So this is context right? So there is something called as dstructuring in JavaScript. So this is used here. So whenever we are using curly braces inside a commit sorry inside there is some x variable and there is a curly brace part in in in them. So that means you are getting some data. So actual uh I'll just so actual uh data was like context dot commit to avoid that uh writing every time we are just using it like curly brace commit. So what happens is uh view gives us the viewx gives us the context uh in this kind of dstructuring right so this is one of the thing you should know and both are equal okay so both are equal okay I'll just move it and yeah so you already know this that we are following the convention whenever we are calling a synchronous operation we write it in uh capital letters uh yes this is notice uh I have given you one file which you can >> sir I have a doue here so in place of state right like we are explicitly passing the states to mutation but can't we write like this dot state instead of passing the state >> state.

[00:17:09]So you can tell state to change this dot state is basically you're telling uh a method right. So uh if you are talking about this dot something that means it knows the context for it. V store is not a uh view uh program or framework where you are having a method method uh uh this this is different from a view this is not not view >> so convention like that yeah >> got it so you mean to say like it doesn't know the context so you have to explicitly pass it >> yeah so you have to write state because you have written state >> okay sir Got it.

[00:17:59]>> Yeah. So the basic idea was we don't want to use this. That's why we come here.

[00:18:09]Yeah. Uh so like users and count don't have to use this at all.

[00:18:22]>> Okay sir. Got it.

[00:18:24]Yeah. So main thing you should remember is how you will call the data. So dollar store dotstate dot count. So whenever you are calling from the script side or the JavaScript side to the HTML side, you will call as store because the variable name is store and from where you want the data is state and then the variable name which is defined here and similar for the getters.

[00:19:00]Okay. So yeah, so these are the things you should remember while you are going ahead. Uh I have given join uh if you know about join operation that is fine otherwise it is okay.

[00:19:13]Uh yeah that's about it for the view.

[00:19:22]I've given you the flow. This is already we have discussed in the previous class.

[00:19:28]Uh so never change the state directly from a component. Always go dispatch.

[00:19:35]Dispatch will go to action. Action will go to commit. Commit will tell to the mutation. Mutation will tell to the state. So this should be the flow which you should remember.

[00:19:46]Um, I have the file, I guess. UX.

[00:20:07]Yeah. So this is the file which I have the same file which we have seen in the GitHub.

[00:20:22]I will use live server.

[00:20:33]So if you just reload again so I'll just give one plus. So what I've said is increment by + one. Right? So I have directly said commit. So commit will go to which part?

[00:21:10]>> Mutations.

[00:21:12]>> Yeah. Right. So commit will go to mutation. Now if I click on this that means it has it has gone to what? Dispatch goes to >> actions. Yeah. So dispatch goes to action and then so this is the name right. So whenever I'm saying commit capital letters are used when I'm saying dispatch and this asynchronous operation is used. So it will go to delayed increment. It uses the context of that commit and whatever the commit it wants to be done it will say this and then it will go to this guy mutation and then completes the task.

[00:22:10]So we can also use asynchronous operation to load the data. So here what I'm doing is directly using the state to get the data and a button is there to dispatch the details. So load users is the promise which we are making here right.

[00:22:34]So this will also be dispatched. So this is very basic now as I I believe you have already understand these things. So we have to call it here uh the store inside the app to make a connection then only we can create a variable. I I am calling it a store here. Okay. So you can name it anything else if you want but the convention should be followed as store and then it will understand the store. You don't have to use colon and store again. You can directly call it store.

[00:23:11]And this is the convention which you follow for creating the store.

[00:23:18]Hopefully the screen is Yeah. Okay. So this this is I guess enough. Uh I will want you to go ahead and check out the codes. Okay.

[00:23:34]Yeah. Uh one important thing in terms of security. So token and session. So session you already have seen in mad one flask session uh session based uh cookie storage and here we have dealt with uh uh o token which has a spir expiry of some 15 minutes. Session don't expire you have to delete them or remove it. uh JavaScript web token are stateless session is not stateless. It remembers the previous data which you had and JavaScript web token is basically where you uh create a token. There are several things to it where you you define what kind of identity you want to make as a token.

[00:24:33]Right? session is basically uh you you can't you it is a good thing but uh sometimes a stateless thing will work for us because we have multiple users in one app. uh session cookie will store the data and uh what we can do is we do we stop a JavaScript client to not using our cookie details.

[00:25:05]So uh session is okay, token is also okay but it it is depending upon the situation of the application how we want to use them and where we want to use them. Right? So there are few nuances which you should know about the JavaScript web token and session. How to create them? how to uh use them and where are they stored and the keywords which can make the difference in in both the both the uh authentication based thing right yeah you can read about that uh I I believe you already know them Yeah. So this line is important where you give the details. So what you're saying is uh use the user identity to create the token. So three parts to it if you remember it. So header, payload, signature. So payload will get this user ID detail and the expiry time. So expiry time is basically 15 minutes if you don't set it. And then at the end signature. signature would be the unique signature for this particular user ID or the user and then whenever you want to use them you can directly use them using get JWT identity decodes from the token not from the DB right so token which you have created it directly decodes and use it whenever it wants you don't have to call the user ID from the database all the time but it makes our life little easier uh flow already own node. So uh you loging server checks credential uh server create the JWT token based on whatever you have you given. If you have additional claims, you can also write it. Additional claims are rule, expiry and whatever. Expiry mostly if you don't give it as by default.

[00:27:19]Client stores uh JWT. Uh you can store it in local storage as well or uh it it it is dependent upon you where you want to store it. You can store it in the cookies as well. uh where you say HTTP only. HTTP only is uh for the JavaScript to not check your data and use it. So that is one thing the format would be bearer and then the space which you have and then after that the token server verifies signature. Yeah, this is that session is little uh different from the the token storage. There are a key value pair which you are giving mostly. But here when we are dealing with directly with the cookie, we have a name and value not a key value mostly. Uh when you see let me open it.

[00:28:41]So in the key there are several options which you get I will not get what Uh, where should I go?

[00:29:01]I just run it.

[00:29:15]This is the file which you will you can use second file for JWT session.

[00:29:22]Uh, I guess. So name uh value uh in local storage you have a key value pair right. So this is little different apart from name value you have multiple options to click or check upon. So you can give the expiry date as well. So not date but expiry time. uh HTTP only is this guy where you say JavaScript cannot read or the client or the browser side should not read our content. So when you say HTTP only is equal to true then it won't be able to read it. Uh if you remember we used console and then checked out uh what was the thing document cookookie.

[00:30:41]Hopefully this was the thing.

[00:30:45]Uh spelling is wrong guys.

[00:30:52]Document So right now we can see it but when we uh take it as yes HTTP only as yes we won't be able to see that particular thing right so that is what you can do with uh cookie whenever you're storing the detail in the cookie uh yeah after that uh so yes so this thing this line why this is happening is because this is uh this remembers the state so that's why automatically it uh takes that particular cookie so that's why that this is the reason and in token you don't uh don't don't really want a user to know about the other user detail or nobody nobody should know the state of it. So that's why it it is important. Okay.

[00:32:04]Now in terms of quiz or in terms of exam you should know where should you use token and where you should use session.

[00:32:16]So this should be clear. Create your own example and be mindful about that particular example and check it in the the documentation or wherever you can and make that example clear in your mind where should we use session and where should we use token and how different are they from each other. So if it is clear in your mind itself that means you will be able to answer any kind of question related to duck. Uh now typically in terms of token you will be using authorization bearer and for session kind of storage or the cookie kind of storage you need few other extra details as well. uh as we are not too much uh uh I would say we will not ask too much of a coding kind of changes in the uh quiz or or the exam. So theoretical understanding would be enough I I believe hopefully it will be enough but for if you go ahead with the viviber and all yeah go ahead and check it out in the in terms of coding as well.

[00:33:42]Yeah. So that's the last thing. So Jav JavaScript web token lives on the client side. The server cannot uh invalidate it early. Uh session lives on the server side. You can kill it instantly. So session basically deals with the server side that's why it is stored in the cookie so that JavaScript cannot deal with it. And this is the client side storage. Okay. Even though it is stored in the browser only but it is handled by the server. So this is the file which you have just opened. One second.

[00:34:35]Yeah.

[00:34:36]So I have given both the example.

[00:34:41]Let me just give you the context how it is there. So I've used FL JWT token uh so sorry FL JWT extended and uh yeah so these are the configuration secret key for JWT if you remember we if we don't use it won't create any token and all secret key is for flask it it won't work if we don't use it login won't work I've created a small dictionary kind of database which you can use and then try to login using these uh details right so email is required email and password this is one way of using the token JWT token and this is the other way same thing login and then check the session details uh I'm giving it to you I'm not uh I don't have an energy to check it out so yeah so please check them and yeah it is working the code is working. I'll just run it for you. But yeah, you have to go to So, so if you go to this uh one more thing, if if you see I've changed something line number nine, it says app equal to flask name.

[00:36:08]Uh line number 22. Uh do you see any difference?

[00:36:23]Uh am I audible >> sir? Instead of app.oute app.t post is there.

[00:36:30]>> Yes. So uh it is a sort form of uh uh app.oute URL and then method is post. So you can directly write app.post.

[00:36:43]You can see here a shortcut for route uh with methods equal to post written here.

[00:36:50]Right? So you can directly use post now. Now it has I guess version two they have created.

[00:37:01]So you can use this also right for the other routes. get I have also used somewhere for delete as well.

[00:37:17]Yeah. So check them out. Run it in your PC and see the code is given in the the repo itself.

[00:37:27]uh one of the things which I have seen in the VAS people don't understand uh about what is forbidden and what is unauthorized.

[00:37:43]I've taken it here so that at least you might understand the basics how how will you call it not authorized or a person who is uh not authenticated right sorry.

[00:38:05]So 401 it says unauthorized.

[00:38:10]The typical meaning is server does not know who you are directly. It doesn't know it. So that's why unauthorized.

[00:38:20]You're trying to login or you're trying to check out the URL and all but server doesn't know you. That's why it says you uh unauthorized. you are not authorized to uh login or check the details of this particular website or inside the website.

[00:38:37]The other one is forbidden not authorized in a sense where server knows. Let's say if you are one of the roles of particular app role would be let's say if you are a student role for particular this BS degree but you're not a admin or you're not an instructor so you're not authorized to go ahead and check out the detail of the course instructor so two different things but doing the same kind of check first one is saying I don't even know who you So you cannot go ahead. Uh but the other one is saying I know who you are but uh you are not allowed to go there.

[00:39:25]So 401 403 know this because uh it is important for your exam as well. Yes, obviously but for your vivas also because if you're not able to answer this and you have implemented token based authentication and session based authentication uh you might lose marks there for this I've given the same kind of example you can use that in your uh code Okay.

[00:40:05]Uh this is this example what I've given is for JWT extended. Uh if somebody is using uh flask security or you have used flask security there's something called as add the rate o required add the rate rules required.

[00:40:26]So there also you might get the errors.

[00:40:28]So o required will give you 401 and role required might give you 403. From here also you can remember this right it's o is 401 and rule is about 403.

[00:40:44]401 means go login. 403 means you are logged in but still blocked.

[00:40:52]Fix for 401 is authentication. Fix for 403 is authorized.

[00:40:59]Okay, changing the permission of that particular okay so hopefully a little simpler version of understanding I have given uh there is some topic which you might have seen there's something called as GraphQL uh I guess I have not taught you this but yeah I thought just put it here uh not too much of a coding concept we might ask because I have not taught so uh a theoretical understanding uh it was there in your uh graded assignment I believe so give give a good look at your assignments and also your slides to understand about GraphQL.

[00:41:58]So it is a query language mostly but it is not SQL, it is a graph query language for mostly for your APIs to connect.

[00:42:10]Whatever data you might need, it will just give it to you. It will not give every detail but it will give you the specific detail which you have asked for. So this is the role of GraphQL.

[00:42:24]uh rest principles are something different and graphql are different right so you have to define so many things and you have to be constrained in one particular format if it is a post you have to get full details in graphical you don't have to get the full detail it is a post obviously but few things can be taken and used whenever it is in in need.

[00:42:55]Yes.

[00:43:01]Uh hello >> sir. It was a message.

[00:43:10]>> Oh uh yeah great.

[00:43:18]Little late to ask this right.

[00:43:23]Okay.

[00:43:31]Uh, week eight uh assignments you can check it out, right? So, uh, yeah, hopefully you have seen them.

[00:43:54]Okay. Uh query.

[00:43:59]Yeah. So three kind of operation happens in graphql. Uh querying, mutation and subscription. Uh not to worry too much about it. Why I have put subscription here is because of websocket.

[00:44:13]uh I wanted just to tell you there is something similar to websocket in graphql that is realtime streaming similar to websocket websocket is important topic I guess we have discussed around uh servers and events and web hooks if you remember that don't ask me where is web soocket in which week Okay. Um yeah. So this is important in terms of understanding. So there are there are the same purpose. So both are rest principle or the API kind of principle which you use or the SQL kind of principle which you use both look similar but there are something different. So posting becomes create, put becomes update and delete becomes obviously delete is delete. So this is kind of a real CRUD happening in in GraphQL. Okay. So this is the flow which you should know. Client send a post GraphQL with a query the URL with a query string query string. Okay. So like this string uh graphical parses parser reads the query and build an execution tree for each field in the query. GraphQL calls the matching resolver function.

[00:45:52]resolver fetches data whatever the data it might need for that particular field whatever is given. So these fields and then uh only the requested field are returned nothing extra. Okay. Response is always JSON data. Okay. So you will give a string it will return your JSON data. Okay. So one endpoint client controls the shape of what kind of data it wants and resolves the fetch data field by the field which is given. So it it in a sense it is very good or very good in faster faster for getting the data.

[00:46:36]Uh yeah just know the flow of it how things are working in GraphQL and that should be enough.

[00:46:46]uh yeah so I've just given this uh particular pointer fifth pointer for you to remember how we create get uh branches how we merge them how we uh go to some other branch and then put in the details which you have got commit and add just read it. Uh if you want to try it, that is also fine. But understand what are the commands which you use to uh create a branch, merge the branch and uh add the details in the GitHub.

[00:47:32]Okay. So first one is get branch and then if you have a new branch to create you will write branch and whatever the name and then you can switch to that particular branch you don't this assume this is a main branch right so you have a main branch you don't it gives it it has a main branch you want to go to some other branch so you will create a new branch you will go to that branch using checkout and then uh yeah so so This is about modern uh g you can use hyphen b both are almost similar only but create and switch you don't have to write two different command instead one and then the typical one adding committing and then at after that you can check out and if you want to merge that to the particular uh previous branch you can merge that as well.

[00:48:31]Uh I've tried to create this uh main goes to this newer one after get check out it then whenever it is done it will just go to this particular main branch.

[00:48:54]If you're not understanding too much of it, uh please try to understand.

[00:49:04]Yeah, I tried to give an okay so server sentiment websockets two things. Server sent event is particularly a a event which will be sent to the client side whenever there is update in the server.

[00:49:31]So admin updates something it will show to the client side. One thing JavaScript have to make one-time connection. So if it is connected using event source and you make response from the back end and continuously you can sh send it to the client side then it is server sentiment. You don't have to call the API multiple times.

[00:50:00]Only one connection is required. After that one connection, server will uh always keep on giving you the uh responses throughout the session which you have created or the or the web apps which which you have created.

[00:50:18]If you remember the flow something so we call it one oneway update. So it continuously processes the detail.

[00:50:29]So if you remember these context very good uh there is something called as websocket server sent event is oneway communication web socket is two-way communication so where server and client both are important they talk to each other there is something uh called as polling as well if you remember uh read about that uh web hook if you remember read about them because we are not asking you to code but uh we should know the theoretical understanding about them.

[00:51:10]Okay. So yeah. So, so SSC SSE is basically normal kind of uh event listener which you say it works in normal HTTP plane protocol but yeah it websocket has its own so websocket updates to the websockets protocol.

[00:51:35]Uh yeah it it will reconnect whenever uh there is some change it will just reconnect. You have to manually reconnect if you want to connect the both server and client in the web socket webocket when when I said client and server this is about that chats game PUBG WhatsApp you have a socket that is connecting two particular user or sometime multiple users together in one particular server.

[00:52:12]So Java uh so JavaScript is okay but any any kind of other languages can also see that uh WhatsApp where there are groups we have many groups if you know so we have 1,25 people in one group they are all the time connected to each other so web socket kind of technology is working there Right.

[00:52:43]Okay. Uh importantly where to use them?

[00:52:47]Use SSC when client only needs live update from server like a cricket match or some some soccer or something like that. Uh use websocket when both side need to send frequent realtime messages. Uh yeah obviously WhatsApp and all.

[00:53:10]um how it works exactly. Let's try to understand the websocket. Websocket is a uh full dupé they call it. Uh full dupé connection between client and server where it starts off with so why websocket instead of HTTP is one of the things. So uh it starts off with HTTP but it upgrades to websocket. So client request server response connection and close that that is how HTTP works. So must run every time but here we need a open connection right we need to continuously talk to each other both can send any time whenever it is a so I I messaged you why didn't you call me so I don't know when will you reply right so a connection will be stored there so it I it should wait for the other guy to give the details so connection should be stored but HTTP P doesn't wait for it.

[00:54:16]It it will just get the data and stops.

[00:54:20]That's it. You have to uh wait for the connection to complete.

[00:54:27]Uh yeah, there is the initial handshake when you say so websocket has a when when it starts it has a handshake kind of formatting.

[00:54:43]uh client sends HTTP get with upgrade headers. So these kind of headers are given. So get this thing if you remember HTTP 1.1 uh host upgrade is websocket connection upgrade websocket key version you don't have to worry too much about it but yeah so importantly you have to start with get and then the server responds with 101 switching protocol. So server so whenever a client is making the request server should respond respond with the protocol switching this is important.

[00:55:24]So then only we have a connection then websocket will connect with both of them key should be uh accepted and then after 101 HTTP is done the TCP connection stays open as the websocket. So this should be important whenever a client uh makes a request server should understand it. Switching protocol should ensure that the connection has happened and then websocket will uh take over from the HTTP both sides should be connected after that.

[00:56:00]Okay. So these are the key words which we have just seen. Upgrade upgrade is important. Connection is also important and switching protocol. Yeah. Three things.

[00:56:16]Yeah. The web soocket start with HTTP then upgrades with uh one one response.

[00:56:23]So 101 is I guess you have seen for the first time where it is used. So here it will be used. Um it is a raw TCP pipe. uh no headers, no no request response, just framework going both ways. So so after this connection has been established there is there's no need for any header or something. It will just continue till the point you stop them. Right? So that's why it's saying no header and no request.

[00:56:55]Okay. So um till this point what we have gone through is first vx store vx store is important where you how it things are working.

[00:57:09]Yeah. So vx store about the four concept which you know uh JWT token session versus the JWT how security or JWT will handle the unauthorization and forbidden errors.

[00:57:30]GraphQL is one of the things which you can replace it with rest. Where to replace it's up to you. uh they use a string and but will get the JSON data only.

[00:57:44]How to create a branch a newer branch and then merge them and then merge them and then give the detail again to the branch how SSC works, how websocket works. Till this point most of the things are theoretical because uh the topics which we are dealing with there are little different right so different in a sense we don't have seen too much of a coding in them so uh most of the topic are without coding so theoretical understanding should be there but you should know how the code is looking like you don't you cannot say that I have not coded. So I don't know how websocket will be seen.

[00:58:35]So if the question says get chat this you should know that and obviously switching protocol is there that means you should know that yeah we are using websocket we have a connection happening with two of the uh server and the client. If there is a word like handshaking so that means you should know what what we are talking about. So if there is something uh called as merging and uh conflict uh sorry not conflict check out and all you should know what we are talking about right. So so the code is there but yeah theoretical understanding should be there how you are going to handle it. We will not ask you to code. Okay. Okay.

[00:59:20]With that said uh we have also dealt with class guessing. Two things we have seen uh at the rate C.CD and at the rate C dome memoise.

[00:59:36]If you remember CD we have already discussed mostly there was one doubt how will you delete a memoise detail. Uh I told you to go to documentation and use it. Uh use the documentation detail. uh and typically told you don't we cannot delete if we don't know the function uh key name or something like that. I have tried to use one of the line which was given in the documentation delete memoise and the function which I have created for the memo. So I just have to give that detail and the the parameters which are given.

[01:00:16]So this is one of the way which you should know. Okay with that.

[01:00:21]>> Yes sir, I asked that.

[01:00:23]>> Yeah. So with that, so I have also changed one thing. So previously we have used in the radius uh caching environment.

[01:00:37]We can also use some other uh caching environment. One of them is simple cast.

[01:00:43]So when you see I'm not calling any radius C or something I'm just writing it simple C based on I am getting from the flask C flask C will understand both of the things and few others as well which is given in the documentation. So both will work typically same. But for the local or single processing development where where you have a single processing unit where you have only one server or a small case server you can use simple cast. When you are going forward with the red uh with the production level environment then you can use radius that is the typical norm which which uh they follow. So simple cast I have given in this code. uh almost everything will be same. You don't have to change anything. But yeah, but only the type of the casting will change. Uh here if you remember time out means 60 seconds, right? 60 seconds it will wait. It will not generate any new response. It will just show you the previous response which you have called for the first time.

[01:01:59]Even though it will call uh the it will terminal will say that it has been called but the data will be shared will be the previous data the 60 seconds ago data and yeah so difference between cached and memorize is c will c the whole uh whole function I guess I've not written it so whole function will be cached memorize will cast bas based on the user ID or defined parameter which you want to give it to. So user ID and year will be one of the parameter which you can which you can use and uh yeah for every other guy it it will be differently stored there as the memorized data and for 2 minutes it will show you the same data for every for each individual which has called for the uh detail.

[01:03:03]I've used app route here.

[01:03:06]I've used app route here. Uh I'm not using it here because I am calling that. Okay. So that's why it is not used in the route.

[01:03:20]Okay. Uh and I'm not giving any methods because all of them are get. Okay. So let's try them.

[01:03:31]Will be faster I guess.

[01:03:37]So, one second.

[01:04:12]Okay. So this is the URL. Now I will go to home so that I can check if cast is working.

[01:04:33]So now uh believe me this is cached and whenever I will uh refresh this uh it will obviously it will call here but this page won't refresh so it will be remaining the same till the 60th second.

[01:04:56]So please believe me I'm I'm not going to open radius inside now.

[01:05:03]Uh and memoise is something different.

[01:05:10]Okay. So what I will do is I will call report and ID and the year.

[01:05:26]So one and this. Okay. So whenever now I will refresh it will call here but it will show me the previous detail only. It will not generate a new detail and call it for class. Here also we can do the same.

[01:05:51]So but two has something different. It will also be showing the similar detail which has been given. The important part is two different um route. So if I go here and try to refresh hopefully I cannot refresh or what?

[01:06:18]Yeah. So I'm refreshing for report one. I'm getting the this the correct detail which we have got for one. And if I refresh the second so you can see the uh result here second I'm getting it for this guy also. So memoise is working like that. So so for both of them we have a different kind of data stored in the cache and it will show us those details even though it is only one uh in only one function but yeah it will store it for all of them. So yeah, memo and C these are the details. Delete memo you can use it and check it out. Uh because I cannot use delete in the URL.

[01:07:11]So that's why I cannot use it here. But you can use in the thunder client if you want.

[01:07:18]Just close it.

[01:07:25]Okay.

[01:07:27]Okay. So that's caching.

[01:07:34]Use the use case you should know. Use C.C for whole page or viewing caching.

[01:07:42]whole page mostly use cast.mmemo is when the same function is called with different argument and each combination needs to needs its own uh cash result just we have seen right. Yeah. So we can use simple cash or radius.

[01:08:12]Okay. Um I've given uh we have I guess discussed about cross origin resource sharing in in the last uh last week I guess. So there I have given most of the context how will you connect two particular server and client together using CS.

[01:08:37]Uh but I have given only one way. uh one way kind of code but there are different ways in the coding paradigm where you can use the code to uh make a side and connect your both both end together right so I have given the code here for you so one of the code would be let's say if we have a a specific U name inside the domain. So API is most probably the thing right. So we can directly say that API/ star whatever comes after API should be allowed after this origin. to local host 5173 after this origin API and then after that whatever it may come all the things should be allowed to connect to my server uh yeah so connect to my server or get the data from my server for that you can use resources and then inside you have to write origin And before that what we were doing was we were using uh origin directly. Origin equal to a list of uh details details or the uh client what we want us want to connect to us.

[01:10:20]You may also give what are the methods that are allowed. You can directly give it here. And also tell what are the headers that are allowed. So content type, authorization or any other kind of header which you want. So you may define these thing directly it is given to you but it should be inside a dictionary formatting so that resources may understand and then after that you can uh use them. So it will be key value pair mostly. So restricting in a key value pair and then uh use them for a client to server communication or client to server communication. Server to client.

[01:11:07]Yeah.

[01:11:10]So this is one of the things obviously you have to use course and then uh you can use it. But yeah so there are three other ways. Uh I'm I'm not keeping it in my code. I will be saying but yeah you can use it after the exam you can check it out two two ways which you you should know almost this is also the same only but yeah options I have added uh I have already given let's say these method option is one of the method HTTP method uh you can google it after the exam if you don't know so two things uh first one is let's say if you are giving let's say this is okay fine uh course is okay but you want to specify inside the function itself whenever you're making a response right so whenever you're making a response this is the end result basically right the last result which you send you can also give a header here header will take access control allow origin and which origin do you want to connect so if If you remember we get a uh error called as access control allow origin not allowed something like that or it is not allowed uh in the browser console.

[01:12:36]So you can directly write it here. Okay. Uh one more simpler method would be directly just write it in this way. uh JSONify whatever the message you want to JSONify and then after that we give a status and then in a curly brace setting you can directly use this. So the all these things which I'm writing in in these manner are same it they will work uh see uh sir like this means only this origin is allowed to read this responses uh response is only this hello but along with that we are saying this URL should only be allowed how to get this response and this status should be given when the uh the response is completed.

[01:13:35]>> Okay sir.

[01:13:38]>> So you can also write any other y but it should be inside the list. So because this is only one so it is one. So this is almost similar to this.

[01:13:52]So if you write in a curly brace and it it is access control origin it understand it as a header.

[01:14:03]Okay sir. If you don't do that like we we are not able to read them. Is it like by default it will block them?

[01:14:14]If you don't give them means >> if you don't give the access control allow origin response only passing JSONify hello and 200 every >> yeah it won't allow because if just this that means you have to define which origin should uh use it right so if you don't use course that means or don't tell which uh client should use our server That means it will give you error that uh I don't know who who is this particular client. I can I cannot uh connect with them something like that.

[01:14:52]>> Okay sir.

[01:14:58]>> Yeah. So yeah. So this is the header which which we are sending. So origin method header these are the keyword which you may see the error mostly will be blocked by cross course policy cause would be no course header in the back end the the question which you asked this one this would be the reason this would be the error this would be the reason the reason where we don't give the header uh we can directly set the which we have done here or yeah so directly connected here maybe so origin or star something like that uh let's say if still you get the error that means there is some uh error in terms of authorization where you are not authorized to get that particular detail. So you might have to uh add authorization header uh in that uh work fails in production.

[01:16:17]So here so let's say it it is in development side this will this might work because all all the things are working locally. Uh if we are going to the production level and still get a error. So that means you have to configure which client is ours and they can use them.

[01:16:35]So we have to define it explicitly.

[01:16:38]Okay. So course is in by enforced by the browser not the server. The server does adds the header to say this origin is allowed. Uh back end to backend calls are never blocked by the codes. So tunder client will not tell you that you are blocked or not.

[01:16:58]Only the browser side will tell you that you are blocked. Okay. you are not we are not allowed to use them.

[01:17:07]Okay. So this is course and on the similar ground when you go ahead with the course there is something called as cookie. So this is the last part which we have uh studied in the previous uh week right. So just read about the cookie. We already have seen plenty about them.

[01:17:29]Important thing is HTTP only. If it is true, JavaScript cannot read it.

[01:17:36]Yeah. Hopefully.

[01:17:40]Yeah. One more thing if I I'm not I don't remember if I told you guys this but or covered this.

[01:17:49]So let's say if you have a domain assume this is a domain uh and there are subdomains to it. So if it is a XY X doy.com or A.B.Y..com or Y.com ory.com this and that. So if there is a cookie set for this guy, it will work for this.

[01:18:19]It will work for this as well because it knows a domain. Now subdomain will also work for right.

[01:18:28]So for example, if I say x.y.com is set uh the cookie is set for this uh URL or the domain, it will work obviously it will work for it. But it cannot work for y.com.

[01:18:46]So before so let's say z.x.y is there then it will work but not for the previous one. So like this. So you may understand like this right?

[01:19:02]Uh yeah. So if you set for one domain, it will work for others also. But the domain should share the same kind of some subdomain uh in in the URL. So this is one of the things I I don't remember I have told you guys but yeah you should know this. You should know that.

[01:19:27]Uh that's about it.

[01:19:29]Um this is what I wanted you to know.

[01:19:35]Uh I I'm sorry I'm I'm not running the files and all but please go ahead and check them out. I've created these files 9th 10th all the things you can check it out and play with them. understand how the logic is working. You have one day uh I guess you have other exams also but yeah take a little bit time to this.

[01:20:07]Yeah. So that's about it for today. I would suggest you to go through the JavaScript content. Uh here you can see the sort nodes at least go through this if you uh I guess you have already gone few of them a few of you have already gone through this but go through this so that it will be a good recap for you how things are working and if you go through sort notes MD and end same notes uh it will be a a good idea to score good in terms of >> okay sir uh sir what would be the weightage sir mostly would it be from week 7 to 12 like that question I wanted to ask >> so I will not answer that anything else?

[01:21:15]>> Okay.

[01:21:16]Nothing sir. That's it.

[01:21:19]>> So I I cannot tell you the bage you know right. So if I ask one question on view xx or view. So I might have to also ask I have to add something from the view side also. So it is interconnected. So how would you decide weightage? Uh if I'm asking so when you see right token I told right so I I might have to also connect it with the cookie as well. So how how would you decide weightage it is interconnected?

[01:21:57]So mostly uh I would whatever they have said JavaScript view tokens web hooks I can tell you theoretical content would be means not completely theoretical but not to code or not to think too much about it. If you have seen the code or you have seen the content, you should know about them and you can answer it directly. That is your part of this uh yeah. So week 10, right? So week 10 you have these can be come coming under theoretical content 11 can be coming under the theoretical content 12 can be so I cannot tell you the weightage I don't know the weightage exactly eight can be coming from the theoretical content uh it it is interconnected mostly if it is a coding question so no idea about weightage No issue sir. I understood your context.

[01:23:15]>> Okay. Okay. So, thank you for joining.

[01:23:18]Hopefully, you will do well.

[01:23:21]Uh I'm exhausted. Sorry.

[01:23:24]>> Thank you, sir.

[01:23:27]>> Uh thank you sir. It was a good time with and get.

[01:23:33]>> Yeah. Thank you guys. Uh yeah, all the best for the quiz.