Firebase Cloud Messaging Setup from Server to The Flutter App

all right in this video I'm going to show you how to set up another question notification in flutter and also to send the notification to come from the server so this is what we're going to achieve you're going to achieve when we set up a notification we set a recipe that you post notification then it sends to the device so this service API so if we test it we have that so go and test two all right so I'm going to show you how to set that we are going to use awesome notification with Platinum so let's jump right into the flutter app so is the float up back here all right so first thing first is setting up Firebase so you're going to create flat up normal creation of letter app you add these dependencies a Firebase score I'm using data version 3.10 point zero so we will have this same dependency that I have here and then you create a project in your Firebase console so if we move to our Firebase console here I have already created one but let me just get you through how you can create your project there so this is the one that we have type the name click continue select that is if you have enabled analytics then allow it to to finish after that of course I'm going to delete this actually yeah I'm going to delete this so after that I will just create it come on you're going to enable Cloud messaging so going to project here project settings Cloud messaging so at by default is it has been disabled for this particular particular project so you're going to click over here manage in Google Cloud console if you move to Google Cloud console let's just use this link so that you see what's there so you're going to enable it after enabling it don't rest your case there come back to your project here reload so at this point we will need this server key at some point in the day so actually let's just use this one so all right so here I have already made one so I'm going to remove everything so what I'm going to remove here is this because you're going to generate new one I'm also going to ensure you have ensure you have this on your flutter application have so you have this here if you have this one and also you've added this to this one and this one all right so next thing is to the next thing is to that's the list also this one two because you're using the new generated credentials so let's delete that one so all right before we are done here ensure you have uh in the rest drawables and sure you have RS underscore launcher icon in the rest tutorial rest drawables and then things are done with the Android folder let's move to let's move to the notification setup so what I've done here in the notification setup is initialize the Firebase messaging then initialize the awesome notification so when we're initiating filler or some notification we pass in the icon that will be shown up when the notification occurs and then we add the channel key we had the impotence vibration if we want and also to show badge and channel description there are several things if you have if you highlights over this you can get all these options and then we are checking if the notification is allowed if it is allowed just leave otherwise if it is not we request permission to send a notification okay next thing is we configure the push notification so that yes with Firebase messaging so first thing we initialize it up there then we set foreground for notification presentation options then if it is IOS we add this these ones otherwise we set up the background notification down here simple like this then we listen on messages we listen on messages if notification is not null we create that notification so creating notification we have here is required title and the body and the channel key must be same as the channel the channel we created up here very important we need to have the same key for the channel so we call awesome notification then create notification so this allowed the first show notification like this like the one here this one here right okay so then we add event callback so when a notification is clicked we add an event callback so this action is here so you can add when a notification is clicked you add everything you need here right so I'll link into the description of this video and I've pushed it through GitHub so that you can get the source code all right so next thing is to set up Firebase fully remember we have those packages installed but you even set it up so we're going to here first thing first this is the previous one that I used the previous one I used so so let's have it this let's fret ensure you have the flutter fire installed so how to add flutter file let me just shoot very quick oh so this one here the move here you ensure you have this login after installing there after installing this Firebase CLI then you activate the flutter file then you we are at this point we configure so what project did we create so we created name I think that is how it is called that weird name name so it's the project name is name so this is it so next thing is we look for it in here so we move name this is it then we add it of course we only need a recent then we generate those files so this will generate a file here that has already configured the Fab is for Android so let's do it as it does that so this process also generates Google Json file for you automatically and that will be added in your Android app build Gradle not build grader Android app so this folder on the up directory so we have those created over there and now inside our inside our inside our main main.dot so we initialize the options then we run the app and inside our homesteads on homepage state we add we create we create a reference to our notification setup then we configure then we add this event called callbacks right so for this case since we are going to test it on the bucket we're going to print the token so we are going to use this token in Postman here here to test our notification so let's continue by running the app so let's run the app and Let's cross fingers it works let's clear that one I don't need that one now okay okay open up success so let's grab the key if we have it so how do we grab the key if you click here because it is in the increment counter so if you click there that is our key let's copy that key we place it on our key field here so now let's move to PHP and create this methods so inside our PHP weighs down we're going to create a route to not to this to at this end point we're going to create this endpoint so the end point is at Route API notify at notify app so what does the notify app does so the rotify app calls the notify method inside notification controller option controller so the notification control accept title body and the device key so here we set the Firebase Cloud messaging URL and our server key so remember we had our server key so we can now copy it from here the one that we just generated go back here into our environment look for this Firebase Cloud measuring server key in our EnV to place the existing one that we have with the one that we have just generated and create a data array with flat action click and stress done because the data that one we encode the data we set headers initialize call we set um the URL we allow post of Supply adders return transfer to true we don't verify this access or then we set up version version one of the car then we don't verify the SSL just temporarily and then of course do the post request with the posted with the data encoded data that we have then we execute all right so let's test it on our endpoint here so success waiting for message on the app not coming so what do we have on the app that blocks it from coming uh the uh what TV that is blocking up from showing again close um close that and what do I do and close that and then also destroy this up activity I see it straight up activity and it's just a minute same thing for Success understanding let's run I think we may need to reload the emulator for some reasons or something doesn't work yeah so let's look for key so oh just generated a new key okay same key same key okay so let's go here now and it's simple add it there send as a success so I think we may need to to we need to create and relaunch it again as we launch it I think the best way to relaunch it is on a cold wood if it doesn't yes so it's running the the so allow notification um generate device key go back down here paste it send success but not showing um allow me troubleshoot outside the view I'm gonna come back and oh it works now cool it was just delaying maybe due to network anyways so I have also notifications set up for Q so when you want to queue a notification in the back end then be dispatching it after a delay of seconds so have cues in laravel videos I'll link that video in the description below so that you can go and check it out right all right so that is that and let's see each other in the next video

Channel: Clean CodeX

Views: 6,858

Keywords: firebase cloud messaging flutter, firebase messaging flutter, firebase_messaging flutter, firebase cloud messaging, firebase messaging and local notification, flutter firebase messaging, flutter firebase_messaging, flutter firebase notification, firebase console, flutter firebase push notification, flutter android and ios firebase notification, flutter fcm, flutter fcm ios, flutter push notification, flutter push notifications, flutter, flutter notification when app is open

Id: 3-P0Zx0_vt8

Length: 17min 2sec (1022 seconds)

Published: Sat Aug 19 2023