Publicando nuestra aplicación en Android y iOS stores

Clase 35 de 36 • Curso Básico de Ionic 2018

Contenido del curso

Introducción

Aspectos Básicos

Navegación

Estilos (Theming)

CRUD en Ionic y Firebase

Deployment

Tomar examen

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/

Ve a Grow/Cloud Messaging
Haz click en el botón de Android o iOS
Agrega tu package name (el que tienes en config.xml)
Da click en Register App
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)
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

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

providers: [FCM, ...]

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

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

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();
     });

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

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

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();
}

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
Da click en el tab de Cloud Messaging y copia el Sender ID
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/

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();
     });

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();
}

Publicando nuestra aplicación en Android y iOS stores

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados

Alineación y transformación de texto

Padding y Márgenes

CRUD en Ionic y Firebase

Generar proyecto e instalar dependencias

Agregar y configurar AngularFire

Agregar servicio de acceso a datos

Crear una lista con array estático

Crear una vista para agregar records

Agregar la habilidad de ver records

Crear lista dinámica y agregar la habilidad de editar records

Agregar la habilidad de eliminar records

Implementando Login con Facebook

Deployment

Correr aplicaciones en emulador

Correr aplicación en dispositivos Android

Correr aplicación en dispositivos iOS

Publicando nuestra aplicación en Android y iOS stores

Conclusiones del curso