Capacitor CLI: Guía de configuración del proyecto

¿Quieres crear apps de iOS y Android con una sola base de código? Capacitor CLI simplifica el proceso, permitiéndote crear apps nativas con tecnologías web. Esto es lo que aprenderás:

Quick Setup: Instala Capacitor CLI e inicializa tu proyecto en minutos.
Integración de plataforma: Añade soporte para iOS y Android con comandos sencillos.
Live Updates: Usa Capgo para actualizaciones instantáneas OTA.
Soluciones comunes: Soluciona problemas como errores de sync o fallos de build.

Pasos clave para empezar:

Instalar Node.js, npm, JDK, Xcode, y Android Studio.
Ejecuta npm install @capacitor/core @capacitor/cli e inicializa tu proyecto.
Añade las plataformas iOS y Android usando npx cap add ios y npx cap add android.
Opcional: Configura Capgo para actualizaciones en vivo de apps más rápidas.

Esta guía cubre todo lo que necesitas para configurar Capacitor CLI, establecer las plataformas y desplegar tu app. ¡Vamos a ello!

Presentamos Capacitor Configurar

Sitio web de documentación de Capacitor Framework

Requisitos de configuración

Para empezar, asegúrate de tener instaladas las siguientes herramientas:

Node.js (versión 14 o superior) y npm
Java JDK (versión 11 o superior)
Xcode (versión 12 o superior para builds de iOS)
Android Studio (para builds de Android)
Capacitor CLI (versión 6 o 7)

Opcional: Si quieres habilitar live updates, consulta la “Guía de configuración de Capgo” de abajo.

Pasos de instalación de CLI

Antes de empezar, asegúrate de tener Node.js, npm, JDK, Xcode, y Android Studio configurar. Una vez listo, puedes instalar Capacitor CLI ejecutando:

npm install --save @capacitor/core @capacitor/cli
npx cap init

Este comando instala Capacitor y configura sus componentes principales.

Después de completar este paso, pasa a Crear un nuevo proyecto para generar la estructura de tu aplicación.

Crear un nuevo proyecto

Para empezar con tu proyecto usando Capacitor CLI, sigue estos pasos:

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

Actualización del archivo de configuración

Edita el capacitor.config.json archivo para incluir la siguiente configuración:

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Una vez actualizado, usa esta configuración para configurar Capacitor en tu proyecto.

Configuración de plataformas

Ahora que el scaffolding del proyecto está listo, es hora de configurar los objetivos iOS y Android.

Añadiendo iOS y Android

Comienza instalando los paquetes específicos de la plataforma necesarios usando Capacitor CLI:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

Para iOS, asegúrate de tener Xcode 14 o posterior, CocoaPods 1.11 o superior, y macOS 12 o más reciente. Para Android, necesitarás Android Studio Giraffe (2022.3.1+), JDK 17 o posterior, y Gradle 7.5 o superior.

Una vez instalado, deberás mantener tus objetivos nativos actualizados con los cambios de tu aplicación web.

Actualizaciones de plataforma

Para sincronizar tus plataformas con los últimos cambios web, sigue estos pasos tras actualizar tu app web:

npm run build
npx cap sync

El cap sync el comando gestiona dos tareas:

Copia los activos web actualizados a las plataformas nativas
Actualiza las configuraciones y plugins nativos para que coincidan con los últimos cambios

IDE Setup

Abre los proyectos específicos de la plataforma en los IDE correspondientes:

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

En Xcode:

Elige tu equipo de desarrollo.
Configura los certificados de firma.
Actualiza tu bundle identifier.

En Android Studio:

Modifica el application ID en build.gradle.
Configura el keystore para la firma.
Configura las variantes de build de debug y release.

Cuando todo esté configurado, compila los proyectos con npx cap build ios o npx cap build android. No olvides ejecutar npx cap sync de nuevo para asegurar que todos los assets estén actualizados.

Capgo Setup Guide

Interfaz del dashboard de Capgo Live Update

Configura Capgo para habilitar actualizaciones instantáneas over-the-air en tu app.

Funcionalidades clave de Capgo

Capgo ofrece varias herramientas para agilizar las actualizaciones de tu app:

Cifrado de extremo a extremo garantiza la entrega segura de las actualizaciones.
Updates run en segundo plano al iniciar la app.
Herramientas de analytics ayudan a medir la tasa de éxito y el engagement de usuarios.
Una rollback con un solo clic la opción te permite recuperarte rápidamente de actualizaciones problemáticas.
Usa la sistema de canales para despliegues progresivos y pruebas beta.

Instalación de Capgo

Sigue estos pasos para empezar con Capgo:

Instala el CLI de Capgo:
```
npm install --save @capgo/cli
```
Inicializa Capgo en tu proyecto:
```
npx capgo init
```
Compila y publica actualizaciones:
```
npm run build
npx capgo release
```
Abre la app para iniciar el proceso de actualización en segundo plano.

Buenas prácticas

Usa canales para probar actualizaciones antes de distribuirlas a todos los usuarios.
Monitorea las analíticas para asegurar que las actualizaciones se entreguen correctamente y los usuarios sigan comprometidos.
Activa el seguimiento de errores para detectar y corregir problemas a tiempo.
Mantén la función de rollback lista para resolver cualquier problema rápidamente.

Capgo es compatible con Capacitor 8, se integra sin problemas en pipelines CI/CD y cumple con los requisitos de las tiendas de Apple y Google.

Problemas comunes y consejos

Una vez que hayas completado la configuración de la plataforma y Capgo, es posible que te encuentres con algunos errores comunes. Aquí te explicamos cómo resolverlos rápidamente.

Problemas de configuración del entorno

CLI No encontrado Error: El comando npx cap falla. Solución: Ejecuta npm install --save @capacitor/cli @capacitor/core e inténtalo de nuevo.
Incompatibilidad de versión de Node Error: los comandos de CLI fallan por errores de versión de Node.js. Solución: Instala Node.js versión 14 o superior, según los requisitos de configuración.

Problemas de configuración

Configuración incompatible Error: Los cambios en capacitor.config.json no surten efecto. Solución: Asegúrate de que los appId y webDir valores coincidan con los de tu proyecto package.json y la carpeta de salida del build web.
Errores de sincronización de plataforma Error: Ejecutar npx cap sync provoca conflictos de versiones de plugins. Solución: Actualizar @capacitor/android y @capacitor/ios a la misma versión mayor y vuelve a ejecutar el comando sync.

Build y despliegue

Errores de firma del build Error: Los builds de iOS o Android fallan por falta de certificados o de un keystore. Solución: Sigue las instrucciones de configuración del IDE. En iOS, añade tu equipo de desarrollo en Xcode. En Android, configura el keystore en build.gradle.
Directorio web no encontrado Error: npx cap sync no encuentra los web assets. Solución: Ejecuta tu comando de build web (p. ej., npm run build) antes de sincronizar las plataformas.

Problemas de Live Update

Fallos de actualización de Capgo Error: Las actualizaciones no aparecen en la app de producción. Solución: Verifica de nuevo tu clave API de Capgo en capacitor.config.json y asegúrate de apuntar al canal correcto.

Para más detalles sobre la configuración específica de cada plataforma, revisa la sección de Configuración de Plataforma. Si trabajas con actualizaciones en vivo, consulta la Guía de Configuración de Capgo para obtener consejos adicionales de solución de problemas.

Resumen

Revisión de la configuración

Inicia tu aplicación web con Capacitor CLI, configura las plataformas iOS y Android e incluye opcionalmente Capgo para actualizaciones en vivo.

Aquí te explicamos cómo empezar:

Usa Capacitor CLI para inicializar tu proyecto.
Configura el ID de paquete de tu aplicación y define el directorio de salida web.
Añade soporte para las plataformas iOS y Android.
Instala y configura Capgo con el siguiente comando: npm install --save @capgo/cli && npx capgo init

Para instrucciones detalladas de configuración o solución de problemas, consulta la documentación oficial de Capacitor y Capgo.

Sigue avanzando desde Capacitor CLI: Guía de configuración del proyecto

Si estás usando Capacitor CLI: Guía de configuración del proyecto para planificar las operaciones del dashboard y de API, conéctalo con Resumen de API para los detalles de implementación en API Overview, Introducción para los detalles de implementación en la Introducción, Claves de API para el detalle de implementación en API Keys, Dispositivos para el detalle de implementación en Devices, y Bundles para el detalle de implementación en Bundles.