Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript

Пишем приложения реального времени на NativeScript: Push-уведомления

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: Social Login and Firebase

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

NativeScript является основой для создания кросс-платформенных нативных мобильных приложений с использованием XML, CSS и JavaScript. В этой серии мы изучаем некоторые интересные вещи, которые вы можете сделать с помощью приложения NativeScript: геолокация и интеграция с Google Maps, база данных SQLite, интеграция с Firebase и push-уведомления. По пути мы создаем фитнес-приложение с возможностями реального времени, которые будут использовать каждую из этих функций.

В этом уроке вы узнаете, как легко добавлять push-уведомления к вашему NativeScript-приложению с помощью Firebase Cloud Messaging Service

Что вы будете создавать

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

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

Если вы следовали предыдущему руководству по Firebase, вы можете просто использовать тот же проект. В противном случае вы можете создать новый проект и скопировать файлы в папку приложения вашего проекта.

После этого вам также необходимо установить плагины геолокации, Google Maps, SQLite и Firebase:

После установки вам необходимо настроить плагин Google Maps. Вы можете найти полные инструкции о том, как это сделать, прочитав раздел «Установка плагина Google Maps» в предыдущем учебнике.

Затем установите библиотеку fecha для форматирования дат:

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

  • Запуск проекта
  • Настройка приложения Firebase
  • Настройка приложения Facebook
  • Установка плагина Firebase
  • Настройка интеграции с Facebook

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

Во-первых, вы должны перенастроить плагин, перейдя в каталог node_modules/nativescript-plugin-firebase и запустив npm run config. На этот раз выберите аутентификацию Facebook и Messaging.

Как только это будет сделано, откройте файл firebase.nativescript.json в корневой директории вашего проекта и убедитесь, что для messaging установлено значение true:

Затем откройте app/App_Resources/Android/AndroidManifest.xml и добавьте следующие службы внутри <application>. Это включает службу сообщений Firebase для приложения:

Запуск проекта

Вы можете запустить проект, выполнив команду tns run android. Но поскольку это приложение будет основываться на функциональности геолокации, я рекомендую вам использовать эмулятор GPS для быстрой настройки и изменения вашего местоположения. Вы можете прочитать о том, как это сделать в разделе «Запуск приложения» в предыдущем учебнике.

Если вы получаете какие-либо ошибки сборки, вы можете удалить платформу и повторно запустить приложение:

Настройка Firebase Cloud Functions

Вы будете использовать Firebase Cloud Functions для создания сервера, который будет отправлять push-уведомления. Эта функция Firebase используется для запуска внутреннего кода всякий раз, когда определенное событие происходит в функциях Firebase, которые вы используете, например, если в базе данных реального времени есть новые данные или когда появляется новый пользователь через службу аутентификации Firebase. Для этого приложения вы будете использовать HTTP-триггеры для отправки push-уведомлений, когда мобильное приложение делает запрос к определенной точке входа.

Чтобы использовать Firebase Cloud Functions, сначала необходимо глобально установить пакет firebase-tools:

Затем создайте новую папку, в которой будет размещен код сервера. Это должно быть вне папки вашего приложения. Внутри этой папки установите пакет firebase-functions:

Как только он будет установлен, войдите в Firebase, выполнив команду firebase login. Откроется новая вкладка браузера, в которой вы сможете войти в свою учетную запись Google. Пройдите весь процесс и согласитесь со всеми запрошенными разрешениями.

После входа в систему вы можете теперь инициализировать функции Firebase для конкретного проекта Firebase:

Он спросит вас, хотите ли вы настроить проект по умолчанию или нет. Выберите проект Firebase, который вы создали в предыдущем учебнике:

setup firebase functions

Затем вас спросят, хотите ли вы установить зависимости. Скажи да.

После установки всех зависимостей вы должны увидеть файл firebase.json и папку с functions внутри каталога. Файл, над которым вы будете работать, - это файл functions/index.js. Откройте этот файл, и вы увидите следующее:

Раскомментируйте функцию helloWorld, и вы увидите триггеры HTTP в действии.

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

По завершении развертывания он должен показать URL-адрес, где была развернута функция:

deploy firebase functions

Получите доступ к этому URL из своего браузера, чтобы увидеть результат «Привет от Firebase!».

Добавление кода сервера

Теперь вы готовы добавить код для внедрения push-уведомлений. Во-первых, вы добавите код для серверного компонента, а затем код для приложения.

Откройте файл functions/index.js и очистите его содержимое.

Создание функции Firebase

Импортируйте пакеты Firebase, которые вам понадобятся:

Создайте функцию init_push. Обратите внимание, что триггер HTTP вызывается для любого метода запроса, поэтому вам нужно отфильтровать метода запроса, который вы хотите обработать. В этом случае мы хотим только обрабатывать запросы POST. Мы ожидаем, что приложение отдаст id, steps и friend_ids в качестве данных запроса.

Получение данных пользователя и друзей

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

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

Затем перебираем результаты, возвращаемые из Firebase, и создаем новый массив, в котором размещаются данные friends_data. Как только это будет сделано, отсортируйте массив в соответствии с количеством шагов каждого пользователя. Первый с самым высоким числом шагов имеет первый индекс.

Создаем пейлоад нотификации

Теперь мы готовы определить, кто получит уведомление и сконструируем пейлоад для уведомлений. Кто на первом месте? Это текущий пользователь или один из друзей пользователя? Поскольку текущий пользователь также может побить свой собственный рекорд, то нам просто нужно проверить, была ли эта запись побита.

Отправка уведомления

Наконец, отправьте уведомление:

Обновление кода приложения

Раньше вы настраивали приложение, чтобы оно могло получать push-уведомления. На этот раз вы добавите код, чтобы ваше приложение могло обрабатывать эти push-уведомления и отображать их пользователю.

Получение Push-уведомлений

Первое, что вам нужно сделать для получения push-уведомлений, - это обновить функцию firebase.init(), чтобы включить прослушиватель для приема токена устройства:

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

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

Сохранение токена устройства в Firebase

FireBase Cloud Messaging требует токена устройства при отправке push-уведомления на конкретное устройство. Поскольку мы уже используем Firebase, мы просто сохраним токен устройства вместе с пользовательскими данными. Для этого вам нужно отредактировать код для сохранения данных пользователя, чтобы включить токен устройства, который мы получили раньше:

Тригерим пуш уведомления

Пуш уведомление срабатывает, когда происходит одна из двух вещей:

  • когда пользователь бьет свой собственный рекорд
  • когда один из друзей пользователя бьет свой рекорд и выходит на первое место

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

Затем обновите код, когда пользователь перестает отслеживать свою прогулку. Сразу после кода для создания пользовательских данных для обновления пользователя, получите идентификаторы друзей из параметров приложения и включите их в объект, который содержит данные запроса для запуска push-уведомления.

Сделайте запрос к ендпоинту облачных функций Firebase, которую вы создали ранее. После того как будет получен ответ об успешном завершении, только тогда данные пользователя будут обновлены в базе данных Firebase.

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

Вы можете протестировать отправку push-уведомлений, сначала удалив приложение из эмулятора или устройства. Это позволяет нам правильно запускать функцию для получения токена устройства. Не забудьте добавить console.log для вывода токена устройства:

Когда токен устройства выводится в консоли NativeScript, скопируйте его, щелкните меню «База данных» на панели управления приложениями Firebase и добавьте его в качестве токена устройства всем пользователям приложения. Используйте device_token как имя свойства.

Чтобы вызвать push-уведомление, вы можете использовать curl для отправки запроса POST к функции Firebase:

Если curl у вас не установлен, вы можете использовать приложение Postman для отправки запросов. Используйте следующие настройки для запроса:

  • Метод запроса: POST
  • URL: ендпоинт вашей функции Firebase
  • Ключ заголовка: Content-type
  • Значение заголовка: application/json
  • Тело:

После запуска вы увидите вывод, похожий на следующий:

push notification received

Если приложение не открыто, вы увидите уведомление в области уведомлений:

push notification outside app

Заключение

Поздравляю! Наконец, вы закончили фитнес-приложение. В течение четырех учебников вы создавали приложение NativeScript, в котором используются карты Google, база данных SQLite, Firebase Realtime и Firebase Cloud Messaging. Теперь у вас неплохая основа для создания приложений NativeScript, которые используют эти технологии.

Чтобы узнать больше о NativeScript или других кросс-платформенных мобильных технологиях, обязательно ознакомьтесь с некоторыми нашими другими курсами и учебниками здесь, на Envato Tuts +!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.