1. No category

App Inventor
Alejandro Correa Rodríguez
Sara Rijo García
[email protected]
[email protected]
Índice
1. Introducción
2. Primeros pasos en App Inventor
3. Elementos básicos de App Inventor
4. Ejemplos variados
5. Conclusiones
6. Bibliografía
Índice
1. Introducción
2. Primeros pasos en App Inventor
3. Elementos básicos de App Inventor
4. Ejemplos variados
5. Conclusiones
6. Bibliografía
Introducción
- App Inventor es un entorno de desarrollo de aplicaciones
para dispositivos Android.
- Se trata de un servicio basado en la nube.
- Está formado por tres herramientas:
● Gestor de proyectos
● Diseñador
● Editor de bloques
Introducción
En
2010
Google
crea
App
Inventor,
basado
en
la
investigación de la informática educativa y el trabajo realizado
en entornos de desarrollo en línea.
En 2011 Google deja de lado el proyecto pero antes lo
publica como código abierto, y es el Instituto Tecnológico de
Massachusetts (MIT) el encargado de continuar este
proyecto.
Introducción
El lenguaje de programación que se usa en App Inventor está
claramente inspirado en Scratch (desarrollado por el MIT), por
lo que el usuario puede ir enlazando una serie de piezas de
puzzle para crear aplicaciones móviles.
Introducción
App Inventor es un entorno de programación gráfico y apto
para niños de 8 años en adelante.
Introducción
La comunidad de App Inventor cuenta con más de 2 millones
de usuarios pertenecientes a 195 países distintos y en la que
se han creado más de 7 millones de aplicaciones.
Introducción
Comparación de la versión 1 a la 2
-
Para ejecutar App Inventor en la versión 1, se necesitaba ejecutar un archivo de
Java llamado “Editor de Bloques”, mientras que en la nueva versión se puede
realizar todo a través del navegador.
-
Se pueden agregar pantallas adicionales.
-
El bloque “make a text” se ha cambiado por el bloque “join”.
Introducción
¿Por qué usar App Inventor en educación?
- Introducir la programación en las aulas con lenguajes
basados en entornos gráficos que permiten abstenerse de la
sintaxis propia de los lenguajes de programación. Ejemplos:
Scratch, Code.org y App Inventor
- App Inventor es una potente herramienta para el desarrollo
de la lógica, la creatividad y la motivación del alumnado.
Índice
1. Introducción
2. Primeros pasos en App Inventor
3. Elementos básicos de App Inventor
4. Ejemplos variados
5. Conclusiones
6. Bibliografía
Primeros pasos
Disponiendo de una cuenta Gmail se puede acceder
a App Inventor a través del siguiente enlace:
http://ai2.appinventor.mit.edu/
Gestor de Proyectos
Herramienta para gestionar nuestros proyectos.
Menú principal
Gestor de Proyectos - ¡Hola Mundo!
Diseñador
Herramienta que nos permite seleccionar los componentes de
nuestra Aplicación y definir su entorno de usuario.
Diseñador - Paleta
Apartado donde
podremos seleccionar y
añadir los componentes
de nuestra aplicación
Diseñador
Los componentes de la paleta se dividen en los siguientes
grupos:
-
Interfaz de usuario
Disposición
Medios
Dibujo y Animación
Sensores
-
Social
Almacenamiento
Conectividad
Lego Mindstorms
Diseñador - Visor
El apartado “Visor” nos
permitirá visualizar el
aspecto de la interfaz de
nuestra aplicación.
Diseñador - Componentes,
Propiedades
y Medios
Componentes: Muestra
de manera jerárquica los
componentes de nuestra
aplicación
Medios: Nos permite
subir nuestras
imágenes, sonidos, etc.
Propiedades: Permite
editar las propiedades
asociadas
a
cada
componente
Diseñador - ¡Hola Mundo!
Editor de Bloques
Herramienta que nos permite programar el comportamiento de la
aplicación.
Editor de Bloques - Bloques
Editor de Bloques - Visor
Editor de Bloques - ¡Hola Mundo!
Probando nuestra aplicación
Iniciamos la aplicación MIT AI2
Companion:
https://play.google.com/store/apps/details?
id=edu.mit.appinventor.aicompanion3
Probando nuestra aplicación
Probando nuestra aplicación
Probando nuestra aplicación
Probando nuestra aplicación
App Inventor ofrece además, dos maneras alternativas para
probar nuestra aplicación.
- Emulador: Disponible para Windows, Linux y Mac.
- USB: Opción menos recomendada.
Índice
1. Introducción
2. Primeros pasos en App Inventor
3. Elementos básicos de App Inventor
4. Ejemplos variados
5. Conclusiones
6. Bibliografía
Elementos básicos de App
Inventor
- Variables
- Cadenas de texto
- Estructuras de control
- Listas
- TinyDB
Variables
En App Inventor la declaración de variables se realiza a través
del editor de bloques en el apartado Integrados -> Variables.
Valor
Variables - Tipos de datos
Los tipos de datos que nos encontramos en App Inventor
son los siguientes:
Texto -
Booleano
Número -
Lista -
Color -
-
Variables - Modificación y
recuperación de valores
En App Inventor podemos modificar el valor de una variable y
recuperar el valor de dicha variable a través de los bloques
poner y tomar.
Variables - Ejemplo
Modifiquemos nuestro ‘Hola Mundo’ para que haga uso de
variables.
Cadenas de texto
Las cadenas de texto se
encuentran en el editor de
bloques, en el apartado Texto
y se identifican en color rosa.
Cadenas de texto - Ejemplo
Se introducirá un texto por pantalla al que se le realizará una
serie de modificaciones.
Cadenas de texto - Ejemplo
Cadenas de texto - Ejemplo
Estructuras de control - Sentencia If
En App Inventor podemos utilizar una sentencia If a través del
editor de bloques en el apartado Integrados -> Control.
Condición
Acción
Modificando la sentencia If
App Inventor nos da la posibilidad de modificar la estructura de
nuestra sentencia If.
Sentencia If - Ejemplo
En este ejemplo
vamos a introducir
dos números y la
aplicación nos dirá
si el primer número
es mayor o menor
que el segundo.
Sentencia If - Ejemplo
Sentencia If - Ejemplo
Sentencia If - Ejemplo mejorado
¿Pero qué sucedería si
introducimos una letra?
Estructuras de control - For
Podemos encontrar dos tipos de bucle For en el editor de
bloques (
):
For - Ejemplo
Seleccionamos los componentes necesarios para este
ejemplo:
For - Ejemplo
Con la siguiente estructura de bloques, la aplicación mostrará
por pantalla las diferentes iteraciones de un bucle For.
For - Ejemplo
Estructuras de control - While
Veamos ahora cómo quedaría el mismo ejemplo utilizando un
bucle While.
Listas
En App Inventor podemos utilizar listas a través del editor de
bloques en el apartado Integrados -> Listas.
Elemento 1
Elemento 2
Listas
App Inventor nos permite crear listas de diferentes tipos.
Lista:
Lista mixta:
Lista de listas:
Listas - Ejemplo
En este ejemplo vamos
a poder seleccionar y
mostrar un elemento
concreto de una lista
Listas - Ejemplo
En primer lugar crearemos nuestra lista.
Listas - Ejemplo
A continuación escogemos el elemento de la lista deseado por el
usuario.
Listas - Ejemplo
TinyDB
- Este componente nos permite almacenar datos de manera
permanente en nuestro móvil.
- Sólo hay un almacén de datos por aplicación.
- No se puede usar TinyDB para pasar datos entre dos
aplicaciones diferentes en el teléfono.
- Proporciona dos métodos: StoreValue y GetValue.
Índice
1. Introducción
2. Primeros pasos en App Inventor
3. Elementos básicos de App Inventor
4. Ejemplos variados
5. Conclusiones
6. Bibliografía
Ejemplos variados
- Dibujando en pantalla
- TextToSpeech
- Esfera en caja
- Mi ubicación
- Moviendo la esfera
- Animales
- Dibujando en pantalla 2
- ListPicker
Conclusiones
- App Inventor es una manera excelente de iniciarse en el
entorno Android y en el desarrollo de aplicaciones móviles.
- A pesar de sus limitaciones, App Inventor permite hacer con
relativa facilidad aplicaciones que requerirían un elevado
esfuerzo de programación en Android.
- La posibilidad de testear las aplicaciones en tiempo real en
el dispositivo móvil es una gran ventaja para el desarrollador.
Bibliografía
https://sites.google.com/site/appinventormegusta/
http://recursostic.educacion.es/observatorio/web/en/software/programacion/1090-uso-deappinventor-en-la-asignatura-de-tecnologias-de-la-comunicacion-y-la-informacion
http://www.appinventor.org/
http://appinventor.mit.edu/explore/beginner-tutorials-short.html
http://www.tuappinvetorandroid.com/tutoriales/
http://soloelectronicos.com/tag/ejemplos-mit-app-inventor/