Flutterflow Push Notifications made super easy with BuildShip FULL Tutorial

hey Builders ready to make your app even more engaging today we're diving into the world of push notifications those little attention grabbing alerts that keep users coming back for more and we're doing it with our trusty low code power couple build ship and flutter flow no coding required you could schedule automated notifications segment users for targeted messaging or react instantly to realtime changes in your data your app could send reminders updates even personalized offers all thanks to build Chip's flexible workflows because while flutter flow is perfect for UI triggered notifications Bill chip lets you tap into the full potential of your back end for example what if you wanted to allow users to set up their own reminder sent to them at a specific time or send a reminder not tied to something flut aflow on the front end controls well that's a perfect job for build ship and we're going to build out that example now you'll want to start with a blank flutter flow project we'll call it notifications now flutter flow does a really great job of setting up your project and connecting it into Firebase so we'll let it do that for us choose a region and sign in with Google it'll take about 3 to 5 minutes to create the project for you so in that time you can enable authentication and create a user collection you'll also need to set an initial entry page and a logged in page users need to be able to sign into to our app because your users can't be sent notifications unless they're logged in flutter flow has a great new range of flow templates and this simple authentication flow will work perfectly next let's confirm our Firebase project has been created under settings Firebase you'll want to autogenerate config files and then open Firebase console for push notifications you'll need to upgrade to the blaze plan by hitting the upgrade button now this is a pay as you go plan but there's no need to be too worried about unexpected costs Firebase has an extremely generous free tier and unless you're sending notifications in the multiple Millions you won't need to worry about any unexpected touches while we're here in Firebase we also need to set up authentication because we need to have one method set up in order to Target notifications to specific users so click on authentication get started and choose the email password and save now head back to flutter flow and click push notifications in settings and flip the switch once you deploy you're ready to go so we're letting flutter flow do most of the heavy lifting in Firebase and Google Cloud here on our behalf what flutter flow has done for us is set up a couple of cloud functions and it will create a firestore database for us to store any new push notifications looks like we have deployed successfully but we need to manually trigger our first notification this is easy simply put test in here test in here and hit send notification this will send a test notification to all of your users if you have users already set up just put your own user reference in here great if we go back to Firebase we can can see it's created a collection for us called FF push notifications finally if you want to send push notifications on iOS you'll need to configure the IOS app by clicking the docs link here now that's all the setup that's required on the flutter Flow side let's head over to build chip and create a new build chip workflow now to kick off the notification sending process we need to set up a trigger note build chip provides a huge range of trigger nodes so you could trigger your notifications based on Chron Cal data changing into super base or fir store or even another build chip workflow alt together for now we'll use the schedule trigger next we add in build Chip's flutter flow push notifications node this node will add a document to your FF push notifications collection in Firebase that we spoke about earlier which thanks to the cloud functions that flter flow has set up for us will automatically send out our push notification now before we can go too much further we need to get build ship some permissions go to your build ship settings and click this link connect to your fir store project for Crow operations this document provides a really great step-by-step guide to give build ship all the permissions it requires option two is what we're after we want to connect to our own firestore project copy this service account and add it into Google Cloud console you need to assign the role of cloud database user and Firebase admin SDK administrator service agent to the service account back in build let's take a look at what this node requires and send our first test notification the project ID in flutter flow you can find it under the Firebase section in settings title is what you'll want the title of your message to be message is the body of the message you can send an image URL with your notification you can choose whether to deliver the notification with no sound or the user's default the target audience field allows you to segment between iOS Android users or everyone the initial Page Field is the initial page that users will be sent to in your app user references allow you to send notifications to only specific users and parameter data allows you to send data with your notification that will become prefilled into the page that your users click to let me know if you want me to explain this in a future video so let's test it here we have a successful notification sent this is just the start of what you can do with build ships push notification node add it to a workflow and have it trigger based on a change in any of the numerous databases build ship supports or even send personalized offers to your users based on actions they take outside of your app itself but still part of the touch points you have with them build ship gives you the flexibility to craft notification experiences that go beyond simple button clicks and I can't wait to hear what our Innovative and passionate users are going to think to do with it let us know in the comments and subscribe for more happy building

Channel: BuildShip + Rowy

Views: 1,636

Keywords: flutterflow, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow push notification, flutterflow buildship, push notifications, nocode, lowcode, buildship, visual backend, ai backend, firebeae, flutterflow backend, best backend for flutterflow, nocode backend for flutterflow, flutterflow functions

Id: lpPpDmYAWe4

Length: 6min 3sec (363 seconds)

Published: Mon Feb 05 2024