Monikinderjit Singh
Posted on September 1, 2021
Amazon Web Services, in early 2021, extended its support for Flutter, which is quite amazing and many new startups have started to use AWS in their flutter applications due to its ease of scalability and support. Amazon Web Service offers a wide variety of options for Flutter, but we're going to focus on Amazon Pinpoint Service today.
Amazon Pinpoint allow users to send push notifications to multiple recipients. To increase sales, companies and organizations can use marketing campaigns to contact their clients.
Let's figure out how to integrate this into your Flutter application.
What we are going to useπ»?
To start, we need to install the following packages:
- firebase_messaging 10.0.5
- flutter_local_notifications 8.1.1+1
- firebase_core
- amplify_core 0.2.2
- amplify_analytics_pinpoint 0.2.2
- amplify_flutter 0.2.2
Setup Amplify Pinpoint
- To install pinpoint in your amplify project, you will need to add amplify analytics service to your flutter project.
Run
amplify add analytics
in your terminal (Make sure you are at root of the project)
Select
Amazon Pinpoint service
and then give a name to your pinpoint service resource.
Press
Y
and then click enter. Your amazon pinpoint service will be added locally.
Now, to publish it in the cloud, run
amplify push
.
Point to be noted: It takes time for amazon analytics to start recording the events. For me, I was able to record events the next morning.
To send notifications from pinpoint, we will need to set up a module that will interact with the app to show the notification. To fulfil this, we have to use Firebase Cloud Messaging Service which will send our notification triggered from Amazon Pinpoint to the user.
Set up Firebase Cloud Messaging
Firebase Console Setup:
- Open Firebase Console
- Click on
Create Project
- Give a name to your project and press continue.
- Make sure analytics is enabled and then press continue.
- Select your country and then create your project.
- Register your app and follow the steps described there to successfully register the app. > Extra focus on initializing firebase SDK and google-services.json file
- After your app has been registered, go to Engage->Cloud Messaging.
Let's write some code
Make a file named notifications. dart
and add the following file. In this file, we are handling our notifications from the amazon pinpoint service.
In main.dart file, call this function _configureAmplify()
inside init state
and add these lines in main()
function.
It's all. Ohh, wait. Let's check how to trigger our notification from Amazon Pinpoint Service.
Make a notification from Pinpoint Service Webpage
Go to your pinpoint service page from your amplify admins page and then click on the pinpoint service you created. Click on Settings->Push Notifications and enable Firebase Cloud Messaging (FCM). After enabling, there will be a green tick as shown below.
Go to Test Messaging and click on
Push Notifications
. To send a message we will be requiring a google device token which we are getting using thegetToken()
function in therequirements.dart
file. Without this token, we will not be able to send our message.
Write this token inside theDevice tokens field
.
Write a message, add a picture URL and send this to the user.
Kudos ππ
Congratulations to everyone who was able to send their first pinpoint service to trigger the notification. Despite it being a long tutorial, you all made it to the end.
Little Bit About Meπ§βπ»π§βπ»π§βπ»
Hey developers, I'm Monikinderjit Singh, working on Flutter for more than a year now. My interest in cloud technology is fueled by my need to learn more about it. I am currently new to hashnode (this is my second blog post). I would appreciate you giving it a like if you find it interesting and leaving a comment if you have a better solution for this topic. It would be awesome if you could give me some feedback on improving my content.
You can connect with me on my Twitter, Github and LinkedIn .
Posted on September 1, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.