Publicando nuestra aplicación en Android y iOS stores

Play Store (Android)

• Regístrate como Developer en Google Play Console: https://play.google.com/apps/publish/
• En tu Google Play Console, da click en el botón Publish New Application.
• Llena el formulario con los datos, capturas y gráficos de tu aplicación.
• En tu IDE, localiza el archivo config.xml, y en la segunda línea, en widget id= asigna tu package id (puede ser algo como com.tunombreoempresa.platzinger)
• Abre una terminal en el directorio de tu app.
• Corre el comando ionic cordova build Android
• Ve a Android Studio y abre el directorio platfroms/android del folder de tu app.
• En Android Studio, ve a Build/Generate Signed APK...
• En el cuadro de diálogo da click en siguiente.
• Usa tu key store y alias, o crea uno nuevo usando esta guía: https://developer.android.com/studio/publish/app-signing#generate-key
• Marca las dos opciones de firmado y da click en Finaliza.r
• Al terminar, Android Studio mostrará una alerta en la esquina inferior derecha, click en Locate... dentro de esa alerta.
• Regresa a Google Play Console, da click en el app que creaste anteriormente y dirígete a App Releases
• Encuentra la sección Production y da click en Manage
• Da click en el botón Browse Files y escoge el APK que Android studio te generó.
• Agrega un release name.
• Incluye las notas en What's new in this release?
• Da click en Review.
• En la siguiente pantalla haz click en Roll Out.
• Para la guía oficial, puedes ir a este link: https://developer.android.com/studio/publish/

Apple Store (iOS)

• Regístrate como Developer en Apple: https://developer.apple.com/
• Ve a tu Cuenta en Developer Apple: https://developer.apple.com/account
• Ingresa a Certificates, IDs & Profiles.
• En la barra de la Izquierda ve a Identifiers/App IDs
• Da click en +
• Ingresa la descripción de tu app.
• Marca la casilla Explicit App Id e ingresa un bundle id (puede ser algo como com.tunombreoempresa.platzinger)
• Da click en continue.
• Da click en Register.
• Ve a AppStore Connect https://appstoreconnect.apple.com/ y loggeate con tu cuenta de Apple que usaste para registrarte como Developer.
• Haz click en el símbolo de + y escoge New App.
• Marca la casilla de iOS e ingresa el resto de los datos (recuerda usar el bundle id que creaste en Apple Developer)
• En tu IDE, localiza el archivo config.xml, y en la segunda línea, en widget id= asigna tu bundle Id.
• Corre el comando ionic cordova build iOS,
• En tu sistema de archivos ve a carpetadetuapp/platforms/ios y ejecuta el archivo con extensión .xcodeproj (ícono color azul), esto lanzará Xcode.
• En Xcode ve a Preferences/Accounts.
• Agrega una nueva cuenta, usando tu Apple Id (email) y contraseña para loggearte.
• En la barra lateral izquierda, elige el ícono del Folder (parte superior de la barra), luego da click en el nombre de tu proyecto (primer elemento de la lista)
• En la parte de la derecha, selecciona General (parte superior)
• Más abajo, En la sección Signing, marca la casilla de Automatically Manage signing.
• Escoge tu cuenta en el dropdown de Team.
• Conecta tu iPhone/iPod/iPad a tu computadora.
• Elige tu dispositivo conectado en la parte supioror (a un lado del símbolo de Stop y nombre del app)
• En el menú superior ve a Product/Archive.
• Sigue las instrucciones del Wizard para subir tu app.
• Regresa a AppStore Connect, ve a Applications y verás tu app cargada.
• Ingresa a tu app y llena con la información requerida.
• Al guardar, si te sale un símbolo de Advertencia en color amarillo a un lado de la versión y nombre de tu app, haz click en él y contesta las preguntas que Apple te hace.
• A este punto puedes someter tu app para testing o para ser subida.
• Para las guías oficiales, puedes ir a este link: https://developer.apple.com/support/app-store-connect/

Push Notifications con Firebase FCM y Ionic 3

Para agregarle push notifications a nuestra app de Ionic, aprovecharemos que estamos usando Firebase y habilitaremos Firebase Cloud Messaging, con el cuál, Ionic cuenta con una integración: https://ionicframework.com/docs/native/fcm/

1. Ve a Grow/Cloud Messaging
2. Haz click en el botón de Android o iOS
3. Agrega tu package name (el que tienes en config.xml)
4. Da click en Register App
5. Descarga el archivo google-services.json (en el caso de Android) o GoogleService-Info.plist (en el caso de iOS) y colócalo en la carpeta de tu app (raíz)
6. En la terminal en la carpeta de tu proyecto corre los comandos:

ionic cordova plugin add cordova-plugin-fcm
npm install --save @ionic-native/fcm

7. En tu app.module.ts agrega el plugin a la sección de providers de esta manera:

providers: [FCM, ...]

8. En tu app.component.ts, inyecta el provider en el constructor:

import { FCM } from '@ionic-native/fcm'; 
constructor(private fcm: FCM, ...) {...}

9. Para recibir notificaciones, dentro del platform ready de app.component.ts usaremos:

platform.ready().then(() => {
      //Notifications
      fcm.subscribeToTopic('all');
      fcm.getToken().then(token=>{
          console.log(token);
      })
      fcm.onNotification().subscribe(data=>{
        if(data.wasTapped){
          console.log("Received in background");
        } else {
          console.log("Received in foreground");
        };
      })
      fcm.onTokenRefresh().subscribe(token=>{
        console.log(token);
      });
      //end notifications.
       statusBar.styleDefault();
       splashScreen.hide();
     });

10. Para enviar las notificaciones, primero importa el HttpClientModule en tu app.module.ts:

import {HttpClientModule} from '@angular/common/http';
imports: [
BrowserModule,
HttpClientModule,
...
]

11. Ahora, en el .ts del page desde donde quieras enviar notificaciones, (conversatio.ts, por ejemplo), acopla tu código para incluir lo siguiente:

import { HttpClient } from '@angular/common/http/';
import { HttpHeaders } from '@angular/common/http';
constructor( private http: HttpClient,...) {...}
//Add this function and call it where you want to send it.
sendNotification() 
{  
let body = {
    "notification":{
      "title":"New Notification has arrived",
      "body":"Notification Body",
      "sound":"default",
      "click_action":"FCM_PLUGIN_ACTIVITY",
      "icon":"fcm_push_icon"
    },
    "data":{
      "param1":"value1",
      "param2":"value2"
    },
      "to":"/topics/all",
      "priority":"high",
      "restricted_package_name":""
  }
  let options = new HttpHeaders().set('Content-Type','application/json');
  this.http.post("https://fcm.googleapis.com/fcm/send",body,{
    headers: options.set('Authorization', 'key=TuSenderID),
  })
    .subscribe();
}

12. Para obtener TuSenderID, ve a tu consola de Firebase, en la parte superior izquierda, junto a Project Overview da click en el ícono del engrane (opciones)/ Project Settings
13. Da click en el tab de Cloud Messaging y copia el Sender ID
14. OPCIONAL: Si deseas reaccionar al evento de cuando a la notificación se le da click (o tap), usa:

fcm.onNotification().subscribe(data=>{
 if(data.wasTapped){
 // handle here.
 })

Nota: trata de correr el app en dos dispositivos diferentes Si deseas saber más acerca de Firebase Cloud Messaging, puedes ingresar a https://firebase.google.com/docs/cloud-messaging/