En el mundo cambiante del desarrollo de apps móviles, el auge de las Progressive Web Applications (PWAs) ha abierto paso a nuevos runtimes multiplataforma. Estos permiten que las apps web estén en las tiendas de apps sin depender solo de code nativo. Una tecnología que lo facilita es apps de CapacitorJS, que permite a los desarrolladores desplegar un sitio web sencillo como app en Android, iOS y la web usando una única base de código JavaScript. Este enfoque reduce significativamente los costes de desarrollo y aumenta la eficiencia de codificación.
Esta guía se centrará en crear una app usando JavaScript puro, sin frameworks adicionales. A pesar de lo complicado que es encontrar recursos para desarrollar apps con JavaScript puro en 2021, aquí tienes un tutorial completo para crear tu app y usar plugins nativos con CapacitorJS.
‣ Requisitos previos
Antes de empezar, asegúrate de tener instaladas las siguientes herramientas:
- Node.js (v14.16.1) o superior
- NPM (v7.6.2) o superior
- Android Studio para el desarrollo de apps en Android
- Xcode para el desarrollo de apps en iOS (solo macOS)
Nota: El desarrollo de apps para iOS solo es posible en un dispositivo macOS.
‣ Configuración de tu proyecto Capacitor
Para crear una aplicación Capacitor, ve a la carpeta deseada y ejecuta el siguiente comando en tu terminal:
npm init @capacitor/appSigue los prompts para instalar el paquete y configurar tu proyecto. Con Capacitor v3, tu directorio de proyecto debería verse así:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdUna vez completada la configuración inicial, ya puedes continuar.
‣ Reestructuración del proyecto
Usaremos Vite para el bundle de nuestros archivos JavaScript, así que reestructuraremos el proyecto de esta forma:
- Crear una nueva carpeta
srcen el directorio principal. - Crear un nuevo archivo de script
index.jsensrc/. - Crear el archivo de configuración de Vite
vite.config.jsen el directorio principal. - Eliminar el
capacitor-welcome.jsarchivo dewww/js/.
Tu nueva estructura de carpetas debería verse así:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Adaptación a JavaScript puro
Vamos a modificar algunos archivos para trabajar con JavaScript puro:
www/index.html
- Elimina las importaciones de scripts para Ionic PWA Elements si no vas a lanzar la app como PWA:
<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>-
Elimina el
<capacitor-welcome>elemento HTML del body. -
Actualiza la importación del script desde
capacitor.jsajs/main.js. Este será nuestro archivo JavaScript bundled. -
Elimina las
js/capacitor-welcome.jsimport. Tuindex.htmlya está listo.
vite.config.js
Para empaquetar nuestros módulos de Node.js con Vite, necesitamos un archivo de configuración que especifique el destino de salida de nuestro script empaquetado. La siguiente configuración tomará el archivo src/index.js y lo empaquetará para producción como www/js/main.js:
import { defineConfig } from 'vite';
import path from 'node:path';
export default defineConfig({
build: {
outDir: path.resolve(__dirname, 'www'),
rollupOptions: {
input: './src/index.js',
output: {
format: 'es',
file: path.resolve(__dirname, 'www/js/main.js')
}
}
}
});archivo capacitor.config.json
En el capacitor.config.json archivo, localiza la propiedad "bundledWebRuntime": true propiedad y cámbiala a false. Este ajuste asegura que Capacitor no empaquete los archivos, permitiéndonos usar Vite para ese propósito en su lugar.
Con estos cambios, la configuración básica de tu aplicación Capacitor está lista y puedes empezar a desarrollar tu app con JavaScript puro.
‣ Desarrollo de tu App
Ahora que la base está lista, puedes empezar a escribir la lógica de tu aplicación en el archivo src/index.js . Aquí puedes importar cualquier módulo de Node.js necesario, definir la funcionalidad de tu app e interactuar con los plugins nativos de Capacitor.
Recuerda ejecutar el comando de build de Vite para empaquetar tus archivos JavaScript cada vez que hagas cambios:
vite buildEste comando generará el main.js archivo en tu www/js directorio, al cual tu index.html archivo hará referencia.
‣ Testing y Debugging
Capacitor ofrece una forma práctica de probar tu aplicación en varias plataformas. Usa los siguientes comandos para abrir tu app en el entorno de desarrollo de cada plataforma:
Para Android:
npx cap add android
npx cap open androidPara iOS (solo macOS):
npx cap add ios
npx cap open iosPara Web/PWA:
npx cap serveEstos comandos te permitirán ejecutar tu aplicación en Android Studio, Xcode o tu navegador web, donde podrás testear y debuguear según necesites.
‣ Conclusión
Desarrollar aplicaciones multiplataforma con CapacitorJS usando JavaScript puro es una forma eficiente y económica de crear apps para varias plataformas con un único codebase. Siguiendo esta guía, ya has configurado tu proyecto, lo has reestructurado para Vite y lo has preparado para el desarrollo. Con esta base, estás listo para construir una aplicación robusta y versátil.
Recuerda testear a fondo en todas las plataformas y aprovechar los plugins nativos de Capacitor para mejorar la funcionalidad de tu app. ¡Feliz coding!
Continúa con Desarrollando Apps Multiplataforma con CapacitorJS: Una Guía Paso a Paso
Si estás usando Desarrollar apps multiplataforma con CapacitorJS: guía paso a paso para planificar el trabajo con plugins nativos, conéctalo con Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Añadir o actualizar plugins para el detalle de implementación en Agregar o actualizar plugins, Alternativas a plugins de Ionic Enterprise para el flujo de trabajo en Alternativas a plugins de Ionic Enterprise, y Native Builds de Capgo para el flujo de trabajo del producto en Capgo Native Builds.
