Building A Referral System With Firebase Dynamic Links; FLUTTER

[Music] um welcome to the channel today we'll be talking about building a referral system with firebase dynamic link with floater so what should be doing the logic will be using it's just when user comes to up then person signs up inside up and also when it gets to home to the own page of the app and it fires and sends a dynamic links to a database which it creates that's what i'm trying to talk about and also from there it generates a referral code then attach it to the referral link then send to a file store database so when that referral link is shared with friends and a friend clicks on it it takes the user to the app then open up the sign up page then these are signs up then it saves the other person's referral referral codes to these other persons just that's how we're going to do it so i'm happy you're in this you're watching this so let's get to it [Music] so at the end of this tutorial we'll be achieving is about dynamic links and click on it click on our dynamic links it opens up and give this name referral codes in so a project i've created already here this is it and i have a real device here also every device here okay so i've connected this project i've connected this project with fire with firebase so if you have not connected the apo you want to use for the dynamic links so just do that and that's it so we'll be doing the generated routine so and you know these are projects files of our image assets whatever assets will be using images as we have having it there as a string then we have our module our services our ui which contains our constants i get its file folder and oh this is after you prove this and also we have our routes which i'm going to create also our views now we will be having um three views on this app so how the odd views are the own view and also have widgets so and in our main dots we have our main and then we initialize firebase with its asynchronous lead and we have a class my heart that's and override the build method and return material up and then from material up we have our home which is um which is our home view so we'll be creating additional views in our other view we'll be creating a login view okay not we're not having i'll just call it sign up so if you don't want this to see a lot of all of this you can just fold it to the part you want does it so we have our sign of views we have we also have uh start page okay let's call it start view so and i'll just create that status just create it very quickly you can unfold fast fold it if you don't want to see this stats view scaffold scaffold we're going to import i'm going to import material out then let's make this a little bit bigger so you can see then we we have a child also and it takes that sales welcome that's our start view start view so in our start view we are going to create a static string so we're using our navigation we can call it static const string string route name route name which is call it stats call it stats then that's it for start a start view now you know in our oh this is this should be our statue sorry it should be it should be it so who's a copy that stat view and in our initial routes initial route i'm going to call that and put that in then avatar opening so that would be our initial routes so i'm going to get rid of this one then on generated routes i'm going to create one to call its [Music] [Applause] thoughts because it's going to be static function on generates i'm going to call it that way so let's create that so static it's going to be i'm going to pass in the rough settings here settings that sauce are air and this must have been returned type okay so from this we are going to make a swish case from this swish case switch case of this so then we'll pass in the settings dot name then in our settings i'm going to make define complement and call its settings dots arguments so that's it so we have our first case which is let's have our site start view then the case start with us route name then we are going to return i'm going to return the material page routes then computer you don't really need it so we're going to pass it away then we're going to pass in a stab view so this is it so we are going to have a default in case the route setting wasn't matched so we are going to have a default we don't call it we can call it new page found just make that method just create a method okay since it doesn't want to create out they call it on page okay not found just make it that way statification dynamic the generic of dots so it's only material page routes in computer that's a scaffold in a scaffold body you just are the center text center text center text just easy page not found and that's what we'll be having so that's for that also now we're going to create our sign up view which is going to be easy also signed up can help you [Music] [Music] and in a sign of these also gains out a rough name call it you know we're going to go to uh on generated routes and give you the keys and holy rock me every time [Music] you've done this so that's what we're doing this will be off also i'm going to take this out from our main file and take it out from our main file to it please which is the routes just created that already so i'm going to import all every files complete this so i think that's gone to remove glass and i think i think we're going to run that and see how far it takes us okay half they're working in military which is my real device and so [Music] so we are winding our routes which is you have our initial route which is the start view of it when it's start view takes us to this page so in the process of our up running we are going to create our signup view that so it looks more like a signup page okay so i've created a vgta textview widgets okay i'm going to use it call it up text field and don't worry this code is going to be online on github so you can clone it and use it and i want so you can just skip this and we follow it's better [Music] okay i'm actually going to strap this with a single side scroll view so we avoid any upcoming roughly so our text is here textured here i'm trying to import which is quite taking a lot of time okay so how it's here again i think we have a title which is i'll call it email and what other fields do we have it's other fields we have we have controllers we have keyboard type max line updater let's use only this password okay we just need this title for now then also create luck types we'll call it password [Music] and create a flat button oh let's make erase button because of it elevation but okay compress [Music] also have shout is going to be text that says sign up so that's what it does [Music] add some commas so to format this very well okay rap is still running okay so um i didn't i talked about plugins we have used on this we have used we have used the we have used the provider logins we'll be using the provider plugins also be using the get it plugin and also the firebase dynamic links so um so that's logan's been listed in the description so you can go there and get it so there's the file the provider also to get it that's it and also the firebase dynamic links dynamics that is it you can just fashion codes and plug in and start using it so let's get back to it it's almost coming up so we're not going to do much on this um i'm going to add a little bit of padding over here [Music] making sex stab the spell okay so i'm going to give it 16 so this is it we have the wacom and on our initial initial routes we have the start view which is let's just give a little bit of style so this is kind of a showcase kind of app so you don't really need to do much so what however let's make things a bit nice here and to make it change details my pc is a bit slow today so at least that's it so so so we are going to make i'm going to make this a stage for widgets so we call the united states so in this unit states this is with then navigates to sign up open [Music] so this very undo when our app launches so so this i'm going to make this my same curious [Music] function [Music] and let's go wait for just three seconds then again then use uh routes so in our page we are going to create a navigation key it's also going to be so i don't know if it's very um elderly to use not the keys or key do i'm not really investigate but i use it it's fine it's not very very fun but i don't really know you can make a research on it so you know what you're using so this is it to make a group glubar key navigator states navigator key so on and that's also we're going to make two i'm going to make we're going to make two classes two functions two static functions that navigate to passing an argument of route name and then the argument which would be um we should pass in here then call our navigator key then the current state and we push name then we provide the route name and the argument which is this just on this to go back static function also so this just pops back that's it so i think we are done with our we are not really done with the navigating generated route class but we're going to come back and that's after we are done so we're going to reach then navigate to sign up or home so for now we're going to navigate to um i'm going to navigate to sign up so take this i'm going to import this then all the navigator navigate to then i'm going to call the sign up sign of view then call the rap name so i think that's all do then once you restart the app then to navigate us to our sign up so let's see is our terminal no so yeah welcome back no so on our routes navigator arrived generator we should have our navigator key where we having done no values we'll go to our main then now add you know key then does it add it no let's go to our start view on command d then we start now it will take us to our sign up sure translate this because here so i'm going to i'm going to make this uh this size box so we cannot say c is good [Music] want to give this a specific height of 200 so actually oh sorry sorry okay i think main axis alignments [Applause] okay i think so yeah we have it's here so what we are going to be doing also is our final string that says referral code referral code if error code so this is going to be the code from the creator of the referral link so that's it so then we can manipulate it on in here so i think and from that i think we have i was able to complete the routes the generated routes so so now we'll be going to setting up dynamic links and everything about it so there's a view that doesn't okay for us to see the page not found working we can go to uh and pass in a pass name a different route name then around that and you see our rob not found wait for three seconds it was three seconds and page not far so that's it okay so let's get to our browser then we're going to set up dynamic links like so i'm okay i've set up the dynamic links in the zips then i'm going to create a new dynamic link manually so this is how we do it so we're going to call this i'm going to call this let me call it refer then i'm going to next then i'm going to call skip this sure to have the https and pending so i'm going to have this called filter tutorial dot com [Applause] tutorial.com then code and call it code and make it ref one two three four five then you can add the dynamic link name for promotional purpose so i'll just call it refresh a friend let's see next the behavior for ios so we don't have any ios up here so i'm just it's just going to open in our web browser so that of the android i'm going to make it openly deep linking android app so we're going to select it up so up here this one then google play if your app is now instead send these absolutely for the app so this is it so go into next then we can add social media tags so you can have the type through the image to add image or whatever thing you want to add you can add image here you can add something hello and other things so you can just let you create this it creates the dynamic links and you can you can see the details of its link details you can get the short link and also you can get the the long dynamic link so let's create that in our app and let's try to let's try to our thing to open this okay we have not set up dynamic links yet but let's do that in our app so we're going to close everything here once we put our services dynamic link file to create a new class called dynamic link dynamic link dynamic links then dynamic link final and think firebase dynamic links download this code firebase we can actually go to pops back to you know publish so okay to okay this is these dynamic links so i'm going to import this dynamically i think it's gonna be an executive surgeon so because i recall that first okay a link called link then in the link to we have click on success success which carries the depending dynamic link and call it data because if you think it's the future so it definitely means we need to make this bigger so you see everything so we have the arrow which actually carries the unlinked error reception here so and also that you can just print that you can just print the air and just bring the message of its string then over here [Music] call this undo success linking then that's what i'll call it they're not passing the data in then creates a method out of it in our sources under sources dynamic link we're going to and pass this and which is we have a final uri then a deep link then the data will check if it is not then this link then if the deep link is not know and then we say is refer again we assign it to deepening.speech but segments dot contains refer now if these deep links contain refer which which is from here which we have created from here let's see if it contains something like this or it contains something like do we have it in here something like this in here so from there if it contains this you see if we fail if this is true then we are going to assign let's make a variable call code then deep link then the query parameter updates which we have created you should have created if you actually saw that when you did something like that okay i'll just go back so okay edits okay yeah when we created something like this refresh then we have we refer the code which is this is what we are getting so code then if if the code is not now then undo uh the sign up and everything so you're going to call that oh it's not i'm going to call and navigate to them to call sign off rob name then we assign an argument then we can send in the argument which is the code i'll actually be sending so now we're going to create a and we're going to create a referral link when the user opens up the app and it gets to the home page if it has not been created before then it fires them create a new referral link to that particular user so that's what we're doing so we're going to create a function that says which referral link then we are going to pass in the referral code then we're going to call we're going to define a variable name it's dynamic link parameters then we're going to give this and in that we have a uri prefix which you will get from your firebase dynamic link and console so i have my year so you just copy that and you add it then the then the link then this you can just create it yourself but you have to make it this way i made my display you might mind this way https this this filter tutorial then refer code and referral code which i passed in there then i'm going to the package name of my floater up is devscore and i think let's just get it in case i'm wrong it means add your package name there i think this is it okay just so then this day for the android parameters your package name if you have an ios you can think there's is parameters then you can set that up i'm working with um android then decision meta tag so this is it you add the title refer description image that will show when you you add it to any social media when you want to post when you want to share that particular and um want to share to somebody so it actually shows this picture and image use added here so i'll manually add that and there's a picture that we are going to see so i'm going to create also created a final created a finite and short dynamic links we're going to be creating short dynamic links okay again we did it and finally i dynamically in short length 30 so then i return that switch actually returns a feature a string which is a feature so i'm going to close this i'm going to close this oh okay need to copy this first then i'm going to register it and i'll get it set up so dynamic links okay i sorry should call it dynamic links api so to be better that way okay so recommend this i have this already in our main which i've called here so to close that close that also and for closing that what we are going to do next is now sign up page okay we have our referral codes now okay we have a referral code today so in order for us to end this and do this very well we are going to take a a logic to a setting class then we can handle it over there i will be using providers for that so i have a viewmodels yes i'll create a new folder called viewmodel oh sorry should that should be filed i'm going to delete that should be file boom view movie model okay extends change notifier okay so now we have we got we have gotten these so we'll go to our roots with our main then i'm going to wrap this with a i'm going to teach a provider creates we should run before every other thing we're going to then go to that class so and then now call i'll get it call it uh link api then get it this is the way i use mine then gets the dynamic link api so that's what we do then it creates a constructor of this that will be fine now fired every time our app launches then we're going to call this um for its undo dynamic link so that's what it does so what else we didn't do here is to avoid this to initialize initialize link so we're going to await that okay cool so then what else are we going to do so in our in our home so when aiza gets to home which is just an empty scaffold it's just an empty scaffold so i'll just pass in something that's a and container just keep giving the text and take them think about an upper tutorial referral system okay so in this and then this we have a class here which says creates referral code so what this does is what this does is it has a function on the string then in the instead of up on the referral code and referral code generator which is random numbers so we check if the widget is actually mounted then we do this stuff so the id referral then next means plus this it generates so we generate eight numbers i think oh okay this this substrings give us eight numbers then this referral code to this referral code and we set it in states which then pass it over here which is this hope you understand so we are going to wrap that to uh interrupt that over here no i think let me wrap it right here i think he is better sorry actually amazing though [Music] okay okay let's just shake was there it should be kind of and we have a string referral code then we come and delete our strings in i think we'll turn whatever widgets we want to return oh i think it goes in here okay cool that's it so i'm going to wrap this with uh i'm going to wrap this with our provider which is the home view model view model import this then column computer so this is it so so [Music] to get our deepening api then create referral link then this recorded referral codes now it's it's create this referral when you pass in this referral code when we get from get from here so that's what i think we've done with our own view we don't need that overview so um so i don't think we're going to do anything logging with firebase but i'm going to make it want to make it as easy as possible so and also let me create a different and text field call it referral referral code so that's where the referrals go in [Applause] we'll do something more than double stink it's exceeding the video time so this what this would do for us is dicks this sign up takes up to us to phone so i'll just go to our routes and copy this actually forget the name so these import stats then call navigator to overview okay we haven't created any route name so create that so create that's called static const call that home [Music] okay that's cool so actually in this so actually you see something working you're going to print this dynamic link you're going to print it off that might have been created so i'm going to restart this i'm going to restart this this startup okay okay we have yeah no referral codes when we start adding referral code is when we click on a link then the referral code is going to get here so first let's just see uh our referral code being created first so click on this or page not found okay we haven't registered that's on our routes the own we have not registered so i'm going to copy this and call this home view and i'm going to import that and we'll just navigate back then okay okay as you can see now terminal here we have generated a link erase the link let's see how it goes so i'll just go to my social media and my facebook social media so we actually see things there i'll try to create the posts and you'll see you you should see an image cool this is it referee friend reference and all this is coming all this is coming from here it's coming from the social media that part is also cool so now let's copy that url let's save it somewhere let's save it so i'll just save it up here so i can get it very fast so doing also is the thing we'll be doing also is when we are in we are we've clicked the app we've clicked it so in a dynamic link over here which says undo sources that success linking so what we do is if it's no no then move this sign up then then this is uh uh argument which is the code which is the referral whatever referral link is in this link so is what it does so i'll just save that and go through it's a string this is a string so save that and go to our our generator then in us sign of view i'm going to make some if statements if this argument is stringed from this we're going to return this else we are going to return you're still going to i think there's no need to respond on page not found still going to return this but in here we're going to pass this argument which is i refer our code i want to pass that in so whenever we click the link and never click the link it takes us to this app and pass passing the argument here so i'm going to go to the sign up then i'm going to create a text field text editing sorry controller which is referral referral code controller okay then send this to final okay on the controller down here i'm going to pass this then after passing that i'm going to uh this widget is built so i'm going to set this the controller text to whatever referral code is yeah but if it is no i'm going to pass an empty string so that's it for that so i'm going to navigate back okay i'm going to stop the app so we got up running back so i'll just go to right to this click on this link and it takes us to whatever web page then from the web page we get back here then we move yeah so i forgot to do something which i didn't do which got me to have some bulbs in it so and i actually passed in and changed fire provider which i shouldn't do and what i now pass is multi-provider then i use change notifier provided up value so this should run first whatever it's runs first so as you can see it runs first so it's this undoes the deep linking and everything so that's it so as i've explained everything passing the code to the sign up and from there we add it over here so i'm going to rerun this so you actually see the thing it's actually see it's working so i have a link already welcome then it goes to uh sign up page then from here and i go through where i have my links click on it's taken into the browser then comes back and opens the app with our referral link that we have created so thanks for watching to this point and also if you want me to go more deeply into the referral system just tell me on the comment section below and thanks to brothers osama that says i should do this and thank you very much

Channel: Think Intelligent Technologies

Views: 15,031

Keywords:

Id: V4gly3fwQbU

Length: 55min 55sec (3355 seconds)

Published: Sun Jan 17 2021