Notifications on your Flutter App using AWS SNS and APNS (Local and Push notification tutorial)

hello and welcome back to my channel today i will talk about notifications what do you need them for how do they work and i will walk you through an example implementation in flutter using amazon sns first of all what do we need them for imagine a world where you get a chat message on on whatsapp or wherever and you don't get a notification so if you're not staring at your phone all the time you will not be informed that would be fairly useless or imagine a calendar that does not give you a notification when your meeting is about to start it's also a lot less useful there are more important use cases for notifications for example reminding your the user base of your app to use your app to get engaged right people download an app use it for a while then they stop using it it can be helpful to get a reminder occasionally or if you have a shopping app you can give them discounts to keep them engaged but without any notifications you only have email to contact your clients and you need to reach out to them to get the engagement going and grow your user base so notifications are super important for a successful app and even if you find an app that works without notifications i'm sure it would do better with some notifications so let's look into it and how they work i will walk you through an example implementation on flutter on an iphone so first of all there are two different types of notifications the first ones are local notifications they live only on your device and have nothing to do with cloud connectivity with any other service so for example you have a calendar and you want to get a reminder of some event that's coming up that would be a notification only on your device so that would be one of the examples but it also gives you a standardized uh visualization for a notification and this gets a bit more tangible when we look at push notifications in more detail then of course the other type of notification are push notifications there's an outside service in the cloud that pushes the notifications onto your device think of a message you receive in a chat you have your phone down on the table you're not staring at it and it pings or pops up and tells you you received a message or can be some marketing stuff or a special discount remember to use the app all these things that's also very important and you can also use it to push an notification to the app not to the user of your app but to the app itself to for example tell it it needs to be updated because there was a change on the back end and only an updated version of the front end can't deal with that just another example i will start with the local notifications also because they are a lot easier to manage in my sample application i will use a package flutter local notifications i tried a couple this one worked best now in terms of structure i see here id title message and payload these are the four main components so every notification has an id you will see the title and the message shown on the notification to the user and a payload id and payload are invisible so an id you can set you can overwrite a scheduled notification you can delete one that's what you need the id for as an handle and payload can be some invisible data so for example what should happen if you do it let's say you have some information you need to pass to the application a deep link into the application uh you you have a notification about a new message when you click on the notification you jump into the app and show exactly that message that was received so payload is some hidden data you can process along with the notification now in terms of use cases you can show a notification while you're in the app while the app is open you can argue why would i do that i can visualize stuff anyway myself i that becomes more clear actually with the push notifications because when the app is open push notification by default is not shown so you have to handle that by yourself define the business logic and you can use that functionality to show the notification if you want to show it you can schedule a notification for a defined time think of the reminder in your calendar application and you can remove that change that for various reasons now for push notification i used a package push notification it was a lot harder to find a decent package for those structure is basically the same depending on the provider you use you have a couple of additional fields but more or less it's the same you can not notify from your cloud backend onto the application there's another feature about silent notification so that you can use to just send a notification it will not be shown to the user and you can for example verify is that app still installed on that device or push some silent information maybe updates of terms and conditions discount rates something like that and all in all i have to say it's a extremely cost effective way for real-time communication with the device so when you look at sns for example you have the choice between text message email and push notifications and text message can be in the range of five cent a piece depends on the country and the network provider but in my case would be roughly five cents per piece hundred thousand emails cost maybe a dollar or so and on push notifications you can pay less than one dollar for a million so it's extremely cheap all right so how do push notifications work from my implementation point of view typically we want to reach a user so a human being a person we see that here on the very left now it can be that a user has multiple devices in that case we have to direct it to one or all depending on on the use case we have but we have to manage and control the estate so if a user for example has whatsapp on his iphone and on his tablet installed and we send a text message do we want both of them to get a notification or just one of them so we have to be careful here so the we actually have to manage the devices they have a device id and that here we have to be very careful it does not exactly represent the device but it's a representation of the installation of an app on a device so for example if the app is updated it gets a new device id and we have to make sure we get the most current one the older one will be disabled and we can no longer send messages to that one so our app needs to be defined to have the capability of push notifications so that's in the configuration of the app and then it will the device will manage the registration with the service so there's a whole range of services apns is the apple push notification service fcm is from google the fire cloud messaging service there's a whole range of others baidu in china but apns and fcm are the most important in the western world so let's have a closer look at these in my particular case i prioritize apple and then there are third-party services like sns pinpoint google has has services so pretty much anybody offers additional services to manage your push notifications so when the user logs in from his app on the device we need to make sure the device token or device id is transmitted along with his uh connection request with his login and we need to store that somehow to make sure we have that device id connected to that user so if you want to send a notification to the user we pick that up and send it to that device so there's a bit of background configuration to be done we need to configure the application of the app in the apple developer website as having the capability to send to receive to process push notifications and we need to get a certificate from apple that we can then use to send the notifications so this the certificate is basically the key that allows you to send to apple and we take it from apple and give it in our case to aws sns register there and that allows sns on aws to send notifications to apple that will be routed to that device now on the application side in flutter we need to configure the capability to process push notifications we need to make sure that the permissions are managed so the user can of course permit or not permit the application to show push notifications and we need to include the package that we use for the whole processing here then on the implementation side first one was configuration not implementation we need to make sure the application takes a device token and sends that device token to the cloud where we then in the back end process it accordingly now on the mobile device we get the token from the native part of our flutter application so you have the flutter application and you have a little bit of a add-on for apple iphone it's in the app delegate and there's something similar also for android so here we get the the token then we need to take it into flutter and then send it to the backend now on the backend side we need to be able to receive this device token along with the user id and then we need to register it with sns that creates an end point that can be reached by the push notifications so this endpoint is then represented with an arn and this arn we store in our database along with the user that way we can pick up the arn when we want to send something to the user and we can call sns to send a push notification to this arn and it will be pushed to that user so that's a theory how the whole thing works together so let's look at the implementation and the different bits and pieces of that in xcode you need to add the capabilities so here on the xcode project signing in capabilities you can add capabilities here by clicking the plus button and then you can select from a list of capabilities and add push notifications and that way it is in that application and xcode will add the functionality to register with the service so let's look at our application in vs code in flutter under ios runner app delegate we have the specific code that is only for the ios interaction and here we have added the functionality to register for remote notification and here we have the functionality to get the device token if the registration went well we have that token we can print it out here just for debug purposes and we get it then here in the flutter method channel we make it available for a function call that we can call from flutter itself under local methods and receive that one with get device token we return that token here device token.map and with this function in the app delegate we can make it available for call in the flutter dot part and that we call right here we call the method channel with exactly the same string with the same name and we invoke the method get device token which we defined in the app delegate and with that we can retrieve the device token and have it in our flutter app now what we do with that device token is basically in the login call to the backend that i do anyway i just add this device token along with the authorization token into the header and i can retrieve it in the back end and to the whole registration endpoint creation and store that in a database so once we retrieve the device token there's a little bit of initialization to be done like how should the notification be displayed the ican all these things i but most important is really the device token and that i try to fetch right when the application is being started so with this part here i can schedule a reminder a notification that will pop up at a defined time so for that i have to well first take the the day time of that specific event when i want to have it create the date time i need to make sure that this date time is in the future if i schedule a reminder for something in the past that's not going to work well and then i call this flutter look local notifications plugin with zone schedule and can then schedule that notification so i need to come up with an id for that one that i create right here then a title and a text and the time zone specific date time when it should be triggered now let's go to the aws console to the service amazon sns and see how the platform application needs to be configured to process these so i've already set up a platform application here and we can have a look at that configuration so right now it's enabled for apple ios push notifications and you need to provide the apple credentials to send the notifications to apple push notification service so under developer.apple.com i have the corner for certificates where i can create a certificate for apple push services so by creating here i can go to the apple push notification service sandbox and production and create a certificate for that application so i need to specify that one and then i can upload the certificate that will be signed so that i create in my local keychain application upload it here can download it again then sign from apple and that i can then upload into the aws sns as a p12 file along with the password to use that certificate so that's how the the creation of that certificate works and how you get it from apple and similar on google site you log into the google cloud create the credentials there and upload them here in aws sns and you can use them for the fire cloud messaging service now also worth mentioning is here i see the endpoints right now i have two endpoints registered and there are there's an sdk that allows me to register endpoints and use the ar ends that are assigned when i register an endpoint uh and i can use these ar ends to send a message to that endpoint so i can create that endpoint manually by entering the device token right here and it will create the endpoint or i can use the sdk now this is my lambda function that is called every time i open a connection to the backend that means every time i log into my application and here you see the function that registers the endpoint so i get the token the device token from the header where my flutter application puts it in so i can retrieve that here in this lambda function and then i have created this register endpoint function where i can make that call here under sns create platform endpoint and head over these parameters like the platform application on the endpoint the token and empty attributes which i'm not using right now and as a result i get the end point on which i will later on then store in a dynamodb now this function this lambda function is being used every time an user of the app is invited to an event so then i need to send a notification to the user i have this function here where i can send the text to that user so step one is to retrieve from my dynamodb that user what is his on so that's what i'm picking up from this table here i hand over the user id and retrieve the arn and then i use that to pass it on to the other function that is right up here send notification to the text to that arn and here it just sends an alert please open your app test title and sends it to here under sns publish and then these parameters are and that fires off the push notification to that endpoint so one more thing i need to mention on these lambda functions they need to have the iim policy to allow them to call the sns service so that needs to be added to the to their role and for that in the iam section of aws we can simply add amazon sns full access of course you can be more specific but this is like a very basic way to authorize your lambda functions to use sns to register an endpoint but then also delete endpoints and all that so you might limit that access and also to send notifications to the endpoints so with these things you should be able to configure the systems and implement notifications for your flutter applications be it local notifications or push notifications let me know in the comments below if that worked for you how you use the notifications in your application if it was helpful for you please like and if you want more content like this subscribe or watch one of these videos

Channel: Tech Builder

Views: 6,756

Keywords: mobile app, flutter, vs code, app development, app design, Flutter, iOS, Android, API, API Gateway, Cloud, JSON, Serialize, De-serialize, DART, AWS, Flutter Tutorial, Distributed Systems, Dynamo DB, Lambda, Node, Javascript, websockets, REST API, serverless

Id: RSjYfN2eETc

Length: 21min 38sec (1298 seconds)

Published: Fri May 20 2022