El sueño de crear una aplicación iOS, Android, Electron y Web (PWA) desde una sola base de código.
--
EL objetivo de este proyecto es facilitar la creación de aplicaciones web que se ejecuten nativamente en iOS, Android, Electron y en la web desde una sola base de código. Representa una evolución en el mundo del desarrollo web que va mas allá de las aplicaciones híbridas.
Se trata de Capacitor un nuevo puente nativo para crear aplicaciones multiplataforma (“Native Progressive Web Apps”)
Capacitor proporciona un conjunto consistente de API enfocado en la web que permite que una aplicación se mantenga lo más cercana posible a los estándares web, al tiempo que accede a funciones de dispositivos nativos en plataformas que las admiten. Agregar funciones nativas es fácil con una sencilla API de plugin para Swift en iOS, Java en Android y JavaScript para la web.
La filosofía de Capacitor parece ser integrarse fácilmente con cualquier proyecto web, en lugar de tener que integrar proyectos existentes en Capacitor.
Podemos considerar Capacitor como la propia versión de Córdova del equipo de Ionic. Si usaramos Capacitor, lo usaríamos en lugar de Cordova para agregar funcionalidad nativa a nuestras aplicaciones móviles basadas en la web. Al igual que Cordova, Capacitor será el puente entre el navegador y el dispositivo. El sitio web de Capacitor describe sus objetivos de manera breve, concisa y precisa: Native Progressive Web Apps . Capacitor quiere ser una capa de tiempo de ejecución que le permite construir una aplicación y ejecutarla en cualquier lugar (incluso si se está integrando código nativo).
La creación de Capacitor no significa que algo le esté pasando a Córdova. Cordova es un proyecto dirigido por la Apache Software Foundation y continuará existiendo y funcionará como siempre.
IMPORTANTE: Capacitor no está listo para su uso en producción . Ni siquiera está técnicamente en alfa pública. Solo debe usarse en esta etapa para aprender, probar o simplemente jugar. El equipo de Ionic actualmente está buscando personas que ayuden a probar Capacitor dentro de proyectos “reales”, por lo que si desea probarlo en su proyecto puede informar cualquier problema aquí .
Características destacadas de Capacitor vs Cordova
Compatibilidad con PWA . Ha habido un gran movimiento para Aplicaciones Web Progresivas recientemente. Están empezando a recibir más apoyo de los navegadores y están apareciendo más herramientas para ayudar a construir PWA. Una cosa interesante acerca de un PWA es que también se puede convertir fácilmente en una aplicación nativa y acceder a la funcionalidad del dispositivo (usando Cordova / Capacitor). Sin embargo, el código nativo no funcionará cuando se ejecuta como PWA a través del navegador. Esto puede hacer que sea difícil mantener una única base de código para un proyecto que se distribuirá como una aplicación nativa y como una PWA (y tal vez incluso como una aplicación de escritorio). Con Capacitor podremos manejar cualquier error que surja al intentar acceder a la funcionalidad nativa en un entorno que no la tiene.
Facilidad de integración de controles nativos . Capacitor pretende facilitar la inclusión de controles de interfaz de usuario nativos donde se desee. Por ejemplo, si queremos utilizar un menú nativo en lugar de usar el navegador para crear esa interfaz.
Funcionalidad nativa disponible de inmediato . Al usar Cordova, debemos esperar hasta que el dispositivo esté listo antes de realizar llamadas a la funcionalidad nativa (por ejemplo, mediante el uso platform.ready()). Capacitor exportará JavaScript en el arranque de la aplicación para que esto ya no sea necesario.
Soporte para plugins . Se accede a todas las funciones nativas a través de un plugin. Si queremos usar la cámara, entonces usaremos el plugin de la cámara. Si no hay un plugin disponible o no está siendo mantenido el objetivo de Capacitor es facilitar el proceso de creación y mantenimiento de estos plugin.
Plugins rediseñados . Capacitor incluirá un conjunto básico de plugins (cámara, API de archivos, geolocalización, etc.) que mantendrá el equipo Ionic. Planean rediseñar estos plugins para resolver algunos problemas comunes (como la dificultad de usar File API y la forma en que funciona la geolocalización de Android).
Instalación localizada . Capacitor se instalará localmente en los proyectos, lo que significa que será más fácil mantener múltiples versiones diferentes entre proyectos múltiples.
1. Agregar capacitor a una aplicación IONIC
A continuación generaremos un proyecto Ionic en blanco.
Capacitor se basa en el uso del comando npx, que solo está disponible en la versión 8.3.0o superior de Node.
2. Generar una nueva aplicación iónica
ionic start capacitor-test blankCuando se le pregunte, no integre Cordova con el proyecto. Una vez que haya terminado de instalar, conviértalo en su directorio de trabajo:
cd capacitor-test3. Agregar capacitor al proyecto
cd capacitor-testEventualmente, Capacitor se integrará con la linea de comando de ionic (CLI) por defecto, por lo que no tendremos que preocuparnos por estos pasos de configuración. Por ahora, todavía es bastante fácil configurar el capacitor. Primero, necesitaremos agregar un archivo llamado capacitor.config.json a la carpeta raíz del proyecto:
capacitor.config.json
{ "bundledWebRuntime": true, "webDir": "www"}
Es importante agregar la propiedad webDir porque es donde Capacitor buscará el código web para agruparlo en la aplicación; de manera predeterminada, está configurado como "público". También deberá agregar las siguientes dependencias a package.json (no eliminar las dependencias existentes):
"dependencies": { //...snip "@capacitor/cli": "latest", "@capacitor/core": "latest"}
y a continuación agregamos lo siguiente en la parte de "scripts"en el mismo archivo (nuevamente, no eliminar las otras entradas):
"scripts": { //...snip "capacitor": "capacitor"},
Una vez que haya realizado estos cambios, instalamos las nuevas dependencias ejecutando:
npm installPara agregar plataformas nativas a las que se dirige, puede ejecutar el siguiente comando para iOS:
npx capacitor add ioso para Android:
npx capacitor add androidAhora veremos lascarpetas de android e ios en la carpeta raíz del proyecto. Esto es todo lo que se requiere para configurar capacitor en una aplicación. Esto supone que ya tienes el entorno de desarrollo apropiado para iOS / Android configurado en tu máquina (es decir, que anteriormente pudiste crear con éxito las compilaciones de Cordova). Si no tiene XCode / Android Studio configurado en su máquina, puede seguir esta guía del equipo Ionic.
4. Crear la aplicación
Tenemos una aplicación que usa Capacitor y ahora solo tenemos que implementarlo en un dispositivo. Como mencioné anteriormente, Capacitor trabaja con cualquier entorno existente. Entonces, para producir una compilación de producción, simplemente hagamos lo que sea que normalmente hariamos.
En el caso de Ionic, podemos crear una compilación de producción ejecutando el siguiente comando:
npm run ionic:build — prodEsto creará una versión de producción de nuestro código en el directorio www. Ahora solo necesitamos copiar este código web en los proyectos de iOS y/o Android creados anteriormente. Para iOS puedes ejecutar:
npx capacitor copy iosy para Android puedemos ejecutar:
npx capcitor copy androidLuego, para compilar las aplicaciones como lo haríamos con un proyecto iOS / Android normal tendríamos que ejecutar el siguiente comando:
npx capcitor openAl elijir ios, la aplicación se lanzará dentro de XCode. A partir de ahí, puede presionar el botón reproducir en la parte superior izquierda para crear una compilación de su aplicación y ejecutarla.
Actualmente el equipo de Ionic apunta a mantener la compatibilidad con tantos plugins de Cordova como sea posible.
Aunque ya hay mucho código compartido en la forma en que creamos las aplicaciones de Ionic hoy en día, con la introducción de Capacitor la gente de Ionic realmente parece estar haciendo la base de código multiplataforma que todos soñamos. Este proyecto debería simplificar en gran medida el proceso de implementación de una única base de código para generar una aplicación Desktop / Web(PWA) / iOS / Android.
