Building a Realtime Chat Application in Minutes with FeathersJS

welcome everyone to the feathers workshop where we're going to be building a real-time chat application with federer's js with feather js we could make web applications fly faster to the cloud so first the introduction decoders for causes we're on where we are an organization that helps a non-profit organization and charities by using student volunteers and connecting them to projects and my name is friends and i'm a committee member and i have the other two committee members right here with me uh drew alexander the president dante and daphne the secretary oh hi i guess we should start now so the prerequisites of this workshop so i would assume that you know like a minimum knowledge of html the markup language of the web javascript the programming language of the web and also node.js so node.js is just simply a platform for running javascript outside of the browser i would also assume that you know a basic programming as far as i know there's no while loop or for loop for even if conditions here but you know it's just good that you know the understanding of programming for this workshop it's also good to know that you know express express is a library for creating server applications in the platform node.js so i'll just clarify that one feathers is a library on top of express that adds functionality or extends functionality of express and express is a library for creating server applications deployed in node.js and nodejs is a platform for running javascript outside of the browser all right i would uh it's good to know that you have some knowledge of rest apis web sockets and also package managers or in this case note package manager for javascript but that's just good to know because i'm going to be explaining that later on in this workshop okay first of all what are we actually going to do today so i'm going to be demonstrating a chat application that we're going to be building today i'm going to explain what feathers what is feathers and we're going to have our interactive workshop where we're going to be coding a chat application the interface the feathers back-end and also we're going to explain why are we going to choose feathers over any other things that are created for server applications and next one is we're going to explore um what's the pathway after learning feathers oh so firstly we're going to have a demonstration so i have a demo here that i created i'm going to load it here all right it's this one we're going to have a authentication a login email and password or you could just log in with github you could visit this url right now which is uh posted in the slides as well as announcements in discords in facebook so as you can see here it's a chat application you could send some messages it's all happening in real time and even if you uh register right now or create a login with github your name is going to appear at the left hand side so this is a chat application that i just built in just a few days using feathers but this is not going to be what we're building today because this is a little bit complex because it's uh taking into account your better interface your authentication so what are we actually building today so we're going to be building this one um this is the one that we're going to be building today it's still the same chat application and it's going to be happening in real time take a look yeah so i hope you look forward to it so first of all what is feathers so feathers is a framework for real-time applications and rest apis it's a wrapper around your application you can think of it as like a portal for data simply so you're going to have like an interface so in our case we're going to have a chat application interface and then it's going to be using feathers to transfer messages over to the server and databases and that uh and also feathers is going to facilitate transferring from data from the server then another interface so yeah that's basically the simple explanation of it and you're going to find out more about it so what does this mean for us if we're using a library for this real-time application it means that we can build prototypes in minutes and production-ready apps in just a few days and this is serious so as you can see from the demo this demo was just created for a few days and this demo is what we're going to be building today and we have a timeline of one hour and 30 minutes but don't worry about it we can handle that in just a few minutes so that's what ferris is all about so i guess let's start coding so you're going to be given a code sandbox uh link here this is your coding environment where where we've already set up the files that you're going to use and the libraries that you're going to use so just to get there the link is already on discord and facebook so let's just go there this thing so just go there and this you're going to be your sandbox you're going to fork this one you're going to sign in first you could sign in with google or github let's just go back there okay once you've got that set up just uh raise your hand so that i know who's already got it set up to be able to verify that it's working you could take a look at the right hand side and it's going to say this things oh yes it is see the code for today will be here yeah at any at any point in time that you want to see what i do at each specific stage just go to the commits yes actually let me just check but the code is actually the last slide so yeah the link is at the last time who has not uh gone to the code sandbox so everybody good are we waiting for somebody thank you to the people in zoom have you all set up the code sandbox already so the way to do it is just uh to fork it and it's going to ask you to sign in and then you just sign in with either google or github and then you're going to be able to fork this entire thing it's going to be giving you all the files that we're going to be using for today and the starting code so are we waiting for anybody here you're good to go all right so let's start so first of all we're going to be creating our interface our interface is just a simple html file html file that you could just see from the code right here and let me just uh so first of all we're gonna have an interface which is covered by a tag main it's going to have an id main and class container and this is just for styling as you can see right here there's a cdn here for css if you don't know what css is it's basically it's called the cascading stylesheets which is used for designing or making things pretty in the web and that's importing classes that is going to implement some designs all right so inside our main container we're going to have a div and there's going to be the idea of this would be chat inside of this we're going to have a uh header and i guess we could just say welcome to federer's chat application so inside of this we're going to have a form and the class will be form we're not going to have an action because we want uh the form to submit a javascript basically run a javascript on submit and uh yep so on submit we want uh on submit of a form we're going to be sending a message this is going to be the name of our function that we have not upgraded but we will create it later let's just put that for now then inside we're going to have an input tag it's going to be a type text i guess we could put a placeholder here maybe enter a message and we're going to have an id called message text and this is going to be useful later when we're going to be extracting the data from there in the next one we're going to have a button it's going to be of type submit so that when this button has been clicked it will submit the form and the name of the bottom will be send a message let's also give some i guess some design button and bottom primary next we're going to have a div that will contain our messages later on so i guess that's our code for now so everybody good here that's it oh there we go so all good guys so as you can immediately see right now we are unable to see what it looks like so the next one we're going to be discussing is how do devices actually communicate in our in the internet ah this is weird he's going to be using this one all right so how do devices communicate with uh in the web in simpler answer they communicate using the internet but exactly how do they communicate to the internet so first of all you're going you're going to have an interface let's say for example your computer they're going to be sending a request uh in the cloud and the cloud going to the server that request will be specific and it's called a get request and this happens when you visit a specific website link let's say for example you have this website and you're busy visiting that is going to be counted as a get request from the user interface up to the server and the server is going to say hey this is a get request on this link so the server is going to be responding with html and css so the the html that we created right here at the moment will be sent to the server but at the moment we have not created the server application yet and we're going to be creating it in this file called app.js so that's the next one that we're going to be doing so first of all how do we create a server applications so you're going to be installing a packages and you're going to be including it but for your code sandbox that i prepared we've prepared you no longer need to type this commands because uh if you don't use code sandbox or you're using a another environment such as vs code and you want to recreate that same environment you're going to have to type this one and what this aquaman basically does is it's going to be creating this package.json file this package.json file is basically summarizing what's going to be the libraries included in our server applications so this are the three things that you're going to be able to see and those are the libraries that we're going to be using so let's try to uh include those files it's going to be that one okay so let's start so the minimal code for creating a server application is by using express the library and this is the syntax in case you're not familiar and there's going to be an auto suggest just uh click express and we're going to be creating an application basically a server application we're going to be running like this so what this tells us is that we're creating a server application and we're uh storing it in a variable called app next we want to be able to serve our static files the static files that we have currently is the index.html file we want to be able to serve that file so the syntax for that one is app.use express that static their name you don't have to be you don't have to memorize this as codes because this codes can be found in the documentation for feathers and express so you just have to know what it actually does so what it does is that it serves static files from the directory from the path of this directory in the server so next what we're going to be needing is that we're going we're going to want the server to be listening on a specific port so as you know with uh python when you type python main.pi and main.pi is your script file what's going to happen is that your computer is going to be running that main.pi script so in the same case if i just open this preview every time i save this oh this is weird every time i save this it's going to be running this a specific line node app.js so similarly for python python main.pi so the thing is at the moment our app.js is only running this line and then after running that it's going to exit so what we want to do is to be able to make the server listen on a specific port so we're going to put it on port 3030 it's going to take a function that's going to run and it's just a function it's going to run when it starts listening and we're going to say feathers server running on localhost 3030. so if i save that one and refresh this this is going to be serving our index.html file oh good for now there uh drew uh laura so everybody got this working so a server serving an html file [Music] any problems [Music] yes um just a side note uh our start script is node one what node mod is basically just doing is uh every time we press ctrl s or save it's going to be running node fjs so basically it just makes this like a real time thing so every time we're trying to save it's going to change our preview so currently as you can see at the moment uh if i type here and send a message you just refresh so what we want to add here is event dot prevent default let's just save that [Music] refresh it's still repression but we're going to be handling that later on all right so the moment what we have is we have a server that is serving a static file called index.html so next thing that we're going to be doing is we want to create a feathers applications so the way to do it is if we just have it on its own it's going to be this if you want uh feathers on top of express we're going to be doing this but for now we're going to be staying with this okay so let's just uh complete that code and we're going to be explaining what services are in feathers so just complete this one feathers is equal to require all right i'll just explain uh what this what uh libraries we're including at the moment so as you can see here it's uh ex we're importing express on this variable and if you take a look at this one it's feathers just js slash express this is the version of express that has been expanded uh extended by feathers and similarly for io this is the socket io version that is extended by feathers and this one is actually the main feathers library all right so at the moment let's just comment this code out because what we want to show to you first is what feathers actually do before being served into a server all right next we're going to be creating a service so first of all what are services services are the heart of every applications so basically it functions like a portal of data and it's modeled upon our cloud operations so if you've done some sort of database systems you're going to know a little bit about the crud operations it's basically the basic functionalities for any data interaction so recall with servers servers actually just facilitates data transfer from the database up to the interfaces so our front ends so this is a service so it's a it's going to be containing our methods that models on the product operations find and yet are modeled upon irene fine is basically finding all the items in a specific page obviously you're finding a group of items get is getting a specific item so in our case it's going to be getting a specific message but find is getting all the messages then great it's the create in the crowd update and patch goes with update and remove is with the delay so formally a service is an object or an instance of class that implements certain methods so let's creating our first service so we're going to have a class we're going to be calling it message service and we're going to have a constructor the constructor is just going to contain our messages but in terms of uh when you're trying to model it on a production application the mess this portion of the constructor is actually going to connect to a database so next we're going to have some methods it's going to be an asynchronous method so i'll just explain the asynchronous part after uh creating the entire service so what find basically does it's going to return our entire messages and we're going to have get which will have a parameter id and it's going to return a specific message and then we're going to have a method called create which is going to create uh get a data as a parameter or argument then it's going to create a message that message for now we're going to give it an id up on the message uh link so basically the array link and then we're going to give it a text and that's going to be the data dot text so it's going to get an object that has a field code text next we're going to be appending this message that we created and then we're going to return the message that we created missing or what oh yes this that messages so uh it's it is convention that whenever you create a message or create basically something in the database you're going to return that thing that you created it's going to be this so i'll just explain what asynchronous is so in the web uh and als so any database interaction things might not run synchronously so in this case when our server is community communicating with the database the server is using cpu to process this one which is faster than the connection of the server to the database that's something that we have to take note of most of the time you're going to have a wait you're going to be awaiting a database operation to be able to complete this that's why most of the time services is going to have methods that are asynchronous so now let's attach that service that we created to our application this is how we attach it you say at that use in the route it's going to belong and we're going to create a new services now let's test what we have so far so there's two main syntax of creating a javascript function we're going to have the functional way to do it and the your your most common way to do it which is similar to the other language so what we're going to be doing to be testing this service that we created is that we're going to create a message and then we're going to get those message just to simulate that everything is working and we're going to type this for now at our server let's create a message it's going to be an object this one i'm going to be passing that has a field text and i guess let's say hello feathers then let's create another message and you say hello again or hello world that's one is a classic one okay now after creating those messages let's actually grab them and that's console log it so that we could take a look if we've gotten the message that we created all right then let's call that function okay something you can immediately see here is that after i restarted the server which is by pressing ctrl s saving it we're going to be able to see here this console log all messages and our two objects that we created so at the moment as you can see uh we defined uh some functions that is going to be modifying our variable or in in an actual use case it's going to be modifying a database but for our purpose it's just a variable so these codes are the one that does it but this is only useful if those codes are in the front end because this is the one that facilitates data transfer from our front end to our database just wait a second guys there we go nice i think it's all good i don't know what happened boy so at the moment as you can see it works but we want that code in our front end not in our back end so let's just erase that one for now so what we want to be able to do is to be able to basically expose our back end we want to x what's happening with these projectors all right let's get back to the topic so what we want to be able to do is to expose those services to rest apis so you might be asking what is a res api a res api or also known as an application programming interface so let's go back and let's go to the concept of a user interface a user interface is the start of any interaction of the user towards a machine an application programming interface is an interface to start interaction of a server to another service could be a front end could be another application so here's an example so here's an example of an application programming interface which is basically getting data from a bitcoin server so this is what's called a get request so a post request is when i send data over there it's going to be modifying again so essentially what we want is something like that we want our messages to be exposed like that and we want to be able to serve or basically support uh post requests that can add more data here and as you can see here at the moment this one are basically the service methods and the http equivalence of it and the patent next i want to discuss is service events and websites because it's going to mix it's going to make sense once i explain this so every services so the service that we created is also an event emitter so basically when a grade is called there's a event that is emitted and that event that is submitted could be transferred over websites if you don't know what websockets is it's basically this tunnels of data for real-time transfer real-time data transfer so it's going to look like this so you're going to have your client and you have your services over here which is connected by your rest apis and your web sockets now let's expose that one we're going to be changing this to express feathers so we have our feathers application being passed over to our express server and then what we want to be able to do is to expose those red application res apis to our server application which is just done in this one line of code just this magical code all right next what we want to be able to do is to expose those characters are weird [Music] want to express uh want to expose the socket eye socket so it's this line of code it will do these two things so it's a very powerful line of code so next uh this was able to expose the entire rest application so it's going to expose all your services but for a socket it's not yet finished this is only partially exposed so what what we want to be able to do is to do some solid channels so the easier way to think about socket channels are like for example this room and the zoom channel here at the moment so if i type a message here and zoom the people here won't know at the same time if i mute my message if i mute the mic here only the people in this room will hear me so that's basically what socket channels do so what it what it means for us is that the messages that we have are restricted on a specific channel only but for this purpose of this workshop we're only going to be creating a channel for everybody so uh this line of code that you can see here at the moment app.onconnection which means that if any uh user interface or any front-end connects to the server it's going to run this one it's going to give us a parameter called connection next it's going to create a channel called everybody and let that somebody connect to this uh channel so this is going to be useful for when you have authentication because you only want to uh you only want some people to be hearing some messages if they're on a particular channel and next we're going to be publishing that channel so let's just go that one at that one connection that channel we're going to be creating a channel called everybody and we want that somebody who joined the channel to go to this everybody channel i so this will facilitate every real-time interaction that we're going to be having so first let's actually test our rest api so the way to test it is to just grab this url that you have over here basically here you should see your application let's just refresh that oh yeah that's why it's because i think comment this out so yeah just uncomment that code that we wrote earlier so our server should be listening at that port and serving here all right here we go let's just refresh this one and i guess that's great more some messages let's um get that main function again or i guess let's just turn this and asynchronous function and it's going to create some messages that where we can see hi this message should be served in the rest api which you could access by typing messages so it's the route messages let's just see that one what is happening this is weird let's just debug it really quick let's create the main function all right let's just try that again after configure express yes um not that i know off i wasn't able to actually set that or not but i call is on the slides let's just take a look what's happening here so this is the server channel this is a middleware hang on a sec i'm just debugging this let me just check the code that i created for this one all right now i know why something that uh to note off is that our the attachment of the services should come after expo after exposing or opening this so it's going to come right here and this middlewares so middleware is in the as the name suggests it's in the middle of the application and also our main services so this should go right here so this one are near the southern iowa all right let's just save that let's try it again all right there we go as you can see it's serving our rest apis so our messages over the apis and this is the message that we created right over here so as you can see here at the moment sorry about that [Music] let us continue from that disruption all right so recall at the moment we have a server that is serving rest apis here so at the moment as you can see we were able to transfer data over this portion now what we want to be able to do is our interface to use this data over here but we're going to be using feathers which basically imports the function that we created like for example app.create that service the trade so like this all right so let's try uh try creating that one so first of all what we want to be able to do is initialize our feathers application on the front end so socket let's just initialize socket then let's initialize our feathers application it's similar to what we did earlier but we were doing it in the server and we're doing it in the front end and let's configure this one we are going to be combining our feathers application with socket so that we have that real-time communication next what we want to have is that we want to have a function that will send message so this one let's create that one so it's just cons same message async because we want it to be an asynchronous function next we're going to be grabbing the message input which is basically document.getelement by id and the id that we're getting is message.x so let's go at the top so this is the input that we're trying to get this text box and it has an id message that text so this is the one that we're grabbing next what we want to do is uh to create a message so that's a similar syntax that we created in the server says app.services messages let's create and let's pass a text field and we're going to be putting the message input value here all right after creating a message let's empty that message text box only so let's just test it so let's refresh this one send the message the moment's not uh uh displaying the messages but let's check the messages rest api it's this message let's try another one hi let's check that again so as you can see here at the moment the server is able to receive data that we're getting at the front end now what we want to be able to do is get this data that we created as well as to update the interface in real time because we don't want the user to be refreshing this every time so the way to do it is that we're going to have a function that we're going to call add message and it's going to take a parameter called message and it's going to do a document.getelementbyid so it's going to get this item and it's basically going to append our messages there so the id is message list and the inner dot html which are equal to our message we want a tag over there a paragraph and inside we're going to put our variable value called message only so that's it now what we want also is that every time or basically when you visit the website you're going to be able to grab all the messages that has been already sent in the server so that's we're going to do it as a main function and it's going to grab all the messages that we have in the in our server so await app service our messages service and find everything next for every message that we find we're going to add so uh this is some advanced javascript but i'm just going to explain it in a little so this is an array of messages and for every element in that messages it's going to pass it as a parameter in this function called add message oh good so far oh hi so let's test that one so let's refresh that yeah let's send message oh yeah i did not call mean so there you go let's call the main so let's refresh this message let's just take a look at our handy console see what's happening oh wait it's only valid on async function all right there you go this is an async function now let's refresh that one again it's sticky object so it's actually message.tx because remember our service is storing an object of messages that has a field called text so let's refresh that restart and let's send some messages there you go some messages are there but every time we put a message we have to refresh so let's just fix that one so remember with the service uh emitters the event emitters there's this one that we can type app.service in the messages and if something has been created so uncreated we're going to run this function so remember in our server application we're returning that message this is basically what it's being received so once something has been created it returns the message then it becomes a parameter here to add that message to our interface all right so let's try that again this is weird let's save that bye hello there we go let's try it again there we go so as you can see here at the moment it's actually working now so we have a chat application that's uh where we can send a message going through the server storing those messages in the server and then relaying that message into the other interfaces so if you connect to this url here at the moment you're going to be able to see these messages you can even send messages here so i guess that's the end of the interactive portion of our workshop so now let's discuss why do you why would you choose feathers over the other ones so first of all uh receiving data so this is a comparison between feathers on express and express alone as you can see here at the moment there's not really much of a big difference except for the authentication so for defenders authentication is handled just as long as you've already configured the authentication for express even though you have the authentication handle you're still going to have to send the authentication pair token to the server it's okay if it doesn't make sense at the moment this is just a comparison of two things so at the front end level it's not that different aside from the fact that the functions that you created the server you can also call it in the front end so let's see the server side so here at the left hand side we actually created a service and we expose that we have the rest api and we have sockets but at here at the right side uh what you have to do for express is that you have to create the controllers so that's similar to those services after creating those controllers which is basically uh manipulating our data we're going to expose that to our routes so let's just zoom in over there so our routes so we're creating a route for every endpoint that we want a get request this is for find this is forget and this is purpose and then we're uh exposing that router that we created to the messages but feathers actually handles that for us automatically so next one is hooks so you might not be familiar with hooks so basically hooks is just something that actually um hangs over your router your basically your endpoints they are functions that runs before after or on error of a specific route and this is very useful for let's say for example you have authentication maybe in the message service you only want uh people that are authenticated to be able to send message to be able to get messages so this is where it comes useful as you can see here in feathers you're just going to have this one and you're going to have your service methods here and you're going to have a function here to authenticate and this is a function that will run for all but for express alone this is what you're going to have to do you're going to have to put your authenticate a function right over here for this function and you're going to have a try catcher you're going to have your main processors here your after hooks here and your errors box here and this is only for one router yeah vendors were was able to put it in everything for all so you're going to have to put that in all the routes if you're going to want hooks or basically authentication for those services so i guess this is uh this is another one uh here's a demo that it's okay if you don't follow but what if i could tell you that you could create a feathers application with full api endpoints that supports query params with basic error handlings real time summits in just under eight minutes so i guess that's some pretty convincing things if i was able to do that so remember in our slide here we said you can build prototypes in minutes and production ready apps in days so i guess this is the ultimate reason why you're going to want to use feathers so let's start on that one so there's such thing as what's called a feathers code generator so i'm going to create the directory let's just call it feathers tess let's go to that one and i could type this magical code called feathers generate so let's just wait for that one at the moment you could time me for something if i could do it in eight minutes my computer is just low but what we want to be able to is we actually want to model this database i've created this database already with 3101 records so we want to be able to create our rest apis here and also socket connection if you want if you can so let's just go back to our terminal line all right it's asking me if i want javascript or timescript i want javascript project name description let's just leave it like that but package manager let's go with npm and we want rest apis and real time with sockets and we're not going to be doing any testing for today so let's just leave it to that we we can have authentication but for this purpose of demo we want it's going to generate us an application so let's just open this in bs code so that i could show you i'll see the feathers yes actually let's open that in yes code so it's going to generate as this file this files configuration your node modules basically your libraries your public basically your index.html and static files source files and tests let's increase the font size so another portion is that as you've seen today we were creating service now what we want to be able to do is to be able to create those service but let's just wait for this one the moment what's my time 50 seconds yeah this is basically the life of coding with feathers you just wait for these things and you customize it so while we're waiting for that one let's just grab some things so this is the link for my database i'm going to be uh i want the connection string to that database this secure connection string so let me just put that on my clipboard all right let's just see if it's done it's going okay it's almost done almost there next as uh the code that we were writing today is a service but feathers could generate us the service today we've written it on bare hand but basically if i type this command that's basically what federer is doing it's creating what we did today i want to be able to connect a to a database through mongbus and orm so hey if you don't know that let's uh name that service called uh electrical data because it's like an electrical sensor data or service want to expose that and our connection stream we have this connection string over here just paste that now it's going to generate us the services folder so this folder that we created so your class your hooks your service and also database connections and in the database connection we want to be able to point this specific schema to our collection so this collection so i'm just re-pointing that it's okay if you don't understand that one i'm just demoing it to you how fast you could create uh prototypes with feathers so this is the schema it has a device name a type and from a collection now i'm just waiting if it's finished yeah we're just waiting for this thing to finish it's okay it's almost done all right there we go now that's let's run this application and that's run using npim run start so let's just see where it ran it's going to be running at uh 430 30 localhost and let's go to that specific service i think it's electrical sensor service it's not displaying it correctly let's just check our things this correct oh yes this is called test for memory just run that again oh hi there we go it's creating a uh it's exposing that database to our res apis and take a look this actually page maybe let's say for example we only want like three things you could say this one scroll to three it's only going to give us three data points maybe we want 30 and maybe we want to skip um the first 10. we could do it like that maybe we only want the ones that has a temperature that is above uh 20 i guess so let's just copy that one so let's put that mx temperature and says greater than is equal to 20. see 1496 skipping the 10 and a limit of 30. so i guess that's how easy it is to create a feathers application that is connected to a database and with that rest apis you could immediately connect your front end directly and even uh supporting with sockets so if you need real-time data transfer so how long was that seven minutes and i'm and i'm explaining it while creating that so i guess that's the biggest reason as why you would choose feathers to create your back end because it's easy so first uh next one that we want to end this discussion is what's uh your pathway for the future after learning uh feathers we're basically the related learning so feathers as you know it's a back-end our wrapper it basically extends the functionality of express it's going to be a good idea if you know how express actually works at the server so i've explained it on basic in this workshop with node.js so i think it's a good opportunity for you to learn the fundamentals for that one database systems as well because you might i you always want your server application to be connected to a database so today with this demo i actually connected it with the database using mongoose you might also want to learn google firebase so the way how google firebase works is that it also works like services so it can grab your real time data using that similar approach as failures so the theory with this concept you have your communication theory the network communications the web sockets the http requests and rest apis also another portion is software structure because most of the time if you're going to have uh big softwares front-ends back-ends that's going to be a big software you're going to divide that into multiple folders and you're going to have a software structure so like you've seen here in the generated application that feathers did there's multiple folders divided into different things you have beer models for your database connections your middlewares your services and so on and also other most of the time you're going to connect your server with the front end so you're going to learn a little bit of html css javascript like we did today and also for advanced portion of it we're going to pick some uh frameworks to work with them the package manager as you've seen today we were actually using packages like express that is extended by feathers socket tile and feathers itself so it's a good idea to learn how how to use the package managers what does it do how it works where it saves the file and also debugging once uh when things happen you might also want uh to do some hosting so the demo that i had for today were actually hosted in heroku so you might want to think about that one or learn something about it and also javascript uh the reason why it's gaps because it's really important to learn javascript especially for web development because after all it is the language of the web you can use it for front end and a back end so here's the references for the workshop the feather services uh coding we i forgot the channel but it's that one this is the slide this is the code for the workshop for delay the code for the other demo with the authentication a better interface and a local database and yeah any questions any questions guys why cool things hey guys in zoom you have any questions uh oh hey it okay i have a question here called is it possible to remove messages as an added feature um what do you mean by remove messages as an added feature oh a deleting message yes we can do that so i guess let's try to extend actually what we have today yes let's actually try that one so let's uh i think it's acing remove i guess let's get a data and let's get it id so and then we're going to do this one this that messages the pop we're going to pop that id specifically and then we're going to return that one so let's get that message let's pop the message then return that message so and then in the front end oh yeah i think let's just pop a specific index that's easier just so that i could demonstrate this question all right because i want to be able to demonstrate this one so let's add that message and let's actually try to remove that message how good idea we are going to be using postman to simulate our uh remove requests or delete requests let's just wait for that one so basically this is index zero this is index one index three so let's just try that one let's put messages here and it's going to be a delete operation and we're going to be deleting the third index and something i forgot is a socket for uh deletion so let's just go back to that one app.service oh yeah actually yeah let's just refresh it so you remove that one but if you want uh it to remove it in real time you're going to do something like that at that service the messages that uh remove one on remove i think on remove and then you're gonna have a function here that basically finds that specific item and removes it does that answer your question aaron yeah no problem any other questions all right everyone good i guess that's the end of our workshop i hope you had fun guys

Channel: Coders for Causes

Views: 1,878

Keywords:

Id: j_HT-DPivAg

Length: 80min 31sec (4831 seconds)

Published: Thu Sep 03 2020