Desarrollar Aplicaciones Híbridas con CapacitorJS: Una Guía Paso a Paso

En el mundo en constante evolución de desarrollo de aplicaciones móviles, el surgimiento de Aplicaciones de Progreso Web (PWAs) ha abierto el camino para nuevos runtimes de plataforma cruzada. Estos runtimes permiten que las aplicaciones web estén presentes en tiendas de aplicaciones sin depender únicamente de nativos code. CapacitorJSque permite a los desarrolladores desplegar un sitio web simple como una aplicación en Android, iOS y la web utilizando un código JavaScript único. 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 guí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 instalados los siguientes herramientas:

• Node.js (v14.16.1) o superior
• NPM (v7.6.2) o superior
• Android Studio para el desarrollo de aplicaciones Android
• Xcode para el desarrollo de aplicaciones iOS (solo macOS)

Nota: El desarrollo de aplicaciones iOS solo es posible en un dispositivo 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/app

Siga las instrucciones para instalar el paquete y configurar su proyecto. Con Capacitor v3, su 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.md

Una 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 de la siguiente manera:

• Crear un nuevo carpeta src en el directorio principal.
• Crear un nuevo archivo de script index.js en src/.
• Crear el archivo de configuración de Vite vite.config.js en el directorio principal.
• Eliminar el capacitor-welcome.js el archivo desde www/js/.

Su nueva estructura de carpeta 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

‣ Adaptarse a JavaScript puro

Modifiquemos algunos archivos para que funcionen con JavaScript puro:

www/index.html

1. Elimine las importaciones de script para Ionic PWA Elementos 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>

2. Elimine el <capacitor-welcome> elemento HTML del cuerpo.

3. Actualice la importación de script desde capacitor.js Hasta js/main.js. Este será nuestro archivo JavaScript empaquetado.

4. Eliminar el js/capacitor-welcome.js import. Su index.html ya está listo.

vite.config.js

Para empaquetar nuestros módulos Node.js con Vite, necesitamos un archivo de configuración que especifique el destino de salida para 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 capacitor.config.json archivo, localice la "bundledWebRuntime": true propiedad y cambie a false. Esta ajuste garantiza que Capacitor no agrupe los archivos, lo que nos permite utilizar Vite para ese propósito en su lugar.

Con estos cambios, la configuración básica de su Capacitor aplicación está completa, y está listo para empezar a desarrollar su aplicación con JavaScript puro.

‣ Desarrollando su aplicación

Ahora que el trabajo básico está hecho, puede empezar a escribir la lógica de su aplicación en el src/index.js Aquí, puede importar cualquier módulo de Node.js necesario, definir la funcionalidad de su aplicación y interactuar con los plugins nativos de Capacitor.

Recuerde ejecutar el comando de compilación de Vite para empaquetar sus archivos JavaScript cada vez que haga cambios:

vite build

Este comando generará el main.js archivo en su www/js carpeta, que su index.html archivo referenciará.

‣ Pruebas y depuración

Capacitor ofrece una forma conveniente de probar su aplicación en varias plataformas. Utilice los siguientes comandos para abrir su aplicación en el entorno de desarrollo de la plataforma correspondiente:

Para Android:

npx cap add android
npx cap open android

Para iOS (solo macOS):

npx cap add ios
npx cap open ios

Para Web/PWA:

npx cap serve

Estos 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.

‣ Conclusiones

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. ¡Disfruta codificando!

Sigue adelante desde Desarrollar Aplicaciones de Plataforma Cruz con CapacitorJS: Una Guía Paso a Paso

Si está utilizando Desarrollar Aplicaciones Híbridas 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 Ionic Enterprise Plugin Alternatives, y Capgo Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas.