Flutter Push Notification Using NodeJS API

[Music] welcome back to snippet coder and we are back in our video in this video we will learn how to send push notification to flutter application using node.js api and one signal so you can see here this is our application in the left hand side you can see here this is our api and from here we will send a notification to our device so here if i click on the send now you can see here we have got the notification test push notification if i remove it and if i again click on the send you can see here we are getting the push notification so we are going to cover two things first one is a send notification to all device and second one is a send notification to specific device 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 so first of all we will create our api in node.js and in that api we will have two endpoint first one is for sending notification to all devices and the second one will be for sending the notification to the specific device so here is our project so now we will create our project and here we will run the command npm init if we initialize the node.js project it will ask for the package name then version then we have the description entry point then we have the test command repository keywords author license and it is asking for the confirmation we will put here yes so now our node.js project is ready so now here we will install our packages we required only two packages first one will be npm install express after this we required one more package npm install and that will be node mode and we will save it so when node.js api is ready so now we will create a folder structure and first of all we will create a new folder that will be for our config then we will create one more folder then will be services then again we will get one more folder that will be for the controllers one more folder is required that will be used for routing and all and here we'll get one index file also index.js and here we will write the code constraint express is equal to require express and this will be like importing the package here then here we have constant app is equal to express and this will be for creating the object for that express then here we have app.use express dot json then we have to use a routing and all and here we will put app.use and the endpoint will be api and here we will put the path for our routing and all dot slash routes here we will get the new file later on app dot routes and all the routing of the application will come in this file then here we will start our server and we will put here app.listen here we have process dot environment dot port and we are using it four thousand if any port is not defined in the environment file then here we have function and here we write console.log ready to go so what we did here we have created our index.js file there we have created the object for express then here we are using app.use and here we are putting express.json then here we have app.use and here we are using that routing and all and here we are using app.use and here we are putting endpoint api then we are putting here path for our file app.file so now we will go to our config folder and there we will create new file and we will name it as app.config.js file and here we will create constraint one underscore signal underscore config and here we will pass our app id and our app api key that we will fetch from our one signal account here we have app underscore id and here we have apa underscore key then here we will do the export and all module dot export is equal to and here we will pass this one signal config so now let's go to the browser to see how to fetch our app id and ap key from our one signal account so this is the website onesignal.com and here we are using onesignal.com for our push notification and all and here we will log into our system so we have open our app so this is our app which we have already created and here if i go to our settings then here you can see keys and ids you have to click here and here you can see one signal app id you have to copy this and then you can see here rest api key and and then you have to copy this and that you have to put in your app.config file so now let's move to the node.js code and here we have to put the app id and then here we have to put the api key so now let's move further we will go to our service folder and there we will get one new file and we will name it as a push hyphen notification dot services dot js and here we will use our app.config for that we will create here constant one underscore signal config is equal to required we will fetch from our config folder slash app.config here we will get one function with async function send notification here we have the data then we have the callbacks here basically we have to do the rest api calling and all to our one signal server with that uh parameters which we will provide from our controller and then it will hit one signal account then there it will send our push notification to the all the devices or any particular device and here we have to create where headers and here we have content type application slash json jar set is equal to utf-8 then here we have to provide authorization authorization and here we are using basic then here we will pass one signal dot api key then here we will get the options here we will create one variable for options here we will pass hostname and it will be onesignal.com then we have the port number we are using here 443 because we are going to hit our http then here we have the path here and this will be the endpoint for the one signal slash apa slash v1 slash notifications then we have the metadata and we are using a postmatter then we have the headers here and we are using here headers with this variable then we will require https is equal to required https then here we will get the requester where request http s dot request here we will pass the options then here we have the function here the response which we are getting from the request and here we will put request dot on data function data here we can also consolidate the request console.log json.parse because whatever data we are getting that will be in the json format and from here we will return callback so here we are not getting any error we will put here null as a first parameter then here we will copy this one and we will paste here as a response then for the error we will put here request dot on error function here we have the error and we will return here callback and the message we are passing here e this variable as error and here we will write request dot write json dot stigmify data quest dot and then here we will do module dot export is equal to send notification so what we are doing here we have created one function send notification and here we have two parameters first one will be the data then we have the callback and here we have the headers then we have the options here in the header we have content type then we have the authorization that is basic authorization with the api key then we have the options here and here we have host name port number path then we have the method then we have our headers here then here we are creating the object for the https then we are doing the request to the https.request by passing the options here then we are getting the data here so here whatever the data we are getting with the response then we are passing that result to our callback to the response and here we are doing our own error processing and all then here we are writing it and then we are putting your hand then here we are just exporting it so now let's move further we will create our controller file so inside the controller folder we will create new file push hyphen node equation dot controllers dot js file and here we will import our variables one signal is equal to required config slash app config then we have to import our service file constant push notification service and we have required dot dot slash service folder slash push notification service and say we'll create export dot send notification is equal to request request response next and here we will create the object for sending the message where message is equal to then we have the app id app underscore id and we are using from one signal config dot app id then we have the contents here and the content will be the message which will go to our push notification and she will put test push notification if you want to send in any other language also we can do we are just doing for the english language then we have the included underscore segments and this mean notification will go to all the devices then you have the content underscore available true and this variable is very important in our highest device if we make it true then only that push notification will work in the background also then we have the icons here we can put here the icons which we want to show in the notification and by default we are using ic underscore notification underscore icon this can be used from our android folder and then we have the data here this is for sending any custom data if you want to send and here we are just sending one data that is push title custom notification we can also send any ids also if you want if you're linking it with the database then in that case we required ids and all that also we can send from here then from here we will call our push notification service push notification service dot send notification and here we will pass message then we have the error results these are the callbacks then here we will check if error then we will return here next error else we will return here response dot status 200 that means request is valid and we got the data also and we will pass the message success and the data will pass whatever data we are getting from the api so what we did here we have created one function export dot sign notification and here we have request response on next and here we are getting one object that is message and there we are passing app id then we have the content here then we have the included segment then we have the content available then we have the small icon then we have the data here then here we are just calling our push notification service and here we are just calling our send notification and here we are just passing this variable as a parameter then here we are getting the callbacks and here we are checking if the error then we are returning here error else by default we are just calling here response.status200 that means it is a valid request and here we are just passing the message as a success in the data whatever the data we are getting from the one signal ap we are just passing here so now we will copy this function and we will paste here and we will rename it to send notification to device so what it will do this function will send a notification to particular device and here we are just change it as included segment to included underscore player underscore ids so this means included player id means it will send notification to only those devices which we are just passing to this request and here we will just include one more variable that will be include underscore player ids and here we will get from our request dot body dot devices so rest of the code is same so we don't have to do anything so the controller is also ready so now let's move to the last part that will be our routing and all and here we will create a new file that will be app.routes dot js file and here we have constant push notification controller is equal to require controller slash push notification then here we have the constant express is equal to require express then we have a constraint router is equal to express dot router then here we will call router dot get request because we don't have to send any data from here that's why we are doing here get request send notification will be the end point and here we will assign it with our push notification controller dot send notification and we will copy this we will paste here and here we will change it to send notification to device we will copy this name and we will paste here and we will make it as a post request because here we have to post our device idea on then here we have module dot exports is equal to routers so our api is ready so let's start the epa to test that is it working or not and here we will put nodemon js so here we are getting ready to go that means our api is ready so now we will open our thunderclient and here we will put our first api we will put here localhost colon 4000 that will be the port on which the ip is working slash ap our endpoint then we have our api call that is send notification and we are doing here get request now we will click here send so we are getting here some error so we are getting some error here as we have not added any apk and also that we will add then we will test is it because of that or not so now let's re re-click again so again we are getting some error here so it is working now the issue is because of we forgot to change it to json as object so now we will change it to json previously it is like this way so now if i click again on the send request you can see here we are getting the response from the server that is success message then we are getting the id that is generated for that request and it is saying a recep receptance that means that notification has been sent to four ids and here we have that external id that is none this is the response which is coming from the one signal so now we will change it to post request and here we'll change the method to send notification to device and here we have to put the body inside the body we request our devices as a parameter if we go to our controller here you can see we have that devices as a parameter in the body we'll put here and shift and we will make the array here like one two so this will be basically our player id that we will get from our flutter application i will explain you over there i am just putting head dummy to see so here we are getting a incorrect player id with the id which we are sending here is not a valid ud id that's why it's giving us the error that means our api is working fine but we have not the valid data that data we will get when we start with our flutter application so now our api is ready so now let's move further for our flood application [Music] so this is a folder where we are going to create the replication and here we will run the command flutter create dot it will create a flutter application in this folder so here we have our flutter applications ready so now we will add our package which we are going to use so this is the package which we are going to use that is one signal underscore flutter and this is official package from onesignal.com and all the integration installation guide is over in this package you can follow the same to indicate it we will just copy this in our pub spec here we will add the package so now we will remove the unnecessary code also which is not required and here we will create one page that is home page not dot file and we will make it as a stateful visit home page and we will link it with our main page so now we will write our code here so the one signal indication is very simple and it is just a two line of code which we need to do and here in the build we will add here scaffold wizard here we have the app bar have one we will add a title here node.js one signal and we will use it text wizard elevation we are using is zero and here we have the background color and we are using a color start gray color 200 then we have the body and we are using a center visit and we are using a text visit in the child we are using it text visit push notification and here we will create one function of future white initialize platform and we will make it as a async here and here we have aviate one signal we will import the package here and here we will put dot share dot set app id and this will be the app id which we have noted from our one signal dot com and also we have using our node.js application we will put here then here we have a weight one signal dot shared dot device state dot 10 and it will give us our device id that will be our player id and that we will use to send a notification to specific device and all and here we will print it the value dot user id and here we have to have overwrite void initialize state super dot initialize state and here we will call this slide platform function so now our push notification indication is done so now we will run the application to see is it working or not and we are getting the user id or not we will open the console also in that case and here we will start the application so here our application is working so now you can see here we are also getting the player id also this is the id so now let's note down this id so that we will use in our api for testing the specific id notification part and all so now we will go to our push notification code and from there we will send a notification to the device and to see is it working or not so this is our push notification and from here we will click on the send request so here you can see we have called up notification that is push notification and again if i click on anything you can see here we are getting a notification here and that means our integration working fine now we will do the last step of the video that is my senior notification to specific device and for that we have to put here send notification to device and this one we will make it to post and from here we have the body and here we will pass our player id and all here we will have devices here we will put our device id and first we will put our any dummy now we click on the send you can see here we are getting incorrect player id and all so now we will copy paste the id which we have received from our one signal for this specific device and we will paste here so now you can see here we don't have any notification here and here if i click on the send we are getting here success and here also you can see here we have received the notification also and for make sure it is working fine we will change the api and in the case of that send notification to device we will make it as a specific specific device test notification so now if i again and from from here i will remove the notification so now if i again click on the send request you can see here we are getting a notification with the title specific device test push notification that means our specific device push notification is also working fine so that's all in this video i hope you liked the video 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]

Channel: Snippet Coder

Views: 1,260

Keywords: flutter push notification, flutter push notifications without firebase, flutter onesignal push notification, nodejs push notification, flutter push notifications with firebase cloud messaging, onesignal nodejs, flutter tutorial, flutter widgets, flutter developers, onesignal push notification mobile, flutter push notification local, flutter, flutter push notifications

Id: 3C5pfo7Bc3E

Length: 19min 52sec (1192 seconds)

Published: Sun Nov 28 2021