@gpnm/native-utils v0.1.0

GPNM-vue utils

Набор утилит для взаимодействия web-app на vue.js с нативным приложением АЗС "Газпромнефть". Часть утилит реализована в качестве mixins

Содержание:

1. Установка
2. Интеграция ..1.Все сразу ..2.По частям
3. Функции ..1.Геолокация ..2.Запрос данных пользователя ..3.User story

Установка Для устанвоки используется npm

npm install --save

Интеграция Все сразу Во входной точке (main.js или в boot файле при использование квазара)

import name rom 'package-name'

По частям В случае если нужен не весь функционал можно импортировать только необходимые функции и mixins

import {
  setLastUserLocation,
  setRegionCoordinates,
  setAmplitudeData
} from 'package-name'

Функционал Для предоставления нативным приложениям возможности передавать данные в web-view необходимо глобально добавить к window методы сеттеры (в main.js или boot файле для quasar проектов)

mport {
  setLastUserLocation,
  setRegionCoordinates,
} from 'package-name'

/**
* Установка сеттеров для window
*/
window.setLastUserLocation = setLastUserLocation
window.setRegionCoordinates = setRegionCoordinates

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Для работы с данными из нативного апп, в компонентах нужно подключить mixins

import {UserLocationIosMixin, UserLocationAndroidMixin} from '@/имя пакета'

export default {
  mixins:[ UserLocationIosMixin , UserLocationAndroidMixin ]
}

Геолокация

Методы позволяют получать местоположения пользователя или региона пользователя. Функционал разделен для IOS и Android.

IOS

в main.js к window добавить следующие функции:

• setLastUserLocation - Получает координаты пользователя и дальше передает их в примеси для использования в компоненте
• setRegionCoordinates - Получает координаты региона пользователя и дальше передает их в примеси для использования в компоненте

Mixins

• UserLocationIosMixin

  При добавление в компонент добавляет методы для обработки поступающих данных с пользовательскими координатами. После отработки помещает данные в формате:

  {
    lat: number,
    lng: number
  }

  в свойство data.center. Для успешной работы добавте это свойство к data компонента.

Инициализация получения данныех

Для запроса координат пользователя из приложения используется следующая конструкция:

 if (window.webkit !== undefined) {
   window.webkit.messageHandlers.getLastUserLocation.postMessage('')
 }

Android

Для получения координат пользователя на Android необходимо только подключить mixin и добавить вызов в нужном компоненте

Mixins

-UserLocationAndroidMixin

Инициализация получения данныех

Для запроса координат пользователя из приложения используется следующая конструкция:

 if (typeof Android !== 'undefined') {
   this.getAndroidPosition()
 }

Запрос данных пользователя

Функционал позволяет получить зашифрованную строку с partnerHash, содержащую личные данные пользователя.

Для функционирования в main.js к window нужно добавить:

-setPartnerHash</ - получение partnerHash от нативного АПП

Mixins

-partnerHashDialogMixin - содержит метод для вызова нативного диалогового окна

import {partnerHashDialogMixin} from 'имя пакета'

export default {
  methods:{
   actionBtn() {
     this.showAppNativeDialog() // вызывает нативное диалоговое окно
   }
  }
}

-partnerHashSetterMixin - обработка поступившего из нативного приложения partnerHash

После выполнения вызывает метод partnerHashSetter(e), где e.detail содержит partnerHash. Данный метод можно переопределить

export default {
  methods:{
    partnerHashSetter(e){
      console.log(e.detail)
    }
  }
}

User story

Утсановка параметров метрики amplitude для синзранизации действий пользователя в нативном АПП и web-view.

Нативный сеттер

Для получения данных из нативного приложения необходимо в main.js к window добавить

• setAmplitudeData - получение данные сесси и устройства пользователя из нативного АПП

Инициализация запроса

В App комопненте небоходимо добавит mixin getAmplitudeDateMixin. После чего при инициализации web-app ( при условии, что к Vue.prototype добавлен amplitude) происходит обращение к нативному АПП.

Подключение метрики

Для подключения метрики необходимо установить пакет amplitude.js

npm i amplitude --save

После чего инизиализировать метрику

amplitude.getInstance().init('API_KEY')
// Дополнительный экемпляр подключается для передачи данных в
// общий счетчик по всему приложению
amplitude
  .getInstance('GLOBAL_INST')
  .init('GLOBAL_API_KEY')
const amplitudeLocal = amplitude.getInstance()
const ampliteudGlobal = amplitude.getInstance('GLOBAL_INST')

Vue.prototype.$amplitude = amplitudeLocal
Vue.prototype.$gAmplitude = ampliteudGlobal

Использование данных

Для использование тех же userId, deviceId и sessionId внутри web-view, что и в нативном АПП Нужно добавить mixin setAmplitudeDateMixin