馃 Publicar aplicaciones creadas en Ionic

馃嵖 驴C贸mo publicar una aplicaci贸n m贸vil realizada en Ionic?

Abre el archivo capacitor.config.json y verifica que el valor de appId sea un valor 煤nico en ambas app stores. Puedes elegir para ello el nombre de dominio que desees, pero una convenci贸n es utilizar el nombre inverso del dominio, por ejemplo com.miapp.recuerdos. Este nombre de no debe contener guiones ni caracteres especiales.

Una vez que est茅s listo ejecuta…

yarn build

馃イ 驴C贸mo generar la aplicaci贸n para Android desde Ionic?

Al finalizar el build ejecuta el siguiente comando…

ionic capacitor sync android

El proceso para generar una aplicaci贸n iOS en Ionic es el mismo, pero solo puede llevarse a cabo en equipos con OSX.

Dentro del directorio public/assets/icon se encuentran una serie de iconos por default que vienen provistos por Ionic. Podemos reemplazar estos iconos por los iconos de nuestra aplicaci贸n.

Las referencias a estos iconos pueden ser actualizadas dentro del archivo public/manifest.json. Este archivo es requerido para desplegar la aplicaci贸n como una progresive webapp.

Es importante cambiar actualizar los valores como <title> que se encuentran en el archivo public/index.xml.

Abrimos ahora nuestra app en Android.

ionic capacitor open android

Damos clic con el bot贸n derecho del mouse sobre la aplicaci贸n y elegimos New / Image Asset. Android Studio nos mostrara la lista de iconos a utilizar. Dentro de la opci贸n Source Asset / Path elegimos nuestro icono y damos clic en Next para completar el proceso.

En este punto al listar nuestras aplicaciones dentro de nuestro dispositivo podremos ver el icono representativo de nuestra aplicaci贸n.

馃崷 驴C贸mo reemplazar la imagen que se muestra al abrir una aplicaci贸n Android creada en Ionic?

Al abrir una Aplicaci贸n Android creada con Ionic se muestra el icono de Ionic mientras se carga la aplicaci贸n. Para configurar que imagen se muestra vamos a realizar lo siguiente…

  • Abre la p谩gina Ape Tools, esta te permite generar iconos y splashscreens.
  • Da clic sobre la opci贸n Generate Your Icons & Splashes.
  • Elige la opci贸n Select your Splash Screen.
  • Elige la imagen correspondiente a la que deseas mostrar dentro del splash.
  • Elige entre la lista de stores a las que deseas publicar (en este caso solo Android).
  • Da clic en Kapow.
  • Da clic en Download Zip.
  • Descomprime el zip y dentro de los diferentes directorios renombra los archivo screen.png a splash.png.
  • Dentro del directorio del proyecto android/app/src/res reemplaza los archivos splash.png por los que acabas de renombrar que se encontraba en el zip.

馃崷 驴C贸mo desplegar una aplicaci贸n Android?

Dentro de Android, seleccionar la aplicaci贸n e ir a la opci贸n del men煤 Build > Geberate Signed Bundle / APK.

Key Store
Es el indicador 煤nico que le indica a la Google Store que solo el desarrollador que posea esta podr谩 realizar las actualizaciones.

Completa los siguientes datos y presiona Next.

La aplicaci贸n se generar谩 y firmar谩 digitalmente para subir a la Google Store.

Accesa a la Google Play Console con tu cuenta de Google.

La cuenta tiene que estar asociada como Google Developer, lo cual tiene un costo de 25 d贸lares.

Elige la opci贸n Publish an Android App.

Completa la informaci贸n de la app indicando valores como el nombre de esta y la descripci贸n.

Listo, la aplicaci贸n ha sido enviada para ser publicada.

馃崷 驴C贸mo reemplazar los iconos y la imagen que se muestra al abrir una aplicaci贸n IOS creada en Ionic?

Ejecuta 茅l comando siguiente para abrir xcode.

ionic capacitor open ios

Estando en xcode ve al directorio del proyecto y busca el archivo Assets.xcassets, este contiene las referencias a los iconos y al splash mostrado cuando se esta iniciando la aplicaci贸n.

  • Abre la p谩gina Ape Tools, esta te permite generar iconos y splashscreens.
  • Da clic sobre la opci贸n Generate Your Icons & Splashes.
  • Elige la opci贸n Select your Splash Screen.
  • Elige la imagen correspondiente a la que deseas mostrar dentro del splash.
  • Elige entre la lista de stores a las que deseas publicar (en este caso solo iOS).
  • Descomprime el zip y dentro del directorio iOS / Appicon.iconset se encuentran los iconos que debes arrastrar sobre sus correspondientes en la ventana de xcode, repite el mismo proceso

馃崷 驴C贸mo desplegar una aplicaci贸n iOS?

Para publicar una aplicaci贸n en la Apple Store se quiere formar parte del Apple Developer Program, el costo anual es de 99 d贸lares al a帽o.

Despu茅s dentro de xcode hay que ir a App > Sign & Certificate > Team y asegurarse que la cuenta de cuenta de Apple developer se encuentra asociada.

Dentro de tu cuenta de Apple Developer hay que ir a Certificates, IDS & Profiles > Identifiers > + > App IDS > Continue.

Description
Escribe la descripci贸n de la aplicaci贸n.

Da clic en Register.

Ahora que ya tenemos nuestro identificador creado, vamos a App Store Connect > My Apps > + > New App.

Platform
iOS
Primary Language
Spanish (si es que la app es en espa帽ol)
Bundkle ID
Elige el identificador que acabas de crear.
SKU
El identificador interno que desees asignar

Da clic en Create.

Regresa a xcode, elige la app y en el men煤 Product > Archive.

Se generar谩 una aplicaci贸n optimizada, cuando finalice elige Distribute App lo que enviar谩 la aplicaci贸n a la App Store.

App ID Prefix
Este es el valor que tiene el appName dentro de capacitor.config.json.

馃嵖 驴C贸mo publicar una aplicaci贸n web creada en Ionic?

Para generar los archivos compilados corremos el siguiente comando en Ionic.

yarn build

Un directorio build ser谩 generado.

Ahora solo tenemos que montar nuestra aplicaci贸n en un servidor web que despliegue el index.html.

馃イ 驴Qu茅 es una aplicaci贸n web progresiva (PWA Progressive Web App)?

Una aplicaci贸n web progresiva es un tipo de aplicaci贸n desplegada a trav茅s de la web, y que se crea mediante tecnolog铆as comunes como HTML, CSS y JavaScript. Se les conoce como PWA por sus siglas en Ingl茅s del nombre Progressive Web Apps. E intentan proveer una forma de trabajo que utiliza algunos recursos tanto del navegador como del escritorio y los dispositivos m贸viles proveiendo as铆 caracter铆sticas adicionales como poder navegar la aplicaci贸n en modo offline (sin conexi贸n a Internet) as铆 como instalar la aplicaci贸n en un dispositivo m贸vil como si fuese una aplicaci贸n nativa.

馃イ 驴C贸mo se habilitan las caracter铆sticas de una PWA en Ionic?

Para habilitar las caracter铆sticas de una PWA en Ionic se requiere habilitar el serviceWorker.ts. Para ello abrimos el archivo index.tsx, importamos el serviceWorker e invocamos el m茅todo serviceWorker.register().

import * as serviceWorker from './serviceWorker';

// codigo de la app aqui...

serviceWorker.register();