In el mundo en constante evolución de desarrollo de aplicaciones móviles, el surgimiento de las Aplicaciones de Progreso Web (PWAs) ha abierto el camino para nuevos runtimes de plataforma cruzada. Estos runtimes permiten que las aplicaciones basadas en web estén presentes en tiendas de aplicaciones sin depender únicamente de code nativo. CapacitorJSque permite a los desarrolladores desplegar un sitio web simple como una aplicación en Android, iOS y la web utilizando un único código JavaScript. Este enfoque reduce significativamente los costos de desarrollo y aumenta la eficiencia de codificación.
Esta guía se centrará en crear una aplicación utilizando JavaScript puro sin ningún marco adicional. A pesar de los desafíos de encontrar recursos para el desarrollo de aplicaciones de JavaScript puro en 2021, estamos aquí para proporcionarle una tutoría integral sobre la creación de su aplicación y el uso de plugins nativos con CapacitorJS.
‣ Requisitos previos
Antes de comenzar, asegúrese de tener los siguientes herramientas instaladas:
- Node.js (v14.16.1) o superior
- NPM (v7.6.2) o superior
- Android Studio para el desarrollo de aplicaciones de Android
- Xcode para el desarrollo de aplicaciones de iOS (solo macOS)
Nota: El desarrollo de aplicaciones de iOS solo es posible en un dispositivo de macOS.
‣ Configuración de su proyecto Capacitor
Para crear una aplicación Capacitor, navegue hasta su carpeta deseada y ejecute el siguiente comando en su terminal:
npm init @capacitor/appSiga las instrucciones para instalar el paquete y configurar su proyecto. Con Capacitor v3, su carpeta 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, está listo para proceder.
‣ Reestructuración del proyecto
Usaremos Vite para empaquetar nuestros archivos JavaScript, así que reestructuremos nuestro proyecto según corresponda:
- Crear una carpeta nueva
srcen el directorio principal. - Crear un archivo de script nuevo
index.jsensrc/. - Crear el archivo de configuración de Vite
vite.config.jsen el directorio principal. - Eliminar el archivo
capacitor-welcome.jsdewww/js/.
Tu estructura de carpeta nueva debería parecerse a:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Adaptándose a JavaScript puro
Modifiquemos algunos archivos para que funcionen con JavaScript puro:
www/index.html
- Elimine las importaciones de script para Elementos de PWA de Ionic si no está liberando la aplicación como una 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>-
Elimine el
<capacitor-welcome>elemento HTML del cuerpo. -
Actualice la importación de script de
capacitor.jsajs/main.js. Este será nuestro archivo JavaScript empaquetado. -
Elimine el
js/capacitor-welcome.jsimport. Suindex.htmlestá ahora 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')
}
}
}
});capacitor.config.json
En el archivo capacitor.config.json localice la propiedad y cambie su valor a "bundledWebRuntime": true Esto ajusta asegurando que __CAPGO_KEEP_0__ no empaquete los archivos, lo que nos permite usar Vite para ese propósito en su lugar. false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.
With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with pure JavaScript.
‣ Desarrollando Tu Aplicación
Now that the groundwork is laid, you can begin writing your application logic in the src/index.js archivo. Aquí, puedes importar cualquier módulo de Node.js necesario, definir la funcionalidad de tu aplicación y interactuar con los plugins nativos de Capacitor.
Recuerda ejecutar el comando de compilación de Vite para empaquetar tus archivos JavaScript cada vez que hagas cambios:
vite buildEste comando generará el main.js archivo en tu www/js carpeta, que tu index.html archivo referenciará.
‣ Pruebas y Depuración
Capacitor ofrece una forma conveniente de probar tu aplicación en diferentes plataformas. Utiliza los siguientes comandos para abrir tu app en el entorno de desarrollo de la plataforma correspondiente:
Para Android:
npx cap add android
npx cap open androidFor iOS (macOS solo):
npx cap add ios
npx cap open iosFor Web/PWA:
npx cap serveEstos comandos le permitirán ejecutar su aplicación en Android Studio, Xcode o su navegador web, donde podrá probar y depurar según sea necesario.
‣ Conclusión
Desarrollar aplicaciones de múltiples plataformas con CapacitorJS utilizando JavaScript puro es una forma rentable y eficiente de crear aplicaciones para múltiples plataformas con un solo código base. Al seguir esta guía, ha configurado su proyecto, lo ha reestructurado para Vite y ha preparado su aplicación para el desarrollo. Con esta base, está bien encaminado para crear una aplicación robusta y versátil.
Recuerde probar exhaustivamente en todas las plataformas y aproveche los plugins nativos de Capacitor para mejorar la funcionalidad de su aplicación. ¡Feliz codificación!
Siga adelante desde Desarrollando Aplicaciones de Múltiples Plataformas con CapacitorJS: Una Guía Paso a Paso
Si está utilizando Desarrollando Aplicaciones de Múltiples Plataformas con CapacitorJS: Una Guía Paso a Paso para planificar el trabajo de plugins nativos, conecte con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas.
