[Music] all right so for the purposes of this tutorial I'll be using this chat app over here which I've previously made you can go on this app by clicking on the link in the video description down below if you interested in learning how to make this app from scratch I actually have a 20 part Series where I teach you exactly how to make a chat app which you can click on this top right hand corner and it will bring you to that Series so if you have cloned the base version of the chat app over here you can see that we have lots of Errors over here 59 errors that's a lot most of these errors are actually because we have not linked our super base table over here since we don't have one just yet so in your super base dashboard we'll first want to create a new table we can and then we'll just create the new project all right so once our project has finished setting up we will create our tables that we need so we'll go into table editor and we'll click on new table so the first table that we actually want to create is the chats table so we'll just name it chats like suchar and we also need some columns so the First Column that we need is the chat name column so it will be chatore name make sure that the name is exactly the same and it will be of type text next is the chat description and followed by the chat image so it'll be chat description it'll be of type text as well and next is the chat image uncore image it will also be of type text following that it will be chat members which is an array of text so let's just add a column called chat members and this time it'll be of type text but we have to go to this gear icon over here and we have to check this defined as array option to be on following the chat members will be the last message which will have type text so lastore message and after that it will be last message time which is a Tim stamp TZ so last message uncore time which should be of type timestamp TZ and lastly is the is chat group Boolean variable so it'll be of type Boo and let's actually let me just quickly edit this column to check so the default value here is false all right so once you have implemented all the columns let's just click on Save and we should have nine columns in our chat table oh and one more thing that I forgot to do is to disable Ro security Ro level security for this chat table so we just go and edit our table and we'll check this enable Ro level security to be off then we'll click on Save and now our chest table is accessible by everyone so the next table that we need is our messages table so we'll just go ahead and create a new table by clicking on this new table button and we'll name it messages for this messages table let's go ahead and see what this table has so it has all of these columns so let's go and implement it now but first we need to remember to disable role level security and we'll add the columns that we need so the First Column that we need is the message undor text column which will be of type text next one that we need is the sender ID which is a uu ID so sender ID which should be of type uu ID next it will be the recipient ID which is an INT 8 so make sure to spell it correctly next it will be the image path so imgp and last is the iscore image Boolean variable and this will have a default value of false so let's click on Save and that's our messages table done the next table that we need is our user data table so this user data table has some of these columns over here so we'll name it user _ data and we actually want to remove the Creator as well as the ID columns the First Column that we need is the U ID so it's U ID the type will be of type uu ID and this will be the primary key of the table next is the phone number which will be of type text and next will be the name which will also be of type text for loing that is the bio which will also be of type text and lastly will be the profile image uncore PA so profile uncore IMG uncore PA now for this fcm token column this will be implemented later when we go through the tutorial so I'll just skip this for now so these are all the columns that we need I'll just click on Save and now we have our user data table and I think I also forgot to disable Ro level security so let's quickly do that right now all right nice so that should be all the tables that we need before we are able to go through the tutorial now one last thing that we need to do is that we have to enable realtime database for our messages table so we go to our messages table over here and in this top right hand corner we'll click on real time and we want to enable real time we can check that it's enabled by going to databases and you can see that under the messages table real time is enabled so the last thing that we have to do is that we have to actually link this superbase project to our flatter flow project so we'll go to Project settings and we want to go to API under configuration and we want to copy our project URL we want to go to settings and Integrations in super base and under Integrations we'll go to super base and we'll copy and paste our project URL under API URL we also want to copy this Anon public key and paste it in the Anon key over here in flut flow then once we get schema we should see that all of our errors are gone we are left with one more error which is just the check for the custom function so we can just click on that and it'll just check our custom function after it's done checking you should see that you have no more errors left and now you able to follow along with the push notification tutorial as well let's now get into the push notification feature so the first step that we have to do is we have to create some tables in our superbase project namely a notifications table which will hold all of our notifications including the primary key of the user ID who sent it the user ID field over here which is the uid of the user that we want to send the push notification to and last but not least is the body over here which will be the text inside our notification all right so let's just create the notifications table first we'll go into our super base table editor we'll click on create new table we'll name it notifications for this primary key over here we'll leave the name as ID but we'll change the type to UU ID we also want to add a new column of user ID and this will also be of type uu ID this remember will be the user ID of the person we are sending the push notification to last but not least will be the body which will be of type text we can click on Save and now we have all notifications table but one more thing that I forgot to do was to disable Ro level security so that we can have access we can have read write access to our notifications table all right the next table that we need to create is the profiles table this is actually just an extension of a user data table so as you can see if you already have some user data table in your superbase project like I have over here what we need to do is we just need to add this column over here which is fcm token so we need this additional column to store the unique fcm token which is Firebase Cloud messaging token so that we are able to actually send the push notification to that user so in my user data table I'll just add a new column and I'll name this column FCF token the type will be of type text and the default value will be n okay great so that's all the tables that we need now the next step is actually to set up the superbase CLI and we need the superbase CLI to be able to develop our Edge functions locally and then the CLI will enable us to upload it to our super based project I have this link over here which I'll also put down in the video description so you can go to this and it should bring you to this documentation over here so for me I'm on a Windows system so I will go to this Windows instructions over here now what I want to do is I want to open Windows Powershell and now what I want to do is I want to copy and paste these commands paste but when you try to copy and paste it you can see that the term scoop is not recognized so this occurs because we actually haven't downloaded scoop yet so I can click on scoop here and now there are some instructions which we can just copy from to download scoop and we'll just paste it here can wait for a while and it should download scoop to our system we can first go back to our super based documentation over here while we wait for the download all right so once scoop was installed successfully we can now copy and paste these instructions and you can see that there are no more errors over here and the super base bucket has been added successfully now we can scroll down and continue following all the instructions so scoop update super base and you don't need to follow this because we don't want to start a new super base instance next we have to download Docker desktop so we can click on this link once again we can scroll down and under install Docker desktop we want to choose your OS system that you're on for me is Windows so I'll click on this and I'll download this Docker desktop for Windows x86 6 you can see that the download has started and has finished so once the download has finished I'll go to my file explorer and I'll open the docker desktop installer and we'll wait for it to install so click on okay okay so once the installation is finished we can just press on close all right so after you have restarted your computer you should see this window over here and we'll just click click on finish and we'll just allow changes for this app we can skip this and then we'll skip this as well we'll just skip everything and now you should have your Docker engine over here you can see that starting and we but now we have to change and configure some of the settings in our Docker engine so we can go over to this gear icon over here and we have to wait for it to load for a while once it's loaded though we can go on and configure these settings over here so we want to click on exposing demon and we also want to check this at the docker internal names to The Host file so we click on apply and then restart then this also comes up so we just press on start service then we'll click on yes then it should automatically apply and restart our Docker engine and you can see now that our Docker engine is running properly so yep now that Docker has been installed in our system we can continue so now we will actually create the super based project directory for us to edit and create the H function locally so we want to open our Powershell and we want to go into a folder where we can create our super based project locally so what I'll do is I'll open my File Explorer and under desktop I'll just create a new folder here and I'll just name this folder super base you can name it anything you want and now with this super base folder I will want to copy this path over here then I will type in CD and I'll paste the path and now you can see that the puff has been replaced with this over here so now we are currently in this desktop folder but to go into the super base folder I must change directory once more that's what CD means and I'll type in super base and now I'm in the super base folder that I just created so the next thing that the next command that we have to run over here is the super base init command so I'll just copy this command and I'll run it over here and it should create a new super base directory so over here it says generate vs code settings for doot we'll just type in yes so now we have created our super base directory you can go and check inside your super base folder there should be a super base folder as well over here all right so the next step is to actually create our super based Edge function so I have this link over here which I'll also Link in the video description down below you can click on it and it should bring you to this documentation on how to use Firebase Cloud messaging to send push notifications so we scroll down over here and you can see we already did this step which is to initialize a superbase project so now we want to actually create the push function so we'll copy this function over here and this creates a new function called push inside our super base folder so now we want to open vs code and the short form command to do that is just code Dot and this will open vs code inside a window you can see that we have our super based project over here under the functions file we have a push directory with an index. ts file so an informational dialog will also pop up over here of do you want to install the recommended d extensions we'll press on install and then it'll install it for us and it should be good we can go back to our index. ts function so now what we want to do is we want to copy all of this code over here in the superbase documentation and we'll paste and replace all of this inside our index.
ts file so remember to save the file by using the keyboard shortcut control s on Windows and this will actually be our Edge function to allow us to send push notifications now this file is quite complicated but I'll try my best to break it down and in the simplest way possible so what these lines of code over here does is that when our super base hge function is called it will grab our fcm token of the user that we want to send the notification to and it'll store it in this fcm token toen variable now this fcm token is important because we need it when we are sending push notifications through Firebase Cloud messaging so next what we want to do is we want to go over here and actually call the Firebase Cloud messaging API to send the push notification to us and you can see that we the fcm token over here is used and is passed into the API because this is important in I identifying the user that we want to send it to and after we call the Firebase Cloud messaging API we want to get back a response and we want to check the response status so that we know whether the push notification was successfully sent or not so that's a very brief rundown of what this entire file is doing so now that we have our hge function the next step is to set up Firebase Cloud messaging so to do that we actually need a Firebase project so we want to to go back to our flf flow project under settings and Integrations we'll go under project setup Firebase and we want to create a new Firebase project the project name can be anything you want but ideally it should be the same name as your flood flow project and for the Firebase region I'll just choose the one closest to me Singapore now we have to sign in to our Google account and it'll take some time to automatically link and configure our Firebase project for us okay so after a few minutes you should see that the Firebase project has been successfully created now we can just open this Firebase project by clicking on this button over here and it will open our fbas console so nice our new fbas project has been successfully created so now what we have to do is we have to actually give superbase permissions to use our Firebase project so we want to go on this settings uh icon over here and you want to click on Project settings then we want to go to service accounts give it a while to load and under Firebase admin SDK we want to select node. js and we want to generate a new private key this should trigger a download file and if we check our downloads you can see that a new file has been added into our downloads what we want to do is you want to cut this file file and we want to go back to our super base project under functions we want to paste that file right over here and then we also have to rename this file to service- account. Json make sure that the name is exactly the same as this if not it'll cause some errors later so we can close our file explorer so we can open our vs code once more and the the functions file we can see that we have a new file over here called service account.
Json right very nice so the next step is actually to deploy our Edge function to our superbase project so that we can actually use our Ed function so to be able to deploy our base Edge function we want to go back into our vs code and we want to open the terminal which you can click on this terminal option over here and we can select new terminal then we want to type in the command super base link you can see that we have an error over here which is that we are not logged into our superbase project just yet so first we have to log to our superbase account so we'll type in superbase login can press enter to open the browser and automatically authorize us so now we have successfully logged into our super base account you can see that we are logged in over here so now we can type super base B link to link our project so then after that you'll list all of your projects over here and you can use the up and down arrow keys to choose the project that you want to deploy your Edge function to so in this case it will be chat app and I'll choose that project for the database password we can just leave it as blank to skip and we'll just press enter for this warning you can just ignore it but from this line over here we have finished linking our superbase project successfully so the next step to do is to actually deploy the function to our project so I'll just copy and paste this function over here and I'll paste that command inside and you can see that it's bundling the push function and after some time we should be able to successfully upload our push function our super base hge function so just give it a while and is deploying the function and great our function has successfully been deployed so we can close out of our vs code editor can go back to our super base project and we can check under Edge functions to see that that edge function has indeed been successfully deployed so that is amazing now the next step is to create a database web hook which act as sort of a trigger so that whenever a new row is inserted into our notifications table we can call our super base Edge function to send that push notification so to do that we'll go under database and under platform we'll choose web Hooks and we'll enable web Hooks and you want to create a new hook for the name of the web hook you can just give it as push notification make sure not to use any spaces or white spaces and for the table over here we want to choose our notifications table table which is under public and notifications for the event it'll be on insert event and for the type of web hook since we're calling a sub HED function we'll click on this option the method will be post and the fun the edge function that we want to trigger is our push Edge function that we just created so we can just click on create web hook and now we have successfully created our push notification web hook all right so the next step now is to re retrieve the fcm token of the currently authenticated user in the flutter flow project and store this token inside our super base table so we have to go to the flutter Flow app and we have to add some custom code for this function but before we add the custom code we actually have to go into our app values and we have to create a new app State variable we'll call this fcm token and this variable will be used to store our users fcm token so we create an appstate variable over here now we can go over to our custom code and we can add a new action and the custom code for this action can be found with this link to my GitHub which I've also put down in the video description so redirecting to this GitHub you should be redirected to this initialized messaging do. all so I'll just copy and paste everything over here and for the action name I also name it the same name as this function name over here and this action actually requires some pop spec dependencies the first one is called Firebase uncore messaging and the second dependency is called awesome uncore notifications so once we have these two dependencies typed out we'll click on this button to refresh our code editor and then we'll save our action over here okay great so now that we have a way to call Firebase messaging and retrieve the currently authenticated users fcm token and it'll automatically store it in our appstate variable over here all right so this custom action may be very long and may look very long but I'll try M to break it down to you so what this block of code over here does is that it requests permissions from the user to be able to receive push notifications because you know some users may not want to receive push notifications on their app and these blocks of code over here basically format the notifications in a nice way so that it appears professional to the user all right so that's basically the code now we have to go into to our main. do file and under final actions we have to call our initialized messaging custom action that we created just now so that whenever the app loads we are trying to grab the user's fcm token so that we can actually send the user their push notification hello future me here so it turns out that we actually forgot to save the initialized messaging custom action inside our main do do file as over here in the final actions column over here there's nothing so to do that let's just add our initialize messaging function really quickly again and make sure that you press on this save button so that actually saves in the main do do file all right back to you now one more setting that we have to configure and flut flow we have to go to settings and configuration and we have to go to permissions and over here you can see that there's a notifications permission we have to enable that and we can type a permission message for for example needed for push notifications this is important to toggle on so now that we have added the custom action to retrieve the fcm token and store it inside our app State variable we actually have to store it inside our super based database of the user data table under the fcm token column as well so that will be done in our homepage and we'll go to the top level here whenever the page is loaded you want to update our super base table we want to update our user data table for mashing rowes we will select where the U ID is equal to our authenticated users user ID for the fields that you want to set we want to set the fcm token field and this value will be our app State fcm token so now whenever the user logs into the app it will update their fcm token as well so the last step is actually to trigger the push notification for a chat app you want to send a push notification to the user whenever a new message is sent so we can go to our chat page over here and whenever a user sends a message we can open the action flow editor whenever the user sent a new message we want to notify the user receiving the message so after a new message has been inserted we want to add a new action and we want to search for insert and superbase insert Row for the table it will be the notifications table and for the fields we want to set the ID field to our authenticated users user ID for the created field Creator at field we'll leave it blank and now for the field you want to set our Fields over here for the ID field it will be the authenticated users user ID we don't need the creator app field and for the user ID field which is the recipient user we actually need we can get the user ID from our chat members list over here for example under chats you can see that I have this chat members list with all the users included inside the chat but if we go over to our chats table over here in super base we can see that some chats contain more than two members so it not only contains one member who is the one sending the message but it contains also two or more other members who we also want to send the push notifications too so we cannot just call a single action over here because this we can only pass we can only insert a single row with this action so we want to delete this action and inad instead what we want to do is we want to add a loop we want to be able to Loop over this chat members list excluding the user who send the message and for each of those members we want to insert a row inside the notifications table to send them each a push notification so we need to do that via our Loop so for the loop we want to add a single condition but in order to Loop over those members we first have to create some count variable page State variable to be able to iterate over the loop so under the chat page I want to go under local page State variable and I'll just call create a counter page State variable with type integer and the initial field value will be zero so now going back into this send message icon we can now create the condition for a loop so it'll be a single condition and the loop will run whenever the page State the counter page State variable is less than is less than the length of our chat members list excluding the current users user ID so how we can do that is we can go to our we can select chat members list and then we can filter list items the filter condition is a single condition and we can filter the items for when the item is list is not equal to our authenticated users user ID so basically this just filters the list and removes the current user who sent the message now we want to select number of items so basically now we have the total number of users that we want to send a push notification to and our counter will Loop over this and now we want to select the insert R super base action for the table it will be notifications and we want to select and add these fields for the ID it will be the authenticated users user ID so authenticated users user ID for creator that we don't need that for the re Cent user ID now we can go to chat members list and we can select the item and index we select specific index now for the index we can pass our page State counter parameter so we can click on confirm for the text body of the notification the value we can pass it as our widget state and whatever the user has typed in the text view so last but not least within the loop itself after we entered a row in the notifications table we have to update our counter and increase our counter variable by one so we'll select state update page State choose the counter variable that we created just now for the update type we'll just select increment SL decrement and we'll choose the increment value to be one so now this increases the value of the counter by one whenever we are looping over the items hello future me here once more so I just realized that there's also another problem with the looping algorithm over here so you can see that the counter was initially set to zero and we increase the counter every time we go through this loop with this update page State action however the counter was actually never reset to zero after the whole action chain ends so to do that we'll just add a new action right at the bottom over here and we'll set page State update page State we'll update our counter page State variable and we'll set the value to be zero or alternatively we can also set it just set the update type to reset value that works as well since we Define a default value for the counter to be a default value of zero so it just resets the counter to zero after the whole action chain is done so I realized that there there was an error in the super base notifications table so actually currently our superbase table takes this ID field to be the primary key however this ID field is the sender users ID the sender of the push notification however if this column is the primary key then the user can only send one push notification because the sended ID in this column cannot be replicated among other rowes so to fix this let's first remove this row so let's actually go ahead and just delete this table over here and once that notifications table is deleted let's just create a new notifications table we'll disable Ro level security and this time we'll leave the ID to be of type in8 and the primary key now you want to add the sender ID which will be of type uu ID and we also want to add the recipient ID which will also be of type uu ID and now it'll be the body text which is the body of the message it'll be of type text so we save that and now there shouldn't be any problems with the primary key of this table so the same user will be able to send multiple push notifications to other users as well but because we changed our our notifications table in our superbase database we have to go back to flut flow and we have to go to settings and Integrations under the super base we have to get schema once more and because we changed or rather we added one more column we'll have some errors over here so for this insert row action we no longer want the ID instead we want to set the sender ID and this will be the authenticated users user ID for this field it was the recipient field and we'll set this as our chat members item and index and the specific index will be at the index of our page State counter and the body will remain the same so there looks like there's one more error which is just for checking the custom function okay so because we changed how our notifications table is set up in our subas database we also have to go back to vs code and we have to change this interface notification class over here so the ID will no longer be of type string it'll be of type int then we have to add a sender ID field which will be of type string and this user ID is no longer user ID instead it's recipient ID make sure that the spell spelling is exactly the same as the one here and the body will remain the same so I also realized that there was a problem with one of the tables over here so this line of code is actually wrong as it's getting the fcm token from a profile table however in our app our profile table the one which STS the users fcm token it's actually called user data so we have to go ahead and change that so instead of profile is user undor data so remember to save that and then we'll have to push our notification up to super base again so it'll just be this function which is the one that we used previously as well and if we get this error over here is because we didn't open Docker desktop so let's just quickly run Docker desktop so we'll wait for it to run and once it's running we should be able to go ahead and push our notific up so yeah it's running now so let's try the command once more so base function deploy push is bundling our function and now it should automatically update our function in super base so we can give that a quick check and the edge functions you see that now we have two deployments instead of one and it was last updated a few seconds ago all right so one important thing to note is that when we deleted our notifications table and created a new notifications table we actually deleted our web hook over here because we deleted the notification table so it deleted the web hook so we actually have to go ahead and create a new web hook so we have to recreate the web hook we can just name it push notification remember not to add any spaces for the table it'll be public notifications for the event it'll be insert for the type of web hook it will be superbase Edge function and the method will be post and we'll all leave this as it is for now then we can create the web hook and now we should have the web hook created all right so that's basically it that's everything that we need to do to implement push notifications inside our flf flow apps so we can close out of this and now we can actually go ahead and try testing out our app but unfortunately we will actually need an emulator to be able to test out this function so if you don't know what an emulator is it's basically a virtual replica of either an Android or iOS phone on your computer system itself so we cannot actually test it out on test mode we'll need an Android emulator to test this out if you're interested in learning how to install an Android emulator on your laptop or computer do leave it down in the comments down below and I'll be sure to make a video about it but for now I'll just test it out on my own Android emulator all right so I have my two Android emulators open here and I've downloaded the chat app APK on both of them so let's try opening the app on one of them first you can see that when we first download the app and we first open the app there's a notification pop up over here which asks us if we want to allow chat app to send us notifications so this is important and we must press allow so that the app actually has permissions to send us push notifications so let me just sign in with one of my accounts over here and for this account I Apple so let's open the chat app on the other emulator and the same popup shows up so remember to click allow and I'll sign into my other account test 2@gmail.
com so this account is Amazon so let's go to the Amazon chat and let's try typing something let's try sending this message H so unfortunately it looks like no notification was sent so that probably means that there's something wrong with our H function itself so we can actually try to debug this issue by going back to our super base dashboard and we can go back to our Edge functions we can click on our Edge function and we can go to invocations over here we can check our time stamp where we send the message and these are not it so if it doesn't appear on invocations we can go to logs and this contains a full history of when our H functions were called so if we go over here at 4:30 you can see that there was actually an error with our Ed function and the error is detailed over here so there was a type error but we cannot read properties of now reading fcm token so this means that there was some problem with getting our fcm token from our user data table so we can go back to our vs code and we can try to debug this problem so since we couldn't retrieve our fcm token from our super base table correctly we can look into this block of code which is what it was supposed to do we can see that it is getting the fcm token from our user data table so that is correct since we can check the names fcm token and user data table the names are correctly spelled so there's nothing wrong with that but then we see a problem over here because this filter means because this filter is trying to filter for the ID column in fact our user data table does not have an ID column it has a u ID column so we we actually have to change this to uid and it's also trying to filter for where the uid column is equal to the payload do record.
