Creando aplicaciones móviles con Ext JS y Capacitor

Introducción

Las aplicaciones móviles modernas exigen experiencias de usuario enriquecidas, compatibilidad multiplataforma y ciclos de desarrollo rápidos. En este documento, aprenderás cómo se pueden combinar Ext JS y Capacitor para crear potentes aplicaciones móviles de nivel empresarial utilizando tecnologías web. Ext JS te proporciona un framework integral para construir interfaces de usuario responsivas y ricas en funciones, mientras que Capacitor permite que tus aplicaciones se ejecuten sin problemas en dispositivos iOS y Android conectando aplicaciones web con la funcionalidad nativa de los dispositivos móviles.

Requisitos de Software

Antes de comenzar, asegúrate de que tu entorno de desarrollo tenga las siguientes herramientas instaladas y configuradas:

  • Node.js y npm: Necesarios para la gestión de paquetes y para ejecutar la interfaz de línea de comandos (CLI) de Capacitor.
  • Un proyecto Ext JS funcional en Modern Toolkit: Necesitarás una versión compilada de tu aplicación (ya sea un build de prueba testing o de producción production) lista para ser empaquetada.
  • Capacitor CLI & Core: Necesarios dentro de tu proyecto para conectar tu aplicación web con las plataformas nativas.
  • Android Studio: Necesario para compilar, ejecutar y emular la versión de Android de tu aplicación. 
  • (Nota: Android Studio agrupa y gestiona automáticamente Gradle a través del Gradle Wrapper, por lo que no es necesaria una instalación global por separado).

Tener un proyecto Ext JS funcional

Para obtener la mejor experiencia móvil con Capacitor, se recomienda encarecidamente que tu proyecto Ext JS utilice el Modern toolkit, ya que está específicamente optimizado para dispositivos táctiles, diseños fluidos y rendimiento móvil. 

Antes de integrar Capacitor, debes tener lista una versión compilada de tu aplicación. Necesitas generar un build de prueba o de producción para asegurarte de que todos tus activos (assets) y código estén correctamente minificados y empaquetados. 

Asegúrate de haber ejecutado el comando de compilación al menos una vez en el directorio de tu proyecto: sencha app build production o sencha app build testing.

Instalar Capacitor en tu proyecto

Capacitor se instala como una dependencia local por proyecto. Puedes elegir instalar e inicializar Capacitor directamente en la carpeta raíz de tu proyecto Ext JS, o dentro de una subcarpeta dedicada (ej., mobile-app/) si prefieres mantener tu configuración móvil nativa estrictamente separada de tu espacio de trabajo web. 

Sigue estos pasos para inicializar e instalar Capacitor en el directorio que elijas:

Inicializar npm

Navega a tu directorio elegido (raíz o tu nueva subcarpeta) en tu terminal. Ejecuta npm init -y para crear un archivo package.json (que es obligatorio para usar Capacitor) en el directorio del proyecto Ext JS.

Instalar Capacitor

Instala el runtime principal y la interfaz de línea de comandos (CLI) como dependencias usando los comandos:

npm i @capacitor/core

npm i -D @capacitor/cli

Crear un proyecto Capacitor

Crea un proyecto Capacitor usando npx cap init. Necesitarás agregar el nombre y el ID del paquete para la app. Además, debes especificar el directorio de compilación de prueba o producción del proyecto Ext JS como el directorio de activos web (Web Asset Directory).

  • Nombre de la App (App Name): El nombre de tu App
  • Package ID: com.company.appname
  • Directorio de Activos Web (Web Asset Directory): PASO CRÍTICO. Debes apuntar esto al directorio de salida compilado de tu aplicación Ext JS.
  • Si instalaste Capacitor en la carpeta raíz, típicamente es: build/production/TuNombreDeApp
  • Si instalaste Capacitor en una subcarpeta, recuerda usar una ruta relativa apuntando de vuelta a la raíz: ../build/production/TuNombreDeApp

Resumen de Comandos

Proyecto Android

Una vez que Capacitor está inicializado en tu proyecto, el siguiente paso es agregar la plataforma Android, sincronizar tus activos web de Ext JS dentro del contenedor nativo y compilar la aplicación.

Instalar el paquete de la plataforma Android

En el mismo directorio donde inicializaste Capacitor (raíz o subcarpeta), instala el paquete de Android para Capacitor como una dependencia con npm i @capacitor/android.

Crear el proyecto Android

Genera la estructura del proyecto nativo de Android ejecutando npx cap add android. Este comando crea un directorio android/ que contiene todos los archivos nativos necesarios de Java/Kotlin, configuraciones de Gradle y manifiestos de Android.

Sincronizar el proyecto (copia desde producción a la app móvil)

Siempre que realices cambios en tu código Ext JS y ejecutes un nuevo build de producción, debes copiar esos activos web actualizados al proyecto nativo de Android. Haz esto ejecutando npx cap sync.

Compilar y Ejecutar la Aplicación

Tienes dos opciones principales para compilar y probar tu aplicación Android: usar la interfaz gráfica de Android Studio o usar la línea de comandos de Gradle.

Opción A: Abrir en Android Studio

Abre el proyecto en Android Studio con npx cap open android. Android Studio revisará el proyecto y agregará los archivos faltantes si es necesario. (Nota: La primera ejecución podría solicitar crear un archivo local.properties; Android Studio hace esto automáticamente).

Espera hasta que el proyecto esté completamente cargado en Android Studio. 


Una vez cargado, puedes ejecutar la app usando el botón de Play en Android Studio.

Opción B: Usar Gradle para exportar en lugar de Android Studio

Si no quieres usar Android Studio, puedes exportar el APK usando Gradle en la línea de comandos. Ve al directorio android/, luego ejecuta el comando gradle assembleDebug para compilar la app móvil. El APK se genera en la ruta android>app>build>outputs>apk>debug>app-debug.apk.


Resumen de Comandos

Configurando Permisos Nativos (Cámara, Archivos, etc.)

Por defecto, los proyectos generados recientemente para Android e iOS no tienen permisos para acceder al hardware sensible del dispositivo, como la Cámara, el GPS o la Biblioteca de Fotos. Si tu aplicación Ext JS requiere estas características, debes declararlas en los archivos de configuración nativos de cada plataforma; de lo contrario, el sistema operativo bloqueará (crash) tu aplicación por razones de seguridad.

Para Android (AndroidManifest.xml)

Abre el archivo ubicado en android/app/src/main/AndroidManifest.xml. Necesitas agregar las etiquetas <uses-permission> dentro del bloque <manifest>, típicamente justo antes de la etiqueta <application>.

Flujo de Trabajo de Desarrollo Diario

Para aplicar cambios cada vez que modificas tu código Ext JS, sigue este orden:

  • sencha app build production (Recompilar activos web)
  • npx cap sync (Actualizar proyecto nativo)
  • Haz clic en Play en Android Studio nuevamente (o ejecuta gradle de nuevo).

Documentación: https://capacitorjs.com/docs/android

Proyecto iOS

(Nota: Para compilar, ejecutar y desplegar aplicaciones iOS, debes estar trabajando en una máquina macOS con Xcode instalado).

Instalar proyecto iOS

En el mismo directorio donde inicializaste Capacitor, instala el paquete de iOS como una dependencia con npm i @capacitor/ios.

Crear proyecto iOS

Crea el proyecto iOS con npx cap add ios.

Compilar, Depurar y Ejecutar

Sincroniza el código web al proyecto nativo con npx cap sync.

Depurar/crear

Abre el proyecto en Xcode con npx cap open ios. Para ejecutar el proyecto en un dispositivo o simulador puedes usar npx cap run ios.

Resumen de Comandos

Configurando Permisos Nativos (Cámara, Archivos, etc.)

Al igual que en Android, si tu aplicación Ext JS requiere características de hardware, debes declararlas.

Para iOS (Info.plist)

Apple requiere no solo el permiso, sino también una explicación legible por humanos de por qué lo necesitas (este texto se muestra al usuario en la ventana emergente). Abre el proyecto en Xcode, o edita directamente el archivo ubicado en ios/App/App/Info.plist.

Flujo de Trabajo de Desarrollo Diario

Para aplicar cambios cada vez que modificas tu código Ext JS, sigue este orden:

  • sencha app build production (Recompilar activos web)
  • Sincronizar proyecto: npx cap sync
  • Abrir en Xcode: npx cap open ios (Abre en Xcode, luego usa el botón Play para ejecutar en el Simulador/Dispositivo).

Documentación: https://capacitorjs.com/docs/ios

Solución de Problemas (Troubleshooting)

1. Los Cambios No se Reflejan en la App Exportada

Síntoma: Realizaste cambios en tu código Ext JS, exportaste un nuevo APK o IPA, pero la app móvil sigue mostrando la versión antigua.

Solución: Capacitor no observa (watch) ni compila automáticamente tu código web. Debes ejecutar explícitamente el comando de compilación de tu framework (sencha app build production) antes de ejecutar npx cap sync. Si te saltas el comando sync, el proyecto nativo se exportará utilizando activos web desactualizados.

2. Desajustes de Versiones de Paquetes

Síntoma: Ejecutar npx cap sync o intentar compilar en Android Studio/Xcode arroja errores de dependencias o quejas sobre plugins de Capacitor que no coinciden.

Solución: Todos los paquetes principales de Capacitor deben estar exactamente en la misma versión mayor. Abre tu package.json y asegúrate de que @capacitor/core, @capacitor/cli, @capacitor/android y @capacitor/ios compartan el mismo número de versión principal (ej., todos ^5.0.0 o todos ^6.0.0). Elimina tu carpeta node_modules y ejecuta npm install de nuevo si haces cambios.

3. La App Exportada se Cierra Inesperadamente al Acceder al Hardware

Síntoma: El APK o IPA se exporta correctamente y se instala en el dispositivo, pero se cierra/crashea por completo en cuanto activas la cámara, el escáner QR o la subida de archivos.

Solución: Permisos nativos faltantes. Exportar el código web no es suficiente; debes declarar explícitamente el uso del hardware en los archivos de configuración nativos antes de compilar. Agrega las etiquetas <uses-permission> necesarias en android/app/src/main/AndroidManifest.xml o las descripciones de uso específicas en ios/App/App/Info.plist.

4. La Sincronización de Gradle se Congela o Falla al Abrir por Primera Vez

Síntoma: Después de ejecutar npx cap open android, Android Studio se queda atascado cargando o se queja de una ruta del SDK faltante.

Solución: En la primera ejecución, Android Studio necesita generar un archivo local.properties para localizar tu SDK de Android, y descargar la versión requerida de Gradle. Asegúrate de tener una conexión a internet activa, acepta cualquier solicitud de licencia del SDK que aparezca en la esquina inferior derecha del IDE, y deja que la sincronización de Gradle en segundo plano termine por completo antes de intentar generar un APK.

5. Fallan las Compilaciones por Línea de Comandos (Faltan Herramientas CLI del SDK)

Síntoma: Al intentar ejecutar la app vía terminal (usando npx cap run android o comandos de Gradle), la compilación falla con errores que indican que las "herramientas del SDK faltan", "las licencias no están aceptadas", o no se puede encontrar un comando específico, a pesar de que Android Studio está instalado.

Solución: Te faltan las Android SDK Command-line Tools. Abre Android Studio, ve al menú superior y selecciona Tools > SDK Manager. Haz clic en la pestaña SDK Tools en el medio de la ventana. Encuentra "Android SDK Command-line Tools (latest)" en la lista, marca la casilla junto a ella y haz clic en Apply para descargarlas e instalarlas. Una vez instaladas, reinicia tu terminal e inténtalo de nuevo.

Preguntas Frecuentes (FAQ)

P: ¿Puedo compilar y exportar una app iOS (.ipa) directamente desde mi máquina Windows 11?

R: No. Apple requiere estrictamente macOS y Xcode para compilar, firmar y exportar binarios de iOS. Puedes escribir tu código Ext JS, agregar la plataforma @capacitor/ios y ejecutar npx cap sync en una máquina Windows, pero para generar el archivo .ipa real o emular la app, debes transferir el proyecto a una Mac.

P: ¿Capacitor reemplaza a Cordova?

R: No es un sustituto directo, sino una alternativa más moderna. Aunque ambas herramientas te permiten construir aplicaciones móviles multiplataforma usando tecnologías web, Capacitor fue diseñado desde cero para ofrecer una experiencia de desarrollo más moderna. Proporciona un acceso más fácil a los SDK de dispositivos nativos, un mejor rendimiento y te permite tratar tus proyectos de Android e iOS como código fuente real en lugar de artefactos de compilación ocultos.

P: ¿Necesito descargar e instalar manualmente Gradle para exportar apps de Android?

R: No. Capacitor y Android Studio utilizan el Gradle Wrapper. Cuando ejecutas el proyecto, este descarga y utiliza automáticamente la versión exacta de Gradle requerida para la compilación.

P: ¿Cómo exporto un APK de Android desde la línea de comandos sin abrir Android Studio?

R: Puedes usar el Gradle Wrapper incluido para ejecutar un headless build (compilación sin interfaz gráfica) directamente desde tu terminal. Navega al directorio nativo de Android (cd android/) y ejecuta el comando de compilación usando el archivo por lotes de Windows: .\gradlew.bat assembleDebug. El APK compilado saldrá en android\app\build\outputs\apk\debug\.

P: ¿Necesito ejecutar npm install dentro de las carpetas android/ o ios/?

R: Nunca. Capacitor maneja toda la gestión de dependencias nativas automáticamente. Solo ejecutas npm install en la carpeta raíz de tu proyecto web. Cuando ejecutas npx cap sync, Capacitor actualiza CocoaPods (para iOS) y Gradle (para Android) por ti en segundo plano.

Comentarios

Publicar un comentario

Entradas populares de este blog

Aprenda las diferencias: texto enriquecido vs. Texto sin formato

Imagen
  Tanto el formato de texto enriquecido como el de texto sin formato son bastante antiguos y se han utilizado durante muchos años para crear documentos. Ambos formatos son muy populares y editables por la mayoría de los programas de procesamiento. Sin embargo, muchas personas suelen preguntarse cuáles son sus principales diferencias. Hemos compilado esta guía completa para explicar las diferencias entre texto enriquecido y texto sin formato. También hemos resumido sus ventajas y desventajas y enumerado situaciones en las que preferiría un formato sobre el otro. Se pueden utilizar muchos editores para crear tanto texto enriquecido como texto sin formato. Esto no solo incluye procesadores de texto, sino también editores de texto enriquecido de JavaScript.   Tabla de contenido   Texto enriquecido frente a texto sin formato: ¿Qué es el texto sin formato? ¿Por qué debería usar archivos de texto sin formato o txt? ¿Por qué los archivos de texto sin formato son rápid...
Leer más

Eventos Enviados por el Servidor (SSE): Obteniendo Actualizaciones en Tiempo Real en tus Apps

Imagen
Si alguna vez has construido un panel de control (dashboard) o una pantalla de operaciones, conoces el problema. Quieres que los números en pantalla reflejen lo que realmente está sucediendo en el servidor, pero tampoco quieres escribir un bucle de sondeo (polling) que dispare una solicitud cada segundo y sature tu backend, haya cambiado algo o no. Tiene que haber una manera mejor. Para una gran clase de escenarios con muchas actualizaciones, esa mejor manera son los Eventos Enviados por el Servidor (SSE) : una f orma estándar basada en HTTP para que un servidor mantenga una conexión abierta y transmita actualizaciones al cliente a medida que ocurren. Recientemente, RAD Studio 13.1 agregó soporte de primera clase para esto, tanto en el lado del servidor como en el del cliente, por lo que construimos una pequeña prueba de concepto para mostrar cómo se ve esto de principio a fin. Índice de Contenidos ¿Qué significa SSE? SSE en RAD Studio: Los Fundamentos El Lado del Servidor (WebBroker...
Leer más

Delphi en 2025: ¿Por qué sigue siendo clave en entornos empresariales?

Imagen
En un panorama tecnológico dominado por frameworks nuevos cada año, muchos se sorprenden al descubrir que Delphi sigue más vigente que nunca en 2025. Con más de tres décadas de historia, este entorno de desarrollo no solo ha resistido el paso del tiempo, sino que se ha adaptado para responder a las necesidades modernas de las empresas que buscan productividad, estabilidad y multiplataforma real. 1. Productividad sin fricción Una de las principales razones por las que Delphi mantiene su relevancia es su velocidad de desarrollo. Las empresas no solo buscan código eficiente, sino también tiempos de entrega más cortos. Delphi permite crear aplicaciones complejas con menos líneas de código que otros entornos, gracias a su lenguaje fuertemente tipado (Object Pascal) y su entorno RAD (Rapid Application Development), que sigue siendo un referente en cuanto a productividad. El resultado: los equipos entregan proyectos robustos, con menos errores y en menor tiempo, lo que se traduce directamente...
Leer más