Open in app

Sign in

Write

Sign in

Gabul
7 min readMar 7, 2019

Push Notifications - Flutter com OneSignal.

O mais usado recentemente para push é o firebase, devido a sua alta integração com o Flutter, mas nesse artigo irei apresentar uma forma mais descomplicada ainda de enviar push notifications. A plataforma se chama OneSignal.

O OneSignal é uma plataforma que se comunica com o firebase para fazer o push, nele é possível ainda utilizar o crashlytics. Então, neste artigo iremos fazer a comunicação com o OneSignal e o App em flutter.

Primeiro passo

Acessar o site do OneSignal e criar uma conta.

Segundo passo

Criar uma conta no Firebase ou usar a sua existente.

Terceiro passo

Agora com as duas contas criadas, vamos criar um app no Firebase e outro no OneSignal.

Firebase

Acesse o console e adicione um projeto com o seu nome de preferência.

Projeto criado, vamos acessar a parte de configurações e navegar para Cloud Messaging.

Nesta parte, iremos necessitar da Chave do servidor e do código do remetente, deixe isso aberto e vamos para o passo seguinte, a criação de um app no OneSignal.

OneSignal

Logue no sistema e clique em ADD APP, coloque um nome de sua preferência.

Escolha em seguida a plataforma Android.

Agora iremos colocar as duas keys do Firebase mencionadas anteriormente.

Pressione save e escolha Native Android.

Finalizando tudo certo, irá ficar nesta página.

Your App ID será a key usada no seu app flutter para identificar seu aplicativo. Então deixe isso aberto no navegador pois iremos utilizar.

Concluímos as configurações básicas, agora iremos colocar a mão na massa, com o aplicativo.

Daqui em diante fica a sua escolha, de criar um app novo ou usar em um projeto existente.

Android Studio

Agora com nosso projeto criado no Android Studio, iremos então adicionar o plugin onesignal_flutter no pubspect.yaml

name: flutteronesignal
description: Desenvolvido por Gabriel Savio, CEO da Grape DEV

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  onesignal_flutter: any
dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

Agora precisamos configurar os arquivos do android.

Primeiro arquivo: android/build.gradle

Vamos adicionar a seguinte linha:

buildscript {
    repositories {
        // ...
        maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal
    }
    dependencies {
        // ...
        // OneSignal-Gradle-Plugin
        classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.1, 0.99.99]'
    }
}

Ficando da seguinte forma:

buildscript {
    repositories {
        google()
        jcenter()
        maven { url 'https://plugins.gradle.org/m2/' }
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.1, 0.99.99]'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Agora vamos em outro arquivo, no seguinte : android/app/build.gradle e no final dele iremos colar a seguinte linha:

apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

Ficando da seguinte forma:

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion 28

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "grapedev.com.flutteronesignal"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

Pronto! Temos tudo configurado para receber o código no flutter para inicializar o OneSignal.

Flutter

Agora vamos para o código no flutter. Iremos criar a estrutura de pastas e arquivos seguintes na imagem:

Obs: ignore.dart é para ser ignorado mesmo, não precisa criar ele.

Nossa arquivo main.dart ficou da seguinte forma:

import 'package:flutter/material.dart';
import 'package:flutteronesignal/pages/home_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter One Signal',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

e nossa pages/home/home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("FlutterOneSignal"),
        centerTitle: true,
      ),
      body: Column(children: <Widget>[
          Text("Notificações")
      ],),
    );
  }
}

Com nosso app da seguinte forma.

Agora iremos criar o nosso BlocHome (pages/home/bloc/home_bloc.dart) para iniciar o OneSignal.

import 'package:onesignal/onesignal.dart';

class BlocHome{

  void initOneSignal(){
    OneSignal.shared.init("your_onesignal_app_id_here");
  }

}

Agora volte no site do OneSignal e copie o APPID e cole ai.

Ficando assim:

import 'package:onesignal/onesignal.dart';

class BlocHome{

  void initOneSignal(){
    OneSignal.shared.init("bc2472d1-fac8-433f-be56-48ea9ecbc1ef");
  }

}

obs: Lembre-se de trocar para o seu appID, para conseguir visualizar pelo painel do OneSignal.

Agora precisamos importar esse BlocHome na nossa HomePage e chamar o método initOneSignal no void init, ficando da seguinte forma:

import 'package:flutter/material.dart';
import 'package:flutteronesignal/pages/home/bloc/bloc_home.dart';
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  var bloc = BlocHome();

  @override
  void initState() {
    bloc.initOneSignal();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("FlutterOneSignal"),
        centerTitle: true,
      ),
      body: Column(children: <Widget>[
        Text("Notificações")
      ],),
    );
  }
}

Feito isso, agora vamos testar! Dê stop no seu projeto, e compile ele novamente.

Feito isso, vamos ao site do OneSignal, se tudo estiver corrido certo, vai aparecer que seu app tem 1 usuário.

Agora, vamos enviar um push, clique em MESSAGES, procure por NEW PUSH.

Escreva um título e uma message só para teste.

Role até o final e clique em CONFIRM.

Agora é só enviar!

Pronto funcionou! Agora vem a pergunta. Porque apareceu esse popUp feio na minha tela? O onesignal tem um disparador de notificação interno caso o app esteja em primeiro plano, você pode desativar isso com o seguinte código.

OneSignal.shared.setInFocusDisplayType(OSNotificationDisplayType.none);

Adicione ele no initOneSignal.

import 'package:onesignal/onesignal.dart';

class BlocHome{

  void initOneSignal(){
    OneSignal.shared.init("bc2472d1-fac8-433f-be56-48ea9ecbc1ef");
    OneSignal.shared.setInFocusDisplayType(OSNotificationDisplayType.none);
  }


}

E se o app estiver em segundo plano? Funciona, faça o teste.

E se o app estiver fechado? Também funciona.

O onesignal tem algumas funções interessantes, podendo identificar cada usuário no seu app por email, e ainda pode enviar TAGS para facilitar na segmentação de usuários para enviar um push específico para um somente ou para um grupo.

As funções sao as seguintes:

//Identifica o user por email
OneSignal.shared.setEmail();//Identifica po um idExterno, id de sua API
OneSignal.shared.setExternalUserId(externalId);//Envia somente uma tag
OneSignal.shared.sendTag(key, value);//Enviar várias tags
OneSignal.shared.sendTags(tags);//Pegar as tags do usuário
OneSignal.shared.getTags();

E também pode utilizar o método abaixo, para pegar a chegada de notificações e tomar decisões dentro do seu app.

OneSignal.shared.setNotificationReceivedHandler((OSNotification notification) {
	
});

No próximo artigo eu irei implementar a função citada acima, para criar um sistema de notificações interno no aplicativo, um histórico de notificações que já recebeu.

Vou deixar abaixo o link da documentação oficial do OneSignal .

Documentação Oficial do OneSignal sobre Flutter

Segue link do projeto no GitHub

https://github.com/gabulsavul/flutteronesignal

Flutter
Push Notification
Onesignal
Notifications
Mobile
Gabul

Written by Gabul

96 Followers

GDE Flutter & Dart

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams