Antes de seguir navegando, pincha aquí si quieres aceptar el uso de cookies y cerrar este mensaje.

Volver al inicio
Windows Internet Ofimática Smartphones Linux / Mac Ciberseguridad
Mostrar/Ocultar Menú
Windows Internet Ofimática Smartphones Linux / Mac Ciberseguridad

Curso gratuito para crear Apps Android

En este primer curso que voy a lanzar en esta web, vamos a ver cómo podemos crear una aplicación Android para ofrecer información sobre alguna temática o promocionar pequeños negocios.

La aplicación se va a crear utilizando el framework Apache Cordova y para poder seguir el curso será necesario contar con los conocimientos básicos de desarrollo web (HTML, CSS, JS, PHP...)

Además, vamos a necesitar un equipo con Windows (se puede hacer también en otros S.O pero vamos a verlo en Windows), un móvil Android en el que hacer pruebas, un hosting muy básico para el backend de la aplicación, y una licencia de desarrollador o 25$ para comprarla (de por vida) y poder publicar la app en el Play Store

El curso se va a dividir en 7 apartados en los que se va a cubrir todo el proceso, desde la descarga de las herraminetas y configuración del entorno para desarrollar, crear la app, añadirle funcionalidades, probarla y subirla al Play Store

Descargar Android SDK y preparar el entorno

Vamos a empezar descargando Android Studio desde este enlace y lo instalamos (siguiente, siguiente...)

Al iniciar Android SDK dejamos selecionad la opción de no importar ajustes y pinchamos en ok

Nos preguntará si queremos que se envie información del uso de Android Studio a Google, que cada uno elija lo que quiera, no es importante esto

Nos aparecerá la pantalla de bienvenida de Android SDK, pinchamos en siguiente

Dejamos la opción standard para que se instalen todos loa ajustes y opciones más habituales

Elegimos el aspecoto que queramos que tenga el editor (no es importante ya que no será necesario utilizarlo luego)

Nos aparecerá el resumen de lo que se va a instalar y solo tenemos que pinchar en finalizar

Una vez termine la descarga y instalación, ya tendremos en el equipo todas las librerías que va a utilizar por debajo Apache Cordova para hacer funcionar nuestra futura app, pero la instalación por defecto nos habrá descargado lo necesario para correr la app solamente en la versión más actual de Android, si queremos que sea comptabile con algunas versiones anteriores (algo muy recomendable) habrá que añadir la versión mínima que queramos, en mi caso el instalador automático me ha instalado lo necesario para correr apps en Android 10, pero yo haré que se puedan correr en Android 7 y superiores, para elo en la pantalla inicial de Android Studio que se nos habrá abierto, vamos en la parte de abajo a configure - SDK Manager , marcamos la versión que queramos y OK

Ahora es momento de instalar NodeJS , ya que vamos a utilizar su gestor de paquetes npm para descargar cordova (es decir la plantilla base de nuestra app), lo descargamos desde este enlace , y lo instalamos (siguiente, siguiente...)

Seguimos con el SDK de JAVA, para instalarlo, lo descargamos de este enlace (nos pedirá registrarnos pero son 2 minutos y es gratis) y lo instalamos (siguiente, siguiente... )

Seguimos con Gradle que es el gestor de dependencias de Java, lo podemos descargar de este enlace , lo descomprimimos, nos llevamos todo el contenido de la carpeta Gradle-x.x.x a C:\Gradle y añadimos C:\Gradle\bin a las variables de entorno de Windows

Ahora, para terminar con el PC solo nos quedaría descargar Apache Cordova, que cómo hemos comentado es la estructura inicial que utilizaremos para cada app que hagamos, y crear una carpeta para guardar las apps, esto lo podemos hacer con los siguientes comandos desde la CMD de Windows

npm install -g cordova
mkdir C:\apps

Y en el móvil que vayamos a utilizar para crear las apps hay que habilitar la depuración USB, para ello vamos a Ajustes - información del teléfono y tocamos 10 veces seguidas sobre número de compilación (veremos que entonces nos aparece un mensaje indicando que se han habilitado las opciones de desarrolador)

Volvemos a Ajustes y vamos ahora a opciones de desarrollo y ahí habilitamos depuración USB

Hecho esto ya tendremos todo listo para crear la primera app

Crear app Android con Apache Cordova

Antes de seguir, comentar que en este curso, a modo ejemplo vamos a crear la aplicación de una peluquería.

Para crear la app, siguiendo en el CMD de Windows en la carpeta que hemos creado antes, ejecutamos el siguiente comadno

cordova create peluqueriabcn bcn.peluqueria.app PeluqueríaBCN

Despues del create ponemos en primer lugar el nombre de la carpeta donde se creará la app, luego el identificador de dominio reverso (tiene que tener esta estructura de xxx.xxx.xxx y podemos poner lo que queramos), y por último tenemos el nombre de la app, como se verá en el menú del teléfono una vez instalada.

Nos preguntará si queremos enviar información de uso, ponemos lo que queramos y ahora pasamoa a añadirle a la app todo lo necesario para que funcione en Android, para ello ejecutamos este comando

cd peluqueriabcn
cordova platform add android

Llegados a este punto, si todo ha ido bien la aplicación ya podría ejecutarse en el móvil, así que para probarla, con el móvil conectado por USB al PC lanzamos el siguiente comando

cordova run android

La primera vez que ejecutemos el comando, en lugar de abrir la app directamente, nos pedirá en el móvil permitir la depuración USB desde el equipo en el que estamos trabajando, marcamos la opción de permitirlo siempre y le damos a aceptar

A partir de aquí ya tendrmeos la app corriendo en el móvil con la plantilla por defecto

Ahora, si nos fijamos en el menú de aplicaciones del teléfono, veremos que la app tiene el icono de Apache Cordova, lo último que vamos a hacer en este apartado del curso es ponerle nuestro propío icono, para ello tenemos que poner una imagen en PNG con fondo transparente de las siguientes medidas en su carpeta correspondiente:

Además de estas carpetas, dependiendo de las versiones de Android para las que hagamos la app compatible puede haber más carpetas y tamaños, es cuestión de ir buscando los iconos que ya hay, ver que tamaño tienen y reemplazandolos por el nuestro.

Volvemos a lanzar la aplicación al teléfono, y al cerrarla miramos en el menú y veremos el cambio:

cordova run android

Creación de una Home con logo, botones de redes sociales, mapa, whatsapp...

Ahora vamos a empezar quitando todo aquello que no necesitamos de la app plantilla que tenemos:

Para ello, vamos a la carpeta www y abrimos el index.html con nuestro editor preferido, nos sirve desde los más completos hasta Notepad++, y quitamos todo lo que hay dentro del DIV con las clase app

A continuación, borramos todo el contenido del archivo index.js que encontraremoe en /www/js , borramos la imagen logo.png de /www/img y borramos también todo el contenido del archivo index.css ubicado en /www/css

Ya con todo limpio, vamos a ponernos con el HTML y CSS del menú principal que tendremos en la pantalla de inicio de la app, en este ejemplo vamos a hacer algo bastante sencillo, aquí podéis verlo:

A la hora de hacer el CSS hay que tener en cuenta que cada móvil tendrá una resolución, por lo que igual que cuándo hacemos la versión móvil de una web, tendrmeos que utilizar porcentajes

Al final del tutorial, encontraréis la descarga de un ZIP con todas las imagenes, archivos HTML, hojas de estilo CSS y scripts que vaya utilizando, pero aquí sabiendo HTML y CSS cada uno puede probar y hacerlo tan complejo cómo quiera.

Los únicos detalles que me gustaría comentar son los siguiente:

Los botones de productos y pedir cita son enlaces interno a otros archivos HTML que colocaremos en la misma carpeta más adelante.

El botón de ubicación al colocar un enlace directo a Google Maps, y estar desde el móvil, hace que solo con tocarlo ya se abra Google Maps habiendo localizado la peluquería en el mapa, para sacar este enlace buscamos el local desde el ordenador, le damos a compartir y a copiar enlace

Los enlace de teléfono y email son enlaces normales con los prefijos tel y mailto para forzar al teléfono a llevarnos a la aplicación de llamadas y de envío de correo respectivamente.

Los botones de WhatsApp y Telegram son enlaces a los dominios wa.me y t.me que reciben respectivamente el usuario de Telegram de la pelquería y el número de teléfono de WhatsApp, solo con tocarlos nos abrirán una ventana de chat en cada una de las apps de mensajería

El resto de botones, son enlaces normales a las redes sociales de la peluquería

Creación de un cátalogo para publicar ofertas, nuevos productos y eventos

Uno de los enlaces del menú que hemos creado en el punto anterior, nos lleva a un nuevo archivo HTML en el que tendremos el catalogo, así que lo primero que haremos será copiar el index.html y guardarlo como catalogo.html (borramos todo el contenido del DIV con la clase app)

En este cátalogo, queremos anunciar algunos productos que vamos a tener en venta en la peluquería, si fuesen siempre los mismos podríamos hacer un diseño estático solo con HTML y CSS, pero la idea es que los dueños de la peluquería puedan ir publicando nuevos productos de forma dinámica, esto nos obliga a tener un backend al que consultar esa información, y desde donde cargar y modificar los productos vía web.

Este backend, va a estar compuesto por una base de datos MySQL (en realidad solo necesitamos una tabla) que sería algo así:

create table productos(
    id integer auto_increment primary key,
    titulo varchar(60),
    descripcion longtext,
    precio decimal(5.2),
    foto varchar(60)
);

Y la parte de aplicación web, que cada uno la puede hacer con la tecnología que prefiera, en este caso para hacer algo sencillo que entienda contra más gente mejor, vamos a utilizar código PHP sin frameworks ni siquiera clases.

En el index vamos a poner la lógica de rutas

En mi caso el formulario de creación de productos ha quedado así (y el de edición casí igual):

Y en el archivo de funciones, meteré las 3 funciones a las que se llama desde el index, las de creación y edición de productos no devolverán nada, y la de consulta de productos, nos dará un JSON con toda la información que será devuelto a la app

Podéis descargar también estos archivos en el apartado de descargas.

Ahora, vamos a recuperar los datos del backend desde la aplicación, para poder conectarnos hay que modificar algunas políticas de seguridad:

NOTA: en las siguientes lineas falta abrir y cerrar las etiquetas access y meta , recordad hacerlo para que todo funcione, si escribo las lineas correctamente las interpreta el navegador y no se visualizan.

Para simplificar lo que es el proceso de hacer las peticiones, vamos a utilizar jQuery, por lo tanto añadimos la librería a la carpeta /www/js y la llamamos desde el catalogo.html , además creamos un segundo archivo llamado catalogo.js que también incluiremos debajo.

Puedes descargar la librería de jQuery desde este enlace

Llegados aquí, antes de seguir, vamos a hacer un inciso (podría ponerse en otro apartado, pero en realidad es bastante corto), y es que ahora que vamos a empezar a utilizar código JS, lo normal es que tengamos errores, y cómo seguro que no quieres andar metiendo alerts por todo el código para ver donde falla, vamos a ver rápidamente cómo ver la consola de JS desde el ordenador aunque la aplicación se esté ejecutando en el teléfono.

Para ello, hay que abrir el modo de inspección de Google Chrome (no es F12), accedemos desde chrome://inspect y pinchamos en Inspect en el teléfono que estemos utilizando

Dicho esto,

EN CONSTRUCCIÓN...

Enviar notificaciones Push a los usuarios de la app

EN CONSTRUCCIÓN...

Hacer reserva de citas en la app

EN CONSTRUCCIÓN...

Poner publicidad en App con AdMob

EN CONSTRUCCIÓN...

Publicar app en el Play Store

EN CONSTRUCCIÓN...

Descargas

Si quieres resolver cualquier consulta y/o recibir notificaciones sobre los nuevos contenidos que se van a ir subiendo, puedes unirte a nuestro grupo de Telegram