Рубрики
Без рубрики

Отправить push-уведомление от рельсов в ионное приложение

Реализуйте push-уведомление с помощью рельсов, рпуш и ионные

Автор оригинала: Foysal.

Почему

Настройка push-уведомления сложно. Особенно когда дело доходит до гибридных приложений. На первый взгляд кажется легким, но чем больше вы пытаетесь сделать что-то конкретное, тем больше невозможно. У меня сам трудно каждый раз, когда мне нужно реализовать push-уведомление о приложении, не имеет значения, на что он построен. Вот почему я решил это документировать. Я только что закончил реализацию Push-уведомления на Приложение Jarme И этот пост будет отражать этот процесс и использовать тот же набор инструментов.

Готовый? Пошли…..

Инструменты

Мы будем использовать приложение Rails в качестве сервера API Backend и RPUSH GEM Отправить push-уведомления с сервера. На клиенте у нас будет блестящее ионное приложение, которое использует Phonegap-push-plugin Отказ На данный момент мы будем сосредоточиться на Android и используем только платформу Google FCM, но я собираюсь записать еще один пост для настройки iOS в ближайшем будущем. Я написал этот пост на машине Linux, но я ожидаю, что вы получите * NIX OS, поскольку большинство команд в этом посте, вероятно, потребуют среды * NIX.

Я буду проходить вас через каждый шаг, начиная от создания нашего приложения до получения уступов на устройстве. Тем не менее, я буду думать, что вы несколько знакомый С рельсами, угловыми/IONIC2 + и терминалом в целом и, конечно, не стесняйтесь спрашивать, если что-то не имеет смысла или кажется запутанным или не работает так, как он должен.

Наземная работа

Для большинства из вас пропустите этот шаг, так как у вас, вероятно, уже есть API Rails вместе с IONIC APP и работает. Тем не менее, возможно, стоит просто выбрать настройку, мы собираемся выложить, чтобы вы могли убедиться, что ваши приложения также имеют необходимые пакеты/плагины с совместимыми версиями.

Мне нравится держать свои приложения, организованные в папках, так как обычно у меня есть одна папка, которая содержит все связанные инструменты для приложения: API приложение, мобильное приложение, веб-приложение и т. Д. Итак, давайте сделаем это первым; Давайте творчески называем наше приложение Pushme и дать ему хорошую структуру папки:

cd ~
mkdir pushme
cd pushme
mkdir api
mkdir mobile

В основном мы собираемся на структуру, которая выглядит как:

pushme
    |- api
        |- pushme
            |- ..... all our rails code
    |- mobile
        |- pushme
            |- ..... all our ionic code

Давайте установим новое приложение New Rails. Я предполагаю, что у вас установка Ruby Environment Setup с GEM GEM, установленным на вашу машину, поэтому откройте терминал и просто запустите следующие команды, и она будет для вас Scaffold A Brand New Rails для вас:

cd ~/pushme/api/
rails new pushme

Теперь просто перейдите в недавно созданную папку и выпустите приложение Rails:

Теперь вы должны быть в состоянии увидеть веселых маленьких Добро пожаловать на борт Страница, если вы перейдете к этому URL http://localhost: 3000/ в вашем браузере. Итак, это будет домой для нашего BackeND API.

Теперь, давайте быстро настроим наше ионное приложение, опять же, предполагая, что у вас уже есть Nodejs, Android SDK, Cordova и Ionic CLI Setup на вашем компьютере (если нет, пожалуйста, следуйте по Это руководство ). Откройте новое окно терминала и запустите следующие команды:

cd ~/pushme/mobile/
ionic start pushme tabs

Теперь у нас есть горячий и свежий ионный проект, который имеет вкладки Скалина с плиты. Чтобы посмотреть, что это значит, навигация внутри папки проекта и запустите приложение:

Теперь вы должны быть в состоянии увидеть Добро пожаловать в Ionic Страница на http://localhost: 8100/ URL в вашем браузере. С толком, отсюда, мы готовы работать над реальной разработкой функций.

Настройка проекта Google FCM

Для этой части вам понадобится учетная запись Google. Выполните следующие действия, чтобы получить настройку проекта FireBase и получить необходимые данные для наших следующих шагов:

  • Перейти к Консоль Firebase и войдите в систему с вашей учетной записью Google.
  • Нажмите Добавить проект Установите предпочтительное имя и область сервера и нажмите Создать проект Отказ Я назвал свой проект Pushme Отказ Это выглядит что-то вроде изображения ниже на момент написания этого поста.
Создание скриншота проекта Firebase
  • Затем вы будете перенаправлены на страницу проекта. С вашей проектной страницы перейдите к Настройки проекта страница.
Перейти на страницу настроек Firebase
  • На странице настроек Перейдите в Облачные сообщения вкладка Вы найдете Ключ сервера и а Отправитель ID Отказ Нам понадобится эти два ключа на более поздних этапах.
Firebase FCM учетные данные

Я буду удалять мой проект, как только я закончу, написав этот пост, так что я просто постановлю чувствительные ключевые ключи на посте, но убедитесь, что у вас есть ваши клавиши безопасные и безопасные Отказ

Настройка push-push и plugins

Чтобы отправить уведомление на устройство на устройство, нам нужен уникальный ключ от нашего мобильного устройства под названием постановка Отказ Плагин Pluggap-plugin-push позволяет нам получить это с приятным API. После извлечения, мы отправим и храним его на нашем сервере API для последующего использования.

Чтобы сделать все легко, ионные есть куча пакетов под @ Ionic-Nounge пространство имен о том, что мосты ионные с различными плагинами PhoneGap/Cordova и предоставляют нам интуитивно понятный Speatcript, совместимый API. Установите следующие плагины Cordova и ионные пакеты NPM NPM:

ionic cordova plugin add cordova-plugin-device
ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=710571851300
npm i @ionic-native/push @ionic-native/device --save

Во второй команде Sender_id Переменная Убедитесь, что вы заменяете 710571851300 с вашим проектом Sender_id что мы получили из нашего проекта FireBase.

Теперь нам нужно зарегистрировать ионные услуги в нашем SRC/App/app.module.ts Файл Чтобы использовать их в нашем приложении, поэтому давайте отрегулируем файл, как это:

....other imports.....
import { Push } from '@ionic-native/push';
import { Device } from '@ionic-native/device';
.....
    providers: [
        ...other providers,
        Device,
        Push,

Чтобы удерживать вещи модульными, мы извлеките все уведомления в свой собственный поставщик услуг. Следующая команда будет создавать для нас Placholder поставщика услуг и зарегистрировать это в app.module.ts файл тоже.

ionic g provider notification

Вышеуказанная команда будет генерировать новый файл в SRC/поставщики/уведомление/уведомление .TS Отказ Давайте откроем его и впрыскивайте наши новые плагины кнопки и устройства в провайдер. Это изменения:

import { Device } from '@ionic-native/device';
import { Push, PushObject, PushOptions } from '@ionic-native/push';
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
......
....
export class NotificationProvider {
    constructor (
        public http: Http,
        public push: Push,
        public device: Device
    ) { }

    init () {
        const options: PushOptions = {
            android: {
                senderID: '710571851300'
            }
        };

        const pushObject: PushObject = this.push.init(options);

        pushObject.on('registration').subscribe((registration: any) => {
            console.log(registration);
        });
    }

Обратите внимание, что мы импортируем {Http, заголовки, запросы} и инъекция Http в конструкторе, но никогда не использую его. Не волнуйтесь, мы будем использовать их на более поздних шагах.

Теперь мы собираемся ввести этот новый провайдер в нашу SRC/App/app.component.ts Файл и инициализировать его:

import { TabsPage } from '../pages/tabs/tabs';
import { NotificationProvider } from '../providers/notification/notification';

........
constructor(
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    noti: NotificationProvider
) {
    platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        statusBar.styleDefault();
        splashScreen.hide();
        noti.init();
    });
}

Если вы следили по вышеуказанным шагам, вы заметите, что мы запускаем наше приложение в браузере и Cordova Устройство и Толчок Характеристики плагинов доступны только на фактическом мобильном устройстве или эмуляторе. Таким образом, чтобы двигаться вперед, нам нужно запустить наше приложение на эмуляторе или фактическом устройстве. Я включил Режим разработчика на моем телефоне и подключил его к моей машине. Давайте остановимся наше уже запущенное ионное приложение, используя Ctrl + C Отказ Следующие команды будут установлены и запускать приложение на подключенном устройстве:

ionic cordova platform add android
ionic cordova run android --device

Если все пойдет хорошо, вы теперь должны увидеть ионное приложение, бегущее на вашем телефоне со всей славой. Наш следующий шаг – принять постановку с нашего устройства и хранить его на наших рейсах. Итак, давайте оснастим наши Rails API, чтобы облегчить это.

Регистрация устройства на рельсах

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

Мы настроим ресурс устройства, который может сохранить устройство, идентифицирующее его UUID, и хранить постановку этого устройства.

Довольно прямо вперед, так что давайте доберемся до него. Вернитесь в окно терминала, где у нас были наши приложение Rails. Затем запустите следующие команды, которые будут лежать на трассе, модель, контроллер, миграцию и тесты для ресурса нашего устройства:

rails g scaffold device model:string uuid:string token:text platform:string
# migrate your database to add the device table
rake db:migrate

Теперь мы можем просто сделать запрос на пост на http://localhost: 3000/Устройства.json с UUID , Модель , платформа и токен Параметры и рельсы будут сохранять его в базе данных и вернуть ответ JSON на наш звонок. Однако по умолчанию Rails имеет настройку проверки CSRF для вызовов API, но поскольку мы не слишком беспокоили о безопасности в данный момент, давайте отключим это сейчас, чтобы мы могли получить с нашим ионным приложением. Откройте приложение Rails Приложение/Контроллеры/Устройства_Controller.rb Файл и добавьте следующую строку прямо перед до_акция крюк:

class DevicesController < ApplicationController
  protect_from_forgery with: :null_session

Теперь мы готовы проверить вызовы API.

Отправить данные устройства на Rails

Давайте вернемся к нашему ионному приложению и открываем SRC/поставщики/уведомление/уведомление .TS Файл, чтобы добавить следующий код:

...........
    pushObject.on('registration').subscribe((registration: any) => {
        this.saveToken(registration.registrationId);
    });
}

saveToken (token) {
    // build the headers for our api call to make sure we send json data type to our api
    const headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    const options = new RequestOptions({ headers });

    // this is our payload for the POST request to server
    const device = {
        platform: this.device.platform,
        model: this.device.model,
        uuid: this.device.uuid,
        token
    };
    const url = "http://localhost:3000/devices.json";

    this.http.post(url, {device}, options)
        .subscribe(data => {
            console.log('token saved');
        }, error => {
            console.log('error saving token', error);
        });
}

Давайте восстановимся и повторно наше приложение на устройстве: Ionic Cordova Run Android --device Отказ

Когда мы запустим вышеуказанный код на нашем устройстве, будет небольшая проблема с вызовом HTTP. Чтобы увидеть, что здесь сломано, откройте браузер Chrome и перейдите в Chrome://проверять Отказ Вы увидите ваше устройство и приложение под Удаленная цель раздел на этой странице. Нажмите на проверять Кнопка, чтобы открыть консоль разработчика.

Осмотрите ионное приложение из Chrome

Вы должны увидеть сообщение об ошибке, как это в консоли Не удалось загрузить ресурс: Net:: err_connection_refused Отказ Поскольку приложение работает на фактическом устройстве, localhost: 3000 Пытается найти этот сервер в вашем телефоне и, очевидно, на нашем телефоне 3000 не работает сервер.

Чтобы исправить это, нам нужно использовать локальный IP-адрес нашего компьютера в качестве нашей конечной точки API. Если вы запустите ifconfig В вашем терминале и посмотрите на вывод, вы должны найти строку, которая выглядит как контент на красной площади на изображении ниже. 192.168.1.107 Является ли локальный IP моей машины здесь.

IFCONFIG Выход

Итак, давайте заменим наш URL API const; С этим const; Отказ Опять же, это мой локальный IP, поэтому, когда вы следуете вдоль этого, убедитесь, что вы используете Ваш Местный IP, который вы нашли из ifconfig команда.

Тем не менее, это все равно не сможет позвонить с момента нашего приложения Rails для Localhost, но не наш локальный IP-хост-машина, поэтому любые звонки, сделанные нашим местным IP, никогда не достигают приложения Rails. Чтобы исправить это, давайте остановим наши рельсы, используя Ctrl + C и перезапустить его с помощью этой команды Рельсы S -B 192.168.1.107 который связывает наш сервер с местным IP вместо localhost.

Давайте восстановим наше ионное приложение и Ionic Cordova Run Android --device Проверьте консоль, чтобы убедиться, что наш HTTP Call проходит.

API Call проходит через сервер Rails

Отправить уведомление с помощью rpush

Мы почти там. Все, что нужно сделать, – это подключить RPUSH GEM с приложением нашей Rails и отправлять уведомления на устройства, зарегистрированные в нашей базе данных. У них очень подробно Документация Это должно помочь вам получить настройку, но я буду проходить по тебе через него.

Во-первых, откройте свой Gemfile и добавить GEM 'RPUSH' к этому. Теперь из терминала в рамках вашего приложения Rails выполните следующие команды:

bundle
bundle exec rpush init
rake db:migrate

Это устанавливает RPUSH, инициализируйте RPUSH со всеми его конфигурацией, подходящей для Rails Environments и создавать необходимые таблицы БД.

Далее нам нужно сохранить наш ключ FCM Authy в качестве записи приложения RPUSH в нашей БД. Теперь я не уверен, что это правильное место для этого бита кода, но это кажется, работает. Откройте Конфигурация/Инициализаторы/rpush.rb Файл и добавьте следующие строки кода в конце файла:

# initializer file may run multiple times but we don't wanna register the app multiple times so first check if it already exists in db and create new one only if it doesn't.
if (!Rpush::Gcm::App.find_by_name("pushme_droid"))
    app = Rpush::Gcm::App.new
    # let's name this one pushme_droid
    app.name = "pushme_droid"
    # FCM auth key from firebase project
    app.auth_key = "AAAApXFh_iQ:APA91bGX2hv2usndpXYzW-HICrgBMWLeN3MMaka5UVuuHPc69NZ8Uj1eGkbm6RMtDe199b9xNfXY_297eCGOtWC3VsVeBVbhKKpHYDk3vi-4ofJHL2BX7ucVIx8zu61FeO5hHzItu4sX"
    app.connections = 1
    # save our app in db
    app.save!
end

Обратите внимание на значение app.auth_key Переменная, это строка, которую мы извлекли из нашей страницы настроек проекта FCM из Ключ сервера Отказ Убедитесь, что Вы используете свой собственный ключ вместо моего.

Поскольку мы обновили инициализатор, нам нужно будет перезапустить приложение Rails. Сначала выключите его, затем перезапустите его так же, как до Рельсы S -B 192.168.1.107 Отказ

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

Начните с создания нового файла в Приложение/Контроллеры/Notification_Controller.RB и добавьте следующий код в нем:

class NotificationController < ApplicationController
  def notify
        #get all devices registered in our db and loop through each of them
    Device.all.each do |device|
      n = Rpush::Gcm::Notification.new
            # use the pushme_droid app we previously registered in our initializer file to send the notification
      n.app = Rpush::Gcm::App.find_by_name("pushme_droid")
      n.registration_ids = [device.token]

            # parameter for the notification
      n.notification = {
        body: 'Just wanted to tell you that you are beautiful!',
           	title: 'Hey this is rpush from rails!',
           	sound: 'default'
       	}
            #save notification entry in the db
      n.save!
    end

        # send all notifications stored in db
        Rpush.push

    render json: {sent: true}, status: :ok
  end
end

Затем мы зарегистрируем новый маршрут в config/marross.rb файл:

Rails.application.routes.draw do
  resources :devices
  get '/notification/notify' => 'notification#notify'
  .........

О, последняя вещь, прежде чем мы сможем увидеть волшебный хитрость, на котором мы работали на до настоящего времени. Cordova-plugin-push Имеет этот странный ошибкой, что когда приложение находится на переднем плане, он не покажет уведомление и вместо этого огонь в событии приложения. Итак, на самом деле увидеть уведомление в нашем устройстве, давайте сначала закроем наше приложение.

Вы готовы к этому?

Хорошо, теперь просто пойти на этот URL в вашем браузере – http://192.168.1.107:3000/notification/notify Отказ ЭТ ВОЙЛА Вы получите этот сладкий TU-Dung звучит на вашем телефоне и посмотрите что-то вроде этого

Push-уведомление на устройстве

Красивая, не так ли?

Исходный код

Какой смысл этого длинного поста, если у меня нет исходного кода, чтобы показать, верно? Так что здесь вы идете: Rails App |. Ионное приложение

Заворачивать

Есть многочисленные параметры, которые вы можете использовать, чтобы сделать уведомление хорошо выглядеть приятно, и вы можете найти большинство из них в документации RPUSH/FCM. Не стесняйтесь играть с теми.

Пока у нас есть рабочий мобильный приложение и сервер API, который может взаимодействовать друг с другом и отправлять Push-уведомления, это совершенно бесполезно. Это была очень быстрая и небольшая демо, чтобы показать, как это может быть достигнуто, теперь ваша очередь идти вперед и построить что-то полезное или интегрировать Push-уведомление в вашем существующем приложении.

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

Читайте ещё по теме: