¿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 progressive 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.
Accede 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 proveyendo 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";
// código de la app aquí...
serviceWorker.register();
