EN

  |  ES

/Guía Rápida de Integración /Notificaciones app push /Flutter

Integración Flutter

guía rápida de integración del SDK de Flutter.

Indice

¿Qué necesitas para la integración?

Es importante ya que el proyecto contiene los datos de configuración de tu aplicación, es decir, el dominio donde esta alojada tu web, los certificados de safari o iOS o la clave de firebase que usa android. Todo depende de las plataformas (web o app) que use el proyecto.

Integración

Este artículo muestra el desarrollo mínimo que hay que hacer para comenzar a registrar dispositivos y poder realizar las primeras campañas push.


La SDK de Indigitall es compatible con los servicios de mensajería de Google, mediante la plataforma Firebase y con los servicios de HMS o Huawei Mobile Services de Huawei.


Nuestro SDK está disponible a través de pub.dev.

pub.dev es un sistema de gestión de paquetes. Consiste en un cliente de línea de comandos y una base de datos en línea de paquetes públicos y privados.

Importar el plugin

Para importar el SDK a tu proyecto realiza estos pasos:


  1. Abre el archivo pubspec.yaml localizado dentro de la carpeta de la aplicación, y añade indigitall_flutter_plugin debajo de la sección de dependencies como se muestra a continuación:


Consola de Firebase


  1. Ejecuta esta línea en la consola para importar el plugin:


$ flutter pub get


Configuración para Android


Configura el fichero build.gradle de tu proyecto para que se parezca al siguiente:

buildscript {
    ...
    repositories {
        ...
        maven { url "https://developer.huawei.com/repo/" }
    }
    dependencies {
        ...
        classpath("com.google.gms:google-services:4.3.+")
        classpath("com.huawei.agconnect:agcp:1.4.1.300")
    }
}

allprojects {
    repositories {
        ...
        mavenCentral()
        maven { url "https://developer.huawei.com/repo/" }

    }
}


Activando los Servicios de Firebase

Para activar las notificaciones de Firebase debes añadir tu fichero google-services.json en tu proyecto de android dentro de tu carpeta app y modificar tu fichero build.gradle de la siguiente forma:

...
apply plugin: 'com.google.gms.google-services'


Activando los Servicios de HMS

Para activar las notificaciones de HMS debes añadir tu fichero agconnect-services.json en tu proyecto de android dentro de tu carpeta app y modificar tu fichero build.gradle de la siguiente forma:

...
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect'

Estableciendo el icono de las notificaciones

Este icono se mostrará en la barra superior del sistema Android y en la cabecera de las pushes enviadas a través de tu app.

Debe ser un icono monocromo, es decir, que la imagen debe contener solo un color y alfa.

Te ponemos un ejemplo con nuestro logo en monocromo:


New tag


A continuación te mostramos cómo debería estar tu código en el AndroidManifest.xml (El icono tiene que ser un png)


<manifest ...>
    <!-- ... -->
    <application ...>
        <!-- ... -->

        <!-- Resource for monochrome icon -->
        <meta-data android:name="indigitall.icon" android:resource="@drawable/YOUR_MONOCHROME_ICON"/>

        <!-- Resource for icon color -->
        <meta-data android:name="indigitall.color" android:resource="@color/colorPrimary"/>
    </application>
</manifest>


* Para mayor aclaración sobre la creación de iconos, os dejamos este enlace a la documentación de Android que puede servir de ayuda: Product icons

Configuración para iOS

Desde la salida de iOS 10, las apps pueden gestionar notificaciones push enriquecidas, es decir, con imágen, gif, vídeo, botones, etc.

Para poder hacer uso de estas funcionalidades, tu app necesita implementar el Notification Service Extension.


  1. Añade un nuevo Notification Service Extension a tu proyecto (Xcode: Archivo > Nuevo > Target).
  2. Añade el extension target en tu aplicación.
  3. Crea un nuevo fichero llamado NotificationService dentro de este target. Sobrescribe todo el contenido con el siguiente código:


import Indigitall
class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?
    var request: UNNotificationRequest?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        self.request = request
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)

        Indigitall.didReceive(self.request!, withContentHandler: self.contentHandler!)
    }

    override func serviceExtensionTimeWillExpire() {
        if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
            Indigitall.serviceExtensionTimeWillExpire(bestAttemptContent, withContentHandler: contentHandler)
        }
    }

}
#import <UserNotifications/UserNotifications.h>
#import <Indigitall/Indigitall.h>

API_AVAILABLE(ios(10.0))
//NotificaiontService.h
@interface NotificationService : UNNotificationServiceExtension
@end

//NotificationService.m
@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;
@property (nonatomic, strong) UNNotificationRequest *request;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    self.request = request;

    [Indigitall didReceiveNotificationRequest:self.request withContentHandler:self.contentHandler];

}

- (void)serviceExtensionTimeWillExpire {
    if (self.contentHandler != nil && self.bestAttemptContent != nil){
        [Indigitall serviceExtensionTimeWillExpire:self.bestAttemptContent withContentHandler:self.contentHandler];
    }
}

@end

Inicialización del SDK

Inicializa el SDK con el método IndigitallFlutterPlugin.init() para comenzar a recibir notificaciones push. Esta inicialización debe realizarse dentro del App.js de tu proyecto.


// ...

IndigitallFlutterPlugin.init({
  IndigitallParams.PARAM_APP_KEY: "<YOUR_APP_KEY>",
  IndigitallParams.PARAM_SENDER_ID: "<YOUR_SENDER_ID>"
}, null, null, null);



Consola de Firebase Consola de Firebase


Recursos