El mundo del desarrollo de apps, como el mundo web en general está en constante evolución. Sacando cada poco tiempo nuevas versiones de frameworks como es el caso de Ionic. Hace no tanto teníamos Ionic 2 y la salida de Ionic 3 ha sido tan seguida que he decidido esperar a escribir este post por si antes de darme cuenta salia Ionic 4.
Este post pretende ser una guía para hacer notificaciones push con Ionic 3 desde Firebase, también explicaremos como hacer toda las instalación desde 0 en nuestra maquina Linux.
Si por algún motivo lo que necesitas es la guia de FCM con Ionic 2 mira este enlace
Para poder trabajar correctamente necesitamos tener instalados una serie de paquetes en nuestra maquina. En este ejemplo nos centraremos en hacer notificaciones Push para Android y usaremos para trabajar un Ubuntu 16.04
Aparte de los paquetes propios para que todo esto funcione necesitaremos una cuenta de Ionic y otra de Firebase. Durante la instalación y generación de archivos nos pedirá el usuario y contraseña de Ionic
Instalación de paquetes necesarios para Ionic
Lo primero es conseguir tener el SDK de android funcionando en nuestra maquina.
JAVA 8
|
1 2 3 4 5 6 |
# Instalamos JAVA 8 sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get install java-common oracle-java8-installer sudo apt-get install oracle-java8-set-default source /etc/profile |
Android Studio
|
1 2 3 4 |
# Instalamos Android Studio sudo add-apt-repository ppa:maarten-fonville/android-studio sudo apt update sudo apt install android-studio |
No hay que olvidar que una vez tengamos instalado Android Studio tendremos que iniciar un proyecto nuevo y aceptar las condiciones para el uso de la API de android pues, nos pueden salir mensaje que interrumpan la instalación de nuestra aplicación por que la licencia no esta aceptada.
Una vez aceptada la Licencia necesitamos que el SDK tenga un acceso global desde el terminal.
Agregamos a nuestro “~/.bashrc” que esta en nuestra carpeta de usuario las siguientes lineas
|
1 2 |
export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/tools |
Instalación de Ionic 3
Para empezar necesitamos instalar Node.js en nuestra maquina siguiendo los siguientes pasos desde un terminal Linux
|
1 2 3 4 |
sudo apt-get install python-software-properties python g++ make sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs |
Instalando Cordova e Ionic
Ahora necesitamos instalar cordova e ionic en nuestra maquina de forma global usando los siguientes comandos
|
1 2 |
sudo npm install -g cordova sudo npm install -g ionic |
Actualizando Node.js
Antes de poder continuar necesitamos actualizar Node.js para asegurarnos de no tener problemas aparte de que si no esta en su ultima versión no podremos instalar Ionic 3 como es lógico
|
1 2 3 |
sudo npm cache clean -f sudo npm install -g n sudo n stable |
Paquetes y Creación de Proyecto Ionic
Instalamos el plugin que permite la comunicación de FCM con Ionic
|
1 |
cordova plugin add cordova-plugin-fcm --save |
Instalamos un versión basica de Ionic en nuestra maquina y añadimos la plataforma android
|
1 2 |
ionic start miSuperApp tabs ionic platform add android |
Instalando Gradle
Durante la ejecución nos puede salir el mensaje de que Gradle no esta instalado. Los comandos que mostramos a continuación son los necesarios para la instalación y correcto funcionamiento.
|
1 2 3 |
curl -s "https://get.sdkman.io" | bash source "$HOME/.sdkman/bin/sdkman-init.sh" sdk install gradle 4.4 |
Firebase y probando una notificación Push
Creamos la cuenta para Firebase y una vez dentro seguimos estos pasos
|
1 2 3 4 5 6 7 8 9 10 11 |
Agregar Proyecto Rellenamos "Nombre Proyecto" y el País Agregar Firebase a tu app Android Nombre del paquete Android (importante) un ejemplo seria: com.tufuturaweb.nombreProyecto Siguiente y seguimos los pasos para descargar el archivo "google-services.json" y lo ponemos en la carpeta raíz del proyecto junto a config.xml y en este archivo cambiamos en la tag "widget" el id por el nombre del paquete android (sin esto no funciona nada) |
Finalmente cargamos la app en nuestro terminal
|
1 |
ionic cordova run android |
Ahora el Firebase
|
1 2 3 4 |
Nos vamos a GROW Notifications mensaje nuevo y rellenamos el mensaje y lo mandamos |
Si todo ha salido bien nos tendria que llegar una notificación push a nuestro teléfono
2 Comments