Mira Cómo Hacerlo

Cómo crear y desarrollar aplicaciones de Android con Apache Cordova y SQlite

Escrito por: Adrian Almiñana Navarro
28 enero 2021

En el mundo de las computadoras, es muy común encontrar programas o aplicaciones que no se pueden ver en algunos dispositivos debido a la diferencia entre los sistemas operativos.

Esto se debe a que muchos de ellos no son multiplataforma. Si tenemos una aplicación web y queremos trasladarla a una aplicación de Android, podemos usar Apache Cordova. En este artículo haremos una aplicación para entender cómo funciona una base de datos Sqlite desde Android.

Cómo Crear Aplicaciones para Android con Apache Cordova y SQlite

Índice()
  1. Procedimientos más faciles para Hacer Aplicaciones de Android con Apache Cordova y SQlite.
    1. Comprender de forma sencilla Cómo Funciona una Base de Datos Sqlite desde Android
    2. Instala el Plugin para Trabajar con Sqlite de forma más sencilla.
    3. Realizar el Código Javascript para Gestionar la base de Datos paso a paso
  2. Por qué usar Apache Cordova para Programar en Android cuales son las ventajas y desventajas.
  3. El procedimiento más sencillo para usar Apache Cordova para Programar en Android
    1. Instalar Apache Cordova para Programar en Android paso a paso
    2. Crear de forma sencilla un Proyecto con Apache Cordova para Programar en Android
    3. Finalmente vamos a ejecutar el Proyecto de Apache Cordova

Procedimientos más faciles para Hacer Aplicaciones de Android con Apache Cordova y SQlite.

Una web hecha con HTML 5, JavaScript, CSS 3, puede ejecutarse en diferentes dispositivos a través de Apache Cordova.

De manera informal, el Javascript es lo que se utiliza en los sitios web para hacer esos efectos molones de sliders, mover bloques de contenido (drag&drop), etc etc… básicamente cualquier tipo de interactividad entre el usuario y la página web utiliza Javascrip.

Sí, el código Javascript lo interpreta nuestro navegador web, por lo tanto necesitamos incluirlo en el HTML. Cuando en un navegador se escribe la URL de un sitio web, se hace una petición al servidor que aloja el sitio, para que devuelva la información que debe pintar el ordenador en el navegador web.

Si tenemos una aplicación móvil y queremos almacenar, administrar y recuperar datos de manera eficiente y confiable, Apache Cordova nos proporciona un complemento para administrar bases de datos SQLite.

Por su parte, Android ya incorpora en su arquitectura todas las herramientas necesarias para crear y administrar bases de datos SQLite.

De modo que podamos insertar, modificar, consultar y eliminar datos. Esta base de datos será local, es decir, permanecerá en el dispositivo donde se ejecuta la aplicación.

Ya explicamos en otro artículo de este sitio web la instalación de Apache Cordova, en esto haremos una aplicación para entender cómo funciona una base de datos Sqlite desde Android.

Comprender de forma sencilla Cómo Funciona una Base de Datos Sqlite desde Android

En este caso utilizaremos el terminal de Linux pero Apache Cordova es multiplataforma. Comenzaremos a crear el proyecto desde el terminal y en modo raíz.

Una vez creado agregamos la plataforma, el dispositivo en el que se ejecutará esto permite configurar el emulador en este caso será Android.

Suponemos que en el administrador avanzado de Android tenemos un dispositivo ya configurado, pero configuramos uno que admita Api 19 en adelante, es decir, Android 4.4.2

instalar plugin aplicaciones nuevas

Instala el Plugin para Trabajar con Sqlite de forma más sencilla.

Ahora vamos a instalar el complemento para trabajar con Sqlite, desde la terminal ejecutaremos  el comando que descargará e instalará el complemento.

Vamos a probar la aplicación por defecto, para eso vamos al terminal y escribimos el código que comenzará a compilar la aplicación y si funciona todo tendremos que ver el dispositivo emulado.

Una vez que verifiquemos que la aplicación funciona, comenzaremos a desarrollar nuestro ejemplo. Abriremos el archivo index.html y agregaremos la siguiente biblioteca de JavaScript en el encabezado <head>

Luego modificamos el bloque <div id=”app”> he incorporamos un formulario para introducir datos.

La linea <div id="lista"></div> servirá para mostrar los datos ingresado que se encuentran en la base de datos.

Dentro del directorio css encontramos el archivo index.css abrimos este archivo borramos su contenido y le añadimos el siguiente código de estilos para dar un diseño al formulario.

Después de grabar los dos archivos volvemos a ejecutar la aplicación: cordova emulate android. Deberíamos ver una pantalla donde aparecerá el diseño funcionando.

Realizar el Código Javascript para Gestionar la base de Datos paso a paso

Ahora que tenemos el diseño funcionando, tendremos que llevar a cabo el código javascript para administrar la base de datos.

Para hacer esto, crearemos un archivo en el directorio que se llamará sqlitedb.js y en el <encabezado> lo referenciaremos agregando un código dentro del archivo sqlitedb.js.

Cuando tenemos todo el código compilamos la aplicación desde el terminal con el siguiente código: Córdoba emulate Android.

Cuando se implemente el emulador con la aplicación, comenzaremos a agregar registros a nuestra Agenda y estos se enumerarán a continuación.agregar emulador registros agenda

El dispositivo guarda los datos que introducimos de forma persistente en una memoria virtual. Es decir, que la base de datos se borrará cada vez que ejecutemos la aplicación en el emulador o en un dispositivo real.

Podremos ver los datos que registramos. Para eliminar estos datos, debemos realizar una consulta SQL para eliminar la tabla y volver a crear o eliminar solo los datos, esto será en otro articulo, donde te enseñaremos a descargar SQL para Android hacer consultas, resolver las preguntas más frecuentes y revisar datos.

Pues bien esta es una breve descripción de los pasos para que tengas una idea de que este proceso no es tan complicado o difícil, solo debes tomar en cuenta los pasos básicos antes mencionados.

Así podrás tener muchas aplicaciones hechas por ti mismo con la facilidad que Android te puede dar.

Por qué usar Apache Cordova para Programar en Android cuales son las ventajas y desventajas.

La ventaja de usar estas herramientas radica en que utiliza recursos de interfaz como Jquery Mobile o Dojo Mobile que permite un desarrollo nativo pero en HTML, CCS y la muy popular Javascript.

En resumen el uso de estas herramientas te permite que si se tiene una aplicación web se puede convertir en una aplicación nativa que pueda usarse en Android. Esto ya que la web de Apache Cordova cumplirá las funciones de un servidor web en nuestro sistema Android.

Esta herramienta nos da la posibilidad de crear aplicaciones móviles que se ejecutarán localmente en el dispositivo móvil y se basarán en el diseño y desarrollo web.

Es por ello que con Apache Cordova podemos acceder a través de Javascript a las funciones del dispositivo móvil. Esto incluye cosas como cámaras, datos y conexiones. Wi-Fi o redes, teclado o sonido, geolocalización y otros disponibles.

El procedimiento más sencillo para usar Apache Cordova para Programar en Android

Para este tutorial usaremos Netbeans 8.0.2 que viene con Apache Cordova instalado, pero también veremos cómo instalarlo desde cero. Esto para poder usarlo con cualquier otro editor, incluso con uno tan simple como Notepad ++ o Bluefish.

Es necesario tener Android sdk, Android Device Manager y Java jre instalados, y también los ejecutables apuntados a las variables del sistema.

Instalar Apache Cordova para Programar en Android paso a paso

Para comenzar debemos instalar node.js, que es un marco que te permite crear un servidor que usa javascript. Este se usa cmo idioma del cliente y Cordova se instala con el administrador de paquetes llamado NPM que forma parte de Node.js.

La instalación se realizará en Linux primero, accederemos al terminal en modo raíz y luego instalamos los paquetes correspondientes. Luego procedemos al instalador Apache Cordova. Para verificar que se haya instalado correctamente.

Podemos escribir en el terminal cordova -v y devolverá la versión instalada de Apache Cordova.

Crear de forma sencilla un Proyecto con Apache Cordova para Programar en Android

Después de la instalación podemos crear aplicaciones con Cordova, para crear una aplicación. Nos ubicamos en un directorio de proyectos que tenemos y desde la terminal escribimos los comandos que logren iniciar la estructura del proyecto.

Luego se debe descargar todos los paquetes que se necesitan y que ya estarán actualizados y que utilizaremos en nuestra aplicación. Cuando hayamos hecho esto podremos ver cómo se ha creado el directorio misapp, dentro de la estructura de la aplicación.

Allí podemos encontrar en la carpeta de plataformas, los archivos necesarios para que Cordova pueda interactuar con los diferentes dispositivos. Aquí agregaremos las plataformas que queremos probar nuestra aplicación.

Esto configurará un emulador válido para Androd versión 19, que es la versión API 19 o Android 4.4 (KITKAT), es decir, podemos emular cualquier dispositivo que ejecute esta versión o una versión inferior.

Algunas plataformas compatibles son Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, en este tutorial nos centraremos en Android.

En el directorio www es donde se desarrollará la aplicación, se alojarán los archivos HTML, CSS, imágenes y Javascript, así como los recursos necesarios para nuestra aplicación.

Recuerde que es una página web que se ejecutará de forma nativa dentro de un servidor y también navegador web incorporado que se ejecutará como una aplicación nativa en Android.

Cuando creamos nuestro proyecto dentro del directorio www, se creará una estructura genérica de proyecto definida. Con el código necesario para ejecutar una aplicación simple del tipo "Hello World".

Finalmente vamos a ejecutar el Proyecto de Apache Cordova

Es por ello que tenemos un ejemplo o una plantilla de una aplicación ejecutable para demostrar que funciona antes. Sin embargo, para poder ejecutar la programación, primero debemos agregar la plataforma o las plataformas.

Si queremos probarlo en dispositivos Android e iOS, usamos un comando dentro del directorio de la aplicación. De este modo se sabrá que esa es la aplicación a compilar. Una vez compilado dentro del directorio nos generará archivos.

Ese será el archivo apk instalable y ejecutable en cualquier dispositivo Android. Para ejecutarlo el directorio de la aplicación debe tener permisos de acceso completos.

Ahora lo ejecutaremos por primera vez con el emulador, así que escribimos en el terminal. Podemos ver el dispositivo genérico que muestra la aplicación. Hacer clic en él y ver la aplicación predeterminada de Apache.

Ahora podemos comenzar a crear nuestra aplicación editando el archivo index.html que se encuentra en el directorio www. El resto del código es HTML5, el archivo cordoba.js tendrá la configuración del servidor. El archivo index.js será donde programaremos nuestro script para dar interactividad a la aplicación.

Cuando haya realizado los cambios, guarde los archivos y vuelva a ejecutar el comando de Android emulate de cordova. Previamente configuramos otro dispositivo en el Administrador de dispositivos Android.

Hasta ahora, se ha podido ver cómo crear aplicaciones con HTML5, CSS3 y Javascript o Jquery para dispositivos móviles. El diseño debe ser pensado como adaptable para que pueda ser utilizado tanto en dispositivos móviles como en computadoras o PC.

Subir