Backend Development for Flutter devs: Beginner (Nodejs & Typescript)

hey guys welcome to another flutter tutorial in this video we'll be looking at a basic introduction to creating a back end for your flutter apps if you're a floater developer and you have knowledge of how the backend works and can create your own back-end that's a huge bonus for persons when they are employing you are just for when you're working on your own flutter projects it means therefore you can create your own back-end along with your flutter apps and you will not have to depend on firebase for the most part as often times is the case with floater developers where they create the apps but they use firebase as the back end so here we'll be looking at the basic building blocks the foundational elements that are involved in creating a back-end so that you guys can have this knowledge and can build on it to become your own backend developers when creating your flutter apps for this demonstration i'll be using node.js along with typescript and i'll be using express.js as the web framework or the server the http server that will serve those api endpoints but all the elements used in this video are the same across the board so whichever framework you choose to use the way the back end works will be the same it's only a matter of adopting the principles and how it works to those particular frameworks so as you can see here i have a set of instructions that we're gonna use to set up the project so we can get it up and running so i'm just gonna copy and paste those instructions in my terminal so we can have the project ready and what i'm doing here the first thing is to initialize node please ensure that you already have node.js installed on your machine if you're following along with node.js so you can head on over to nodejs.com and follow the instructions there as how to get it up and running on your system so i'm just gonna enter the package name which is flutter api and it's just gonna ask me some basic instructions that i can use here and there it will create for me my node.js application or scaffolding with the package dot json file then this file is is where i will add all my packages and my scripts as to how the application must behave so next i want to install test typescript but here i am installing it with the dash d flag meaning that i own i'm only using it for development purposes so that is installed now i can install express with the dash s which means to save express js as a dependency of this project so this project has a hard dependence on express js there we have that and let's install the types since we are using typescript we have to install those express js types so that we can have access to them now we have all those dependencies installed and if we look in our package json file we can see we have expressjs as a dependency and then for dev dependency which is the dash d we have the types and we have typescript so now next what we want to do is to initialize typescript or the typescript compiler so tsc's typescript compiler we're just gonna initialize that and that gonna generate for us a tsconfig.json file so where we can configure how we want typescript to behave especially when it's being compiled to javascript when we run our build so there's not much to change here i'm just gonna uncomment a few lines and add the necessary flags in this case for lib i'm using es 2015 and you can read the comment to see what that means further i want to go here and allow these experimental features since i'll be using some decorators as we go along i also want to set the output directory and this is the directory where the javascripts file javascript file will be outputted when the typescript files are compiled so we can put that there and i'm going to say let source map be true so that's it for our ts config file we do not need to enable any other thing now the next thing is to install ts node and this will use this to run our server in development mode and now that we have ts node installed we want to copy and paste this command here and we are going to add it in our package.json file in our scripts so inside of our scripts we want this command which is to access the ts node package that we have just installed and to set it up to watch or typescript files here and then to compile the typescript automatically so what this basically does is that whenever we make changes to our application it will automatically restart the server to apply those changes so that we do not have to constantly stop and start the server whenever we make changes so now that we have everything set up here let's go ahead and create a source folder here we have our source files and i'm just going to create a app.tst file this is the entry point where our servo will start we'll set up our express server and we will look at how we access endpoints and receive http request and send response using express js and before we do that we can head over to expressjs.com and you can see the documentation here if you are not familiar with it you can go through the documentation as you can see it's a minimal and flexible node.js web application framework that provides a robust set of features for web and mobile applications and what we'll be using is mostly the apis which is the http utility methods will be using those to create our backend apis so now that we have express setup let us go ahead and import express say express from express now we have access to the express instance we can go ahead and initialize our application so const app equal to new instance of express so now that we have express there we can now use that to access the different methods or apis that's associated with the express app so let us now go ahead and set up the express server or start the server use the listen method and here i'm just gonna pass a port i'm gonna use port 3000 and for the callback i am going to say whenever the server starts then i'm just going to print that to the console so i'm going to say console.log and say server started on port 3000. so now we have our app listening on port 3000 for requests so now if we should go ahead and run that npm run dev and this dev is referencing our dev script here to run this command then we should see that command run now we see servo started on port 3000 we have not set up any endpoint as yet so we won't be able to access anything on the server even though the server is running but before we configure some of the endpoints we want to go to our extensions marketplace and i want you guys to install this extension thunder client so this is basically a rest api a client for vs code so we're going to use that it basically behaves like postman but instead of installing postman a third-party thing and then moving outside of vs code to use that we're just going to install the thunder client here and so we can use that and when you install thunder client then you will see this icon here and if you go to that icon you can see as you can see i've already made some requests you can say new request then you enter the endpoint to the server which is http local host 3000 now if i click send then as you can see there is no get method being executed on that endpoint so now if we go back to our app now here is where we can configure the different endpoints that we want to allow http clients to access so that we can return resources from our server to that http client and we'll be looking at the four basic http actions that are widely used there are about six or seven but we have we mostly use the get action the post action the update action and the patch action and we are going to look on those actions and what they represent so we have the get action and this is basically or read so if you ever hear the term crud which is to create read update and delete then each of these http actions would represent one of those accurate the crud acronym so we have our read and if i should do it in the crowd format then we would have the post method which is create we have the read method which is get then we would have the put method which is update but the thing with the put method is that it's not only updating for example an attribute of some resource you might have saved in the database but what update does it it replaces the entire resource while maintaining the unique identifier or the primary key so this is replaced then we have patch which is not used as much as put but patch updates but it modifies so instead of replacing the resource for example if you have a user in your database table instead of replacing that the entire user itself what patch does is to update a single attribute for example you might update just the name on that user and then we have the delete action again it deletes so as you can see create update create read update delete and that's the crud acronym and as i said we have other methods like options and we have like head but we're not going to look in those sins those aren't used as much but they we have the head where you can request header information from the server and options where you can request meta data information about the server and what to expect and i think these are used mostly in streaming services when you can get information about the the resource on the server how large how big that resource is so you can determine how to download that resource but let us go and work with these five methods here so inside of our express app if i'm going to work with the get method first i can see app and there's the get method and what it takes is a endpoint or a path so that's the root path and i'm saying when we when the user accesses or make a request to the root path then what i want to do is to say this is the request handler and this request handler will accept or will receive as its parameter a request object and a response object so these are given to us by the express framework itself so when they access the get method using that root path then the http request is sent and a response object is also sent that response object is what we use to return or to send information back to the http client from this server so for example we can say response dot send hello from servo now if we should go back to our request here and we should access we should see get because this is the action that we're calling from our thunder client here and which is the http client and if we send that request we should see hello that's the response hello from the server so we know that we have that working but to get more involved and to so that we can add some information to a database and retrieve information from a database to demonstrate how the other method were methods work what we're going to do is to actually connect to our database in this case i'm going to use postgresql if you are if you have any other database client installed on your machine for example mysql mariadb mongodb whatever the case is you can use those database and we're going to connect to them using the type orm we're going to use that framework to make it easy to connect and to retrieve records from the database so here inside of our readme again we're going to look at how to set up type or rim let's go ahead and stop a server for no we're going to copy and paste these instructions so i'm going to copy again i'm installing the type orange package and i'm using the the dash s as meaning this must be saved as a dependency i also need to install this reflect metadata since type orim uses reflect metadata let's go ahead and do that i am using postgres for my database so let's install the pg package as well and i'm going to install the necessary data types so now we have that installed and let us head on over to the type rm website to see what that is about now a orm or object relate relation mapper is basically a construct where your objects in your code for example your classes that represents objects like a user is mapped to database table so if you have an user object the orm maps that user object to a database table and it provides abstraction on top of the database technologies so that you will not have to manually write a bunch of queries now even though orem provides a simple way for us to interact with the database without having much knowledge of how sql work and that kind of thing it is still important to know at least the basic knowledge of what sql is how sql works so that in cases where you need to optimize where the ora might not provide the optimal response you want then you know how to write your own queries to access the underlying database technology and to make those queries more efficient but for the most part orms work well it helps us to develop uh quick you write code you write your database classes your your objects rather as classes in your code those are mapped directly to the database as tables and so you don't have to worry much about what is happening on the database side of thing and type orm is one of the popular orms that is used with node.js the there's another one called sqlize but i'm more inclined to use type orim and as you can see it's highly influenced by other orms such as hibernate doctrine and entity framework i think doctrine is php and entity framework is dotnet so as you can see the the the some of the features that that's here is given we have entity managers we have repositories and custom repositories there's a bunch of stuff here in the documentation that you can read if you're interested in learning more about type orm and even or i'm on a whole you can read more and see how they work and how they can help to speed up your development time so now that i have type orem installed what i need to do is go ahead and configure it to access my database so what i'll do is on the root of my project i'll create a orem config json file and i already have this file so i'm just going to copy and paste the information from it and then explain it to you guys so here's my type orm config file and as you can see the type represents the type of database in my case i'm using postgres again because i have postgres in already installed on my computer if you are using mysql then you can head over head on over to type your rim you can go through the documentation and see how you would configure mysql because it supports a plethora of database technologies the host i'm using is localhost and the port for postgres is 5432. i have already configured the database so the username on my database is test the password is test and i have created a database an empty database called test and as you can see i have synchronized true and login files and then here is where it's gonna search for the entities to map those entities to database tables so you want to specify the location to your entities and also your migrations even though we'll not be looking at migrations in this video since the purpose of this video is to focus on creating an api and how http server works instead of the underlying database technology so now that we have type orin configured there in order for us to get type orim running what we need to do is to inside here when our server starts i'm going to make this into an async function and once the server starts i'm going to create a connection and this is imported from type orm it should come from type or m not net so we see we create a connection there which this create connection uses the orim config file to establish the connection to our database so now that we have that i am going to use the create method which is the post http action so i'm going to say post and here the path to create a user will be user so it will be slash user now for the callback which will receive a request and a response here is where now we can create that user so inside of source i am going to create a folder called entity and in entity i am going to create my user entity so this is now where we use type orim to create the user entity which will create a table inside of our database with the fields as columns in the database so if i see class export class user i am going to extend this entity from typeorm since it's an entity and also we'll go ahead and decorate it with the entity decorator from typeorm and now we can add our fields so let's go ahead and add a id field and this will be a number or undefined i'm going to make this read only and then i am going to tell type oram that this should be a primary generated column so this is like an identity column in the database if you understand or if you're familiar with database terminology so it's an identity column meaning that it will auto increment each time a new user is added to the table so that's the primary key then i am going to ask for the first name this is going to be a string and i'm going to say this is a column and i'm just gonna copy that and have last name and also i'm gonna add a number for each and now that we have that we can inside of our constructor we can go ahead and accept those first first name string last name string and the h is a number then we can go ahead and call super for the super class and then we'll set the fields for our class in this case said first name to first name and so on so now we have our user entity we can go now to our post method and we are going to create a user so let us say const user equals user and then for this user we are going to extract the information from the request object so we are going to say request body and the request body should have a first name this request body is what is being sent from the http client in our case our floater application will be sending over these informations to create this particular user so we have the first name then we have the last name then finally we have the age let us import the user this should be new user and no as we have this here it would not work since the request would not know how to parse the body so in order for us to tell the request how to parse the body tell express how to parse the the request body we need to go ahead and tell express to use and here we're gonna add a middleware which is basically an action or a callback that is executed before our final request callback so it's executed before this method so it's executed and then it's try transform the request object so that when the request object finally reaches this method the data is as we expected so i'm gonna say use and in this case i'm gonna say express dot json so it's a json body so now all i need to say is to say const result equals to a weight user save then i am going to say response dot json the result from saving so this save is responsible for saving the user data to the database just make this method async so that or we there can work so now that we have that if i go to my database table here as you can see i have my public user table and i have if i execute a select statement then you can see no record is found it's empty now if i go to my request and i say request user and inside the body i'm gonna have a json object with first name john last name jones age 33 let us go ahead and start our servo npm run dev now if i send this request then i am having arrow so there is something with the json here which is a missing semicolon so let's go ahead and run that again as you see we cannot get this endpoint because we are using a git action here instead of a post action so let's change that let's run that as you can see a user is created with the id being 10 and if we should go back to our database now and run the query then you can see that user is added to the database that's it for our post method so we are able to create a user now we can use our get method to get the user so in this case we are going to see user and we want the id as the parameter so now when that request comes in i can say const user equals to await and if i make this async then i am going to use my user entity which is my type or entity and i'm going to say find one and find one i'm just gonna get the id from the request object in this case it would be in the request params id and then i can say if user if the user is undefined then i know the user doesn't exist and i can simply return and say response send user not found otherwise i can simply say response json and send that user object back to the client now if i go here and i say okay i want user one let's try that again let's change it to get method then we should see user not found if we enter 10 then we should retrieve the user from the database so now we have our create method or read method or post and get in in terms of http actions now we need our put method i'm just gonna copy here change this to put and again put uses the id that we need to replace and also fetches the information from the body so again i'm going to try and find the user if the user doesn't exist return the information saying the user not phone otherwise if the user is phoned then i am going to update that user in this case i'm going to say user first name is equal to the request body fetch the first name value from it let's go ahead and copy that down do the same thing for the last name this should be last name and user each should be the request body let's go ahead and fetch the age from that then know that we have the user we can go ahead and save that user so we say user save and we'll pass that into the result and we'll return the result to the http client so now as i've mentioned before put replaces the entire resource so even so even if you do not pass a first name or last name for example let us go ahead and check test that out if i pass only the age to say change the age to 36 it will change the age to 36 but it will replace the entire object so now we're gonna have a case where the first name and the last name is empty so let's go ahead and run that let's check our database okay we should change this again to put instead of get let's run that see an empty json is returned here let's check our database to see what's happening the user age is updated but we have an empty json here why is that the case so the user is saved meaning that a user is updated but the response is empty let's add that first name here hey let's send that we are still having an empty response but inside our db we can see where the field is updated [Music] okay i can see what's happening here we need to await for the promise to complete so now let's try that again go ahead and run now we see first name age 36 let's check our database we see that there let's change the name to jackie well the first name is updated to jackie so now if we copy and paste this to our patch method let's change the action to patch it is the same thing so no if we go to our request we change this to patch change the age to 22 then we get the same result jackie 22 the thing also is that with put put can also be used to create an and resource if it doesn't exist so but it's not used in that way oftentimes and in this case it wouldn't work because i am saying that we should return if the user is not present now for our delete action it is pretty simple we go ahead and we say up delete and there we have our delete method which is to find the user based on the param and simply remove the user so if we go here we say delete number 10 then number 10 is gone if we look inside of our database then it's empty there's no longer any number 10. so these are the foundational http actions that are used with any api any requests that we make in terms of creating our back ends and accessing resources now we can make this more modular by adding the routes here to a file because it wouldn't be possible to have every single road in the app dot ts file we could go ahead and we could create a router and then inside of the roto we could say use we could have user roads here then we go ahead and create a express router so i'm gonna say user roads equal to router from the express package and we simply and paste all these roads here let me go ahead and cut them paste them here but instead of using up i'm going to say use roads so let's go ahead and change all these change it to user routes and then what we need to do is to simply see now we can go ahead and export user routes so no inside of our app file we can go ahead and say up use and then we simply say use user routes so no if i go back to our request and see get user not found let's go ahead post let's create a user remove the id there we have our user created and our user added to the database so we can clean up our ts or app or entry point file and we can have each route separated so you can imagine for if you have other roads for other modules for example photo roads then you will add them here and then we'll simply tell the app to use those routes so this guys is a simple introduction to how http servers work how you can create a simple one using node.js express and type orm to connect to the database fast and to perform the basic http actions now if this is something that you like then we can continue this video we can make this a series where we look more into back end more into making this into a more full fledged backend that we can learn more about the whole dynamics of creating our own backend so thank you guys for watching this video and please do like please do share and subscribe if you haven't as we strive to become better flutter developers all around so thank you guys and see you in the next video

Channel: island coder876

Views: 525

Keywords: flutter, TDD, DDD, dart, clean architecture, vs code, programming, enterprise, domain driven design, test driven design, development, code, tutorial, software design, clean, ddd, tdd, beginner, app development, app, mobile, iOS, android, full stack, javascript, typescript, nodejs, mongodb, modular, best tutorial, restaurant app, delivery, beautiful, architecture, cubit, flutter new, new flutter, flutter beginner, firebase, service, dev, actions, widgets, testing, backend, NodeJS, http, best, friendly

Id: oGYOxmaLCsM

Length: 52min 40sec (3160 seconds)

Published: Mon Dec 06 2021