Ad

How To Create A Link Sending Invited Users To A Specific Page On My Ionic App?

I am currently finishing the development of additional functionalities on my ionic v1 app using firebase database.

I have added the cordova social sharing plugin to it. Now I can send a link to friends of various platforms (WhatsApp, messenger, ...etc).

The major issue I have is that I cannot figure out how to create a link leading the invited user to the page I want. I've been reading a lot about potential solutions on StackOverflow and some other platforms, as well as firebase deeplinks solutions; but didn't find a solution answering my needs (for ionic V1).

The closest answer I got was this one: https://dev.to/hitman666/how-to-use-deep-linking-in-ionic-1-apps-with-ionic-native-deeplinks-plugin

Basically I need the invited user to reach the page that would manually be reachable following this path:

The user logs in the app via his facebook account
-> The user adds me as a friend
-> the user clicks on my profile in his friends list
-> and finally the user can see the list of my products displayed on the page I wanted to lead him to.

If you guys could give me some clues about the implementation of such a solution, I'd be really grateful.

Cheers

EDIT

@ Karan, thank you very much for your answer.

I have actually modified the architecture of my app to make the whole process easier.

I have created a myproducts page that I want to share with friends. Basically this page displays the products of a user regarding his uid. In order to successfully pass the data I need, I would need to fetch the uid of the user who wants to share his product page (uidsharer).

And then fetch it as soon as the link is clicked and the app is open. I guess my link would look like this: myappname//:myproducts?uidshaer=XXXXXXXXXXX.

I do not really understand how to fetch the value of uidsharer and use it as the value of my variable uidsharer in my js file. Here is an extract of my myproducts.js controller :

var uidsharer = '';
    Product.allMyProductsToShare(uidsharer).$loaded().then(function (data2) {

                for (var j = 0; j < data2.length; j++) {
                    var item2 = data2[j]

                    Auth.getProduct(item2.$id).$loaded().then(function (product2) {
                        matc.ratings.push(product2);

                    });
                }
            });

In my code the uidsharer is not defined and needs to be defined by the argument passed in my url link.

Let's assume that my uid is ABCDEFG and I send an invitation link like: myappname//:myproducts?uidshaer=ABCDEF

how can I make the value of my uidsharer variable 'ABCDEF' when the invited user clicks the invitation link and opens the app/myproducts page on my app?

Thanks :-).

EDIT 2

Thank you so much Karan for your contribution. Unfortunately, I could not figure out how to implement what you have suggested to me. Could you have a look at my code?

Here is my .state piece of code from app.js for my myproducts page:

.state('app.myproducts', {
    url: '/myproducts',
    views: {
      'menuContent': {
        templateUrl: 'templates/myproducts.html',
        controller: 'MyProductsCtrl as prod',
        resolve: {
          history: function($ionicHistory){
            $ionicHistory.nextViewOptions({
              disableBack: true
            });
          },

          auth: function($state, Auth){
            return Auth.requireAuth().catch(function(){
              $state.go('login');
            });
          },

          uid: function(Auth){
            return Auth.requireAuth().then(function(auth){
              Auth.setOnline(auth.uid);
              return auth.uid;
            });
          },

          profile: function(Auth){
            return Auth.requireAuth().then(function(auth){
              return Auth.getProfile(auth.uid).$loaded();
            });
          }


        }
      }
    }
  })

How can I modify my .state function in app.js to fetch the passed value of uidsharer in my controller file when I use the following url structure: myappname://myproducts?uidsharer=XXXXXXXX

moreover here is my myproducts.js controller:

'use strict'

app.controller('MyProductsCtrl', function(Product, $ionicLoading, $ionicPopup, Auth, uid, profile, $scope, Like, Likeproducts, $ionicModal, $timeout){
    var prod = this;


    var currentUid = uid;
    var uidsharer = '**THIS IS THE VALUE I WANT TO FETCH FROM MY CUSTOM URL**';



    $scope.show = function(){
        $ionicLoading.show({
            template: '<ion-spinner icon="bubbles"><ion-spinner>'
        });
    };

    $scope.hide = function(){
        $ionicLoading.hide();
    };


    function init(){
        $scope.show();


        prod.ratings = [];

        prod.username = profile.name;



        Product.allMyProductsToShare(uidsharer).$loaded().then(function (data2) {

            for (var j = 0; j < data2.length; j++) {
                var item2 = data2[j]
                console.log(uidsharer)
                Auth.getProduct(item2.$id).$loaded().then(function (product2) {
                    prod.ratings.push(product2);

                });
            }
        });



        $scope.hide();


        ;




    };



    $scope.$on('$ionicView.enter', function(e){
        init();
    });

Here is the html template of the myproducts.html page:

<ion-content class="padding">

    <td-cards>
        <td-card id="td-card" class="card-{{$index}}" 
        ng-repeat="item in prod.ratings">
                <div class="image">
                        <div class="no-text overlayBox"><div class="noBox boxed">BYE</div>
                        </div>
                        <img ng-src="{{item.imgurl}}">
                        <div class="yes-text overlayBox"><div class="yesBox boxed">BUY</div></div>
                    </div>
                    <div class="card-text">
                            <h4 class="centered">{{item.title}}
                            </h4>

                            <br>
                            <p class="centered">

                                Price: {{item.price}}.-€.<br>(inkl. MwSt.)</p><br><br><br><br>

                        </div>
                    <br>


        </td-card>
    </td-cards>

    <p>{{profile}}</p>
</ion-content>

I am quite lost, my app is almost ready I just need this last deeplink sahring functionality to end my project.

Thank you so much for your help.

Ad

Answer

You can use Custom URL Scheme Plugin.

Your only issue will be managing Auth. User --> Friend --> Profile --> Products assumes that the authenticated user is logged In. Users coming from links will might

  • New users without Auth Credentials
  • Existing users logged out
  • Users without App installed (Handled by Play Store)
  • User logged in

You will have to implement handleUrl in app.run . Depending on your Auth requirements, you will have to write and manage the logic using the url received.

If it's a public page which can be accessed without Auth ,then you will have to manage history for that page.

Url will be something like Something like app://pagename?user=username&profileid=2&moreparams=params

  • Fetch the state name from url redirect to state with params.
  • Make sure the state is ready to receive data externally.
  • Make sure you have unique app name.
  • Redirect to login if necessary.

Edit 1 Forgot lot of stuff about Ionic 1 but meh, do bear with me.

Try this , 1) ensure this route works

$state.go("myproducts", { "uidsharer":"customuid"});

Install this plugin https://github.com/EddyVerbruggen/Custom-URL-scheme

Out side your module in app.js paste this code.

function handleOpenURL (url) {
  localStorage.setItem("url","url");
let uidsharer = url.split("?")[1]("=")[1];
localStorage.setItem("uidsharer",uidsharer)

};

Inside the .run

if(localStorage.getItem("uidsharer")){
let uidsharer = localStorage.getItem("uidsharer");
$state.go("myproducts", { "uidsharer":"customuid"});
}

// OR 

if(localStorage.getItem("uidsharer")){
let uidsharer = localStorage.getItem("uidsharer");
$state.go("myproducts");
}


var uidsharer = $stateParams.uidsharer ; // OR 
var uidshare = localStorage.getItem("uidsharer")
localStorage.removeItem('uidsharer );

This is pretty much a hack.

A more elegant way is to use the link you shared .

Assuming you have managed to install native plugin and $cordovaDeeplinks is accessible.

$cordovaDeeplinks.route({    
    '/myproducts': {
        target: 'app.myproducts',
        parent: 'app.myproducts'
    }
}).subscribe(function(match) {
    console.log('matching');
    console.dir(match);
    $timeout(function() {
        $state.go(match.$route.parent, match.$args);

        if (match.$route.target != match.$route.parent) {
            $timeout(function() {
                $state.go(match.$route.target, {uidshaer: match.$args.uidshaer});
            }, 800);
        }
    }, 100); // Timeouts can be tweaked to customize the feel of the deeplink
}, function(nomatch) {
    console.warn('No match', nomatch);
    console.dir(nomatch);
});

I use native-deeplinks in ionic 4 and it's better .

Regardless , there is one more method described in this post. . It's an interesting read if you want to dive deeper into cordova.

Ad
source: stackoverflow.com
Ad