Как создать ссылку для отправки приглашенных пользователей на определенную страницу в моем ионном приложении? - PullRequest
0 голосов
/ 04 мая 2019

В настоящее время я заканчиваю разработку дополнительных функций в моем приложении ionic v1 с использованием базы данных Firebase.

Я добавил в него плагин для обмена социальными сетями cordova.Теперь я могу отправить ссылку друзьям разных платформ (WhatsApp, messenger и т. Д.).

Основная проблема, с которой я столкнулся, заключается в том, что я не могу понять, как создать ссылку, ведущую приглашенного пользователя на нужную мне страницу.Я много читал о потенциальных решениях для StackOverflow и некоторых других платформах, а также о решениях для создания глубоких ссылок на основе Firebase;но не нашел решения, отвечающего моим потребностям (для ионного V1).самый близкий ответ, который я получил, был такой: https://dev.to/hitman666/how-to-use-deep-linking-in-ionic-1-apps-with-ionic-native-deeplinks-plugin

В основном мне нужно, чтобы приглашенный пользователь достиг страницы, которая была бы доступна вручную по этому пути: Пользователь входит в приложение через свою учетную запись Facebook ->пользователь добавляет меня в друзья -> пользователь нажимает на мой профиль в своем списке друзей -> и, наконец, пользователь может видеть список моих продуктов, отображаемый на странице, к которой я хотел его привести.

Если бы вы, ребята, могли бы дать мне несколько подсказок о реализации такого решения, я был бы очень благодарен.

Приветствия

РЕДАКТИРОВАТЬ

@ Каран, большое спасибо за ваш ответ.Я фактически изменил архитектуру своего приложения, чтобы сделать весь процесс проще.Я создал страницу myproducts, которой хочу поделиться с друзьями.В основном эта страница отображает продукты пользователя относительно его uid.Для того, чтобы успешно передать нужные мне данные, мне нужно получить uid пользователя, который хочет поделиться страницей своего продукта (uidsharer).а затем получить его, как только ссылка нажата и приложение открыто.Я думаю, что моя ссылка будет выглядеть следующим образом: myappname //: myproducts? Uidshaer = XXXXXXXXXXX.

Я не совсем понимаю, как получить значение uidsharer и использовать его в качестве значения моей переменной uidsharer в моем файле js.Вот выдержка из моего контроллера myproducts.js:

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);

                    });
                }
            });

в моем коде uidsharer не определен и должен определяться аргументом, переданным в моей URL-ссылке.

Предположим, чточто мой uid - ABCDEFG, и я отправляю ссылку приглашения, например: myappname //: myproducts? uidshaer = ABCDEF

как я могу сделать значение переменной uidsharer 'ABCDEF', когда приглашенный пользователь щелкает ссылку приглашения ипротивопоставить страницу app / myproducts в моем приложении?

Спасибо: -).

РЕДАКТИРОВАТЬ 2

Большое спасибо Каран за ваш вклад.К сожалению, я не мог понять, как реализовать то, что вы мне предложили.Не могли бы вы взглянуть на мой код?

Вот мой фрагмент кода .state из app.js для моей страницы myproducts:

.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();
            });
          }


        }
      }
    }
  })

Как я могу изменить свою функцию .state вapp.js для получения переданного значения uidsharer в моем файле контроллера, когда я использую следующую структуру url: myappname: // myproducts? uidsharer = XXXXXXXX

Более того, вот мой контроллер myproducts.js:

'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();
    });

Вот HTML-шаблон страницы myproducts.html:

<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>

Я довольно потерян, мое приложение почти готово, я простонужна последняя функция Deepring Sahring для завершения моего проекта.

Большое спасибо за вашу помощь.

1 Ответ

1 голос
/ 06 мая 2019

Вы можете использовать Пользовательская схема URL Плагин.

Ваша единственная проблема будет заключаться в управлении Auth.Пользователь -> Друг -> Профиль -> Продукты предполагает, что аутентифицированный пользователь вошел в систему.Пользователи, переходящие по ссылкам, могут

  • Новые пользователи без аутентификационных учетных данных
  • Существующие пользователи вышли из системы
  • Пользователи без установленного приложения (обработано Play Store)
  • Пользователь вошел в систему

Вам потребуется реализовать handleUrl в app.run.В зависимости от ваших требований к аутентификации, вам придется писать и управлять логикой, используя полученный URL.

Если это общедоступная страница, к которой можно получить доступ без аутентификации, вам придется управлять историей для этой страницы.

URL-адрес будет выглядеть примерно так: app: // pagename? User = username & profileid = 2 & moreparams = params

  • Извлечение имени состояния из URL-адреса, перенаправляющего в состояние с параметрами.
  • Убедитесь, что штат готов к внешнему получению данных.
  • Убедитесь, что у вас есть уникальное имя приложения.
  • Переадресация для входа в систему при необходимости.

Edit 1 Забыл много вещей об Ionic 1, но, пожалуйста, потерпите меня.

Попробуйте это, 1) убедитесь, что этот маршрут работает

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

Установите этот плагин https://github.com/EddyVerbruggen/Custom-URL-scheme

Снаружи вашего модуля в app.js вставьте этот код.

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

};

Внутри .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 );

Это в значительной степениhack.

Более элегантный способ - использовать ссылку , которой вы поделились.

Предполагается, что вам удалось установить собственный плагин и $ cordovaDeeplinks доступен.

$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);
});

Я использую native-deeplinks в ionic 4, и это лучше.

В любом случае, есть еще один метод described в этот пост. .Это интересное чтение, если вы хотите погрузиться глубже в кордову.

...