Publicando nuestra aplicación en Android y iOS stores

Clase 56 de 57 • Curso de Ionic Avanzado 2017

Contenido del curso

Introducción a Ionic

Estructura de nuestra App con Ionic

Basics de Angular y TypeScript

Agregando estilos con CSS a nuestra aplicación

Acceso a datos remotos

Opciones y Acceso Nativo

Conversación

Amigos

Deploy

Contenido Bonus

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 a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación

Usando ngStyle y ngClass para añadir estilos dinámicos

Cambiar icono según status

Acceso a datos remotos

Información importante antes de continuar

¿Qué es Firebase?

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Login/Registro de usuarios con email y password

Login/Registro de usuarios con Facebook

Implementando Log Out

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Opciones y Acceso Nativo

Crear page de Perfil

Editar datos básicos del perfil de usuario

Configurando Android Studio

Capturar fotos de cámara y álbum

Preparando aplicación para recibir fotos desde la cámara y galería del Android

Guardando y asignando una foto de perfil al usuario desde la cámara

Preparando aplicación para utilizar geolocalización

Conectándonos al API de Google

Conversación

Más estilos

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Amigos

Planeación previa para la característica / Cómo generaremos las solicitudes

Enviando una solicitud de amistad

Revisando solicitudes de amistad

Aceptando solicitudes de amistad

Mostrando sólo amigos

Componentes anidados (con paso de parámetros)

Deploy

Exportando app para iOS y complementando con Xcode

Exportando app para web, complementando con Firebase Hosting

Conclusiones del curso

Contenido Bonus

Publicando nuestra aplicación en Android y iOS stores

Cuéntanos