node is to allow you to use js outside of the browser so what is the concept of the terminal this thing you have called bash terminal on max for example and stuff so essentially you can use the terms interchangeably I'm not sure if actually there is a big difference between the terminal and console so basically it just gives you access it's like a shell access I'm sorry like tell me if I'm losing myself trying to think about how I would want to understand this a couple of years ago it's an interface in order to get into your machine like into your machine so I call my computer my machine basically I call all of these things machines they are essentially machines so let's do this so open your terminal and the terminal gives you access to basically your OS do you know where it is can you see this so on your bar you'll see this little icon that I'm dragging out just to show you here open your terminal please and mac is called terminal windows I don't know what you call windows I don't know what you call on the mac bring up your spotlight so we use command space and type terminal I'm trying to drag it up okay on the windows just open your from the start and type command from or command so you'll see your black screen pop up terminal it looks like this you'll tango again so for mac users might be a white screen for windows users might see a black screen instead of course you can also customize the color but that's a subject for a different day yeah so I like to wish myself have a wonderful day so it prints every time I open it but this is not the computer I use on a daily basis so basically what you can do is if you have already done install fast you can type the version this will tell you the version of node you're running it should be 10.16.0 that's a new LTS my things are very outdated so you shouldn't be version 8 but just for extra information you can have several different versions of node on your computer I use something called MVM so you can change between different node versions different node versions support or come in with so don't need to think too much about it right now but basically node is just the layer that you really on top of kind of so you have different versions you can switch between them depending on your project's dependencies so what your project depends on so you'll commonly hear that your project depends on a particular version of node and after and you generally don't hear a particular version of node and before because as it goes along you tend to get more things very cool so now if you want to get into the fun part you can type node and then you see this little triangle starts to open up it basically means you can start to write like you can start to write things in it so inside this terminal space you're entering into the JS environment so you can start to write things so now this is the fun part so like in the browser for example there was the console that we saw earlier that supports it out of the box that you can write whatever you want if you're inside the terminal you can also type node so that you can start to write or just do like little things and things like that generally what we do is I don't tend to go into this but you can start to write whatever you want like hi hey the name equals to name so basically you're replicating the same kind of behavior environment that you had in the console in the browser earlier this suggests to show you that you can access node on your terminal so we're going to quit it by typing control C two times or you can also type dot exit one of the most fun things is learning how to exit things in your terminal there are some inescapable things could be very messed up it's the most common question on stack overflow how to escape things okay there's a facebook group for check ladies if you get stuck anything just write one of us will reply and say hey this is the solution if you're going to find it on stack overflow okay so this is basically just telling you what node is it's just an environment that allows you to write javascript okay on the server side on your machines I call these machines so I won't go into details but let's try next basically you can do what we're doing like the let name because whatever that was from part one from the previous lesson to go into it so you can write javascript here now so that is just to let you know that hey you can do this now like in the console in the browsers oh I'm really cold now moving to lesson two so we're going to just try running a javascript in the command line just to show you how to do it let's create a new file name lesson2.js so please open up your vs code again I'm going to close this off we call it lesson2.js I'm going to delete my test app copy and paste this information into the file all these seem very dry right now but like oh no I shouldn't have gone through this but it's fine I'm going to go quicker because I'm not going to explain it but it's just to tell you that hey you can run this file in your command line so you're going to see in my directory in my terminal I'm here already so how I get into things is I type cd so when I type lls you can see all the files that are inside right now there's something called lesson2.js if I want to run it I'll just I have auto-complete so I'll just do this I type note.js lesson2.js so it will prompt me so basically what is happening is here I'm asking hey note please run this file for me it's a javascript file and then I get to do things like what's your name and I'll say my name is min min the clumsy and then it will tell me like hey your name is min the clumsy this is exactly the one from here small okay so this is basically just to show you go back and try you can run a script inside using note are you able to execute the file so you probably need to find the folder from inside your terminal first for me the what you want so remember I asked you all to save your folder in your desktop so what you do in your for-packed users you just type cd space 30 brace slash desktop you basically get to your folder for windows users for windows users so c-h-d-i-r c-h-d-i-r c-h-d-i-r I think it's something desktop this is why I wanted to skip this I forgot yeah yeah yeah so for for windows users so this is the folder it's actually in d-i-r in windows which is to show you the content of your directory d-i-r is the content of a directory probably should have added this yeah I should have added it actually there's a shortcut go back to your visual studio code you click on view view terminal actually you can right click open in terminal okay so it's here but it will not open into a separate one you run inside your v-s code so it's directly in the folder if I type l-s to find the files inside for windows you can type d-i-r then you can just type node lesson to .js this is just saying like to get to this window was it terminal or view terminal so it's right click here open in terminal I think all goes for everyone else to open the terminal just run the file for fun also l-s means so basically the concept of like it's just a way for you to traverse through your file folder these are just commands in the terminal normally developers we use a lot of that because it just makes life a lot easier than clicking folders opening, looking and stuff it's just fast to type so we can go very fast like this so basically what is the command line you normally will see things like command line interface l-i stuff like that it's basically just for you to type commands directly and the idea of a directory is basically just like where your files are these are just terminologies to remember sorry I didn't anticipate this complexity sorry about that I wanted to skip but I totally forgot then I was like once I started oh crap but now you know you can actually run the files index.js so maybe on index.js you do some calculations and stuff like that and you want to run the calculations and you have no index.js and you'll run the file for you remember to return so you get a value okay now for fun part let's go into MPM we're gonna carry on so the TAs will help out those who still need any help so how many of you have heard of the term MPM how many of you have used MPM everyday all day all night so basically you're just a package manager so what is happening it gives you a bit more not just about JavaScript but also the ecosystem that exists around it and why it's such a vibrant community right now it's because of sharing code so on MPM it is one of the places that allows you to share code anybody can push a package onto it try not to be evil I know I have friends that make funny packages just for fun as a joke so basically a lot of code a lot of the basic things that you do are usable like something as simple as like maybe calculating big numbers that can be a package something as simple as my other friend packages there are a lot of packages when you look under the hood there are like 5,000 that's underestimate there are a lot of different packages that each project uses so that is what we call the environment not environment we call the ecosystem of JavaScript it's not just about the language itself but also all the packages and modules that are available for you to reuse so you don't have to do the same thing again and again so something as simple as like cloning an object that can be a package on its own and that package can just be something that is 20 lines but everybody uses that because it's well supported and it's well maintained and you know it's pretty much relatively bug free because when you try to write a lot of things yourself especially as a beginner you'll write a lot of bugs into it because you miss all the catch you don't have to catch all and all that stuff so that's why more established people or just anyone that has written something that they think they want to share as a function they just push on MPM as a package so that's why we hear you're going to hear similar things like Yarn and Bower and stuff they can also but that's not so much a package thing but they can also help you do all these things so MPM is basically this thing we've got MPM JS there are also others some scandal going on so what's very fun about the JS community or actually the internet community whatever is that there are always some kind of gossip and scandals and this is happening and these people are betraying the trust of other people and it's just very exciting and very very fun so now there's some scandal going on about MPM because they're like you're losing your soul to money and things like all sorts of this stuff it's really fun so anyways then you'll be able to see this is what we call MPM so you can do it through the command line because there's an MPM CLI and think of the term dependencies as basically projects that your project depend on that's pretty much what it is you import these projects or other modules as your dependency so that you can use the code that they export so you don't have to rewrite a lot of things so that makes things very if anyone you have done Ruby on Rails and stuff I mean this kind of behavior is very common actually all languages so let's try to create a new MPM package we really want to create an MPM package we're not going to push it too so this is pretty much in line with the idea of being modular and not repeating yourself should we do an MPM package hmm there's not much value in it yeah so basically the idea is that you can create you can modularize some of your code and things into something you call an MPM package and then import it as a dependency in your other projects so it's quite interesting because you're basically building different Lego blocks and then you can plug and play into your things and stuff like that so that's why people like to write things like packages so this is an exercise that people who are already a bit more experienced in JS and stuff you can go ahead and try even if it's new to you just go ahead and copy and paste and run the exercise you're just basically creating like a new package JSON so I'll go into the meat of sorry for vegetarians I'll go into the meat of the part 2 right now which is to explain to you a bit more about the server things so is anyone not unclear about my explanation for MPM so MPM is basically just a way for you to manage your dependencies of your project because you want to reuse code that other people or yourself have written that has been pushed onto the internet with a specific name so you can't have the same name as another package or else MPM will clash for example so something like React is an MPM you also use it as a MPM package for example React Router you install it as MPM package all sorts of things that you can use as an MPM package so you just write it okay so I believe you touch a lot more about that next week so then you'll get more familiar so let's move on to lesson 4 intro to express JS so basically what is the idea of express so let me match it just yeah okay so basically what is happening nowadays is that you don't just write an index.html and then let it sit like a static file on the internet you do something called serving your files you serve your static files you serve whatever so express is just a very lightweight framework a very lightweight framework to do that for you so you can write things like routes you can write a server to serve your files, your projects and stuff like this it's very powerful depending on how you're using it it's very commonly used as well so ideally basically if you want to do web development you should get familiar with the concept of express there are also other alternatives but express is what is shipped together with node just by default it's a standard defecto one now so basically the idea of a server is just a machine that serves you files okay the term is kind of unintuitive but it's pretty much just what it is okay and so one of the reasons why a lot of things are moving now to the server for example in servers you can control the powers of those machines that you're using I'm sorry I keep using the term machines but I really like it so their browsers have limited processing ability so if you want to do things that are really intensive for example go through a lot of data and all that kind of things it's better to put it off into into a server somewhere wherever you want to locate it to do all that processing for you and then simplify the response and give it back to you because you keep doing that in your if you keep doing a lot of very intensive activities inside the browser like your users screen will start to hang, it starts to slow down when you click something it just loos forever all that kind of stuff so you try to move all that kind of behaviors where possible or where meaningful into a server but that depends on your network time as well there's always some kind of playoff and judgments that you're doing over there when you're deciding what to move to the back and what you're keeping in the front okay I use the terms freely so I'm not sure if maybe sometimes the term is not very clear so maybe the term like client, do you guys know what it is? okay so client is not really like a person it's not like someone you're serving whatever client is basically just a way for you to access something it's very simple but these are very regular jargons that I use like client client can be like a browser stuff like that so it allows you to access things so that is what we call clients so you can have a multi-client application and then API I've always found the term API is very hard to understand I'm like what is the application programming interface it took me forever to really understand fully what it's supposed to mean I just know what the API is but I'm trying to break down the word application programming interface and I'm like what does this mean like sometimes the terms are really like dry like who names this stuff but basically the API is just a way to for a service to say hey interact with me this way so when you have two different services or two different things you want to two different like entities that want to interact with one another the API will expose itself to say okay I have I give you some methods some functions which is like change my name change input data send me stuff you can do it in this way that's generally what the idea of an API is it's like a unified way of interacting with the entity okay so you see the term API across all the different things you might see with regards to like endpoints which is basically like a maybe a set service as APIs you see like other things will have APIs so this is basically the core idea of it it's an exposed protocol it's an exposed set of ways of interacting with the entity so let's go into Express.js so there's there's exercise 4.1 and exercise 4.2 exercise 4.1 is more manual which will show you how to like write it from scratch copy paste all of that so try this when you're at home today we're going to use something called Express Generator which will generate all these files for you it's just to remind you as well that people have created a lot of tools and packages it's another package to make your life easier to generate all these things for you okay so you can write it from manual if you like if you're one of those people that enjoy writing this stuff or you can jump straight to Generators like for example if we react create react app is also a generator it just creates all the files for you and then you can run with it okay so let's go into your terminal this is where I need to sit so you might have noticed by now already that the VS code has a terminal in it if you like but otherwise you can also open it as a traditional terminal by command space type terminal for windows I always forget how but anyways I'm just going to do it here so I'm familiar with it here so what I'm going to do is first I'm going to create a directory so this command make directory means to create a folder for me it's very simple there are all these jargons but eventually you realize kind of what they mean it's just like hey make a folder for me okay make there so I'll make a there called my app too okay and then I'll type cd which is basically to like the city's time for change directory I don't know but it basically means to go inside that folder so after you make there please type no spaces in this term I'll type cd my app too okay that means I've gone into that folder so it's essentially the same when you're opening the very traditional folder like the finder like this you're essentially doing this inside your command line you're going into like folder stuff you're just doing it through the command line it's the same what you call this kind of interactive things are called GUI graphical user interface it just makes interacting with the computer a lot easier for most modern humans modern humans not ancient humans sorry so it just makes dealing with things in a graphical manner much easier whereas traditionally actually in the past you can just type everything like this so it's the same thing typing cd is the same as me double clicking into that folder here for example okay is everyone here is everyone inside the folder called my app too or whatever you named it so you should be able to see this is like your machine's name your computer's name and then this is the folder's name and this is just my username so you're all in it cool cool in it to win it who is in the folder already and so the rest I assume you need a bit more time are you in the folder okay cool so that's two thirds any questions in the meantime I know this part is running a bit faster but it's also the slightly more confusing part when you think about creating a web application when you say creating things like css, html all that kind of stuff it's very intuitive because these are things you see but now you start to go into the parts which are a bit more abstract but serve a very good purpose too so these things like servers how to write routes and stuff like that takes a bit of time to grasp if it's a new thing to you so if you like to go ahead already you can go ahead and install the express generator so type mpx express generator you can also just copy and paste the command so you don't do it wrongly remember to copy and paste it line by line not together you need to do mpx express generator first let it run and then do the npm install so type enter and then npm goes off to do all this job so once it's done, it has terminated then you'll get here does mpx work for you all of you so basically when you type mpx express generator you're saying hey go and fetch this package for me that's it you haven't installed it yet it's just saying go to the central repo where it is an npm scratch that thing for me mic okay go ahead the npm the depot but you haven't, have you installed all this stuff yet uh let's go up okay let's go down I cannot just copy and paste you can just type npm start don't need to type the depot npm start enter oh that's because we're windows can you allow access it's supposed to say it has started do you mind if I I'm not familiar with windows though yes mpx express generator you're inside the file, you typed it, you installed tried to start in in vorona windows it just stops at the bin does the depot command run on windows that's the problem I don't know I think okay just open your local browser and see if anything happened there local browser oh yeah open the browser type here type here go to localhost 3000 oh sorry what you can go here copy and paste this address it works already it's just because the debug thing maybe the mic terminal specific thing but npm start is everywhere so I don't even need the asterisk no that just means start which means all thank you is this installed which was your last yep it means it's done so you can type npm start now this is mine you might see like nothing is happening I was like what is this that's fine and then you go and open the localhost 3000 okay I got this after the mpx after the mpx express generator there is this oh you need to type sudo so we need someone to help you because it means so sometimes your file directions are protected so that could be the case one of the instructors will do so I'm so I'm going to carry on I see a lot of people have already started going on with the express generator and stuff so let me get there as well so now that we are here we do mpx oh you need help not sure oh that's fine it doesn't just type npm start okay so what is happening is when you get to mpx express generator you can also mpm but it's fine use mpx mpx express generator just goes to fetch that particular project for you that module and then when you type npm install it will start to unpack and install the stuff into your computer for you it will install all the project dependencies for example and stuff like that and then you will be able to then run it so it's a very important step to always remember when you install when you take a package already you fetch a package you must remember to install it because it won't like go and fetch all the other dependencies that it runs on because if every time it ships it ships as a gigantic thing with all the dependencies that's going to take forever so this is just a more efficient way of doing things okay and also to control basically the source of the code so for those with windows this debug thing will not work for you so just type npm start that's good enough spin this up so this is the joke with my cat npm installing because sometimes when it's really big it takes a long time so you just kind of hang out so now please go to your browser like some of you have gone already copy and paste or click this address sorry ignore me oh I haven't started it so type npm start then you'll see like oh wow why nothing like happening but actually it's working okay so yes I'm packed it no this giving it to you so what you're going to see is under this folder called myapp2 this is what fetching the express generator has done for you it has created essentially like a skeleton that you can use to put in your code to serve it so you just spun up your first server exciting times these are milestones you know like little things they're super important woo it's like you created your first like index.html page you started working with CSS created your first script spun up your first server even though it's just on your computer the same concept eventually you take it and then you get a computer sitting elsewhere to spin that up for you please go to express.js and read the information on the generator it just makes your life a lot easier and essentially when you open the term localhost 3000 localhost just always refers to the current computer you're on okay the current machine that you're on is called localhost and the 3000 is the port number that exposes this out so sometimes they'll tell you open localhost part 8000 port 5000 96 that's just a port okay localhost means your current machine so it has been configured right now to show it to you on 3000 so you see it on 3000 okay that's just where the information is coming out from I'm sorry I'm running over time but we are getting to the last part of things if anyone needs to leave early can you let me know are you guys good to stay for a while more I'll try to make it faster so this is the fun part where basically you just kind of run off and create your first app okay so you have spun it up already it's ready for you to fiddle with and include your to do app in later any questions for me at this point this is where we bring together the part 1 and part 2 from today into an app any questions who is still listening to me can you raise your hand who is not listening to me can you raise your hand this is the grand finale so right now we are going to be building your web app it's not just the index.html page this comes with a server and there are routes and things you can change and you'll start to be able to see the difference between actually the page of a server because it can be different places but over here this is a back end for front end I call it bff I'm really easy okay so open your vs code you close all the irrelevant stuff oh crap don't close your terminal please because it's running so move the to do list file from earlier just now into this application let me show you how okay it's the same thing but I'm just going to open a new one so it's clear so inside this vs code it is only the express skeleton with the static file serving everything available to you here so there are some things that you don't have to touch bin you ignore no modules are just where all your dependencies are installed don't go into there it's like a never ending hold there are public public assets that you want to serve like specific images and stuff style sheets you can write whatever you want in it it will be applied to your stuff views are essentially what we called your index.html so these are what people see we call them the views over here it's jade it's just a templating way so there are many ways to do the same thing different people have different opinions some people like to write it specifically some people just like to use templates so they can shorten the amount of code they write and it will be interpreted for them it's jade interpreted okay it's interpreted so if you go into localhost 3000 you essentially see this you see it says the title is express welcome to express this is essentially what is happening inside the jade thing okay there are different ways of doing things for different libraries on our frameworks so over here their preference is just for jade. I personally don't use jade but I think I can kind of guess what they're going at so basically this is just saying hey here's the blog content my battery my I want a h1 element that is equals to the variable called title don't get scared when looking at this right now because this is just a new way of writing html it's just supposed to reduce the boilerplate code okay so you just need to know like what is happening is that app.js which was created for us is serving this file to you right now it's serving you the index.jd which is like an index.html okay where that is happening it is doing this okay so what is happening over here you can't write these kind of things inside the front end generally it will happen in the future right now you can't write it like this this is how you write backend stuff so if you want to say like hey I need all these dependencies inside usually you start with the app.js that's a very standard thing to use these are each of them you are requiring each of these these modules and they are all installed for you because you have package.json that specifies what your dependencies are you need to use the express dependency because it's the generator it's not actually express itself it used express you want to install jd which is your templating one Morgan and cookie puzzle and things like that every project that involves npm will have package.json which will help you to control your dependencies and keep track of including the versions and stuff like that it also helps you to specify your start scripts so start for example under the hood users node it goes to node actually opens up your bin okay so it just serves whatever is inside here don't let you know too much about it just know that when you type npm start it will be served so generally when things are a bit hidden from you we call this magic you just kind of know what it does really I'm not curious Ruby and Rails have a lot of magic base which some programmers at the beginning is really good and it's very easy and all that stuff but sometimes when you try to debug things and there's too much magic you need to really dig into it and when it's magic it's like where do I start looking but this is just one easy way to get started with express the express hosted so when you go on app.js you require each of these packages which is familiar because you'll see it it either comes together with express or it's from your package.json writing like this require is actually looking for a local route a local file so when you write things like it's okay to be lost now because this is a brand new concept okay you're going to see this as you go along just remember the way of writing this is what you write on the server not on the front end scripts so this bunch are just the dependencies that you're going to be using in this file to say hey I require these dependencies for this file just bring in for me then you can bring in the other static files that you have written like routes for example so you'll load these two files routes and users okay wow it's getting route later so then we will use this to create a reference to the express instance that we are using right now so it's saying hey run an instance of express for me I'll call it app so this app is basically a copy of what is going on with express so then you need to set some views for example and we go it through this directory called views so this is just like a global thing so you need to look at the photo called view and then you set a view engine called jade that's just what we call engine setup yeah genuinely I don't do and then you can require and configure stuff so I want to use a logger my logger environment I want to use a development environment things like that and then you will also app.use what comes out of this method of express.json if there's any one point where you don't know what's going on you can always do something called debugging or console logging debugging sorry debugging is for front end console logging and these are pretty much very standard things so when you want to declare to express the static route for my static items it will be you tell them hey please do it here this is the folder where my static assets will be things like images and style sheets and stuff anyway there's a different concept between static files and non static files okay and when you're doing what you call routing, routing is basically just finding directions in the photo structure so when you're looking at a web page and you see so much slashes as well it's pretty much the same as you looking on your own computer in the viewfinder and finder to see all the slashes you're basically just navigating between things and files just that in the browser there is a funky way of interpreting your URL with the slashes you can insert index and all that kind of things but it's actually the same concept what you're trying to do is you're trying to get to something that is specific you're trying to get to a place okay and these are just standard error handlers that they create so that it will render error if something is wrong and then in the back end we definitely need to do things like module.export so it's like if you write in the more modern way you're going to see things like export default modules, blah blah blah stuff like that okay so let's get to the more fun part and the less boring part of stuff so this is the what you call the index.html of things so there are two things to note over here because right now what you're seeing in this project encompasses both the front and kind of the back end of stuff that's not really the back end how do I explain back end for front end yeah but this thing about okay just back and front end so this thing alone is having both okay so your views are basically your front, your public is your front as well and then your routes and all the things that go on behind that talks to APIs that fetches information for you all of that you call that the back end so when you're working on a project like this whatever you're changing on the front end when you refresh it will change hello when you refresh it's going to update itself but when you're changing things on the back end you kind of in this instance you kind of need to re-run the application you need to kill it and the npm start again for the things that go on in the app.js because you're affecting it itself you're not just affecting the files that it's serving you are changing stuff I know it sounds very abstract to you right now but it will start to clear as we go along as you go along so over here if we say what is referring to here in this template is title that's because over here I have to explain okay I think I'm going into too much details for you right now but anyways what is happening is when you are telling a router hey how to get where and what router is just how to get to something and if you do if you just type like this it essentially is evaluating to this which then gets here and this will tell you to hey response rendered what title welcome to change the variable welcome to Singapore you're not going to update because it is on the back end but when you kill it and you do it again it will come back I just wanted to show you a little bit of the difference between the so remember control C is to kill stuff on your computer and then you start it again and then it will update itself based on what information was fetched from the back end to push to the final okay so that's just a bit of distinction when you're feeling around with things yourself so now you're free to go and try to add this stuff so please copy your html and lesson .js into the public folder over here can you put it into the javascripts just put here yeah so just copy and paste this whole thing into this one okay I'm just going to drag it in boom boom yeah you just drag and drop two files html file check html and html and lesson file js into the public folder right what is in there then you can start to you can try to show the files in the browser no need to restart oh no oh no I need to go to the bathroom okay I'll be able to serve your lesson 5 files from your local host right so you just need to go to the local host colon 3000 and slash lesson 5 from html so you should be able to see the file right okay is anyone having issues with loading the file no okay you do need to restart the server so you just pop it, controls the start the server and then start it again and then you should be able to see the file yeah so inside whenever you make a significant change to the files in your local application you do need to restart it we don't really cover it over here there are actually ways for you there are ways for for you to do development work where once you type changes it will actually restart the server but it's not the scope of today's lesson so yeah okay yeah yeah so so so so so so so so so so so so so do I go to this the console and type html yeah you restart the server and then you should work you should work with so I should be looking by you try to do the you try to do the you try to do the gs you try to do the gs so so so so you so so you do need to reset it so do you think I can send so is anyone not here yet you close in with one You shouldn't on it man, I'm serious. Does everyone kind of get the idea that your server is the one serving your files and exposing them on the route? I'm going to try to wrap up in the next 10 minutes where you're going to try to build this thing yourself. I'll also be talking to you a bit more about APIs. So this is really the last leg. I promise I'll try to make it faster. But these are interesting stuff. It's a bit more dry but this is where things get very powerful. When you start to be able to write APIs and use them and all that kind of information. So what you should have now is you should have an expose on your route lesson 5, your to-do list from previously. 5.2, we're basically going to build an API and when we're working with APIs, we use an app called Postman. Most of you have installed that already. It allows you to test, try and use routes, endpoints. So inside your folder, please go to routes and add a new file called to-do.js inside the routes folder. Routes folder is this one. So write to-dos.js and then copy and paste the file, the information here into to-do.js. Remember to save the file app.js and add these two lines. It's also to put the route import here. So it's together with the others. And over here you see, you're basically called to-dos. This is not a browser route. It's an endpoint route. Build the server and restart it, okay? Like I mentioned earlier, when you change front-end things, what the server is serving itself, you can just refresh and you will just reload. But when you change things on the actual server, the app.js, you need to restart things. So command or control C in your terminal and then run npm start again. Nothing will change here. Start your Postman app. Postman is this one. Click import. You're looking at it right now. Mike has included this file called to-dos.json. Json is just like a JS kind of information object. It's just a format. So on your Postman, please open up to this folder. This folder is not inside the app itself. It's inside the folder with all the nodes. Okay. This is just a collection of, it's like a Postman collection so that you can share this kind of endpoints and information between developers. So click on this file and open it. You click on collections over here. You will see the three new endpoints that were imported automatically. You can write them yourself here as well if you know how to configure them. But the easiest way to start and to share between colleagues is really just to either have the same account, enterprise account, or you just import their collection. So this is what you call router endpoints. Not router endpoints. You call it endpoints, API endpoints.  So this is not the same path as the one in your browser. Completely different things. Please don't mix them up. Over here you need to write your HTTP method of what you want to do. I'll explain later on a little bit. You have things like put, post, delete, stuff like that. And so this is how you're getting information from a specific endpoint that is exposed to you on the internet or on your own computer. That's how you interact with it. Again, this route is different than the one that you see on your browser. But right now my server is on localhost 3000. And remember we wrote here slash to dos. What is happening is that it's showing up here. So you'll go to read this file. I mean it includes it, not read. This one, which then define on the root of to dos what happens. And if I say for example on postman, this is a get. It will then refer to the router method get and execute what's inside on this one. So let's send it off.  Okay, and most people still with me. So this is extremely powerful because this is how you deal with information.   And so like for example, if you want to build an app using YouTube, you want to get the content from YouTube.  Like to fetch videos or search for videos. They will return you usually in a format that looks like a JSON like this with the links, the names and all that stuff. And then you'll get this information and populate it inside your view. Okay, and view is something like the index.html, the jade. There are several different kind of ideas, but view is essentially what you're seeing. So this is an extremely powerful concept. When you get familiar and you're able to use it, you learn how to use APIs. That's really where you get up to the next level. In building a full app. Or you can choose to just specialize and be a front-end, pure front-end developer. So fun that you don't need to touch APIs. But generally that's not what happens. Okay, so what you have just done is you have created a new what you call a REST API for managing to-do list. So isn't that exciting? You just created like an API, a REST API. Is it too dry to be like exciting? I don't know, I find it really exciting. So I was there. So just with more context. So what we have done through review on the last part to do this API is actually quite close to the tenfold task. The second of the two tenfold tasks that you can choose from is the second one which is the back-end API. So we see which is, I think you're not wrong, it's the fast timing stuff. So we can actually use that. So there is a basis to kind of work on the back-end task. If you like, you can try that. But I understand not all of you will be able to do that. So which is why most of this tutorial of REST workshop is mostly focused on front-end. So that last bit is just for those who might be interested in the back-end bits, right? And then there are ways to fetch things more specifically.  So there are two ways. You can submit the ID number in the body or you can write it in the path. So if you want to test it with Postman, you write 0. But you need to, these are things to challenge yourself if this is something you're already kind of comfortable with then in order to fetch one particular part of the information maybe just this one object and not the entire collection. Okay, so let's round it up. Thanks for staying with me. So basically what exactly is a router? A router is just something that redirects you, okay? Directs you to this, directs you to that. I call it simply like this. So on the endpoints, you have some... The concept of CRUD and REST are not interchangeable but they are very... You can basically think of it as a similar thing. We call this endpoint... We call it something like a CRUD app if you can do four basic behaviors which you can create it, read it, update it, delete it. And there's kind of like a bit of a corresponding HTTP method like we saw just now on Postman. Remember to always change the method that you're trying to use on the endpoint. When you're writing your thing, you write router.get. It's different than writing router.post, router.put. It's different. But it's very easy to forget when you're writing the routes and stuff like that to forget to update the method. So remember, so then you get things like router.post, router.get, router.put, router.delete. This is basically just a read kind of function. This is a destructive one that delete stuff. Put is when you're trying to update something completely. Post is usually when you create or when you update something. Okay? If anything is not clear, please feel free to post just on the TechLadies Facebook group for questions. Say you're referencing this slide, like I need some clarification. So that's it. You build like a full app which is from the front end and the back end. Okay, that's like a great thing to be have done in five hours. So I just want to introduce you a little bit more of two other concepts and then we're totally done. One is open source, the idea of sharing your code with the rest of the developer community and the rest of the internet. So a lot of things are open source. React is open source. All that kind of things are open source. Express is open source. It is done by a group of people, sometimes sponsored by companies as well in order to put it out there to advance the computing and the internet for us. So that's what it's called open source. Okay, if you hear these kind of things, just remember. So it's basically like people taking their pro bono time, most of them to contribute towards projects and stuff that everyone else can use. Some people are paid to be specifically open source. That's fine. And then like I mentioned earlier, what is the difference between the concept of ECMAScript and JavaScript? ECMAScript is basically just a standardized version of JavaScript that is determined by the ECMAR International, which is a group of people that come around and say, like, oh, I want to add these features into the stuff. It goes through a lot of a lot. So you submit a proposal. It goes through a lot of around evaluations, everything. It's involved with people from the industry. They get their input, stuff like that. And then sometimes the methods will then make it into the language. Okay, so you'll start to see things like ES6, ES7, whatever, the kind of stuff. It just means a different version. You just need to search because sometimes it's not fully supported by the browsers yet. Some browsers are slower at adopting new standards than others. Chrome, Firefox are generally very well on top of things. If something doesn't work on a particular browser, you can go to this website called Can I Use, which you'll then check, for example, array.4H. Can I still sign this? 4H, okay. It's just 4H. This is a very basic one. So almost all browsers were created it. So then you can see, all right, IE Edge, all of them support this. You can even check things like CSS, selectors, whatever. Then you can see, like, oh, sometimes some things are only CSS Musk, for example, for the designers here. They're only partially supported by Edge, not supported by IE, and things like this. So remember, like, technology is like a whole bunch of moving pieces going on at the same time. It's not static, yeah? And that's it. But I hope you took a lot out of this. There's a lot of things to digest. So I hope we have tried to equip you with different pieces of information. So when you try to do the assignment or you go out into the world to learn more stuff, you will be able to understand them with a broader picture. Okay, thanks. Oh, no voice.


Now we are doing the derivation for cantilever sheet pile, first case is your for granular soil. Now as I said there will be a point of rotation in case of granular soil for cantilever sheet piles. If this is my point of rotation O, the next stage how this derivation has been derived if I, so this is acted upon by horizontal load H k p minus k line, this is your horizontal force, this is your horizontal force. If you look at this diagram complete diagram and now if I take it the original what I explained earlier, this is my cantilever wall and there will be like it is your dredge line. So it says it will rotate some point at point O, this is called pivot point acted upon by horizontal force. So then as I said earlier, as I said earlier if it is rotate, if this cantilever wall is rotating at point O, so what will happen? The top part if I divide into two parts, one is your above the point of rotation, other is your below the point of rotation. If I say above the point of rotation this wall is moving away from soil, suppose this is my soil mass, so that means this part will be active, this is your passive state and if you look at the bottom it will be reverse and this is your passive state and this is your active state. So generally passive state we write k p line, active state we write k a line or k a, we write it k a. Now the same principle if I apply here, let us consider this is a cantilever sheet pile wall and this is my dredge line, dredge line and below this there is soil mass. Now this is a point point O, now above this dredge line there is nothing, so what will happen if this wall cantilever sheet pile wall, now it will rotate at point O, it will rotate at point O that means if it rotate at point O what will happen above this, this is the passive state and this is the active state. Now I can draw this is my k p line, if I draw the passive earth pressure it will be kind of like this and active earth pressure it will be kind of like this. So that means I have taken consideration of passive state and active state up to at point O, up to at point O. Now this is the passive line or passive state of the soil and this is the active state of soil that means always remember k p is greater than k a, passive state is greater than your active state or passive earth pressure is greater than your active earth pressure.  Now come back to if this is your first diagram, second diagram, third and fourth diagram, now come back to second diagram, in second diagram what is supposed to be happen, this is my point O, this is the point O look at the point O below point O what will happen below point O this wall is moving towards and this part is it is this wall is moving away that means if I draw a line here somewhere else below this, this is your active state and this is your passive state, passive state. Now same concept has been applied here if I draw it completely below point O below point O that means this is my active state or active earth pressure will act this is passive earth pressure will act and I will remove the pressure from O to dredge line because the concept below this is different than the concept above your point O below this point O it is different passive state active state above the point O this is passive state and active state this is in a reverse. So above point O this has been this has been neglected and below point O it is considered so this will be your k a line and this is your k p line. Now for complete derivation it has to be superimposed both the cases has to be superimposed. Now this has been superimposed what happened this is k p and this is k a so this will be k p minus k a line and this is your k p and this is your k a in this case this is your also k p minus k a line. So now the diagram has been drawn so this point is your point O this point is your point O now next question you can ask yourself will it be the failure line will it be the failure line no why because from passive state to active state soil cannot transit in the all sudden transition cannot be occur sudden transition means if you look at point O if you look at point O all of sudden it is in passive state other side then it is moving moving and it is changing then all of sudden it is changing. So this transition is not acceptable this transition is not acceptable that means there will be a smooth transition from one state to other state one state of failure to other state of failure there should be a smooth transition. So that is why it has been drawn so that it is slowly slowly decreasing and it is achieving this other failure transition. So now this is your final failure mode of cantilever retaining wall below means in granular soil in granular soil having a point of rotation O above the base now how it looks it looks like this now these are the assumptions for particularly considering not non-linear actual case of this how it it should be looks like it should be a kind of curvilinear it is a curvilinear it has been approximated to simple straight line or may be linear failure you can say it. So if I take it this is my final this is my final failure surface final failure surface of this cantilever retaining wall cantilever retaining wall having embedded in granular soil that means it is starting from one state to other state there is a smooth transition this concept has to be used for derivation of cantilever sheet pile wall for derivation of equation that means what is the capacity of cantilever sheet pile wall in granular soil if I remove all one two three I am keeping only this part final form of this equations. So we will start this derivation how it how the derivation has been made now instead of suppose I say there is there might be a soil mass above the cantilever there might not be a soil mass of the cantilever as I said cantilever sheet pile walls are two types one is your free cantilever other is your free cantilever other is your simple cantilever pile cantilever sheet pile in case of free cantilever there is nothing in case of this is a typical case of free cantilever so both the sides there is nothing this will this will this stability will be achieved by means of your embedded depth but the moment I say that cantilever sheet pile that means it has been embedded at one end it will retain it will retain your soil mass it will retain your soil mass now if I modify this as only this is case of free cantilever now I am saying that only cantilever sheet pile wall how it looks this is the cantilever sheet pile now this is your dredge lane line dredge line now it rotate like this now here at other end here at this end it is retaining soil it is retaining soil because this is not a case of free cantilever sheet pile so it is retaining the soil now how the failure surface will be there if I take this principle of this look at this this derivation of this failure surface below the dredge line for free cantilever sheet wall has been taken it has been taken it has been put it here now if you consider the top part as it is retaining the soil mass it will generate active air pressure up to this now this is the final form of your this is the final form of your soil mass this is the final form of this failure surface of cantilever sheet pile wall one side it retain your soil mass one side it retain your soil mass now you can say that with these conditions what are the most adverse condition may occur while the derivation the water table may be at the ground surface may be somewhere else at the ground surface so there are conditions are there but this failure surface whatever we derived from free cantilever sheet pile wall that has been applied for your cantilever sheet pile wall now coming back to your complete derivation if I draw it this is the dredge line now below this let us say this is my point of rotation now let us say at any distance below the surface ground surface at the top there is a water table this is a symbol of water table now I am drawing the pressure distribution diagram a b now this is your p a this is the complete failure surface how the derivation has to be done now if I take it this is my dredge line this is the water table so let us say this property is gamma phi k p and k a and below the water table the properties are let us say equinoid bunker so this property I can write it because water table is there this will be gamma prime phi prime k p prime and k prime now let us say this distance is h 1 and this distance h 2 and a b let us say name d this is point o this is your c now it will be acted upon by let us say a resultant force this will be your p a active earth pressure prime let us say all these forces this is your resultant force r a particular from this to this this is your resultant force r a it acted upon by it acted upon by say suppose say at a distance y bar y bar from point o now this distance say a because why I am naming this derivation has to be made for this to find it out what is the capacity what load this wall can take this is your distance a let us say from here to here this is your distance y now this to this let us say y minus z and this is your distance say z this your c so now if I put it like this this to this let us say it is p p prime and this is your say p p 2 prime and in between if I take it this pressure distribution will go like this so in between from o to this I say p p 1 prime now this failure surface concept has been taken from once again I am saying from free cantilever sheet pile to cantilever sheet pile wall and this below this whatever this free cantilever sheet pile the failure surface it has been adopted and this failure surface is drawn now this I put it most adverse conditions what what may possible in most adverse condition may be possible during rainy season may be this water table fluctuate from ground surface from the below from the dredge line this water surface water table may be raised to your ground surface so now with this complete of this what we are supposed to get we are supposed to get what is the capacity and what distance d what distance d this is your complete distance d means I should know depending upon the capacity how much depth how much depth this cantilever sheet pile can be embedded below your dredge line or can be put it below your dredge line this is your output this this parameter to be required to find it out as well as the capacity as well as the capacity h what capacity it can take these two parameters to be find it out so k and k p is your rankine earth pressure coefficient so let us start with this p a for this diagram complete if you look at this for this diagram this is your p a prime so what is your p a prime p a prime is your active earth pressure from a to up to your dredge line active earth pressure from a to up to your dredge line so p a prime is equal to k a gamma h 1 plus k a prime gamma prime h 2 now what is your p p prime p p prime is your effective passive earth pressure at the base of pile effective passive earth pressure at the base of the pile this is your p p prime which is equal to gamma prime k p prime minus k a prime into y basically earth pressure is your gamma either k a if you look at how the derivation your earth pressure will be a k a k gamma h h is your distance gamma is your unit weight of soil and k should be either k a or k p from this concept it has come here because water table is lying here below this this will be a some earth unit weight that is why it is gamma prime k p prime is your k p prime minus k a prime as i derived here this is a k p minus k a and the distance will be your y now it will be gamma prime k prime y so k p prime is nothing but your k p prime minus k a prime and k is equal to k p minus k a now what is your p p 1 passive earth pressure at point o what is the value of p p 1 now p p 1 prime is equal to at point o it will be gamma h 1 k p minus k a and k is equal to gamma plus h 2 plus a gamma prime k p prime minus gamma prime a k a prime so it will be your gamma h 1 k p gamma h 1 k p this diagram plus gamma prime k p prime h 2 a this is your h 2 plus a up to this how much it is coming minus gamma a prime a k a if you look at a this part will be your active state k a k p and minus this is your active state because this part is also soil is there so this part will be active so gamma prime a k a prime now similarly you can find it out p p 1 sorry p p 2 prime p p 2 prime which is equal to nothing but p p 1 prime plus gamma prime k prime y gamma prime k prime y which is your gamma prime k prime y gamma prime k prime y which is your gamma prime k prime and y is your this distance it should be added if the value of phi remember if the value of phi for both the person is same for both the person is same value of phi phi value then it will be your k p is equal to k p is equal to k p prime and k a is equal to k a prime now these are the values you get it p a p a p a prime p p prime p p 1 prime p p 2 prime based on your earth pressure distribution diagram now you have to find it out what is the result and earth pressure what is the resultant earth pressure so let us say r a is equal to resultant of all forces above point o r a is equal to resultant of all forces above point o above point o the point o is located at a distance a below your dredge line point o is located at a distance a below your dredge line so now the pressure at point o is 0 now the pressure at point o is 0 with this concept pressure at point o is equal to zero with this concept a gamma prime k p prime minus k a prime is equal to p a prime is equal to p a prime p a prime minus K a p a prime now a you can find it out the distance is equal to p a prime by gamma prime and k prime k prime now this distance z now what are the other other parameter this distance z has to be find it out before before finding out r a this distance to be find it out in terms of k a and k p now distance z you can find it out so distance z can be find it out z you can get it by taking summation of force in horizontal direction is equal to 0 now r a this force this is acting in this direction r a plus your p p prime p p 2 prime into z by 2 into z by 2 if you look at here p p 2 prime and p p prime p p prime into z by 2 this is a triangular distribution this will act with a z by 2 plus minus p p dash minus p p dash minus p p dash this is your p p dash minus p p dash y by 2 is equal to 0 from this you can find it out z is equal to p p prime y minus 2 r a by p p prime plus p p 2 prime now how many unknowns there are 2 unknowns you do not know z you do not know r a so that means additional equation is required that means you take you take movement at the bottom should be 0 so taking movement at the bottom is equal to 0 now it will be r a y plus y prime plus z by 3 p p prime plus p p 2 prime into z by 2 minus p a prime y by 2 into y by 3 is equal to 0 that means I have consider there are 2 unknowns 2 equations is required 1 is your force in horizontal direction is equal to 0 other is your movement taking movement at point but the base is equal to 0 then you can find it out what is the value of this by simplifying this you can find it out 6 r a y plus y bar plus z square p p prime plus p p 2 prime minus p p prime y square is equal to 0 now with this putting this value of z putting this value of z here to here now this will be a fourth order differential equation will be derived now this fourth order differential equation if I write in a form it will be y fourth plus y cube p p 1 prime by gamma prime k prime minus y square 8 r a by gamma prime k prime now it will be minus gamma 6 r a by gamma prime k prime whole square into 2 y prime gamma prime k prime plus p p 1 prime minus 6 r a y prime p p prime plus 4 r a square by gamma prime k prime whole square is equal to 0 this is your final form of equation this is your final form of equation in a fourth order differential equation sorry fourth order equation it is not differential equation it is a fourth order equation so how you can derive it can be derived by means of trial and error method by means of trial and error method one end you put this values we put this values then whether it is becoming 0 or not satisfying or not you see first what happen you take a value you see that whether it is negative or positive depending upon that you take the second set value then it will be it has to be approximated by means of trial and error method you have to solve it and with this solution with this solution factor of safety can be provided by two methods once you get it once you get it d and r a value you can provide your factor of safety in by two methods one is your the value of d obtained should be increase by 20 to 40 percent or or second factor of safety you can take it 1.5 1.5 factor of safety 1.5 factor of safety you can take in k p end or or k a that means while designing at the end what you are suppose to get at end you are suppose to get the value of d you are get at the end suppose to get your value of d how much your depth d so how to take the factor of safety either whatever you are getting the point d means distance d this can be increase 20 to 40 percent for your factor of safety or you can take 1.5 factor of safety in k p and k a in k p and k we will solve a problem may be next class.


Let's have a discussion on a practical question. Now this question is taken from a published account. Why did the name of the company, even the directors and everything was there, but I avoided all that. Simple quarter ending 31st December, three months ending quarter, 31st December 2020 Now here they have given you for two quarters and then six months. So we are talking that how this is condensed. You can have just one part or you can have like this. And some companies also compare with budgeted also. Some companies also produce percentages change. So that also be an added requirement, but standard does not require all those things. But for the decision making purpose, they need this type of information. You can see here, I'm just rounding the figure. Well, turnover is almost 6 million to 6.8 million. So it's not much difference, but there is still a change. Now if you look into the profit figure, 4 million to 4.8 million slightly profit is also improved. Now so for general expenses are concerned, they are slightly reduced. In fact, almost the same. And then we have the other income. Now this other income need an explanation in this case. You know sometime company buy more than 20% share of another company. And if that company is making profit of that quarter, so what profit is your share? You can incorporate that although it is not yet received, but still you have earned it because that company earned it. So you also earned it. So you need to report it is in your accounts as a other income. Then worker participation funds, which is a requirement in Pakistan law that you need to share some of your profit with the workers as well. So that's also reduction. Then profit from operations and then finance cost details. Notes are not attached to it, although in the original notes were attached. Then profit before taxation and the tax and the profit for the year for the period is given. Look, it's increased tremendously from 1 million to 7 million. Now the question is why such a big change? So notes will explain that the change is due to, first of all, the major changes. If you look into the statements clearly, can you see what is the most changes in this? Clearly the other income, 4 million. So that's why the profit from 1 million to 7 million. Even if you reduce the 4 million, still profit improved by 2 million, 3 million, 1 to 3 million. So that is the change. So decision makers basically look into these statements and then they decide what to do for the future. That what is basically required in these discussion papers. So as I said, there is no solution to it that you need to discuss it item by item and then explain. So I just not prepare any solution for it as it is to see this is the end of it. Thank you very much.