Flutter Send Push Notification Firebase Cloud Messaging API (V1) | New FCM API OAuth2 Tutorial 2024

hello guys welcome back so in this video you will learn how to send push notification using the new flutter Cloud messaging which is Firebase Cloud messaging API V1 as you guys already know that uh on 20th June 2024 this uh old Cloud messaging API this will stop working as you can see okay so this one we have to implement so this is the continuation of our Uber clone app in which we are going to update the push notification services with the latest new Firebase Cloud messaging API V1 we will go step by step so you will learn everything very easily so in order to send a push notification in 2024 as you know the time when I'm recording this video it is June already started if I show you my you can see today is 11 June and on 20th June this old one will stop working so we will never use this old one because it will stop working on 20th June that is in next week it will stop working it will disappear this is the one with which we have to proceed we do not need to proceed with this old one we have to proceed with the new one which is this one Firebase Cloud messaging AP so let's start so once again you will learn how to send notification and flutter using the Firebase Cloud messaging new API V1 so in order to do that what we need to do is we need the or2 server key or you can say the or2 token how we can achieve we can achieve from here that is you can click here on this manage service accounts and in here it will send you to your Google Cloud console from here make sure that go to all and select your flutter project which is in my case by the name flutter ruber clone with admin when you click on that you will be here you will see this uh interface where you will see this button create service account okay just click on this create service account and for example I will give it name as uh my account name will be let's say flutter Uber clone and let's say I type my name alongside with it you can type any name okay you want you can just type here of course if you want you can make it like this okay and it will automatically create the ID from the name okay and then after it what you need to do is uh you need to Simply click on Create and continue and then yeah the role will be honer this step is important okay so make sure that the role you select is owner okay even it says it's optional but you have to proceed with it if you do not choose anything then you will not receive the push notifications that is it will not be working so make sure to choose for the Second Step the role as a owner okay and when you select honor then click continue and then click on done so you can see that it has been created flutter Uber clone Muhammad Ali this one which we just created okay flutter rubit clone Muhammad Ali it will show you by your own name so you have to give any name which you remember that is this one for example I remember which is I just created you remember the ID so anyways the service ID so I will just click on this one so you can how your mouse here and you just click on it when you click on it it will open this interface now here as you can see okay here you will see this uh permissions then when you click on Keys it will show you this add key button just navigate to keys and then click on ADD key and create new key and select Json and click create so it will give you a Json file for download that is it is downloaded you can see that now what you need to do is you need to simp simply go to your downloads folder open this uh Json file in any uh text editor it can be either Visual Studio code or even on npad it is basically ajent like this okay so what you need to do for now I will close this I will go back to the Android studio and what what you need to do is here I will create a method static future string get access token now this method will basically give us the access token and any information related to the new Firebase Cloud messaging V1 API which is required for sending notification so we say final service account Jason and here we have to uh write our Jon code I mean past our Json code and as I told you this Json which we just downloaded this one okay open it in not pair or vs code okay and what you need to do is just copy this whole Json code from here then close this and come back here and in here you can paste it like this now as we have already add the curly braces for this so you can simply remove this and this one okay because we have already added it the starting curly PR and the ending curly PR with a semicolon so what this jesson will do it will basically this contains our client ID and the client secret obtained from Google Google Cloud console okay and you do not share this with anyone because this is your client ID and client secret obtained from Google Cloud console after this next thing that we will do inside this method is to define the scopes for services like for notification the scope will be Firebase messaging so we can say inside the double quotes you write https column www.google fis.com Firebase SL slf fire. messaging okay this is for using the uh Cloud messaging for sending push notifications other than this like for using the database and email Services you can use the these two links as well the two scops as well which is the same just you have to type user info. email and Firebase do database make sure to put comma and comma at the end so just add these scops and after these scops we need to add the dependency which is known as HTTP already we have it here okay so of course now we will add more dependencies as well for sending push notification with the new uh Firebase Cloud messaging vi1 API I will show to you guys step by step first of all what we need to do we say HTTP do client and we give it name as client equals to okay here we have to add now the two dependencies and that is Google uncore apis it is directly Google apis not underscore Okay Google apis and the next one is uh Google apis underscore Au okay these two Google apis Google apore o click P get now once you add it now come back here and here what we can do we can simply say which belongs to the package o underscore IU this one o iio do and we will import this as o Also let's quickly import the other one which will be V1 which is of course related to the Google apis Google apis service control this one service control and it is called V1 do dot this one okay for sending push notification using the Firebase Cloud messaging new V1 API and we will import this as service control so we can say now all all dot client via service account and to this we pass two things one is our uh service account gesson okay by simply Sayang o do service account credentials Dot from Json and pass to it the service account Json then the second thing is the Scopes which we have to pass to it now using this client we have to now uh access the token that is obtain the access token we can say get the access token or you can say obtain the access token using o dot access credential let's give it name as uh credentials o dot obtain obtain access credential via service account and to this we pass three things first one is our Json service account Json comma then Scopes and then of course our client and as a result it will give us the access token then after it we close the HTTP client by simply saying client Dot close we close the HTTP client and then we return the access token can say return credentials dot access token. data so it return us the access token which we will use for sending the push notification using the new fcm V1 API so now in our send notification to select driver first we say final string server key now server key is the token as you know which this method will return okay whenever we call it so we can say get access token so it return us the access key and that access key is basically you can call it access token or server key or you can say server token then we Define a variable endpoint Firebase Cloud messaging which is the API URL for sending notification so the new end point for the new fcm Cloud messaging V1 API is this one https callon fc. ap.com slv1 projects SL and here you have to provide your project name your project ID okay and this will be your Firebase project ID the reason why I'm typing it so that you can understand understand it okay slash messages colum send now this one which is your Firebase project ID here this will you will replace with your project ID from where you will get this ID well it's simple you can get it from here I mean from the console project settings here it is okay this is your project ID as well as you can get that from your Json file Android app app Google services. Json so here you have your project ID as well okay you can see so either you can copy it from here or you can copy it from here it is same so you need to just pass that project ID here okay in my case this is my Pro Firebase project ID so make sure to write this same end point for sending the push notification using the new Firebase Cloud messaging V1 API then after it we Define our map that is the requ uh required you can say data which you want to send or you can say the notification payload so for that purpose we say final map string Dynamic message equals to curly presses and in here we have to Define that for example first we have message please type the the same spellings okay this is according to the documentation then curly press now in here we have to Define first the token and the token is basically our uh registration token of the driver phone or the receiver phone that is to which phone or to which user we want to send the push notification so that token we have to pass here and you know that we can access it using the device token variable so this is the token of the phone or the device you want to send the push notification in our case it is the driver phone that is any driver which is available in the nearby location to that driver the push notification will be sent after it you define the notification for this we have uh title and we have of course the uh body of the notification so you can alongside like either you can send any textual information okay or uh you can send like type anything like this but in our case what we want is we want to send the some useful information like the username and the uh pickup address and drop off destination address make sure to put a comma here so here first we get the drop off location using provider as you know we are using the provider stat management this one make sure to import provider dot dot and app info as well and then we get the pickup address so now what we can do we can simply say new trip request from username and you know that this is the current logged in username which is on which we uh this variable is defined on the global do dot Global variable. dot okay which contains the loged in user username and then we have the body in which we pass pickup location the pickup address then in the new line slend means in the next line okay drop off location okay to which pass the value of drop off destination address then after the notification we have the data and in this data basically any uh special information in a in the form of key value if you want to pass for example in our case we want to pass the import important ID which is the trip ID so please write the same keyword key the same key name trip ID because if you use different and I use different maybe later you will forget and you will not get the trip ID in the driver app so make sure to write the same key name trip ID by this key we are sending the trip ID okay in a push notification to the driver as you know this is the user app so from the user app the notification will go to the driver so this is all about our message device token notification and data make sure to follow the same way and the same key name then after it we have to send it using the new end point so after this we can say final HTP do response response equals to wet HTTP dot post and we can say URI dot pars and we have to pass our endp point to it then of course the headers which is required for sending a request or push notification so what we need to do is here we pass the content type content Dash type column SL application sljs then the authorization and the authorization make sure that the new technique is first we write the keyword Bearer and then we pass our exis token which is you know that inside this variable server key so we can say either server access key or you can say token this will be the most appropriate name server access token key okay so we have to pass this Bearer and then that then after the headers we say comma body and to body you know we have to say Json in code and we pass our message okay now this response will be either successful or not successful so we have to get that make sure to put a comma not semicolon okay so after this let's check that it will be first we say if the response do status code if that becomes equals to 200 it means the notification sent successfully so we have to print out the result we will simply say notification sent successfully otherwise you know that it will be not sent you can just say failed failed notification not sent failed notification not sent or instead of that you can say failed to send fcm message and you can print the actual status code which is coming as a response from the Google API for sending the push notification that is for Firebase Cloud messaging and here you can say like Firebase Cloud messaging message sent successfully so you can write any message you want so what we did here is we get the fcm server access token which will be assigned to this this is our endpoint for fcm and then we prepare our message in which we Define the token the notification title body and data and then we send the request using our end point so if the stus code return is equals to 200 it means fcn message sent successfully otherwise we have an error now let's test our app so the app is running now now also up the driver phone log in quickly as a driver now make sure that for the driver app as it will receive the push notification minimize the app and go to the app info make sure that the permissions for the notification is allowed okay so anyways now let's minimize the app and now let's test the okay first of all one thing which we forgot is also we have to go online as a driver so let's go online first and now you can minimize the app and now let's test so let's say the user wants to go to this location and now let's request so here we go here you can see the push notification received the title new trip request from user Ros Mark the pickup location alongside with the drop off location you can see that so it is working fine

Channel: Muhammad Ali's Coding Cafe

Views: 6,859

Keywords: send push notification using firebase, send push notification from firebase console, send push notification v2, send push notification to multiple android devices firebase, send push notification to specific user firebase, fcm server key, fcm server key from firebase console, fcm server key firebase, fcm server, fcm service required

Id: X3i9SErMGD0

Length: 24min 40sec (1480 seconds)

Published: Tue Jun 11 2024