Flutter and Firebase - Cloud Functions

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
hello guys and welcome back to coding orbit and welcome back to the firebase tutorial in the previous videos we implemented firebase oauth along with firebase firestore to save some user data in this video we will start implementing firebase function but before we do that we need to edit a little bit in our code so first things first i added widgets directory inside our lib directory and i added user widget but i'm not going to go over it because we don't care about ui in this tutorial we care about implementing firebase so i edited the home screen to have the new ui that i created now if we run the application we will get this screens to sign the user up but the user might be already signed up or signed in so we need to check that if the user have credentials the user is already signed up we need to show the user immediately the home screen otherwise we need to show the sign up page so now let's go to firebase helper to do that down here let's say static widget and let's make it get let's call it home screen and in here let's check if auth dot current user different from null return const home screen otherwise return sign up screen and let's have cons in here too now in the main let's go to the main and in here let's say late final widget screen and before we run the app let's say screen is equal to firebase helper dot home screen and instead of passing the home in here let's pass the screen in here and let's rerun the app so let's see if it works and it does so we are on the home screen right now and we have a button here to send notification which will do nothing for now because we didn't write anything now before we continue in flatter side we need to implement firebase cloud functions therefore we need to enable cloud functions in our repository or directory here so inside here just right firebase we net functions and let's see what happens okay so we need to so to select an option we need to use an existing project okay so we need to specify which one i'll choose firebase tutorial you choose yours okay now we need to choose if javascript or typescript so i will choose typescript and it's asking do you want to use yes lens let's say yes and let's say yes to download the dependencies and let's wait a little bit for them to be downloaded all right it downloaded all the dependency that we want now let's close our app and let's close all these okay now as you can see we have functions in here and we have an srcd folder now open the src folder and remove everything in here now it already imported firebase functions so we inside here we need to import star as admin from firebase admin then now we need to create a method which is a function that we want to call from the flatter side so first thing first let's create a method that will check the connection and if the functions are online or what so let's say export dot let's say check health is equal to functions dot https.on call and inside here let's say async data and context and let's have semicolon here now inside here now you need to be careful not to use that because it will have error about that so let's have two spaces and inside here let's just say return the function is online and that's it for this check health function now the main function we want to create is the function that will request will take some parameters from the flutter side and will push these into a notification to another device so let's create a new function let's say exports but let's call it one or send notification and this is equal to functions.https.onco and it's async as well it has data and context now we're not gonna use the context right now but we will use it later so let's have it from now so first things first we can send a notification with image or without image so let's have this function have that ability to send a notification with image or without image so let's say we need to take title so let's say cons title the title for the notification and then let me copy this and let's say buddy we need to send the body from the flutter side and let's say image also we need to send url image from the flatter side and finally the most important one is the token so we need to send the token from the flutter side which we will have from the firebase firestore now after we extract all these variables we need to send them so let's first create try catch a block in the try that's a create payload so let's say const payload is equal to inside here we will pass a map this map first it will have the token then it will have notification notification is also a map it has title the title that we created it has buddy and finally it has image the image that we extracted and finally inside here we'll pass data so the data would only have a body and that's it for the payload now after we create the payload but before we do that we need to do something in here let's first say admin.initialize app and then let's say cons fcm which is firebase cloud messaging is equal to admin dot messaging okay now down there in the drive block let's say return fcm dot send so the send takes a payload so let's pass the payload that we created and let's have the done it give us a response so we need to show to return the response that we have in flutter to flatter sorry so let's say return and let's have a map here let's say or let's say success is true and let's say response is successfully send message and let's say plus response i guess i'm missing an okay and that's it in here and let's have a catch here let's say that catch the catch may give us an error so inside here let's say return error error last error okay now down after the try we need to have catch so inside here we need to say and the catch might get an error so inside here let's say throw new functions dot https dot http error let's say invalid arguments with error plus error and that's it that's it for the firebase functions and we are ready to deploy our functions but before we do that we need to fix all that so let's check the troy have two spaces however constant of two spaces four okay so this one shall have two more so that shouldn't be here and this one should have two more so all that wouldn't be here with this one and this shall go to this should go here and this shall be here and i guess this works okay so this shall have only two and this shall have only two and in the catch i guess that works for okay i guess that's it we are ready now to deploy our function but before we deploy our function or functions because we have two one for the health and one for sending notification before we do that we can deploy our functions to firebase unless you have enabled or changed the project mode into pay as you go i guess that's its name so if your project on spark maybe that's its name you can't upload or deploy functions to your firebase project so let me update my project and continue all right i have updated my product to blaze plan and now we are ready to deploy our functions to deploy functions we can say firebase deploy only functions and hit enter and let's wait a little bit to see if it will work or we're gonna have some errors playing okay we have some errors so let's see what are they we have couple of warnings about the data context but we have expected space after try which we don't have in here and the second error expected space after catch which we don't have in here i think that's it so let's run it again to see if it will work or not okay it worked and it will start deploying our functions so let's wait a little bit for it all right deploy completed so now if we go to our project and we expand build go to functions we shall see two functions in here which we do one for check health and the other for send notification now to test our methods or functions first we need to install cloud functions so let's copy that and let's go to pubspec.tml and add it in here and let's save it and wait a little bit for it to [Music] run okay now after we do that let's go to the firebase helper and let's create a method and this method will call our function so let's say static future void and let's say test as it takes nothing but it's async okay inside here first we have to say http as callable and let's create a callable which is equal to firebase functions dot instance dot http as called now we have to pass the function name so inside here we created check held now let's test the check health and after it we have to say await callable.com and we can say [Music] final response is equal to await.call and we can say print response and let's go to the widget that i created in the elevated button we have on click here so if we go to the home screen we have to pass the only click for now we're not doing anything but now let's say firebase helper dot okay dot test health and let's run the app again to see if it will work or not so let's wait a little bit for it to run okay now let's clear all that and let's try and click send notification let's see what will happen i guess that's it so let's go back to firebase helper and let's have in here let's say if response dot data different from null print response the data and let's save it again let's clear it and let's send notification you can see the functions is online so [Music] okay we don't need that okay so our function is online this one the health function that we created therefore the send notification is also online but we can't test it now because we have to edit in the flatter side so we will do that in the next video and that was all for this one so thank you guys for watching if you like the video don't forget to like comment and subscribe and don't forget to turn on your notification bell so you don't miss the next video i'll see you in the next video
Info
Channel: Coding Orbit
Views: 14,010
Rating: undefined out of 5
Keywords: flutter, flutter firebase, flutter fire, FlutterFire, firebase cloud functions, firebase functions, flutter firebase functions, flutter firebase cloud functions, firebase functions in flutter, firebase functions flutter, firebase backend flutter, flutter firebase backend, flutter with firebase, flutter firebase tutorial, flutter firebase app, functions with flutter, firebase, firebase flutter
Id: bzRp2sJ7kZc
Channel Id: undefined
Length: 15min 35sec (935 seconds)
Published: Sat Aug 20 2022
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.