How To Send Flutter Push Notifications using NodeJS

foreign [Music] coder and we are back with our video in this video we will learn about how we can send push notification via node.js in our filter application and also we will learn about how we can handle the notification click event by clicking on the notification bar and also we can understand how we can handle the background handling of the notification if the app is closed or terminated so before starting the video if you are new to our Channel subscribe the channel by clicking on the Subscribe button and click the Bell icon to get notified about our latest videos thank you [Music] so first of all we have to go to our console.firebase.google.com and there we have to create a new project and here we have to click on the add project and here we have to put the name of the object like we put here push notification testing after that we have to confirm here and we have to click on the continue after that we have to click here continue again and from here we have to select our Google analytics account if required because here in the previous step we click on the enable Google analytics for this project we can also disable it and we can click on the create project it will create the project so here we have your new project is ready so now we will click on the continue and after that we have to click on the add app to get started and we have to click on the Android and also we can do for the Apple also right now in this video we are covering for the Android here we will click on Android so now here we have to put the Android package name and we have to make sure this package name should be same as per our application so whatever our application package name we have to put that here like here we will put com dot push notification dot testing after that we have to put here the app nickname that is optional we will put here push notification testing and then we have to click on the register app so now this is very important step and we have to download this file and we have to put inside our Android slash app folder and and for doing that we have to just go to our flutter application there we have to create a project first then we will drag drop over there so here we have to create that flutter package and for that and here we write the command flutter create dot then we have to put the package name also we will put here hyphen hyphen dot org and here we will put that package name which we have created and this is the package name which we have created and we have to copy this one and we have to go back there and we will paste here now we click on the enter so it will create the project here so now we will go to the Android folder and there we have to go to app folder then we have our source folder then we have our main folder then we have our Android manifest and here you can see we have com dot push notification.testing dot app it has been added because we are creating this project inside the app folder now what we have to do we have to copy this one and we have to find here and we have to replace it with our package name and we have to remove that dot app so now our package name is also configured so now what we will do we will go to our browser and here we have download googleservice.json file and we have to download this file so now we have to go to our flutter project and there we have to copy that file and we have to copy this file inside our app folder and here we have to put that file inside our app folder and you can see here we have having that Google hyphen services.json file so now we have to go back to our browser here we have to click on the next then we have to do some command changes for the Android and for that we have to go to our root level Gradle file and we have to add this line now we have to go to our flutter project here we have this root level and here we have to paste here then again we have to go to our browser and here rest of the information is same so now we have to go to the Step 2 and there we we have that grader file inside our app module and what we have to do we have to just copy this line and we have to go again there here inside the app folder we have build.gradle and we have to go there here we have to write that line and we have to write here apply plugin and we have to put here this com.google.gsm.google Services then again we have to go to our browser and here we have to copy this line and we have to put inside our dependencies now we will go back to our flutter application here we have the dependencies we have to paste here so now we have to go back there and here we have to click on the next then we have to click here continue to console so now our setup in the flutter application is ready so now we will go back to a flutter application so in our flutter application we are going to use two packages so the first package will be Firebase underscore core and this will be used for the Firebase message and all and the second package we are going to use this Firebase underscore messaging and that will also use for our messaging purpose for the push notification and all so now we have to go back to a flutter application here we have to go to the pub spec and here we have to add those packages and here we have two packages so now we will save here so now we will go back to our main.dot file and here we have to remove all the unnecessary code and here we will get new page and we will name it as a empty page empty underscore page.file and we will link here and here we have to make it as a state let's visit and we'll name it as a empty page and we will save here and here in the empty page we have to use a safe area then we have child as a scaffold visit then we have the body here and we will use a center visit with child as a container and a child we have tax visit as a push notification so now we will go back to our main.dot file and there we have to write the main code for our push notification and here in the void main function we have to make this function as async here and we have to put here visit flutterbinding dot ensure initialize then we have to await here by calling here Firebase Dot initialize app and it will initialize the Firebase in our application then we have to write here Firebase messaging dot instance dot get token dot then value and we will print this token here we will write get token value and this function will be used when we have to get the token from the Firebase and that token we can use to store in our database also and in this function we can also call our API also so that we can store this token and we can use it later on by calling the push notification all for that particular device so now let's run the application to see are we getting that token or not so here we have our device ready so now let's run the application to see is it working or not so now we will open our console and also we will run our application so here we are getting some error because we have to go to our build.gradle and we have to change the compile SDK version to double three and for that we have to go to our Android then we have our build.gradle and here we have to change the compiled version and we will change it to double three I will save it so now we will run our application to see is it working or not we will open the console also so here we are getting one more error and now we have to go to our build.gradle and there we have to change the minimum SDK version to 19. and we will change it to 1919 and again we will run our application to see so here you can see we are getting our application and it is working fine and here you you can notice in the console we are getting the token also and here the token name and this token will be used for sending a push notification and all so now we'll proceed further and we will create one new page and the name of the page will be home underscore page dot dot file and this page we are creating just to show whatever the push notification message we are getting and that we have to show in this page and here we will make it as a stateful widget home page here we will use safe area then we have child address scaffold widget then we have the body here and we are using a center wizard with a child as a container then we have the child here and here we would make it as a text visit push message and here we have to create one variable of name message and here we write string message is equal to we will initialize empty message then we will make the overwrite for our void date change dependencies here we write super dot did change dependencies and here we will check for the arguments we will get one variable final arguments is equal to model route of context dot settings dot arguments here we will check if argument is not equal to null then we will get one variable map push arguments is equal to arguments as map then here we will set the state for our message variable and we will write here message is equal to push arguments and here we will write the name as a message that we have to send so what we did here we have just created one simple page just for showing whatever the pushed notification we are getting and that we are displaying in in this page and the implementation on this page we will do from our main.dart file now we will go to our main.dart file so here we will call the Firebase messaging dot on message open so what it will do it will just open the page for the whatever the message is coming when the user click on that message it will open up our application with that page open of that page home page and it will show the message of that push notification message here we write listen here we have a remote message and we make this function as async here and before that we have to create here one variable that is global key Navigator state here we are Navigator key is equal to Global key here we write Navigator state now here we can also print the message also we will write here print on messes open and we will copy this one and we'll paste here and we will write here dollar message then from here we will just open our page that is home page whenever the user click on that notification and we will write here Navigator Dot push name and before that we have to go to our material app and here we have to write the routes and all and also we have to map our Navigator key with this Global key that is Navigator key and here we write our routes and the first one will be slash and here we'll call our empty page then we have our push paste slash push page and here we call our home page and we will write it constant and from here we can remove this home now here in the context we have to pick from our Navigator key dot current state DOT context then we have to put the route page that is push page and here we have to pass the arguments and the arguments we have to pass here message because here in the home page you will see we have that push argument as a message and whatever the data we are getting from our push notification we will convert to our json.in code to the string and this is just for the demo purpose we are just displaying whatever the data we are getting and on the basis of the real situation of the requirement we can deal it with it like whatever the data we are getting if we need to extract any extract any particular field that we can extract and we can send to that particular Pages like suppose if we are working on e-commerce application if we are getting any new order created notification and that case we are just sending any new order ID and that order ID we can pass to the order page like this way we can do here we have message dot data so what we are doing here is we are just calling our Firebase messaging dot on message open app Listen even and here we are just checking for the event like listening for the event if any new message is clicked from the notification then we are just redirecting user to the home page instead of that empty page and this will be work if suppose if the application is in a background then this will be work if application is in background then it will work now the main thing requirement come is like if we are having any application but the application is closed or terminated but we are not getting any push notifications for handling those push notification when the app is closed or killed or you can say terminated then we have to call this function so that we can handle the push notifications and here we have to call Firebase messaging dot instance dot get initial message Dot 10. and here we have a remote message message and we'll make this as a null label here and here we will check if message is not equal to null then we will copy this code and we'll paste here so what it will do we will it will check if the app is closed and then if we are getting any message then we if we click on that push notification message then it will open the app by showing the message of that push notification to the user in the home screen so the major difference between both these functions are like this will only work if the app is in the background if we click on that push notification then it will lend user to the home page by showing that message in the Json and this will be work if the app is closed if app is closed or terminated then this function will work if the user click on that push notification it will land user to the home screen so we can test all this function when we write our EPA function because without that we will not able to test these functions so now the next requirement comes suppose if we are having any requirement like instead of opening that application or clicking that notification we have to just handling that notification in the background like if we have to update the app silently without showing user tag any new push notification come in that case we have to use one more function that is Firebase messaging dot on background message and for that we have to create one Handler and here we write the name of that Handler Firebase messaging background Handler and outside here we can create that function we make it as a feature white we write this name and we'll pass here a remote message message and here we have to call await and we will make this function async here and we have to call here Firebase dot initialize app because the app is closed and also that app is not working but also that user is not clicking any notification but we have to handle some notification in the background whatever on in that case we have to initialize our Firebase dot initialize app then only it will work else it will not work and here we can just print our print background message Handler and we will write this message variable here so what we did here we are just calling here Firebase messaging dot on background message function this function will be used if we have to handle some back ground processing of the application without notified to the user like any new notification came we have to just update the app or anything else we have to update in our application without notifying to the user for that purpose we can use this function so our flutter code is ready so now what we will do we will write our EPS so that we can test the push notification by sending from the API and we can receive that notification in our flood replication so now let's move to the IPA part [Music] so now from here we have to initialize our node.js project and we will write here npm I so in our node.js we are going to use two packages first one is Firebase admin node.js SDK and the second one is our fcm notifications and the Firebase admin will be used to connecting our Firebase with our node.js application and this fcm notification in the helper package that would be used for sending a push notification from our from node.js application so now let's install these packages and we will run this command so now we will run our second package so now we have to install one more package that your Express server and we'll write here npm I express so now what we have to do we have to go again to our console and here in that Firebase console we have to go to our this setting and there we have to go to our project settings there you can see we have service account and here you can see we have the option to generate new private key so now what we have to do we have to just click on this generate new private and we have to click here generate key it will download one push notification.json file that file we have to copy in our node.js folder and also we have to make sure we have the permission for the push notification in our service account we have to click here and from here we have to click here and from here we have to click on the navigation menu then we have to go to our APS service and from here we have to make sure we are there is Firebase Cloud messaging API access and we have to click here and here you can see the status is enable that means we have the permission so now let's go back and we have to copy this push notification file and that we have to copy in our node.js folder and put doing that we have to create new folder here that is config folder and we have to drag that file here now we have to rename this file to push notification key now we have to create new folder here that is controller and here we have to create a new file that is push hyphen notifications dot controller.js file and here we have to create some variable first one is a where admin is equal to require Firebase hyphen admin then we have where fcm is equal to require fcm notification so we have imported both the packages now here we have to write where service account is equal to require and here we have to link that key which we have downloaded we have to put here config slash push notification key now here we have to create one variable for constant certificate path is equal to admin dot credentials dot certificate and we have to pass this service account here then we have where fcm is equal to new and here we have to create object for the app cm and we have to path this certificate path here then we have to create a function export dot send push notifications is equal to request response next and here we will use try catchy inside the drive we will write here let message is equal to we'll create the object here notification and there we have two variables that is title I will write here test notification then we have body and here we will write notification message after that we can send a data here and this data will be shown in our application and here we will pass data like order ID one two three four five six then we have ordered date we will write here 2022 10 28 then here we have to pass a token and this is very important because if we are sending any notification to a specific device then if you have to pass this token then in case we have to send notification to multiple devices then we have to pass here the array of those devices and right now we are just passing this so for the testing purpose we are just using this function so that we are just passing a token from this API then it will send a notification but in the real example we can call this function in the case of any suppose in case of any e-commerce application we can call this function if any new order is created then we will pass that token of user token from our database we can pick it and that we can use and here we will write request dot body dot fcm underscore token after that we will call here fcm dot send and we'll pass this message here then we have function error response and from here we will check if error and then we will return here response status 500 dot send and we'll pass here message this error in the else condition we will return here response status 200 dot send and we have message notification send and here in the cache we can throw error so what we did here we have and here we have just imported that packages and then we are just getting the variable for the service account and we have just created the variable for the certificate path then we have that object for our fcm and here we are just creating one function for send push notification then in the try we are created one object for the message with the notification title body then we have the data we are sending then we have the token here after that we are just calling our fcm library for sending the message by passing this object then we are just checking here if there is any error then we will throw the error else we are just showing the status as a 200 and we are showing the message as a notification sent so now we will get one folder here and the name of the folder will be routes inside that we will create one file Here app dot routes dot JS and here we'll get the variable for our push notification controller is equal to require dot dot slash controller slash push notification controller then we have constant Express is equal to require Express then we have constant a router is equal to Express dot router object we will create here and here we will call router Dot post request because we are doing the post request here slash send notification and here will pass push notification controller dot send push notification and here we will export module dot exports is equal to router so what we did here we have just created one variable for our push notification controller then we are just creating the object for the Express and the router then here in the router dot post request we are just passing the API name that is send iPhone Notification then we are mapping it with our post notification controller dot send push notification and here we are just export our router so now we will create our index.js file and here we will write index.js and here we will write constant Express is equal to require Express then we have constant app is equal to express we will get the express server here and from here we will write app.use press Dot Json then we have app.use slash API and we will map it with our required dot slash routes slash app dot routes and from here we will listen for the port and we will start our server and we'll write here 4000 function and we write a console.log ready to go and from here we will just start the server to see is it working or not we will write here Node 1 Js so now here you can see we are getting here ready to go that means our AP is working fine so now let's test the API is it working or not and we will open our thunderclient and here we have localhost 4000 API send notification and first we will send our empty let's see what will happen so we are getting here error that is exactly one of the topical token conditions required because we are not pass any token here and for doing that we have to just open our application also so that we can get the token first so our app is running so we got the token so now we will copy that token and we will paste in our here and we will create a variable token and we'll pass the token here so now we will click on the send request so let's see is it working or not so we are again getting some error so let's see what the issue is so here we have the issue as in the request.body we have to make this fcm underscore token and that we have to pass from there I will change it to fcm underscore token so now we will again click on the send request again we are getting the error so let's see what the issue is so here we are getting data must only contain string values because the data what we are sending here is in the number so now we will change it to string here we will save it so again we will click on the send request to see is it working or not so here we are getting notifications sent so now let's see in the Apple so if we are getting the notification or not so now we have minimize the app so now you can see here we are getting the notification here because we are we did only the implementation for the minimize for that code and all so now if I click on that notification so here you can see we are getting the error so let's see what the issue is so error is coming in our argument but we are getting a data from the notification you can see here now let's see our main.dot file for that code so the issue seem to be here in the argument here we are just passing the comma instead of that we have to put here semicolon same we have to do here also now we will save the file and we will run the application again so now we are just testing this one that is if the application is a background then it will work so now we will put the application in the background without closing the app so now we will send a notification from here and here you can see we received the notifications now if I click on the notification so here in the page you can see here we are getting the Json data which we have sent from our API that is order ID and Order date so this is a case for if the app is in background and we click on the notification it will work so now we will test another case that is if the app is terminated or app is closed and for that we have to just close our app from here okay so now we will send the notification again to see is it working or not we will click on Ascend so now we receive the notification so now if we click on this notification you can see here app is closed and terminated so also we are getting a notification and we also get to the specific page also by using that data so this is how it work if the application is closed then this function will be used if the application is working is in the background then this function will be used and also we can have this functionality also in the background message if the app is not working then we will get this one also but if the app is closed we can't test this one right now so that's all in this video I hope you like the video I hope you understand every concept of the Firebase messaging with the flutter and the node.js don't forget to subscribe to the channel like comment share I will come back soon with another awesome video thank you for watching the video [Music] thank you

Channel: Snippet Coder

Views: 7,082

Keywords: firebase cloud messaging, flutter, flutter fcm nodejs, How to Flutter Push Notifications Using the Flutter NodeJS Library, How To Send FLutter Push Notifications using NodeJS, Flutter NodeJS Push Notification FCM: How to create a basic app with it, flutter push notification without firebase, flutter push notification, node js fcm push notification, flutter node js push notifications, how to send push notification in android using firebase, how to send push notification in node js

Id: ZYkRZ1tRdEs

Length: 31min 40sec (1900 seconds)

Published: Sat Oct 29 2022