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

¿Quieres crear aplicaciones de iOS y Android con un código base? Capacitor CLI facilita el proceso, permitiéndote crear aplicaciones nativas utilizando tecnologías web. Aquí es lo que aprenderás:

Quick Setup: Instala Capacitor CLI y inicializa tu proyecto en minutos.
Integración de plataforma: Agrega soporte para iOS y Android con comandos simples.
Actualizaciones en vivo: Utiliza Capgo actualizaciones por cable en tiempo real.
Soluciones Comunes: Solucionar problemas como errores de sincronización o fallas de compilación.

Pasos Clave para Empezar:

Instalar Node.js, npm, JDK Xcode, y Android Studio.
Ejecutar npm install @capacitor/core @capacitor/cli y inicializar tu proyecto.
Agregar plataformas iOS y Android utilizando npx cap add ios And npx cap add android.
Opcional: Configura Capgo para actualizaciones en vivo app updates.

Esta guía cubre todo lo que necesitas para configurar Capacitor CLI, configurar plataformas y desplegar tu aplicación. ¡Vamos a empezar!

Introduciendo Capacitor Configura

Documentación del sitio web del framework Capacitor

Requisitos de configuración

Para empezar, asegúrate de tener instalados los siguientes herramientas:

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

Opcional: Si desea habilitar actualizaciones en vivo, consulte la "Capgo Guía de configuración” abajo.

CLI Pasos de instalación

Antes de empezar, asegúrese de tener Node.js, npm, JDK, Xcode, y Android Studio configurados. Una vez listo, puede instalar el Capacitor CLI ejecutando:

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

Esta orden instala Capacitor y configura sus componentes básicos.

Una vez completado este paso, pase a Crear un Nuevo Proyecto para configurar tu aplicación.

Crear un Nuevo Proyecto

Para empezar con tu proyecto utilizando Capacitor CLIsigue estos pasos:

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

Actualizando el Archivo de Configuración

Editar el capacitor.config.json archivo para incluir los siguientes ajustes:

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

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

Configuración de la Plataforma

Ahora que la estructura del proyecto está lista, es hora de configurar los objetivos de iOS y Android.

Agregar iOS y Android

Comience instalando los paquetes específicos de plataforma necesarios utilizando el Capacitor CLI:

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

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

Una vez instalados, necesitará mantener actualizados sus objetivos nativos con cambios en su aplicación web.

Actualizaciones de plataforma

Para sincronizar sus plataformas con los cambios web más recientes, siga estos pasos después de actualizar su aplicación web:

npm run build
npx cap sync

El cap sync command maneja dos tareas:

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

IDE Setup

Abra los proyectos específicos de la plataforma en los IDEs adecuados:

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

En Xcode:

Elige tu equipo de desarrollo.
Configura certificados de firma.
Actualiza tu identificador de paquete.

En Android Studio:

Modifique el ID de la aplicación en build.gradle.
Configure el almacén de claves para la firma.
Set up both debug and release build variants.

Cuando todo esté configurado, construye los proyectos utilizando npx cap build ios o npx cap build androidNo olvide ejecutar npx cap sync again to ensure all assets are up to date.

Capgo Setup Guide

Capgo Live Update Panel de Control de Interface

Configura Capgo para habilitar actualizaciones sobre la marcha en tiempo real para tu aplicación.

Características clave de Capgo

Capgo offers several tools to streamline app updates:

Cifrado de extremo a extremo asegura la entrega segura de actualizaciones.
Updates run en segundo plano cuando se lanza la aplicación.
Las herramientas de análisis help track update success rates and user engagement.
Una opción de devolución rápida permite recuperar rápidamente de actualizaciones problemáticas.
Utilice el sistema de canales para lanzamientos escalonados y pruebas de beta.

Instalando Capgo

Siga estos pasos para empezar con Capgo:

Instale el Capgo CLI:
```
npm install --save @capgo/cli
```
Inicialice Capgo en su proyecto:
```
npx capgo init
```
Construya y libere actualizaciones:
```
npm run build
npx capgo release
```
Abra la aplicación para desencadenar el proceso de actualización de fondo.

Consejos de Práctica

Utilice canales para probar actualizaciones antes de distribuirlas a todos los usuarios.
Monitor analytics to ensure updates are delivered successfully and users stay engaged.
Enable error tracking to catch and fix issues early.
Mantenga el recurso de retroceso listo para abordar rápidamente cualquier problema.

Capgo es compatible con Capacitor 8, se integra suavemente con flujos de CI/CD y cumple con los requisitos de las tiendas de Apple y Google.

Problemas y Consejos Comunes

Una vez que hayas completado la configuración de la plataforma y Capgo , podrías enfrentar algunos errores comunes. Aquí te mostramos cómo abordarlos rápidamente.

Problemas de Configuración del Entorno

CLI No Encontrado Error: La orden npx cap falla. Solución: Ejecuta npm install --save @capacitor/cli @capacitor/core y vuelve a intentarlo.
Incompatibilidad de Versión de Node Error: CLI comandos fallan debido a errores de versión de Node.js. FixInstale Node.js versión 14 o superior según se indica en los requisitos de configuración.

Problemas de Configuración

Configuración Incompatible Error: Los cambios en capacitor.config.json no surten efecto. Fix: Asegúrese de que los appId y webDir coinciden con el proyecto package.json y el directorio de salida de compilación web.
Errores de sincronización de plataforma Error: Ejecución npx cap sync resulta en conflictos de versiones de plugins. Solución: Actualizar @capacitor/android y @capacitor/ios to the same major version, then rerun the sync command.

Compilación y Despliegue

Fallas en la firma de compilación Error: Los compilados de iOS o Android fallan debido a certificados o un keystore faltantes. Fix: Sigue las instrucciones de configuración del IDE. Para iOS, agrega tu equipo de desarrollo en Xcode. Para Android, configura el keystore en build.gradle.
Directorio Web No Encontrado Error: npx cap sync no se puede encontrar los activos web. FixEjecuta tu comando de compilación web (por ejemplo, npm run build) antes de sincronizar las plataformas.

Live Update Problemas

Capgo Fallas de Actualización Error: No se están mostrando actualizaciones en la aplicación de producción. Fix: Verifica que tus Capgo API clave en capacitor.config.json y asegúrate de estar apuntando al canal correcto.

For more details on platform-specific setup, revisit the Platform Setup section. If you’re working with live updates, consult the Capgo Setup Guide for additional troubleshooting tips.

Resumen

Revisión de Configuración

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

¡Aquí está cómo empezar:

Utilice los Capacitor CLI para inicializar su proyecto.
Configure el ID de paquete de su aplicación y defina el directorio de salida web.
Agregue soporte para las plataformas iOS y Android.
Instale y configure Capgo con el siguiente comando: npm install --save @capgo/cli && npx capgo init

Para obtener instrucciones de configuración detalladas o para resolver problemas, consulte la documentación oficial Capacitor y Capgo.

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

Si está utilizando Capacitor CLI: Guía de configuración del proyecto para planificar la consola y las operaciones de API, conecte con API Resumen para obtener detalles de implementación en API Resumen, Introducción para el detalle de implementación en Introducción, API Claves para el detalle de implementación en API Claves, Dispositivos para el detalle de implementación en Dispositivos, y Paquetes para el detalle de implementación en Paquetes.