Apache Cordova es un marco de desarrollo móvil híbrido que se utiliza para crear aplicaciones móviles a partir de aplicaciones web progresivas. Sin embargo, Apache Cordova se usa para crear aplicaciones móviles usando la vista web y no se puede usar para el desarrollo de aplicaciones nativas de Android. La desventaja de las aplicaciones de vista web es que su rendimiento es más lento que el de las aplicaciones nativas; sin embargo, esta diferencia no es suficiente para tener cambios notables en las velocidades de rendimiento.
Conseguir Apache Cordova
Primero, instale Node.js para las especificaciones de su computadora respectiva y configure las variables de entorno npm.
Node Package Manager (npm) se utiliza para instalar, actualizar o desinstalar fácilmente paquetes en su computadora. Tenemos que instalar los paquetes Cordova. Escribimos los siguientes comandos:
npm install -g cordova
-g indica que el paquete se instala globalmente, lo que significa que puede configurar su proyecto Cordova en cualquier lugar de su computadora.
Luego descargue el SDK de Android e instálelo en su computadora.
Ha instalado con éxito Cordova y Android SDK en su computadora. Ahora vamos a crear nuestro proyecto. En este artículo construiremos una aplicación de reloj simple usando HTML, CSS y JavaScript.
Creando un proyecto
Vaya a la carpeta en la que desea crear su proyecto. Cree su primer proyecto con el siguiente comando:
cordova create projectDirectory com.example.name ProjectName
com.example.name es el ID del proyecto, ProjectName es el nombre del proyecto y projectDirectory es el directorio que ahora se crea para construir nuestra aplicación Cordova. Cambie el directorio de trabajo al proyecto que acaba de crear.
cd projectDirectory
Ahora agreguemos nuestras plataformas. Cabe señalar que Cordova es un marco de desarrollo de aplicaciones híbridas, lo que significa que la misma base de código se puede implementar en múltiples plataformas, como escritorio de Windows, teléfonos Android, teléfonos iOS, etc. En este ejemplo, vamos a implementar en Android. .
cordova platform add android
Nota: si desea desarrollar para Apple iOS, debe tener XCode, que solo se puede instalar en computadoras de escritorio MacOS.
Ahora hemos creado con éxito un proyecto y agregado todos los módulos necesarios para Android.
Codificando nuestra aplicación
Todos los archivos de código que usaremos se crearán en una carpeta llamada www . Aquí podemos ver un archivo index.html, un archivo js/index.js y un archivo css/index.css. Nuestro punto de entrada será index.html. Apache Cordova ya habría creado una plantilla de inicio simple. No necesitaremos eso ya que vamos a comenzar a codificar desde cero. Entonces, abra un editor de código y elimine todo el código de index.html, js/index.js y css/index.css.
Ahora hagamos un HTML simple que tenga un contenedor div donde se muestre el reloj y un texto de encabezado. Vinculemos nuestra hoja de estilo y JavaScript al HTML. Ahora tenemos la estructura de vista básica de la aplicación, pero aún no hace nada. Entonces, para agregar funcionalidad, escribamos algunos códigos javascript.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Geeks For Geeks Clock</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div> <h2 id="Text">Geeks For Geeks</h2> <div id="ClockDisplay"></div> </div> <script src="js/index.js"></script> </body> </html>
Agreguemos algunas funciones en js/index.js. Cree una función llamada showTime que tome el objeto Date y establezca el texto interno del contenedor en el que ClockDisplay reside en time . Además, establezca el intervalo en el que se debe repetir la función. Aquí, la función se repite cada 1000 ms o 1 segundo.
Javascript
function showTime() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var time = h + ":" + m + ":" + s;
document.getElementById("ClockDisplay").innerText = time;
document.getElementById("ClockDisplay").textContent = time;
}
setInterval(showTime, 1000);
Ahora tenemos un reloj de aspecto muy aburrido. Así que agreguemos algo de CSS en css/index.css para que se vea mejor.
CSS
html {
height: 100%;
}
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
font-family:'Open Sans', sans-serif;
}
#ClockDisplay {
width: 80%;
font-size: 20px;
text-align: center;
font-size: 19vw;
color: #acfac1;
/*text-shadow: 0 0 5px #fff, 0 0 10px #fff,
0 0 15px #82e896, 0 0 20px #82e896,
0 0 25px #82e896, 0 0 30px #82e896, 0 0 35px #82e896;*/
}
#Text {
color:white;
font-family:'Open Sans', sans-serif;
text-align: center;
font-size: 30px;
}
Abra index.html en un navegador para ver si funciona. Ahora tenemos que pasar a la siguiente etapa, es decir, construir el paquete de aplicación de Android (o archivo .apk).
Construyendo nuestra aplicación
Apache Cordova simplifica enormemente la creación de aplicaciones. Abra la terminal y cambie el directorio al directorio del proyecto Cordova. Simplemente escriba los siguientes comandos para construir:
cordova build android
El proceso de compilación llevará algún tiempo y guardará el archivo de salida en «(carpeta del proyecto)\proyecto\plataformas\android\aplicación\construir\salidas\apk\depuración» como » aplicación-depuración.apk» .
Transfiere este archivo a tu móvil e instálalo.
Este artículo tiene como objetivo enseñar los conceptos básicos de Cordova, sin embargo, el mismo puede extenderse para construir aplicaciones mucho más complejas.
Publicación traducida automáticamente
Artículo escrito por rahulhegde97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA