A great user experience has many elements, from intuitive UI design and smooth backend functionality to responsive customer support. Yet, often, it's the little details that make all the difference. Think about those delightful UI micro-interactions that make you go "wow." But what we're focusing on here is something equally impactful: push notifications.
Imagine you have a ride-hailing app. A great experience means being "in the know" throughout your ride booking process. From booking a driver, to getting your cab assigned, to verifying the trip—continuous real-time updates are what truly seals the deal.
Now, picture having to email or send an SMS for every update. A nightmare, right? The solution is simple: push notifications. These notifications are essential for keeping users engaged and coming back to your app.
With BuildShip's powerful low-code workflow backend builder and its easy integration with Flutterflow, creating engaging push notifications has never been easier. In this blog post, we'll explore how you can use BuildShip's push notification node feature to elevate your app's engagement to the next level.
Building Out Your App Frontend in Flutterflow
Step 1: Set Up Your Flutter Flow Project
To get started, create a new Flutter Flow project and enable authentication. Flutter Flow simplifies the process by setting up your project and connecting it to Firebase. Choose a region, sign in with Google, and let Flutter Flow handle the rest.
While your project is being created, you can enable authentication and create a user collection. Don't forget to set an initial entry page and a logged-in page, as users need to be signed in to receive notifications.
Now, let's take a look at the Flutterflow screen where the magic happens. The user interface is straightforward, allowing users to add new reminders with a simple click.
Step 2: Setting Reminder Date & Integrating with Firestore
On Flutterflow’s side, when the user clicks "Add New Reminder," the app writes the selected date to an app state variable. It ensures that a date is picked by the user before proceeding further. (Ref Fig 2)
The app then checks for notification permissions, asking the user for permission if it hasn't been granted previously. It gracefully handles scenarios where the user cancels the operation. (Ref Fig 3)
Next, you should create a Firestore collection named "reminders”. To manage user-specific reminders, you should query this collection for a document with a "reminderTime" that matches the page state variable recorded earlier. If a document with the specified "reminderTime" exists, return the first one found, effectively grouping users who have requested reminders at the same time. If no such document is found, a new one is created to accommodate the new reminder request. (Ref Fig 4)
Remember to clear the app state variable after using it by updating the app state and setting the value to clear. This step ensures that the state variable is reset and ready for future use.
This is what the query will look like (Ref Fig 5):
The updated document in Firestore will include the user's document reference in the appropriate reminders document. Essentially, we're adding the user's docRef to the reminders document that corresponds to the reminder time in milliseconds within a 24-hour period, matching the user's request.
This means you end up with a Firestore collection that looks a bit like this, with a reminderTime equal to the milliseconds after midnight in the 24 hour period, and a list of userRefs that want to be reminded in that minute.
Step 3: Cloud Function Mimicking
To ensure compatibility with Firebase Cloud Messaging, we format the user references into a comma-separated string.
We mimic Firestore Cloud Functions using a Rowy Trigger. This trigger listens for new document creations and processes the data accordingly.
The formatted reminder data is sent to the ff_push_notifications collection via BuildShip's push notifications node which we will learn below.
Building Out the Backend for Your Flutterflow App Using Low-Code
Now that you’ve setup your frontend, thanks to Flutterflow, it time to look into our backend. For the backend we’d be using BuildShip, which is a low-code visual backend builder that can build powerful APIs, backend tasks and CRON jobs right from your browser.
Let’s look at how you can setup your backend with BuildShip and connect it up with Flutterflow.
Step 4: Configure Firebase for Push Notifications
Once your Flutter Flow project is set up, it's time to configure Firebase for push notifications. Under settings, navigate to the Firebase section and autogenerate config files. Then, open the Firebase console. To enable push notifications, you'll need to upgrade to the Blaze plan. Don't worry about unexpected costs; Firebase offers a generous free tier, and you'll only incur charges if you send notifications in the millions.
While in the Firebase console, set up authentication. Click on "Authentication," then "Get Started," and choose the email/password method. Save your settings and head back to Flutter Flow.
Next, in Flutter Flow, go to the settings and click on "Push Notifications." Flip the switch to enable push notifications. Once you deploy your app, you're ready to send notifications. To test your setup, manually trigger your first notification by entering "test" in the provided fields and hitting "Send Notification."
Step 5: Create a BuildShip Workflow
Now that your Flutter Flow project is set up, it's time to create a BuildShip workflow. BuildShip offers a wide range of trigger nodes, allowing you to trigger notifications based on various events, such as data changes in Supabase or Firestore, or even another BuildShip workflow. For this example, we'll use the schedule trigger.
Step 6: Add the Flutter Flow Push Notification Node
In your BuildShip workflow, add the Flutter Flow Push Notification node. This node will add a document to your FF push notifications collection in Firebase, which will automatically send out your push notification thanks to the cloud functions set up by Flutter Flow.
Before proceeding further, you need to grant BuildShip the necessary permissions. Go to your BuildShip settings and click the link to connect to your Firestore project for CRUD operations. Follow the step-by-step guide provided in the document to assign the required roles to the service account.
Back in BuildShip, customize your push notification using the available fields in the Flutter Flow Push Notification node. You can set the title, message body, image URL, sound options, target audience (iOS, Android, or everyone), initial page, user references for targeted notifications, and parameter data to prefill the page users are directed to when they click the notification.
Once you've configured your push notification, test it to ensure it's working as expected. If successful, you're ready to deploy your app and start engaging your users with personalized, timely notifications.
For the full video tutorial, click below.
Conclusion:
BuildShip's push notification feature, combined with Flutter Flow's intuitive UI, opens up a world of possibilities for enhancing user engagement in your mobile app. By using BuildShip's flexible workflows, you can send targeted notifications based on user actions, changes in your backend data, or even personalized offers. We can't wait to see what innovative ideas our passionate users will come up with. Happy building!
A great user experience has many elements, from intuitive UI design and smooth backend functionality to responsive customer support. Yet, often, it's the little details that make all the difference. Think about those delightful UI micro-interactions that make you go "wow." But what we're focusing on here is something equally impactful: push notifications.
Imagine you have a ride-hailing app. A great experience means being "in the know" throughout your ride booking process. From booking a driver, to getting your cab assigned, to verifying the trip—continuous real-time updates are what truly seals the deal.
Now, picture having to email or send an SMS for every update. A nightmare, right? The solution is simple: push notifications. These notifications are essential for keeping users engaged and coming back to your app.
With BuildShip's powerful low-code workflow backend builder and its easy integration with Flutterflow, creating engaging push notifications has never been easier. In this blog post, we'll explore how you can use BuildShip's push notification node feature to elevate your app's engagement to the next level.
Building Out Your App Frontend in Flutterflow
Step 1: Set Up Your Flutter Flow Project
To get started, create a new Flutter Flow project and enable authentication. Flutter Flow simplifies the process by setting up your project and connecting it to Firebase. Choose a region, sign in with Google, and let Flutter Flow handle the rest.
While your project is being created, you can enable authentication and create a user collection. Don't forget to set an initial entry page and a logged-in page, as users need to be signed in to receive notifications.
Now, let's take a look at the Flutterflow screen where the magic happens. The user interface is straightforward, allowing users to add new reminders with a simple click.
Step 2: Setting Reminder Date & Integrating with Firestore
On Flutterflow’s side, when the user clicks "Add New Reminder," the app writes the selected date to an app state variable. It ensures that a date is picked by the user before proceeding further. (Ref Fig 2)
The app then checks for notification permissions, asking the user for permission if it hasn't been granted previously. It gracefully handles scenarios where the user cancels the operation. (Ref Fig 3)
Next, you should create a Firestore collection named "reminders”. To manage user-specific reminders, you should query this collection for a document with a "reminderTime" that matches the page state variable recorded earlier. If a document with the specified "reminderTime" exists, return the first one found, effectively grouping users who have requested reminders at the same time. If no such document is found, a new one is created to accommodate the new reminder request. (Ref Fig 4)
Remember to clear the app state variable after using it by updating the app state and setting the value to clear. This step ensures that the state variable is reset and ready for future use.
This is what the query will look like (Ref Fig 5):
The updated document in Firestore will include the user's document reference in the appropriate reminders document. Essentially, we're adding the user's docRef to the reminders document that corresponds to the reminder time in milliseconds within a 24-hour period, matching the user's request.
This means you end up with a Firestore collection that looks a bit like this, with a reminderTime equal to the milliseconds after midnight in the 24 hour period, and a list of userRefs that want to be reminded in that minute.
Step 3: Cloud Function Mimicking
To ensure compatibility with Firebase Cloud Messaging, we format the user references into a comma-separated string.
We mimic Firestore Cloud Functions using a Rowy Trigger. This trigger listens for new document creations and processes the data accordingly.
The formatted reminder data is sent to the ff_push_notifications collection via BuildShip's push notifications node which we will learn below.
Building Out the Backend for Your Flutterflow App Using Low-Code
Now that you’ve setup your frontend, thanks to Flutterflow, it time to look into our backend. For the backend we’d be using BuildShip, which is a low-code visual backend builder that can build powerful APIs, backend tasks and CRON jobs right from your browser.
Let’s look at how you can setup your backend with BuildShip and connect it up with Flutterflow.
Step 4: Configure Firebase for Push Notifications
Once your Flutter Flow project is set up, it's time to configure Firebase for push notifications. Under settings, navigate to the Firebase section and autogenerate config files. Then, open the Firebase console. To enable push notifications, you'll need to upgrade to the Blaze plan. Don't worry about unexpected costs; Firebase offers a generous free tier, and you'll only incur charges if you send notifications in the millions.
While in the Firebase console, set up authentication. Click on "Authentication," then "Get Started," and choose the email/password method. Save your settings and head back to Flutter Flow.
Next, in Flutter Flow, go to the settings and click on "Push Notifications." Flip the switch to enable push notifications. Once you deploy your app, you're ready to send notifications. To test your setup, manually trigger your first notification by entering "test" in the provided fields and hitting "Send Notification."
Step 5: Create a BuildShip Workflow
Now that your Flutter Flow project is set up, it's time to create a BuildShip workflow. BuildShip offers a wide range of trigger nodes, allowing you to trigger notifications based on various events, such as data changes in Supabase or Firestore, or even another BuildShip workflow. For this example, we'll use the schedule trigger.
Step 6: Add the Flutter Flow Push Notification Node
In your BuildShip workflow, add the Flutter Flow Push Notification node. This node will add a document to your FF push notifications collection in Firebase, which will automatically send out your push notification thanks to the cloud functions set up by Flutter Flow.
Before proceeding further, you need to grant BuildShip the necessary permissions. Go to your BuildShip settings and click the link to connect to your Firestore project for CRUD operations. Follow the step-by-step guide provided in the document to assign the required roles to the service account.
Back in BuildShip, customize your push notification using the available fields in the Flutter Flow Push Notification node. You can set the title, message body, image URL, sound options, target audience (iOS, Android, or everyone), initial page, user references for targeted notifications, and parameter data to prefill the page users are directed to when they click the notification.
Once you've configured your push notification, test it to ensure it's working as expected. If successful, you're ready to deploy your app and start engaging your users with personalized, timely notifications.
For the full video tutorial, click below.
Conclusion:
BuildShip's push notification feature, combined with Flutter Flow's intuitive UI, opens up a world of possibilities for enhancing user engagement in your mobile app. By using BuildShip's flexible workflows, you can send targeted notifications based on user actions, changes in your backend data, or even personalized offers. We can't wait to see what innovative ideas our passionate users will come up with. Happy building!
A great user experience has many elements, from intuitive UI design and smooth backend functionality to responsive customer support. Yet, often, it's the little details that make all the difference. Think about those delightful UI micro-interactions that make you go "wow." But what we're focusing on here is something equally impactful: push notifications.
Imagine you have a ride-hailing app. A great experience means being "in the know" throughout your ride booking process. From booking a driver, to getting your cab assigned, to verifying the trip—continuous real-time updates are what truly seals the deal.
Now, picture having to email or send an SMS for every update. A nightmare, right? The solution is simple: push notifications. These notifications are essential for keeping users engaged and coming back to your app.
With BuildShip's powerful low-code workflow backend builder and its easy integration with Flutterflow, creating engaging push notifications has never been easier. In this blog post, we'll explore how you can use BuildShip's push notification node feature to elevate your app's engagement to the next level.
Building Out Your App Frontend in Flutterflow
Step 1: Set Up Your Flutter Flow Project
To get started, create a new Flutter Flow project and enable authentication. Flutter Flow simplifies the process by setting up your project and connecting it to Firebase. Choose a region, sign in with Google, and let Flutter Flow handle the rest.
While your project is being created, you can enable authentication and create a user collection. Don't forget to set an initial entry page and a logged-in page, as users need to be signed in to receive notifications.
Now, let's take a look at the Flutterflow screen where the magic happens. The user interface is straightforward, allowing users to add new reminders with a simple click.
Step 2: Setting Reminder Date & Integrating with Firestore
On Flutterflow’s side, when the user clicks "Add New Reminder," the app writes the selected date to an app state variable. It ensures that a date is picked by the user before proceeding further. (Ref Fig 2)
The app then checks for notification permissions, asking the user for permission if it hasn't been granted previously. It gracefully handles scenarios where the user cancels the operation. (Ref Fig 3)
Next, you should create a Firestore collection named "reminders”. To manage user-specific reminders, you should query this collection for a document with a "reminderTime" that matches the page state variable recorded earlier. If a document with the specified "reminderTime" exists, return the first one found, effectively grouping users who have requested reminders at the same time. If no such document is found, a new one is created to accommodate the new reminder request. (Ref Fig 4)
Remember to clear the app state variable after using it by updating the app state and setting the value to clear. This step ensures that the state variable is reset and ready for future use.
This is what the query will look like (Ref Fig 5):
The updated document in Firestore will include the user's document reference in the appropriate reminders document. Essentially, we're adding the user's docRef to the reminders document that corresponds to the reminder time in milliseconds within a 24-hour period, matching the user's request.
This means you end up with a Firestore collection that looks a bit like this, with a reminderTime equal to the milliseconds after midnight in the 24 hour period, and a list of userRefs that want to be reminded in that minute.
Step 3: Cloud Function Mimicking
To ensure compatibility with Firebase Cloud Messaging, we format the user references into a comma-separated string.
We mimic Firestore Cloud Functions using a Rowy Trigger. This trigger listens for new document creations and processes the data accordingly.
The formatted reminder data is sent to the ff_push_notifications collection via BuildShip's push notifications node which we will learn below.
Building Out the Backend for Your Flutterflow App Using Low-Code
Now that you’ve setup your frontend, thanks to Flutterflow, it time to look into our backend. For the backend we’d be using BuildShip, which is a low-code visual backend builder that can build powerful APIs, backend tasks and CRON jobs right from your browser.
Let’s look at how you can setup your backend with BuildShip and connect it up with Flutterflow.
Step 4: Configure Firebase for Push Notifications
Once your Flutter Flow project is set up, it's time to configure Firebase for push notifications. Under settings, navigate to the Firebase section and autogenerate config files. Then, open the Firebase console. To enable push notifications, you'll need to upgrade to the Blaze plan. Don't worry about unexpected costs; Firebase offers a generous free tier, and you'll only incur charges if you send notifications in the millions.
While in the Firebase console, set up authentication. Click on "Authentication," then "Get Started," and choose the email/password method. Save your settings and head back to Flutter Flow.
Next, in Flutter Flow, go to the settings and click on "Push Notifications." Flip the switch to enable push notifications. Once you deploy your app, you're ready to send notifications. To test your setup, manually trigger your first notification by entering "test" in the provided fields and hitting "Send Notification."
Step 5: Create a BuildShip Workflow
Now that your Flutter Flow project is set up, it's time to create a BuildShip workflow. BuildShip offers a wide range of trigger nodes, allowing you to trigger notifications based on various events, such as data changes in Supabase or Firestore, or even another BuildShip workflow. For this example, we'll use the schedule trigger.
Step 6: Add the Flutter Flow Push Notification Node
In your BuildShip workflow, add the Flutter Flow Push Notification node. This node will add a document to your FF push notifications collection in Firebase, which will automatically send out your push notification thanks to the cloud functions set up by Flutter Flow.
Before proceeding further, you need to grant BuildShip the necessary permissions. Go to your BuildShip settings and click the link to connect to your Firestore project for CRUD operations. Follow the step-by-step guide provided in the document to assign the required roles to the service account.
Back in BuildShip, customize your push notification using the available fields in the Flutter Flow Push Notification node. You can set the title, message body, image URL, sound options, target audience (iOS, Android, or everyone), initial page, user references for targeted notifications, and parameter data to prefill the page users are directed to when they click the notification.
Once you've configured your push notification, test it to ensure it's working as expected. If successful, you're ready to deploy your app and start engaging your users with personalized, timely notifications.
For the full video tutorial, click below.
Conclusion:
BuildShip's push notification feature, combined with Flutter Flow's intuitive UI, opens up a world of possibilities for enhancing user engagement in your mobile app. By using BuildShip's flexible workflows, you can send targeted notifications based on user actions, changes in your backend data, or even personalized offers. We can't wait to see what innovative ideas our passionate users will come up with. Happy building!
