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

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

Configuración rápida: 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 para actualizaciones en el aire instantáneas.
Soluciones comunes: Resuelve 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 inicialice su proyecto.
Agregar plataformas de iOS y Android usando npx cap add ios y npx cap add android.
Opcional: Configura Capgo para actualizaciones en vivo de la aplicación actualizaciones de la aplicación.

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

Introduciendo Capacitor Configurar

Capacitor Framework Documentación del sitio web

Requisitos de configuración

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

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

Opcional: If you want to enable live updates, check out the “Guía de configuración de Capgo” below.

Pasos de instalación de CLI

Antes de empezar, asegúrese de tener instalado Node.js, npm, JDK, Xcode, y Android Studio configurado. Una vez listo, puede instalar el 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, pase a Crear un Nuevo Proyecto para crear la estructura de su aplicación.

Crear un Nuevo Proyecto

Para empezar con su proyecto utilizando Capacitor CLI, siga 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 su 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 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 Giraffe (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 la plataforma

Sincronice sus plataformas con los cambios web más recientes siguiendo estos pasos después de actualizar su aplicación web:

npm run build
npx cap sync

El cap sync comando maneja dos tareas:

Copia los activos web actualizados a las plataformas nativas
Actualiza las configuraciones y plugins nativos para que coincidan con los cambios más recientes

Configuración de IDE

Abre los proyectos específicos de 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 los certificados de firma.
Actualiza tu identificador de paquete.

En Android Studio:

Modifica el ID de la aplicación en build.gradle.
Configure el keystore para firmar.
Configura tanto las variantes de compilación de depuración como de lanzamiento.

Cuando todo esté configurado, compila los proyectos utilizando npx cap build ios o npx cap build android. No te olvides de ejecutar npx cap sync de nuevo para asegurarte de que todos los activos estén actualizados.

Capgo Guía de Configuración

Capgo Interfaz de Actualización en Vivo

Configura Capgo para habilitar actualizaciones instantáneas en vivo para tu aplicación.

Características clave de Capgo

Capgo ofrece varias herramientas para simplificar las actualizaciones de la aplicación:

Encriptación de extremo a extremo asegura el envío seguro de actualizaciones.
Las actualizaciones se ejecutan en segundo plano cuando se lanza la aplicación.
Herramientas de análisis ayudan a rastrear las tasas de éxito de actualizaciones y la participación del usuario.
Una opción de devolución a un clic te permite recuperarte rápidamente de actualizaciones problemáticas.
Utiliza el sistema de canales para despliegues escalonados y pruebas de beta.

Instalar Capgo

Siga estos pasos para empezar a trabajar con Capgo:

Instalar el Capgo CLI:
```
npm install --save @capgo/cli
```
Iniciar Capgo en su proyecto:
```
npx capgo init
```
Construir y liberar actualizaciones:
```
npm run build
npx capgo release
```
Abrir la aplicación para desencadenar el proceso de actualización de fondo.

Prácticas recomendadas

Utilice canales para probar actualizaciones antes de desplegarlas a todos los usuarios.
Monitorear análisis para asegurarse de que las actualizaciones se entregan con éxito y los usuarios se mantengan comprometidos.
Habilite el seguimiento de errores para atrapar y solucionar problemas temprano.
Mantén lista la característica de retroceso para abordar rápidamente cualquier problema.

Capgo es compatible con Capacitor 8, se integra suavemente con las 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 la configuración de Capgo , podrías enfrentar algunos errores comunes. Aquí te mostramos cómo abordarlos rápidamente.

Problemas de configuración de entorno

CLI No encontrado Error: La orden npx cap falla. Solución: Ejecuta npm install --save @capacitor/cli @capacitor/core y vuelve a intentarlo.
Versión de Nodo Incompatible Error: Los comandos CLI fallan debido a errores de versión de Node.js. Solución: Instale la versión de Node.js 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. Solución: Asegúrese de que appId y webDir los valores coinciden con tu proyecto’s package.json y el carpeta de salida de compilación web.
Errores de sincronización de plataforma Error: Ejecución npx cap sync resulta en conflictos de versión de plugin. Solución: Actualiza @capacitor/android y @capacitor/ios a la misma versión mayor, luego vuelve a ejecutar el comando de sincronización.

Compilación y despliegue

Fallas de Firma de Construcción Error: Los compilados de iOS o Android fallan debido a certificados o keystore faltantes. Solución: 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. Solución: Ejecuta el comando de construcción web (por ejemplo, npm run build) antes de sincronizar las plataformas.

Problemas de Actualización en Vivo

Actualizaciones Fallidas de Capgo ErrorLa actualización no aparece en la aplicación de producción. SoluciónRevisa cuidadosamente tu Capgo API clave en capacitor.config.json y asegúrate de estar apuntando al canal correcto.

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

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 de 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 Overview para obtener detalles de implementación en API Overview, Introducción para los detalles de implementación en Introducción, API Claves para los detalles de implementación en API Claves, Dispositivos para los detalles de implementación en Dispositivos, y Paquetes para los detalles de implementación en Paquetes.