¡El equipo de desarrollo de Makeroid lo ha vuelto hacer! En la última release de la herramienta han incluido por fin el componente Cloudinary que nos permitirá poder gestionar de manera muy sencilla el almacenamiento de imágenes, vídeos, audios, etc. en un servidor de Internet.

¿Qué nos hará falta?

• Crear una cuenta en Cloudinary
• Base de datos en tiempo real en Firebase
• Makeroid

Las notificaciones push son aquellas que los clientes móviles reciben sin tener que abrir la aplicación. La tecnología en este caso permite que sea un servidor de internet el que inicie la comunicación con el celular o la tablet sin que el usuario tenga que establecerla a través del inicio manual de la propia app. Son muy útiles ya que permiten el intercambio de mensajes inmediato entre los creadores de la app y las personas que la tienen instalada informando de nuevas versiones, actualizaciones, productos nuevos o cualquier otro dato de interés para el usuario.

En este tutorial vamos a realizar una sencilla prueba de concepto de cómo podemos enviar notificaciones push a todos aquellos usuarios que tengan nuestra app instalada en sus dispositivos. Para conseguirlo utilizaremos Firebase, el servicio de OneSignal y el constructor de aplicaciones basado en MIT App Inventor de nombre Kodular(antes conocido como Makeroid).

¿Has necesitado alguna vez trabajar con MIT App Inventor pero no tienes acceso a Internet? ¿Tu centro escolar o casa no tiene acceso a la red y quieres desarrollar apps?
Para esto Krupong ha desarrollado a partir de los fuentes de MIT App Inventor una versión de la herramienta que no necesita conexión a Internet y además podremos llevarla de manera cómoda en un dispositivo externo(pendrive).

En muchas aplicaciones puede ser útil el hecho de crear o generar un fichero PDF a partir de la interacción del usuario: generador de órdenes de trabajo, creación de informes a partir de un formulario, emisión de facturas, etc. El problema es que, por defecto, MIT App Inventor no es capaz de generar un fichero en este formato.

En este artículo os mostraré como podemos crear de una manera bastante sencilla un fichero PDF usando una API externa. 

¿Has tenido la necesidad de tener una app que guarde lugares y los muestre en un mapa con su correspondiente descripción? Pues este es el objetivo de nuestra app.

Veremos cómo guardar ubicaciones geográficas con el sensor GPS en una base de datos de tipo Firebase y mostrarlas en un mapa a través del componente Maps.

Ten en cuenta que esta app es una modificación de la app Ubicaciones que ya publique hace unas semanas en mi canal de Youtube.

En este caso, utilizaremos Firebase, un sistema de bases de datos adquirido por Google que nos permitirá en tiempo real controlar cualquier tipo de cambio en los valores almacenados. Es tan sencillo de utilizar en App Inventor como TinyDB  con la ventaja de que nuestros datos serán accesibles desde cualquier dispositivo que esté conectado a Internet.

Una de las principales cuestiones con las que nos encontramos cuando trabajamos con aplicaciones móviles es el almacenamiento de datos persistente.

En MIT App Inventor la plataforma nos ofrece los componentes Archivo, TinyBD, MiniWebBD, FusionTablesControl para poder guardar datos y que permanezcan aún cuando la aplicación deje de funcionar.

Uno de los más sencillos de implementar es TinyBD cuya filosofía pasa por asociar el dato que queremos guardar junto a una "etiqueta" de texto.

Esta misma etiqueta será la necesaria para recuperar el valor almacenado.

Para ilustrar el funcionamiento de este sistema de bases de datos sencillo, en el Curso de Aplicaciones Móviles Educativas con MIT App Inventor, hemos codificado una aplicación para almacenar notas.

Os dejo un enlace al vídeo para que, paso a paso, podáis reproducirla y crear vuestra propia aplicación.

Saludos y happy inventing!!!

Jose Luis Núñez

@twajoseluis

Una de las características más importantes que define a MIT App Inventor como plataforma líder de desarrollo de aplicaciones móviles para Android es, además de su facilidad de uso y potencia, la posibilidad de poder conseguir el código fuente de la herramienta para verla, modificarla y ampliarla a tu gusto. La filosofía Open-Source detrás del proyecto beneficia los usuarios viendo constantemente la aparición y evolución de servidores alternativos que complementan al original: App Inventor Ultimate, AppyBuilder, Thunkable, Makeroid y el propio MIOIO App Inventor.

Una de las cuestiones más comunes con las que nos enfrentamos cuando comenzamos a trabajar con App Inventor es desarrollar una aplicación multipantalla con muchas imágenes y ficheros de audio.

Por lo general, el programador novato tiene en la cabeza muchas ventanas, a veces innecesarias, con recursos gráficos y de audio que ocupan mucho espacio al no estar optimizados.

Hablamos casi siempre de aplicaciones que:

• Se detienen "sin motivo aparente"
• Devoran la memoria del dispositivo abriendo una pantalla tras otra sin cerrar la anterior
• No son capaces de generar el fichero APK por exceso de tamaño del proyecto
• Utilizan múltiples pantallas exactamente iguales que lo único que hacen es cambiar la imagen de fondo y poco más.

En este caso es donde nos situamos. Para ello os presento una aplicación desastrosa que nos mostrará los principales defectos anteriores... Por un lado contaremos con audios e imágenes de gran tamaño y por otro, iremos abriendo pantallas y reproduciendo audios sin cerrar las anteriores... En el siguiente enlace puedes descargar nuestra aplicación no optimizada con todos sus recursos para que comprendáis mejor lo que no se debe hacer:

• AppNoOptimizada.AIA

Muchos usuarios de MIT App Inventor necesitan enviar notificaciones push a sus aplicaciones para que el usuario reciba una actualización o cambio en sus datos. Desafortudamente, este tipo de notificaciones constituye una línea de trabajo que aún no está completada pero mientras tanto podemos utilizar notificaciones instantáneas usando el sistema de bases de datos Firebase.
En este artículo os vamos a mostrar cómo usarlo creando una aplicación que envíe una notificación a otra que la reciba. Para ello, diseño aparte, nos hemos centrado en el uso de la herramienta y los principales bloques que nos hacen falta.

En la actualidad el número de dispositivos disponibles en Internet ha superado al número  de personas conectadas. La infraestructura que soporta la comunicación entre todos estos dispositivos es también conocida como el Internet de las Cosas(Internet of Things, IoT).

La necesidad de crear apps que puedan manejar el IoT ha contribuido al desarrollo de una extensión de MIT App Inventor que proporcione una manera sencilla de conectar los dispositivos.

Este tutorial os enseñará como utilizar la placa Arduino/Genuino 101 para leer datos desde un sensor de pulsaciones de corazón(Heart Rate Monitor) utilizando el componente Bluetooth Low Energy(BLE). Si no tienes el sensor original podéis emularlo utilizando un potenciómetro u otro sensor analógico.

El efecto Swipe o "deslizar el dedo" es un efecto bastante común en numerosas aplicaciones móviles.

Recientemente, una alumna del curso de aplicaciones móviles con App Inventor me pregunto cómo podía realizarse y me pareció una consulta muy interesante para realizar una pequeña app de ejemplo.

Lo más sencillo si tenemos una lista de imágenes que queremos mostrar es colocarlas todas con nombres correlativos, esto es: 1, 2, 3 , ...etc. sin olvidarnos por supuesto de su extensión correspondiente ya sea ".png" o ",jpg". En esta prueba de concepto las imágenes son simples números pero vosotros podéis cambiarlas por las que deseéis teniendo en cuenta simplemente el nombre para adecuarla a vuestra app.

Las imágenes las cargaremos sobre un componente de tipo Canvas(Lienzo) y serán desplazadas conforme al movimiento del dedo del usuario. Utilizando dicho lienzo controlaremos el evento Lanzado así como la dirección del dedo del usuario.

Teniendo en cuenta que el dedo lo puede desplazar ligeramente hacia arriba o hacia abajo por eso utilizamos la función valor absoluto y en función de ella incrementaremos o decrementaremos la posición actual del índice sobre la lista que muestra las imágenes. Simplemente como consideración a lo anterior es que tenemos que tener en cuenta que llegados al índice 0 o al índice que tiene el número de imágenes + 1 tendremos literalmente que "dar la vuelta".

Y como dice un amigo al que tengo mucho aprecio, "compartir es vivir", así que os dejo el enlace a la app original para que la descarguéis, probéis y personalicéis como queráis:

• http://ai2.appinventor.mit.edu/?galleryId=5910900437680128 

Happy inventing!

Jose Luis Núñez

@twajoseluis

PD: Para hacer funcionar la app en vuestro entorno de App Inventor aseguraos que este está configurado en idioma español ;-)

Uno de los principales inconvenientes con los que nos enfrentamos cuando realizamos una aplicación es que esta se vea bien en distintos dispositivos con distintas dimensiones de pantallas, densidades de píxeles, etc.

El diseño adaptable o responsive design es un concepto que en el mundo web lleva ya triunfando varios años y es algo también deseable en cuanto hablamos de aplicaciones móviles.

En el Curso de Desarrollo de aplicaciones con App Inventor surgió una consulta de un estudiante que deseaba conseguir este efecto. Me pareció muy interesante y necesaria por lo que me gustaría compartir una posible solución con todos vosotros.

Independientemente de que estéis desarrollando una app de productividad o un videojuego es muy probable que queráis distribuirla y enfrentaros por tanto a la cuestión de qué dimensiones poner en cada elemento y cómo mostrarlos...

En la siguiente aplicación, que NO hace nada más que mostrar unos botones, pretendo ilustrar lo que sería la adaptación a la pantalla de estos componentes que deseo que mantengan sus proporciones.

La idea reside en mantener la relación de aspecto (ancho x alto) utilizando para ello unas simples cuentas matemáticas.

App Inventor proporciona a los desarrolladores la capacidad de extenderlo tanto como se quiera. Se puede hacer desarrollando nuevos componentes o extensiones utilizando el lenguaje de programación JAVA.

El hecho de desarrollar nuevos componentes implica montarte tu propio servidor de App Inventor por lo que la distribución de esos componentes posteriormente en Internet es complicada a menos que finalmente se incluya en el núcleo del software principal o el desarrollador mantenga una "versión privada" de App Inventor. Sin embargo, desde hace poco, como proyecto para desarrolladores se ha abierto una parte de App Inventor, experimental y no incluida en el sitio web principal, donde la gente puede empezar a utilizar sus propias "extensiones" y probarlas sin necesidad de montar tu propio servidor. El sitio web donde es:

• http://extension-test.appinventor.mit.edu/

Y podemos encontrar un conjunto de ellas en:

• http://appinventor.mit.edu/extensions/

Las páginas webs utilizan para comunicarse con nuestros navegadores el protocolo HTTP ó HTTPS.

En nuestra app nos puede interesar en determinadas circunstancias usar HTTP para enviar/recibir datos a/desde un servidor web. Para conseguir esto con App Inventor podemos utilizar el visor web si sólo queremos obtener una página web, por ejemplo, el resultado de una búsqueda, o el componente Web si queremos, por ejemplo, enviar los datos de un formulario de acceso a un sitio web(login).

En Gallery os he dejado una aplicación en App Inventor que pretende ser una prueba de cómo utilizar tanto el visor web como el componente web.

Dicha aplicación presenta un par de simples botones y permite al usuario que busque algo en Google(método GET de HTTP, implementado por un simple visor web) o que mande unos datos de autenticación a un servidor web(método POST de HTTP, implementado por el componente web).

Me parece interesante ilustrar cómo realizar el envío de datos con el componente web ya que son muchas las personas que no tienen muy claro el tema de los bloques, construir las cabeceras HTTP que tienen que poner para mandar datos al servidor y que este los procese, etc.

¡Pero no sólo tenemos estas posibilidades con el componente web!

Además podemos realizar aplicaciones que:

• Envíen/Reciban ficheros completos a un servidor
• Procesen JSON, XML
• Utilicen alguna API del algún tipo
• Soporten cookies, etc.

Un saludo y espero sea útil ;-)

Jose Luis Núñez

@twajoseluis

Con esta aplicación vamos a crear una prueba de concepto de cómo realizar una aplicación de mensajería utilizando el nuevo componente experimental Firebase.

Como podéis ver en la imagen que os adjunto creamos una app multipantalla que muestra una interfaz en la que podemos:

• Crear usuarios y almacenarlos en Firebase
• Consultar los usuarios creados previamente en la base de datos
• Chatear entre los distintos usuarios

Podéis probar el envío y la recepción de mensajes desde el mismo dispositivo utilizando un desplegable que permite seleccionar el usuario...recordad que es una prueba de concepto... o bien desde dispositivos distintos (podemos usar incluso un dispositivo real y el emulador Genymotion si carecemos de otro terminal).

El pasado 18 de febrero el equipo de desarrollo del MIT ha lanzado una nueva versión de la plataforma(nb147) que mejora ciertos aspectos de la misma:

• Añade un par de componentes nuevos: giroscopio y Firebase(experimental)
• Añade nuevas funcionalidades al componente reloj para trabajar con "cálculos" de tiempos.
• Mejora ciertos aspectos de la interfaz gráfica, documentación y uso de la Galería.
• La propiedad de utilizar la cámara frontal se ha eliminado
• El evento de cambio en la ubicación del sensor del mismo nombre ahora no se dispara si la localización es invalida
• Añadido un procedimiento nuevo para ocultar el teclado en el componente Screen también presentes en las cajas de texto. 

Es fundamental que actualicéis vuestra aplicación MIT AI2 Companion ya sea en vuestro dispositivo móvil o en el emulador para poder trabajar con las características nuevas.

Toda la información sobre esta nueva release haciendo clic en este enlace.

Jose Luis Núñez
@twajoseluis

Ejemplo de como utilizar la nueva opción del componente Notifier de App Inventor 2.

Con esta nueva opción podemos lanzar un cuadro de carga, lo cual podemos utilizar para mostrarlo por ejemplo mientras cargamos datos o imágenes.

En este ejemplo le he puesto un reloj de tres segundos el cual se activa al iniciar la screen y desactiva el dialogo al pasar esos tres segundos.

En esta imagen del editor de bloques de App inventor 2, vemos un ejemplo de como sumar dos números los cuales agregamos en dos textboxes, la suma de ellos se mostrará en otro textbox.

En el ejemplo comprobaremos si uno de los dos textboxes están en blanco, si es así en el resultado se mostrará en número que haya escrito en el textbox que no esté en blanco. Si los dos están en blanco, el resultado será cero.

He utilizado un reloj, para que el resultado se haga instantáneo. 

Estos son los Bloques necesarios para poder enviar un mensaje desde nuestra App Android creada con App Inventor 2 utilizando la App Whatsapp.

Para ello necesitamos utilizar el componente ActivityStarter.

Pulsa la imagen para ampliarla.

Lo primero que tenemos que hacer es sustituir la "VersionCode" y "VersionName".

Para hacer esto, abrimos Appinventor y nuestro proyecto, ( Osea el de la App que queremos actualizar).

En la Screen 1, en la paleta de Propiedades ó "Properties" abajo del todo tendremos justo del Title, estas dos opciones ( VersionCode y VersionName) la primera tendrá como número un "1" y la segunda un "1.0".

Pues bien, sustituiremos VersionCode por un "2" y Version Name por el número que queramos por ejemplo: 1.1 ó 2.0 ó 1.1.1 como mas nos guste, pero teniendo en cuenta que una vez actualizada no podremos volver a repetir la versión.

Bien, una vez echo esto. Descargamos el Apk.

Un procedimiento se utiliza para realizar varias acciones llamandolas por ejemplo con un botón, un reloj, etc... en un procedimiento se pueden agregar infinitas acciones.