Publicando nuestra aplicación en Android y iOS stores

Clase 56 de 57 • Curso de Ionic Avanzado 2017

Clase anteriorSiguiente clase

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
  1. En tu app.module.ts agrega el plugin a la sección de providers de esta manera:
providers: [FCM, ...]
  1. En tu app.component.ts, inyecta el provider en el constructor:
import { FCM } from '@ionic-native/fcm'; 
constructor(private fcm: FCM, ...) {...}
  1. 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();
     });
  1. Para enviar las notificaciones, primero importa el HttpClientModule en tu app.module.ts:
import {HttpClientModule} from '@angular/common/http';
imports: [
BrowserModule,
HttpClientModule,
...
]
  1. 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();
}
  1. 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
  2. Da click en el tab de Cloud Messaging y copia el Sender ID
  3. 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/