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

¿Quiere crear aplicaciones de iOS y Android con un solo código? Capacitor CLI simplifica el proceso, permitiéndole crear aplicaciones nativas utilizando tecnologías web. Aquí es lo que aprenderá:

Configuración Rápida: Instale Capacitor CLI e inicie su proyecto en minutos.
Integración de Plataformas: Agregue soporte para iOS y Android con comandos simples.
Actualizaciones en vivo: Utilice Capgo para obtener actualizaciones en tiempo real por cable.
Soluciones comunes: Resuelva problemas como errores de sincronización o fallas de compilación.

Pasos clave para empezar:

Instale 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 utilizando npx cap add ios y npx cap add android.
Opcional: Configure Capgo para actualizaciones en vivo de la aplicación actualizaciones de la aplicación.

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

Introduciendo Capacitor Configurar

Capacitor Framework Documentación del sitio web

Requisitos de configuración

Para empezar, asegúrese 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 guía de instalación "Capgo Guía de configuración"" a continuación.

CLI Pasos de instalación

Antes de empezar, asegúrese de tener Node.js, npm, JDK, Xcode, y Android Studio configurar. 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 básicos.

Una vez completado este paso, pase a Crear un Nuevo Proyecto Crear un Nuevo Proyecto

Para empezar con su proyecto

utilizando __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ using Capacitor CLIActualizar el Archivo de Configuración

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

Crear un Nuevo Proyecto

Editar el archivo para incluir las siguientes configuraciones: capacitor.config.json Una vez actualizado, utilice esta configuración para configurar __CAPGO_KEEP_0__ para su proyecto.

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

Once updated, use this configuration to set up Capacitor for your project.

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

Agregar iOS y Android

Comience instalando los paquetes específicos de plataforma utilizando el __CAPGO_KEEP_0 CAPGO_KEEP_1__:

Start by installing the necessary platform-specific packages using the Capacitor CLI:

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

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. Configuración de plataforma

Una vez instalado, necesitarás mantener actualizados tus objetivos nativos con cambios en tu aplicación web.

Actualizaciones de plataforma

Para sincronizar tus plataformas con los cambios web más recientes, sigue estos pasos después de actualizar tu aplicación web:

npm run build
npx cap sync

El cap sync El comando maneja dos tareas:

Copia 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 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 los certificados de firma.
Actualice su identificador de paquete.

En Android Studio:

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

Cuando todo esté configurado, compile los proyectos utilizando npx cap build ios o npx cap build androidno olvide ejecutar npx cap sync de nuevo para asegurarse 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 en vivo instantáneas para tu aplicación.

Características clave de Capgo

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

La cifrado de extremo a extremo asegura el envío seguro de actualizaciones.
Las actualizaciones se ejecutan en segundo plano cuando la aplicación se inicia.
Las herramientas de análisis ayudan a rastrear los índices de éxito de las actualizaciones y la participación del usuario.
Una desactivación de una sola clic La opción te permite recuperarte rápidamente de actualizaciones problemáticas.
Utiliza el sistema de canales para lanzamientos de actualizaciones y pruebas de beta.

Instalando Capgo

Sigue estos pasos para empezar con Capgo:

Instala el Capgo CLI:
```
npm install --save @capgo/cli
```
Inicia Capgo en tu proyecto:
```
npx capgo init
```
Construye y libera actualizaciones:
```
npm run build
npx capgo release
```
Abre la aplicación para activar el proceso de actualización de fondo.

Prácticas recomendadas

Utilice los canales para probar actualizaciones antes de distribuirlas a todos los usuarios.
Monitoree las métricas para asegurarse de que las actualizaciones se entreguen con éxito y los usuarios se mantengan comprometidos.
Habilite el seguimiento de errores para detectar y solucionar problemas temprano.
Mantenga el feature de rollback listo 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, es posible que enfrentes algunos errores comunes. Aquí está cómo abordarlos rápidamente.

Problemas de configuración de entorno

CLI No encontrado Error: La orden npx cap falla. Reparación: Ejecutar npm install --save @capacitor/cli @capacitor/core y vuelve a intentarlo.
Diferencia de Versión de Node Error: Los comandos CLI fallan debido a errores de versión de Node.js. Reparación: Instala la versión de Node.js 14 o superior tal como se indica en los requisitos de configuración.

Problemas de Configuración

Diferencia de Configuración Error: Los cambios en capacitor.config.json no tendrán efecto. Solución: Asegúrese de que appId y webDir los valores coincidan con el proyecto package.json y el carpeta de salida de compilación web.
Errores de sincronización de plataforma Error: Ejecutar npx cap sync resulta en conflictos de versiones de plugins. Solución: Actualice @capacitor/android y a la misma versión mayor, luego vuelva a ejecutar el comando de sincronización. @capacitor/ios Compilación y Despliegue

Errores de Compilación de Firmas

Error : Los compilados de iOS o Android fallan debido a certificados o una llave de almacenamiento faltantes.Solución : Siga las instrucciones de configuración del IDE. Para iOS, agregue su equipo de desarrollo en Xcode. Para Android, configure la llave de almacenamiento enDirectorio de Web No Encontrado build.gradle.
Error no se pueden encontrar los activos de la web.: npx cap sync Solución Error: Ejecuta tu comando de compilación web (por ejemplo, npm run build) antes de sincronizar las plataformas.

Problemas de Actualización en Vivo

Capgo Fallos de Actualización Error: Las actualizaciones no aparecen en la aplicación de producción. Solucionar: Verifica que tu Capgo API clave en capacitor.config.json y asegúrate de estar dirigiéndote 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

Configuración de revisión

Inicie su aplicación web con Capacitor CLI, configure las plataformas de iOS y Android, y opcionalmente incluya Capgo para actualizaciones en vivo.

Aquí está cómo empezar:

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

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