Notificaciones push en Android usando OneSignal

Hemos visto tantos tipos de notificaciones que recibimos en muchas de las aplicaciones de Android. Estas notificaciones informan a nuestros usuarios sobre nuevas ofertas, nuevas funciones y mucho más dentro de nuestra aplicación. En este artículo, veremos la implementación de la plataforma de notificación OneSignal en la aplicación de Android en Android Studio. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que enviaremos notificaciones desde la plataforma One Signal en nuestra aplicación de Android.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: conecta tu aplicación a Firebase

Después de crear un nuevo proyecto. Navegue a la opción Herramientas en la barra superior. Dentro de eso, haga clic en Firebase. Después de hacer clic en Firebase, puede ver la columna de la derecha que se menciona a continuación en la captura de pantalla.

Dentro de esa columna, navegue hasta Firebase Cloud Firestore. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Cloud Firestore a su aplicación. Haga clic en la opción Conectar ahora y su aplicación se conectará a Firebase. Después de eso, haga clic en la segunda opción y ahora su aplicación está conectada a Firebase. Después de conectar su aplicación a Firebase, verá la siguiente pantalla.  

Después de eso, verifique que la dependencia de la base de datos Firebase Firestore se haya agregado a nuestro archivo Gradle. Navegue a la aplicación > Gradle Scripts dentro de ese archivo. Compruebe si la siguiente dependencia se agrega o no. 

Paso 3: Agregar dependencias en el archivo build.gradle

Ahora agregaremos la dependencia para usar One Signal en nuestro archivo gradle. Navegue hasta build.gradle (:app) y agregue la siguiente línea en la sección de complementos. 

complementos {

   id ‘com.android.aplicación’

   identificación ‘com.google.gms.google-servicios’

   // agregar debajo de la línea son complementos  

   id ‘com.onesignal.androidsdk.onesignal-gradle-plugin’

Agregue la siguiente línea en la sección de dependencias del mismo archivo.

implementación ‘com.onesignal:OneSignal:[4.0.0, 4.99.99]’

Ahora agregaremos las siguientes dependencias en la sección de dependencia. Navegue hasta build.gradle (el nombre de su aplicación) y agréguele el siguiente código. 

buildscript {
    repositories {
        google()
        jcenter()
       
        // add below line in build script > repositories section.
        gradlePluginPortal()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.1.1"
        classpath 'com.google.gms:google-services:4.3.4'
        
        // add below line in dependencies section
        classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.9, 0.99.99]'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
} 

Después de agregar la sección de dependencias anterior, sincronice su proyecto y ahora avanzaremos hacia la parte XML. 

Paso 4: Agregar permisos para Internet 

XML

<!--adding permissions for Internet-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Paso 5: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="5"
    tools:context=".MainActivity">
  
    <!--text view for displaying welcome message-->
    <TextView
        android:id="@+id/idTVWelcome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        android:text="Geeks for Geeks"
        android:textAlignment="center"
        android:textAllCaps="false"
        android:textColor="@color/purple_500"
        android:textSize="30sp" />
      
</RelativeLayout>

Paso 6: Generar ID de aplicación para nuestra aplicación

Para generar nuestra ID de aplicación, debemos registrarnos en One Signal de manera similar a la que usamos para iniciar sesión en Geeks For Geeks usando una cuenta de Google. Después de iniciar sesión en One Signal, verá la siguiente pantalla para crear una nueva aplicación. 

Dentro de esta pantalla, debe ingresar el nombre de su aplicación, seleccionar el tipo de aplicación como Android y hacer clic en la opción Siguiente para configurar su proyecto. Después de hacer clic en la opción Siguiente, verá dos campos de texto para ingresar dos claves. 

Paso 7: Obtener las claves para ingresar en One Signal Console

Después de agregar este código, vaya a este enlace para abrir Firebase. Después de hacer clic en este enlace, verá la página a continuación y en esta página, haga clic en la opción Ir a la consola en la esquina superior derecha.  

 Después de hacer clic en esta pantalla, verá la pantalla a continuación con todo su proyecto dentro que selecciona su proyecto.    

Después de hacer clic en el nombre de su proyecto, debe hacer clic en la opción de configuración y seleccionar la opción Configuración del proyecto. Las opciones de configuración se muestran a continuación. 

Después de hacer clic en Configuración del proyecto. Navegue a la pestaña de mensajería en la nube que se muestra a continuación. Allí podremos ver la clave del servidor y la identificación del remitente. Puede llegar a ver esta pantalla a continuación. 

Tienes que copiar estas dos claves y pegarlas en tu consola de una sola señal. 

Después de agregar estas claves, haga clic en la opción Siguiente para continuar. Verá la siguiente pantalla. 

Dentro de esta pantalla, seleccione la opción Android y haga clic en la opción Siguiente para continuar. Verá que su ID de aplicación se muestra en la pantalla. 

Paso 8: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

Java

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.onesignal.OneSignal;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // OneSignal Initialization
        OneSignal.initWithContext(this);
          
        // on below line we are setting
        // app id for our one signal
        OneSignal.setAppId("Enter your app id here");
    }
}

Ahora ejecute su aplicación y le enviaremos nuestra primera notificación en nuestra aplicación de Android. Para enviar notificaciones en One Signal, haga clic en el nombre de su aplicación en la esquina superior izquierda en One Signal Console y luego haga clic en el nombre de su aplicación para ver la pantalla del Tablero. 

Haga clic en la opción New Push para enviar una nueva notificación. Después de hacer clic en la opción New Push, verá la siguiente pantalla. 

Dentro de esta pantalla, seleccione la opción Enviar a usuarios suscritos, agregue la opción de título, agregue su Título de notificación en el campo de título y Mensaje de notificación en la sección de mensajes, y desplácese hacia abajo para continuar. 

Después de desplazarse hacia abajo, haga clic en la opción de revisión y envío para enviar su notificación. Después de eso, su notificación será enviada a su aplicación. Puede llegar a ver el resultado de la aplicación en la pantalla de abajo. 

Producción:

Publicación traducida automáticamente

Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *