How to Create Flutter Deeplinks using One Signal That Drive Traffic and Conversion | amplifyabhi

in this Vlog we are going to see the  implementation of deep linking Concept   in your flutter application so we are using  tool called one signal for this purpose so   in our previous tutorial we have seen the  Deep linking concept using Firebase and   now we will optimize the way we use this  particular Firebase in our application   for deep linking so with the help of the  one signal it will be very much easy for   even a beginner to get started with  this particular deep linking concept foreign so now let us start with configuring one  signal first and then we will be trying   to make our Firebase project accessible by  the one signal so that we can easily send   messages to our flutter application these  messages are nothing but of deep linking   so with the help of these particular messages we  will be implementing deep linking Concept in our   flutter application so the very first thing we  need to do is like we need to create a new app   in our one signal dashboard here so this is  my one signal account and here you can see   I have implemented one signal on my websites  as well here so even my websites will get push   notification based on one signal and these are the  two applications which I have made for flutter so   this is the latest application which I have made  to show you to demonstrate you the implementation   of flutter deep linking concept I just want  to show you how to create a new app if you   are a beginner so here tap on the new app here  and first of all you need to select the name   of your application here so I'm going to select  like flutter one signal or just or just specify   your application name over here and below this you  are having these options like you need to select a   platform so if you are trying to implement deep  linking concept for your iOS application then   select the first option here and if you want to  implement for Android application then this one   and accordingly please select your platform here  so even you have more options like for desktop if   you are trying to create applications then you can  go for these options and this one is for Chrome   and depending upon your requirement try  to select the options available here   and now I am trying to select Google Android  here currently my xcode is getting updated so   I'm trying to add one signal deep  linking to my Android application   so here we will be selecting Android and going  forward we will be selecting flutter here and   before selecting flutter as our platform after  providing our server key and sender ID it will   be asking as the cross platforms as well so  like react native flutter and all these things   so here we need to have Firebase server key and  Firebase sender ID so from where we get these   two things is like in our Firebase console we  need to create a project here so I already have   a project like deep link here and if you are not  having projects just try to tap on the new project   or just go through our previous tutorial link I  am providing here there I have explained you how   to create a project in Firebase so now tap on the  settings button here on the project overview and   tap on Project settings here so here under Cloud  messaging you have this server key and sender ID   so let's try to copy these two things now and  add to our one signal console here so these two   things are the main here with the help of these  two things we are able to send a message to our   Android or iOS application and from there we can  implement the Deep linking concept and also it's   the same way when you are trying to implement  push notifications so here in this particular   tutorial I have discussed on implementation of  push notification in our flutter application   so here I am providing the link in the description  section below you can just go through it and tap on Save and continue here and now as I have said earlier we have  an option of selecting the platform   now yes previously we have selected  Android Here and Now based on Android   what particular platform you are trying to  implement your project are you implementing   on Native Android platform or react native unity  all these options so we are selecting flutter here so if you select iOS in the first level you  will be also provided with these particular   options so don't get confused and now  let's tap on Save and continue here   and the first step is like installing the SDK so   if we come back to our Android Studio here  under the pub spec file I have already added   the dependency for one signal here so make sure  you add this particular dependency and also   try to provide the latest version available  every time and now let's tap on pubkid here   and let's start with our coding part now so  the very first import we do in our flutter   applications is like material.dot and the next  one is like we need to import one signal here void mean run app and inside which let us try to specify my  app and for which we are going to create a class   now so I'm just going to consider a stateless  widget or let's try to consider a stateful   widget here itself so just we are going to declare  a single class and here let us try to name it like   my app so inside the my app here we are going to  add an init State here why I have chosen stateful   widget is like we can perform some actions here  but for this particular tutorial I'm just going   to explain you the configuration part and the  usage of deep linking Concept in our flutter   application so from the coming tutorials we are  going to see more features like how to implement   a deep link within our application that is like  we need to move from one screen to another so   that is like when we whenever we get a deep link  message here when tapping on that particular   message will be directed to a particular screen  in our application okay so now let's start with   adding the app ID and also setting the  log level for our project so one signal   dot share dot set log level here and now  here you have again two options like lock   level and visual level so for the log level I  am going to set it to debug here and you are   having all these options just set these options  according to your requirement and the second   one I currently don't require this option so I'm  just turning off it OS lock level Dot none okay and the next thing is we want to add our app ID  here so that our app gets detected so set app ID   here and from where we get this particular app ID  okay let's get back to our Firebase console here   so this is our app ID just copy this particular  app ID and tap on done here and you can see the   steps here on the right hand side so tap on the  done here and once you enter into the console   also you can get the app ID from here under the  settings so keys and ID so when you tap here   you will be getting this particular one  Signal app ID so if you miss collecting   your app ID from the first screen then  you can even collect from here as well   so let's try to add the app ID and yes that's  it the configuration part on our application is   completed so I'm just trying to run an emulator  here and trying to and will try to show you   the output now so let's try to run this particular  app and here you can see we have nothing   much specified here so just to have a minimum  application View I am just going to specify scaffold here and inside  which let us specify an app or and with the help of a text widget  let us try to specify one signal deep link okay so let us try to open our emulator  here yes we have got one signal deep link the   application is installed now and let us try to  send a deep link message here and also before   sending a deep linking message let's try to see in  the console whether our device is detected on one   signal or not so just now we have added an app ID  and also the required settings on our application   right so let's try to see under the audience here  here you can see I have just added this particular   I'll just run our application we have just  run our application on emulator right so it   is detected in our console here and  now let's move to the messages here   and tap on new message and now  let's try to send a message here   so the message is like one signal deep link I  am trying to add here so this is just a sample   okay and the next thing is like  we are going to add an image here   so here I've just uploaded a logo of mine in  imgb here so I'm just going to use the same logo   and launch URL I am trying to specify my website here so what we are trying to do is whenever we get  a message on our device and when you tap on   that particular message in general if it is a push  notification we will be opening up our application   so that the user can go through our app  but here this is a deep link so we can   perform two ways here it's like we can  open an external website in our browser   or we can open our application and redirect to  a particular screen where we want the user to be   so here in the first tutorial I am showing  you how to open a website in our browser   so here I've just added a launch URL and an image  and a message over here and title and also there   are other platform settings here you can just make  sure you add these details when they are required   and also advanced settings are there and if you  are having any queries in these two options just   let me know in the comment section below and also  you can schedule this particular message it's not   like you need to send immediately every time you  can specify a time and also these options like   intelligent delivery and custom time per user time  zone all these options you can just customize them   accordingly and so I have added all the required  details and you have also an option to test it so   in coming tutorials we will be seeing these two  options here and let's tap on review and send   and here it is showing us all the details  which we have provided if they are correct   you can just tap on send message and if there  are any changes you can make the changes so why   these many uh reviews are provided here because  whenever you tap on send message in real time   scenario the messages will be going to thousands  of and lacks of devices sometimes so it's better   to recheck every time okay and let's tap  on send message and go to our emulator here   you can observe the Bell icon  so we have got a notification   so this is the notification which we have got  and here you can see we have not got an image   so let's try to see why we have not got an image  and let's tap on this particular option now   and it is asking you to accept this basic things  uh because we have created an emulator so it's   like a Chrome browser option and here you can see  our website is now open on our emulator so this   is how a basic deep linking concept is being  explained if you want to send a message again   just tap on duplicate here so yes this is it for  this tutorial on flutter deep linking concept and   in our next tutorials we are going to see how  to implement a deep link such that we move from   we move to a specific screen on our flutter  application and also here are our previous   tutorials where we have discussed flutter Firebase  deep linking concept so you can just go through   this particular concept as well if you are  interested in the links for this tutorial I   am providing in the description section below and  also in this particular tutorial we have discussed   about flutter one signal push notification so  how we can send a push notification it's again a   similar concept like how we send a message over  here so you can just go through this tutorial   as well and for more interesting tutorials  do like share and subscribe to our Channel

Channel: amplifyabhi coding

Views: 2,861

Keywords:

Id: NCnukamO7sk

Length: 15min 12sec (912 seconds)

Published: Sat Dec 10 2022