Proyecto Android

<< Detalle producto (tabs) Notificaciones Push >>

Por último, vamos a generar y configurar el proyecto de Android para poder probarlo en un dispositivo móvil. Lo primero será generar la carpeta www, que es la que se copiará en el proyecto nativo, con el código web de la app compilado y empaquetado.

ionic build

A continuación, vamos a cambiar el nombre del proyecto y la id de aplicación (debe tener un fomato de dominio inverso y debe ser único). Para ello editamos el archivo capacitor.config.ts. Si se hace alguna consulta http al servidor en lugar de https, conviene activar la opción de allowMixedContent (desaconsejada en producción).

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'es.fullstackpro.ionic.products',
  appName: 'Ionic Products',
  webDir: 'www/browser',
  android: {
    allowMixedContent: true
  },
  plugins: {
    StatusBar: {
      overlaysWebView: false,
      style: "DARK",
      backgroundColor: "#0054e9",
    },
  },
};

export default config;

Después, instalaremos el soporte de Android y generaremos el proyecto.

npm i @capacitor/android

npx cap add android

Para este proyecto en particular, el único plugin de Capacitor que necesita permisos específicos es el de la cámara. Así que añadiremos los siguientes permisos al archivo AndroidManifest.xml del proyecto nativo de Android. Si la aplicación se conecta por http en lugar de https a un servidor externo, también habría que habilitar la opción android:usesCleartextTraffic="true" (desaconsejada en producción):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <application
    ...
  android:usesCleartextTraffic="true">
    <!-- ... -->
  </application>
  <!-- ... -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</manifest>

Ya solo queda lanzar el proyecto en el dispositivo desde Android Studio:

A partir de ahora, en cada modificación de proyecto habrá que ejecutar en este orden los siguientes comandos para sincronizar el proyecto web con el de Android:

ionic build

npx cap sync

<< Detalle producto (tabs) Notificaciones Push >>