Flutter Tutorial - Setup Firebase Functions (Dart & JS)

this video is sponsored by invoice ninja invoice ninja is one of the largest open source platforms for invoicing if you search for something to manage your invoices with flutter and handle also your online payments this service might be something for you and to get started with this invoice ninja plug-in you find the link in the description box of this video firebase functions with javascript is not suitable for scaled projects and therefore we want to build all the firebase functions in this tutorial with start and what we want to build is a chat application when the user types some bad word then this gets automatically bundled by our server and then he cannot type any more into this check and in this tutorial i like to explain you in detail how you can set up firebase functions with start and javascript so that you can use javascript and also dart for your functions to get started you go to consolefirebasegoogle.com and make sure that you have a project so let's create one together and then you give it here some name and click on continue and continue and here you can also select some account and at the end you will land at a new page and this is a home page and then you can set it up for android ios and web and i have made another video where i exactly explain how you can set up ios web and android i will only set up android with you together so what we need here is an android package name and therefore you go to your android folder app source main android manifest and copy this package name here and we paste it here inside then you can give it your name of android and click register app now we need to download this google services json and put it here in our app folder so basically we need to go here into our android folder then into our app folder and here i simply take this google services json and drag it then inside of our app and there it goes then we click here on next and the first thing is we need to go to our build gradle on the project level and paste this here inside this line so i go to the gradle file and put it here under dependencies inside and then we go here down to the second section and here we simply copy this one here and we put it into the other file so we have here an app also another gradle file so it's exactly called also build gradle and here at the bottom of this file we simply paste this line apply plugin and here in the dependencies i will also put here this line inside so make sure that you also put this line inside and for the multi decks i will also put it here at the bottom in our default config and that's all what we need for the setup so you can click next and then skip the last step and now we have set up firebase correctly and we can use it for our chat application so first of all i like to go with you to firestore and then you can click here on create database and start in test mode and next then you choose your location of your server i will take europe as a location and then you enable it and it takes some time to set up the server correctly and now the firestore is set up correctly and we have here our database where we can store our files and then we also want to set up the functions because we want to use a ben function later so that we can ban a specific user if he types bad words and therefore i click on get started and now we need to set up firebase in our terminal so i go to the terminal and then you need to go to your project location and here inside of this firebase project i have this firebase folder where i go inside and if you don't have it you simply type your firebase macd and then he will create this directory for you and then we go into this folder inside and now we need to do some setup so first of all we want to call here brew update after we call brew install node to install the node package and it says for me i have already installed node but for you it might take some time longer and then you need to copy and paste this here and go into your console again and then you paste it here inside and now he will install the firebase tooling and then it should here update everything successfully and i will log out here but you don't need to do it i only want to log in again to firebase and then the next thing is to log into your firebase account and here you can simply press y for yes and then it comes a pop-up and there you select your google account and then you simply have to allow here the permissions for firebase cli and then you should see this here at the end and also in your console it should say your success logged in and then your email address and now comes the second part so we need to initialize firebase and here you can select with space the firestore which is our database and functions where we want to put inside our dart and javascript functions and after you have selected these both press enter and then you choose the first option use an existing project and here you need to choose this project with this identifier so this is the first one which i have selected here already press enter and now he will set up all the things so you can press hit enter then you can press again enter and then you can choose between javascript and typescript i will take javascript but we also have the possibility to do our things than with dart later but we can also write with javascript our functions and here i will select no and then you select here yes and now we have set up the firebase folder so you can also go here inside and then we have here our functions folder with our index file and this is what you can basically delete because we want to set up everything we start and then we also need to create here inside of the functions a new folder and i call it simply node and now comes the interesting part we want to use this firebase functions interop package and with this one it is possible to create your functions in dart and this has many positives because if you have a large project you can write everything in dart and you don't need to go between dart and javascript all the time and to write things tries or something your whole functionality because you simply can access the whole models which you have created before in dart also in your firebase functions and they are also written in dart and now comes interesting part we want to choose your firebase functions interop as our package and with this package it is enabled to write our functions in dart itself and not only javascript but we also can write our functions in javascript so we can write it in both languages and this is pretty cool because especially if you have large projects it is really good if you can also write your code in dart so you don't need to write everything in javascript and then you also need to write everything the same thing in dart because there's a lot of copy paste what you have to do and this is not really maintainable for large projects and therefore i really recommend to use here the functions in dart itself and yeah what we first of all need to do is to install this package and there we go here down to the installing section create initial project and here you see already the steps which we already did and now comes the second part to create here pops back journal file and we need to put it here inside of our functions folder and i will paste it here inside so you can simply also paste it and i have also added here some other functions so what we need to put here inside is these four functions or these three you can also choose here this admin if you like and i also put here our models inside so i have created here a new project which is called foundation and here inside i have created some models and these models we want to use for our chat application and we want to make them accessible in our flutter application and also in our firebase functions and this is pretty cool then you not only need to write these kind of information once and don't need to type it also in javascript and it's also important to put here this dev dependencies inside so make sure to put you this builder runner inside and also this build node compilers now the next step is to create here this node folder which we have already created and then this index start file so you go into your functions folder and there you have this node folder and then you create here this index.dart file and here inside you could simply create a main file so this is our main file for all of our functions and then we also need to create here a new file which is called build jumble and there you simply paste this content inside and we also need to put it here inside of our functions folder and there you need to paste this file inside and i also want to do here some modification for the package.json and basically what we want to do here the main thing is to put here our main insight right now it is saying here index.javascript but we want to also work here with dart and therefore we select here dot javascript and this is later where our compiled version of our index file will go inside so we create a new build folder and then node and then our folder goes here inside and i will also change here the scripts so you can get it from the source code with the first link in the description then you can also check out the whole project so you don't need to type everything on your own and with the second link you get my flutter course where i teach you how you can become a super efficient flood developer all right and that's all what we need to do for this setup i guess and now we can start here in our index.dot to type in our functions and in the last video i have already created this chat application so if you want to get the whole process and you can check out the last video also and in this video we simply want to create only a functionality so we only want to put here this functionality inside that the user also got banned and therefore we want to create here in our functions this back-end code which is stored then on our server and which our server then executes and the first thing is to create a new file messages. and here we want to handle all the interaction of our messages but before we create here the backend with our messages for the server i simply want to show you the chat application and what it is doing so we have here an input and i can type here hello or hey world and if i now press here on this one so i can go here to the cloud fire store and also update this one and then you see that we have here all the chats messages inside of an object and here we have the message the username and some other information when this message was created and so on and this is what we want to access right now here in our messages function so every time a new message was created here in our interaction with the chat application then this backend should handle this chat which was created and therefore i created a new method which is called handle and here you need to make the basic import so make sure that you put here this firebase functions interop insight as an import statement and this has the functions and now you can access here the firestore and then we want to create a new method which is called also create message so every time a message is created we want to do here some functionality on our backend server and the first thing we do here in our method is to create some error handling and now we tell you the back end at the top which document should be listened to so you can define here the document and now you define here the path to which you created your message and if you look here into our application uh we have written it to the chats and messages collection and this is what we are listening here for and then you can define here what should happen so you say okay if a new document was created in this collection then we want to do here something inside of this method below and what we want to do here is to get first of all firestorm and also the message and therefore you simply get here this data which is exactly this data which you see here on the right side and we want to transform it to a message object so this is a dart object which we have created in our foundation folder so you remember i have created this foundation folder and this is going the inside and to make this possible you also need to make sure that you have this foundation in your pub spec jumble file and then you can access it here inside and then you can also access the message which was typed here and this is our message text and now we call here a new function so this is called get clean message and here inside we put this text which we have typed inside and also make sure that you always put here inside of your main file this messages dot handle and then you also need to import it here at the top and now we can create this method in a different file so here inside i create a new file and this is called filter.start and we also create a new file which is called filter.javascript and what we also want to do in this tutorial is to access javascript and therefore we put it here inside and we start here with the dart site and here in this filter dart file you first of all need to create here this so we need to make it a library and also don't forget the annotation at the top then we also need to create a class and this is all needed for doing the communication between javascript and dot and inside of this class we can define the javascript function and here inside we also can set the arguments so first of all we can set the message and we also want to communicate between javascript and dart and therefore we also add here callback and then you simply create here this new method and the inside we have every time our message and this is exactly what we are calling here so here inside we also can import this filter dart file to make this working and then we can go back to filter. and here inside we create the communication channel to our javascript file and now we can call on this filter the method get clean message so what we are doing exactly is to have here at the other side in our javascript function also this method get clean message and here we put our message also inside and the done callback and that's what we want to call here in our dart file so we call here exactly this method filter get cleaned message and here we put the message first of all inside and then you need to put here the callback inside and then we create a completer and also this done callback and the completer will care about that first of all the javascript gets executed and after it we get the result of this javascript function back and then we return it here to this function so we return here the completor future and this is then a string of our clean message and yeah it sounds maybe a little bit complicated but in the end it's not really complicated if you one time understood how this everything works and if you want to create more functions you basically need to create here another function and call it here your function and then you also create this function at the javascript site all right but we only want to create here one function for now and then we can go over to our javascript file and here we want to use this package bad words and to install this package you can simply type np install save bad words and this is what we want to do later and inside of this method we can simply call all the javascript functions so we want to create first of all this filter object and now we access this package filter and this has the method is profane and there you can define your message which should be checked if it's like bad words included and if that is the case that there are bad words inside we want to clean the message so we call here the filter and then the clean method and this will then remove all the bad words from this message and here we put the message inside which gets then cleaned and we also will later develop here the second case the else case but first of all let's go here and put it to our done callback so we simply put here the clean message without the bad words inside of our done callback and otherwise if there are no bad words we put our normal message inside so basically this method is only cleaning the message from bad words and otherwise it is simply returning the normal message which we have typed inside all right and that's all what we need to do and now this get cleaned message in our dart site we'll call this file and we'll get then this result which we put here to our done callback and the stun callback is then in the end this completer.future and this is then here the string which is our message which we get here back and now we can go back to our messages.dart file and here we get the clean message so we can put it here to a new variable and now we compare the origin message with the clean message and if they are exactly the same then there are no bad words inside otherwise there are bad words inside and we need to actually ban the user and therefore we simply first of all update the chat message with the corrected clean message so we have here the new message which is saying i got banned and also hear the clean message after it's and then we want to put it into our collection in our document and update the data with the new message so i simply put here this update inside and then we access here the message which is our message field and this is what we want to update in our collection with the new message so basically at the end in our firestore database this message property will be overridden with the new value and this only in the case if there is some bad message inside all right and now we also want to ban the user so what we do is we call here a new collection band and there inside we want to add the user id which was bent so we simply create this document and put here empty document inside and this should work right now so we can first of all update this to the server so we go here again to our terminal into our firebase folder this is exactly the folder here on the left side and now we type here cd functions so we go here in the functions folder and then first of all we want to get the dependencies so i write here pubget and after it it should take some time at least 12 seconds or something and now we want to install the npm packages so first of all we want to install this filter package which we are using here this bad words so you simply copy this and paste it here inside and install it and we also make use of this other package so i will also install here firebase admin and now we need to build this project and therefore we call here this pop run build runner and then build you don't need to remember all of this because we will later create script which you always execute to update all the functions and also the firebase rules later to your server so simply type it here and now everything should be built correctly so he has created this build folder and here inside we have our javascript which was compiled like you can see here inside and now comes the time to upload these to our backend so what we do is we call here this firebase deploy and then we only want to put here the functions right now online and then you normally should get this error which says that your billing account should be enabled so what you can do is you go to your project again and here inside you go to your usage and billing and now we need to set up this one so you go to your details and settings and modify the plan and then you need to select here this place plane and click on purchase and basically they have a lot of free usage so if you just test it then you don't need to pay and now we can run this firebase deploy again and now after some time this got successfully uploaded everything and then you can go here to your console again and go into the functions folder and refresh it and if you have done everything correctly this method create message should be here inside and this is exactly this method which we have created here inside of our messages so this has here the name create message what we have defined here and this is then the code which is uploaded there and now this should work so we can try this out so if i type here something let's say hello and i press here enter then normally nothing should happen and now if i type here hello and then some word which is not great then after some time he will do the calculations on the server and then you should see here this message which we have modified here with our firebase backend and i also forgot to tell you that you also need to put this here inside and this is basically making out of our javascript object a dot object and this is what we need to return here a string and this is really important to put it also inside before you do all the execution and also before you upload the things to the server all right now it says here we are banned from the server and if you look into our firebase database you see that this message first of all got here modified so this message is here now this new message and if you also look here we have a new document with the user id that he got banned however this is not working right now because the user can still type so he can type anything and it will also be on the server so there we need to do something about it and to secure that we cannot type here anything we need to set up the firestore rules and therefore we need to modify our current rules and you can do it here in this document or you can also do it directly on this web page in the rules section and then you can here modify your rules i will do it here directly in this document and here inside we first of all want to create the different permissions which we have so let's delete this here and let's put our custom logic here inside and here inside we first of all create one for the users so this is what we did in the last video we allow here the users to write and also to read this is not secure but for our purpose this is fine and then we want to go into our chat and messages and this is where this messages are created inside and the inside we allow the users to read the messages however we don't allow them to write the messages only some users and here we check if the user is not banned and therefore we create a new function and then we go over our documents and go here inside of the band collection and then we look here up the id user and if this is false then he is not bent and can write to our document and yeah this basically correlates exactly here with the cloud firestore and he inside this bent collection with this id user document and this is what we are referring to here with this statement all right now that we have created these we can go back to our terminal and here inside we go back to our firebase folder and then we type here deploy only firestore rules and what he will do now is to upload this firestore rules file to our server and then you can also go to your backend and into the cloud firestore tab and rules and here you see the updated rules so always make sure to first save this file here and then you can execute on the terminal this command to actually upload all the rules to this firebase server and right now if i try to type here anything um this user is already banned so he cannot type anymore so i can type here anything and you will see okay there is an error in our console for this application and this is basically a permission denied arrow so we don't have any permission more to write here to this firebase chat and maybe it's great to also notify the user that he has made some mistakes here and that he got banned from this application and this is what we want also to update in our app itself and therefore i go here to this new message widget which actually sends a message and here we upload the message to firebase and this gives us and here an exception and we simply can build here a try and catch around and then if there is some error we simply show here at the bottom is neckbar and it says you have been banned for using bad words and now if i hot reload this application and we try to type here anything more then you see every time that the user gets here also the notification that he was spent and if you want to allow the user again to write messages you simply delete this bent document and if you delete it right now then the user is not banned anymore and he can type again so i can type you more things and it will be posted on the server again however if he again writes bad messages and he will be banned again and then the same thing applies again and here a new document was created for this user again and if you get the source code you can also see this upload functions shell inside and with this one you basically can every time execute the script to upload all the functions and also the rules automatically so you don't need to type all the stuff all over again you simply execute this one and you can commence this here also out if you have already installed them so you don't need this anymore however i will let it inside so for the first time you need to run these both comments also and as a hint invoice ninja has built an app with flutter for managing invoices and this flutter app is open source and you can check it out this app and also the source code on github hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye

Channel: HeyFlutter․com

Views: 24,151

Keywords: webdev, app development, lesson, tutorial, firebase, flutter, flutter firebase tutorial, flutter chat app, chat app, firebase chat app, functions, firebase functions, dart, javascript, js

Id: 7UcM6Y12LEk

Length: 28min 30sec (1710 seconds)

Published: Fri Oct 30 2020