Push-уведомления во Flutter с Native Notify

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

Native Notify — это платформа push-уведомлений для отправки push-уведомлений в приложения Flutter и React Native, которые имеют:

  • Отправка push-уведомлений в кроссплатформенные приложения (Android и IOS)
  • Отправка массовых push-уведомлений пользователям приложения
  • Отправка данных с помощью push-уведомлений
  • Система отправки уведомлений в приложении подписавшимся пользователям.

В этой статье мы настроим приложение для получения уведомлений, чтобы показать, как использовать Native Notify.

Настройка уведомлений

Прежде чем создавать наше приложение, давайте настроим нашу платформу уведомлений. Перейдите к Native Notify и нажмите Начать сейчас.

Native Notify не требует данных карты для регистрации.

После регистрации нажмите «Создать приложение», чтобы начать, и выберите Flutter в качестве фреймворка.

Создание нашего приложения Flutter

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

flutter create notify_app
cd notify_app

Откройте файл pubspec.yaml и добавьте native_notify ниже под cuperino_icons или запустите flutter pub add native_notify.

name: notify_app
description: A new Flutter project.
publish_to: 'none' 
version: 1.0.0+1
environment:
    sdk: ">=2.17.0 <3.0.0"
dependencies:
    flutter:
    sdk: flutter
    cupertino_icons: ^1.0.2
    native_notify: ^0.0.13 # Add this package
dev_dependencies:
    flutter_test:
    sdk: flutter
    flutter_lints: ^2.0.0
flutter:
    uses-material-design: true

Настройка нашего приложения Notify

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

Конфигурация Android

Перейдите к файлу android/app/build.gradle. В объекте Android обновите compileSdkVersion flutter.compileSdkVersion до compileSdkVersion 31. Тем не менее, под объектом android обновите minSdkVersion flutter.minSdkVersion, расположенный в объекте defaultConfig, до minSdkVersion 21. После всего этого ваш объект android должен выглядеть так, как показано ниже.

android {   
    compileSdkVersion 31
    ...
    defaultConfig {
        applicationId "com.example.notify_app"
        minSdkVersion 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
}

Конфигурация iOS

Для настройки IOS перейдите к ios/Podfile и обновите platform :ios до версии 10.0 или выше.

platform :ios, '10.0'

Если платформа :ios закомментирована, раскомментируйте ее.

Повтор сеанса с открытым исходным кодом

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

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Отображение push-уведомлений

Закончив настройку платформы, давайте настроим наш main.dart и начнем получать уведомления. Перейдите к файлу main.dart в папке lib и обновите функцию main().

import 'package:flutter/material.dart';
import 'package:native_notify/native_notify.dart';
void main() {
    WidgetsFlutterBinding.ensureInitialized();
    NativeNotify.initialize(appId, appToken, null, null);
    runApp(const MyApp());
}

Основываясь на приведенном выше блоке кода, мы импортировали пакет native_notify в файл main.dart, а затем инициализировали его в функции main(), заставив его запускаться при инициализации приложения. Для метода NativeNotify.initialize требуются appId и appToken, которые указаны в руководстве NativeNotify. Не удаляйте два нулевых параметра в методе NativeNotify. AppId и appToken указаны на панели инструментов NativeNotify на их официальном сайте.

Отправка push-уведомлений

Со всей конфигурацией и настройкой приступим к отправке push-уведомлений. Сначала запустите приложение на эмуляторе или реальном устройстве, используя команду в терминале.

flutter run

Приведенная выше команда создаст приложение счетчика Flutter по умолчанию и установит его на ваше устройство. Если все конфигурации прошли успешно, вы увидите на терминале сообщение об успешном выполнении NativeNotify. После создания приложения вернитесь на официальный сайт Native Notify и щелкните символ «Отправить» на левой панели вкладок.

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

Отправка больших изображений

Push-уведомление прошло успешно. Теперь давайте отправим push-уведомление с большими картинками. Тем не менее, на вкладке «Отправить» нажмите «Дополнительные настройки».

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

title --> New Anime Picture !!
message --> This is Kurosaki Ichigo
big Picture --> https://imgix.ranker.com/user_node_img/50081/1001610696/original/to-shatter-fate-photo-u1?auto=format&q=60&fit=crop&fm=pjpg&dpr=2&w=650

Объект Push Data используется при попытке отправить пользователю информацию JSON об уведомлении. Это не отображается в уведомлении, но помогает перенаправить на вопрос страницы вопроса при нажатии на уведомление.

Заключение

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

Ресурсы

Вот ссылка на исходники на Github