Apache Cordova es un framework de desarrollo móvil de código abierto. Los desarrolladores pueden crear aplicaciones multiplataforma usando tecnologías web estándar: HTML5, CSS3 y JavaScript. La aplicación se ejecuta dentro de un contenedor adaptado para cada plataforma y accede a las funcionalidades del dispositivo mediante enlaces de API compatibles con los estándares, como sensores, datos locales o el estado de la red.
Una única base de código compatible con múltiples plataformas, además es gratuito y de código abierto.
Puedes elegir Apache Cordova si te encuentras en alguno de estos escenarios:
- Eres desarrollador móvil y quieres implementar una misma aplicación en varias plataformas, sin tener que desarrollar por separado para cada lenguaje y cadena de herramientas de cada plataforma;
- Eres desarrollador web y deseas empaquetar una aplicación web para publicarla en las principales tiendas de aplicaciones;
- Eres desarrollador móvil y necesitas combinar componentes nativos con una WebView (ventana de navegador dedicada), para permitir que el código web acceda a las API de bajo nivel del dispositivo. También puedes desarrollar plugins para crear canales de comunicación entre el código nativo y la WebView.
Una aplicación Cordova se compone de varios elementos. La imagen siguiente ofrece una visión general de alto nivel de su arquitectura.
WebView (vista web)
La WebView equipada con las funcionalidades de Cordova puede mostrar toda la interfaz de la aplicación. En algunas plataformas, también se puede integrar como componente dentro de aplicaciones híbridas y trabajar junto con controles nativos.
Web App (aplicación web)
Aquí reside tu código de negocio. La aplicación se implementa en formato de página web, cuyo punto de entrada predeterminado es el archivo local index.html. Esta página carga los recursos necesarios: CSS, JavaScript, imágenes, archivos multimedia y otros elementos. Toda la aplicación se ejecuta en la WebView dentro del contenedor nativo y finalmente se empaqueta para distribuirse en las distintas tiendas de aplicaciones.
Dentro del contenedor hay un archivo fundamental: config.xml. Almacena la información básica de la aplicación y define todos los parámetros de ejecución, por ejemplo, si se permite alternar entre modo vertical y horizontal de pantalla.
Plugins
Los plugins son una pieza esencial del ecosistema de Cordova. Actúan como puente para habilitar la comunicación entre Cordova y el código nativo, encapsulan distintas API estándar del dispositivo y permiten que JavaScript invoque código nativo.
El equipo oficial de Apache Cordova mantiene un conjunto de plugins básicos que proporcionan interfaces para acceder a las funciones fundamentales del dispositivo: estado de la batería, cámara, contactos, entre otros.
Además de los plugins básicos oficiales, existen multitud de plugins de terceros que encapsulan funciones extendidas no disponibles en todas las plataformas. Puedes buscar plugins de Cordova en plataformas especializadas o mediante npm. También puedes crear tus propios plugins siguiendo la guía de desarrollo. Un caso típico: establecer comunicación entre Cordova y componentes nativos personalizados.
Aviso: los proyectos nuevos de Cordova no incluyen ningún plugin por defecto, esta es la regla vigente en las versiones más recientes. Tanto los plugins básicos como los de terceros deben instalarse manualmente y de forma explícita.
Cordova no proporciona controles de interfaz ni frameworks frontend MV. Solo ofrece un entorno de ejecución para alojar el código web. Si necesitas componentes de interfaz o un framework de arquitectura frontend, tendrás que elegirlo e integrarlo tú mismo en el proyecto.
Dos flujos de desarrollo
Cordova ofrece dos flujos de trabajo principales para crear aplicaciones móviles. En muchos casos ambos métodos sirven para alcanzar el objetivo, aunque cada uno tiene ventajas propias:
Flujo multiplataforma (herramienta de línea de comandos CLI)
Ideal para proyectos con muchas plataformas destino, donde apenas se requieren adaptaciones específicas para cada plataforma. La herramienta principal es cordova CLI. La CLI es una herramienta de alto nivel capaz de compilar el proyecto para varias plataformas a la vez y ocultar los detalles de los scripts internos. Copia los recursos web comunes en las subcarpetas de cada plataforma, configura automáticamente cada entorno, ejecuta scripts de compilación para generar paquetes de instalación y ofrece una interfaz de comandos unificada para gestionar los plugins.
Flujo específico por plataforma
Adecuado para desarrollos centrados en una única plataforma, cuando se requieren modificaciones profundas en el proyecto
Caso de uso típico: combinar componentes nativos personalizados con una WebView de Cordova dentro de una aplicación
Elige este flujo si debes modificar directamente los archivos del proyecto dentro del SDK de la plataforma objetivo.
Este flujo se basa en scripts internos propios de cada plataforma y usa la herramienta independiente Plugman para gestionar los plugins. Aunque también sirve para desarrollos multiplataforma, el coste es mayor: no existe una herramienta centralizada de alto nivel, cada plataforma debe compilarse por separado y hay que mantener las configuraciones de plugins de forma independiente.
Una vez cambias del modo CLI al modo SDK de plataforma + scripts internos, no se puede volver atrás.
La CLI mantiene un código fuente multiplataforma común y sobrescribe el contenido de las carpetas de plataforma en cada compilación. Si quieres conservar tus modificaciones sobre los archivos de las carpetas de plataforma, debes pasar al modo de scripts internos. Este modo ya no lee el código web común y usa directamente el código independiente almacenado en cada carpeta de plataforma.
Instalación de Cordova
El método de instalación depende del flujo de desarrollo que selecciones:
Tomaremos como ejemplo el flujo multiplataforma mediante la CLI.
La herramienta de línea de comandos de Cordova (CLI) se distribuye como paquete npm.
Sigue estos pasos para instalar la CLI de cordova:
- Descarga e instala Node.js. Una vez terminada la instalación, deberías poder ejecutar los comandos
nodeynpmdirectamente en la terminal. - (Opcional) Si aún no tienes Git instalado, descarga e instala el cliente Git. Después de la instalación, podrás ejecutar el comando
giten la terminal. La CLI de Cordova y npm llaman a Git cuando necesitan descargar recursos desde una dirección de repositorio Git. - Instala el módulo cordova usando la herramienta npm incluida con Node.js; npm se encargará de la descarga automáticamente.
Instalar Node.js
Instalar Node.js es sencillo. Descarga el archivo msi (para sistemas Windows) y haz doble clic para iniciar la instalación, basta con seguir los pasos predeterminados. Cuando termine la instalación
Abre una terminal CMD para comprobar que la instalación se realizó correctamente
Escribe estos dos comandos. La instalación solo será válida si ambos muestran un número de versión (como se ve en la imagen siguiente)
node -v
npm -v
Tras instalar Node.js correctamente, procedemos a instalar Cordova
Sistemas macOS / Linux:
npm install -g cordovaUsuarios de macOS y Linux: si instalas herramientas en directorios con restricciones de permisos como /usr/local/share, puede que necesites añadir sudo antes del comando npm.
Sin embargo, si usas gestores de versiones como nvm / nave o el directorio actual tiene permisos de escritura, no hará falta usar sudo.
Se recomienda evitar usar npm junto con sudo siempre que sea posible, para prevenir problemas de permisos y errores al instalar paquetes.
Es preferible usar un gestor de versiones Node.js como nvm (Node Version Manager) o nave; normalmente no necesitarás sudo al instalar paquetes.
Sistema Windows:
C:\>npm install -g cordovaEl parámetro -g indica una instalación global de Cordova. Si omites este parámetro, el paquete solo se instalará en la subcarpeta node_modules del directorio actual.
Cuando termine la instalación, ejecuta simplemente cordova (sin parámetros) en la terminal. Si se muestra la información de ayuda, la instalación ha tenido éxito.
Durante la instalación aparecerá el mensaje “added 217 packages in 14s”
Comprobar la instalación
cordova -vSi se muestra un número de versión (por ejemplo 13.0.0), Cordova está listo para usarse.
Requisitos del sistema y compatibilidad de versiones
| Versión de Cordova CLI | Versión mínima compatible de Node.js |
|---|---|
| 13.x | >=20.17.0 |
| 12.x | >=16.13.0 |
| 11.x | >=12.0.0 |
| 10.x | >=10.0.0 |
| 9.x | >=6.0.0 |
La instalación ha finalizado. Ahora podemos empezar a aprender Cordova.
Introducción e instalación