Monitor de pulsaciones del corazón con Arduino/Genuino 101

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.

Requerimientos

Leer más

Efecto Swipe(deslizar el dedo) en App Inventor

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:

  

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 ;-)

9 comentarios

Responsive Design en App Inventor (I). Botones que se adaptan

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.

 

Calculos matemáticos

Leer más 4 comentarios

Extensiones para App Inventor

Ejemplo de uso de una extensión en App Inventor

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:

Y podemos encontrar un conjunto de ellas en:

 

Información importante

Leer más 1 comentarios

El componente web en App Inventor

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

Leer más 10 comentarios

WhatsAppInventor ¡App Inventor con Firebase!

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).

Leer más 12 comentarios

Genymotion

Introducción

El emulador Android integrado con App Inventor no se caracteriza precisamente por su rapidez. Además, a raíz de las últimas versiones es necesario también actualizar la aplicación MIT AI2 Companion con lo que más de un usuario puede desesperarse al utilizarlo.

 

Genymotion es un software comercial que nos permite utilizar una gran variedad de dispositivos a través de la emulación. En este artículo veremos cómo podemos utilizarlo junto con App Inventor siguiendo una serie de sencillos pasos:

Leer más 0 comentarios

¡App Inventor ha lanzado una nueva release(nb147) !

Firebase logo

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

Leer más 0 comentarios

PANTALLAS QUE SOLO SE VEN UNA VEZ

Como hacer que un texto o cualquier otra cosa solo nos aparezca la primera vez que iniciamos la App.

Hay veces que queremos que nos aparezca algo en nuestra App, pero solo la primera vez que inicia esta.

¿Como podemos hacerlo con App Inventor 2?

Pues necesitamos tinyDb.

En este ejemplo haremos que la primera vez que inicie nuestra App aparezca un texto, pero después las siguientes veces ya no veremos ese texto.

 

Leer más 1 comentarios

Plantilla Aplicación Android creada con App inentor

Veamos como hacer una aplicación personalizada con App Inventor 2

En este ejemplo voy a crear una pequeña App para los resultados de loterías.

Leer más 1 comentarios

Abrir Google Play con App Inventor

Veamos como abrir Google Play desde App Inventor 2 con ActivityStater

Componentes necesarios

Leer más 4 comentarios

Convertir o transformar proyectos creados con App Inventor 1 a App Inventor 2.

Veamos como convertir nuestros proyectos creados con App inventor 1 a App Inventor 2.

Han creado un programa con el cual solo tendremos que seleccionar nuestro proyecto y pasará de ser .zip a .aia.

 

Leer más 0 comentarios

Ejemplo Menú con TinyWebDB

Crearemos un Menú web con para poder modificarlo según nos convenga.

  1. Componentes necesarios.
  2. Bloques necesarios
  3. Como crear entidades en App Engine.
Leer más 0 comentarios

Nueva opción de Carga del componente Notifier de App Inventor 2

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.

Leer más 4 comentarios

Haciendo cálculos con App Inventor 2

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. 

Leer más 2 comentarios

Trucos para programar con App Inventor

Ayuda para actualizar los cambios que vamos haciendo en nuestro proyecto con App Inventor

Como sabréis, cuando hacemos algún cambio en la pantalla de diseño de App Inventor, se nos actualizan los cambios en el emulador, pero de lo contrario en el editor de bloques no es asi.

Con este simple truco vamos a ver como actualizar los cambios realizados en el editor de bloques.

Leer más 0 comentarios

Enviar mensaje vía Whatsap con App Inventor 2

En este pequeño tutorial de App inventor 2 se explica como enviar un mensaje vía Whatsapp. Para ello tendremos que tener instalada la aplicación, " Y quien no la tiene???".

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.

Leer más 24 comentarios

Pantalla temporizada

Pasar de Screen1 a Screen2 con un temporizador.

Como hacer con App inventor 2 una pantalla de inicio con temporizador y cuando pase el tiempo asignado vaya a la pantalla 2.

Leer más 16 comentarios

Como Actualizar nuestra App creada con AppInventor

Pasos a seguir para actualizar una App que ya tenemos subida a Google Play

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.

Leer más 6 comentarios

Como Hacer una App Android adaptada a diferentes dispositivos

Como ajustar nuestra App creada con App Inventor para distintas Pantallas

Leer más 7 comentarios

Tutorial Componente Sharing de App Inventor 2

Como compartir imágenes y texto con el componente Sharing de App Inventor 2

Veamos un pequeño ejemplo de como podemos compartir archivos con el nuevo componente "Sharing" agregado a App Inventor en su última actualización.

 

Leer más 6 comentarios

Gato que maúlla con App Inventor 2

Tutorial de Aplicación de un gato que maulla, realizado con App Inventor 2

Esta es una versión parecida a la del MIT. Es para los que empiezan a utilizar App Inventor.

  • Bueno empezaremos descargando los archivos necesarios.
Leer más 2 comentarios

Funcionamiento del Bloque "Round" de App inventor

Como redondear números con App inventor

Para redondear números con App Inventor, solo necesitamos un bloque que esta situado en la sección de Maths de nuestro editor de bloques. Este  bloque se llama "Round" que en español es redondear.

Leer más 1 comentarios

Como hacer un Menú para pantalla de inicio

Ejemplo de Menú Otoñal creado con App Inventor 2


Hola de nuevo, esta vez os dejo un menú con colorido Otoñal, para la pantalla principal de nuestra Aplicación android.

Claro está que es personalizable totalmente.

Simplemente se cambia el fondo, y colorido de los botones y listo.

Para crear este menú he utilizado cinco botones simplemente y una Screen.

Al pulsar los botones estos crecen un poco y al soltarlos buelven a su medida inicial.

Además esta adaptado para todo tipo de pantallas.

Leer más 5 comentarios

Aplicación de preguntas tipo test con App Inventor 2 Segunda Parte

Segunda parte del tutorial para crear una App Android con App Inventor 2 de preguntas y respuestas.


En esta segunda parte del tutorial vamos a ver como hacer para que al marcar las respuestas se vayan agregando a una lista de respuestas.

Aprenderemos a comprobar si no hay ninguna respuesta marcada y si es asi no avanzar en las preguntas. Y de lo contrario avanzar y desmarcar la respuesta marcada.

Leer más 35 comentarios

Aplicación de preguntas tipo test con App inventor 2 Primera parte

Como crear una aplicación de preguntas y respuestas con App Inventor 2


Si estás pensando en crear una aplicación de preguntas y respuestas para android este tutorial te puede ser útil.

Vamos a ver como crear preguntas  con tres respuestas diferentes para cada pregunta.

Leer más 7 comentarios

Componente ListView App Inventor

Veamos como crear una lista con un Listview con App Inventor 2


Bien, vamos a aprender a crear una lista en este nuevo componente agregado por el MIT, a AppInventor 2.

Antes ya teníamos el Componente ListPIcker, pero este nos aparecía en una ventana aparte, ahora listview podemos utilizarlo en la misma pantalla en la que estemos trabajando.

Leer más 2 comentarios

Componente Spinner

Como utilizar el nuevo componente Spinner en App Inventor 2


El MIT ha agregado un nuevo componente a AppInventor 2.

Este lo podemos encontrar en Palette-User interface.

Este componente nos permite crear una lista y seleccionar uno de ellos para usarlo a nuestra necesidad.

Veamos como usarlo.

Leer más

Sustituir imagen de botón al pulsarlo.

Vamos a ver como podemos sustituir la imagen de un botón al pulsarlo y que cuando se vuelva a pulsar vuelva a tener la imagen de inicio.

Por una petición de un seguidor de mis vídeos, he creado este ejemplo simple. 

Este ejemplo es para novatos en App Inventor.

Leer más

Crear un chat con App Inventor

Como agregar un chat a nuestra aplicación creada con App Inventor

En App Inventor hay que buscarse muchas veces la vida o ingeniarselas con otras aplicaciones que haya en la web.

En esta ocasión voy ha explicar como agregar un chat que lo podremos personalizar a nuestro gusto.

Usaremos un sistema de chat en versión móvil muy bueno llamado ChatWing.

Leer más

Procedimientos en AppInventor

Vamos a aprender que son los procedimientos y para que sirven, y como programarlos en Appinventor.

Procedimiento App Inventor
Procedimiento

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.

Leer más

Funcionamiento del bloque text de AppInventor MIT 2

Ejemplo de utilización del bloque text de AppInventor MIT 2

Leer más 0 comentarios

Empezando a crear aplicaciones Android con AppInventor MIT2

Vamos a ver como empezar y como abrir el emulador de AppInventor MIT2

Para los que ya han utilizado AppInventor 1, supongo que estarán acostumbrados aunque quizás se encuentren con el problema de que no les abre el emulador.

En el siguiente vídeo veremos como solucionarlo.

Leer más 0 comentarios

TinyDB MIT AppInventor 2

Como guardar y recuperar datos de una base de datos en AppInventor 2 y de una Screen a otra

En este tutorial de App Inventor vamos a ver como guardar un texto introducido en un textbox en un tag y luego recuperarlo en la misma Screen ( pantalla ) o en otra pantalla.

Leer más 4 comentarios

TuAppInventor os desea Feliz Navidad

Código de Aplicación android creada con AppInventor

Tutorial de ejemplo de App Android de felicitación de navidad

Leer más 0 comentarios

Aplicación simple de Notas con App Inventor y Jquery Mobil

Vamos a ver como hacer una pequeña applicación android de notas con App Inventor

Este tutorial esta echa con la versión mejorada que tenemos nosotros y la cual podéis conseguir por una pequeña donación.

 

Leer más 1 comentarios

Tutorial juego de naves Android creado con App inventor Segunda Parte

Esta es la segunda parte del tutorial para crear un juego de naves espaciales con App inventor.

En esta parte vamos a ponerle sonido al disparo de la nave y contador de meteoritos destruidos.

Leer más 19 comentarios

Tutorial App Inventor: como crear un juego de naves. "Parte 1"

Vamos a ver como podemos hacer un pequeño juego de naves espaciales con App Inventor

En este tutorial vamos a ver como darle movimiento a sprites y hacer disparar una nave espacial con la cual destruiremos meteoritos.

Leer más 31 comentarios

Abrir web pulsando un botón en App Inventor

Descarga
Lanzar web mediante un botón. .zip
Como lanzar una web cuando pulsamos un botón en una aplicación android creada con App inventor.
Abrir_web_mediante_boton.zip
Archivo comprimido formato ZIP 1.6 KB
Descarga
Abrir web mediante botón .apk
Como lanzar una web cuando pulsamos un botón en una aplicación android creada con App inventor.
Abrir_web_mediante_boton.apk
apk Archivo 1.2 MB
Leer más 1 comentarios

Slideshow con App Inventor

Veamos como crear una presentación de imágenes con App Inventor.

Leer más 0 comentarios

Como hacer aparecer un sprite en un un canvas durante un tiempo al pasar el dedo por la pantalla.

En este ejemplo vamos a trabajar con el componente canvas, sprites, y reloj.

  1. Crear proyecto nuevo.
  2. Agregar un canvas y ponerlo a pantalla completa y la pantalla sin scroll.
  3. Agregar un sprite y ponerlo no visible.
  4. Agregar un reloj y ponerlo inabilitado.
  5. Abrimos el editor de bloques y creamos los bloques de la siguiente imagen.
Leer más 0 comentarios

Nueva versión V.134 del MIT

Version 134, 04 de mayo 2013

  • Hay que actualizar nuestra copia del AICompanion MIT para esta versión. Mira la versión 2.07 en la tienda Play Google. [Más Información] . NOTA: Esta versión no actualización automáticamente de Google Play, ya que requiere una autorización adicional. Añadimos permiso READ_LOGS para ayudar en la depuración. 
     
  • El componente Web puede ahora hacer lo http "PUT" y los métodos de "Eliminar".
  • Se ha añadido un nuevo componente  "slider". El cual permite elegir un valor numérico basado en la posición de un cursor que puede mover.
  • Se ha actualizado el Componente Twitter para utilizar la última API de Twitter.
  • El componente de visor Web puede ahora utilizar los servicios de localización.
  • Ahora puede decidir si los botones con imágenes haga un efecto cuando se presiona.
  • Corrección de errores.

 

Ejemplo de utilización del nuevo componente en App Inventor Slider

Leer más 0 comentarios

App Inventor Pop-Up nuevo bloque de Notificación

Con el código abierto de App Inventor se empiezan a ver modificaciones

Creado por XCitizenTeam cooperador de esta Web

Leer más 0 comentarios

Nuevo componente de App Inventor

 Un cooperador de esta web xcitizen.team@gmail.com ha descubierto un componente oculto en la nueva versión 1.29 del MIT.

Este componente es un podometro, el cual sirve para medir los pasos en una distancia.

Lo que no sabemos es porque el MIT no lo ha echo público, supongo que lo tendrán en pruebas.

Os dejo unas capturas de pantalla con el componente y sus bloques en el editor de bloques.

Nuevo componente App Inventor
Leer más 0 comentarios

MIT actualiza App Inventor a su versión v.129

El MIT vuelve a actualizar su versión de App Inventor ya es la V.129.

En esta versión han agregado interesantes mejoras.

  • Una de ellas, es que ahora podrémos adaptar las medidas del reproductor de vídeo
  • El componente Screen hasta ahora digamos que siempre estaba de izquierda a derecha y de arriba a abajo, ahora podrémos elegir donde ajustarla.
  • En el componente canvas y sprites también se han agregado interesantes mejoras por ejemplo y para mi una muy esperada, es que ahora cuando se pulse un esprite tendremos un valor y al soltarlo tendremos otro.
  • Se ha añadido una nueva configuración de pantalla.
  • Ademas han solucionado mas bugs.
Leer más 0 comentarios

Nuevos Bloques en App Inventor

Si habéis creado una aplicación de Android con app inventor seguro que usandola le habeis dado al boton de atras del movil y se ha salido de la aplicación, y da mucha rabia.

Pues bien en nuestra versión de App Inventor emos creado unos nuevos bloques con los cuales controlar los botones de ir atras, menu y buscar una gran mejora para nuestras aplicaciones.

Os dejo un vídeo de muestra.

Leer más 23 comentarios

Conocer Activity package y ActivityClass para App Inventor

En este vídeo tutorial de App Inventor en español, aprenderemos a conseguir los datos para poder lanzar otras aplicaciones con ActivityStarter.

Utilizaremos el programa Astro que es gratuito y nos permitirá abrir los archivos de nuestras aplicaciones.

 

Leer más 0 comentarios

tu App Inventor nuevo Vídeo tutorial (Preguntas y respuestas tipo test)

En esta ocasión e decidido crear un vídeo tutorial utilizando la herramienta "checkbox" la cual la utilizaremos para marcar las respuestas de preguntas hechas tipo test.

Leer más 0 comentarios

Como crear un juego para android con app inventor utilizando los sensores de movimiento.

Leer más 9 comentarios

Tu App Inventor a creado un nuevo vídeo tutorial explicando paso a paso lo necesario para crear tu primera aplicación con app inventor.

Nuevo videotutorial explicativo, para que sepas como descargar, instalar configurar y crear tu primera aplicación con app inventor para android.

Leer más 0 comentarios