I

MIT
N
A V
P E
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos
Entorno y
• App Inventor
Designer

• App Inventor
Blocks Editor.
Desarrollo con
App
Programación
By Manzanarez
Inventor
 I

A
N
V
E
App Inventor es un entorno de desarrollo de
P
p N
T aplicaciones para dispositivos Android.
O
R

• Primeros pasos Para desarrollar aplicaciones con App

• Ciclo de Vida Inventor sólo necesitas un navegador web y
para crear un
app. un teléfono o Tablet Android (si no lo tienes
• Instalar y
ejecutar el
podrás probar tus aplicaciones en un
emulador en AI2
emulador).
• Interfaz

App Inventor se basa en un servicio web que

• Gestor de
Proyectos

• App Inventor
Designer
te permitirá almacenar tu trabajo y te
• App Inventor
ayudará a realizar un seguimiento de sus
Blocks Editor.
proyectos.

Programación
By Manzanarez
 I
N
A V
P E
p N
T
O
Al construir las aplicaciones para
Android trabajarás con tres
R

herramientas:
• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y

• Gestor de Proyecto
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos
• App Inventor Designer y
• App Inventor
Designer • App Inventor Blocks
Editor.
• App Inventor
Blocks Editor.

Programación
By Manzanarez
 Gestor de Proyecto
I
N
A V
P E
p N
T

Nos permite crear nuevos proyectos,

O
R

• Primeros pasos
guardarlos o importarlos.
• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 Designer
I
N
A
P
V
E En construirás el Interfaz de
p N
T
O Usuario, eligiendo y situando los elementos
R
con los que interactuará el usuario y los
• Primeros pasos
componentes que utilizará la aplicación.
• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 I

Blocks Editor
N
A
P
V
E
N
En el definirás el
p
T
O
R
comportamiento de los componentes de tu
aplicación.
• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 I
N
V

Ciclo de Vida para

A
P E
p N
T
O
R crear un app.
• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2 Proyectos
• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor Diseño Bloques

Blocks Editor.

App en el
Móvil o y o en
Programación
el Emulador
By Manzanarez
 Instalar y ejecutar
I
N
A V

el emulador en AI2
P E
p N
T
O
R

Para utilizar el emulador, primero tendrás que

• Primeros pasos
instalar algún software en el equipo (esto no es
• Ciclo de Vida
para crear un
app.
necesario para la solución wifi). Sigue las
• Instalar y
instrucciones para tu sistema operativo.
ejecutar el
emulador en AI2

• Interfaz Paso 1. Descarga y ejecuta el programa de instalación

• Gestor de
Proyectos
del software App Inventor
• App Inventor
Designer
Instrucciones para Windows
• App Inventor
Blocks Editor. Instrucciones para GNU / Linux
Instrucciones para Mac OS X

Guía:
https://sites.google.com/site/appinventormegusta/instalacion/instalar-y-ejecutar-
el-emulador-en-ai2
Programación
By Manzanarez
 I

A
N
V
E
Instalar y ejecutar
P
p N
T
O
el emulador en AI2
R

NOTA: App Inventor 2 no funciona con Internet Explorer. Para los

• Primeros pasos
usuarios de Windows, recomendamos usar Chrome o Firefox como
• Ciclo de Vida navegador para usar con App Inventor.
para crear un
app.

• Instalar y
ejecutar el
1. Descargue el instalador.
emulador en AI2
2. Busque el archivo MIT_Appinventor_Tools_2.3.0 (~ 80 MB) en su
• Interfaz
archivo de descargas o en su escritorio. La ubicación de la descarga
• Gestor de en su computadora depende de cómo esté configurado su navegador.
Proyectos

• App Inventor 3. Abre el archivo.

Designer

• App Inventor 4. Haga clic en los pasos del instalador. No cambie la ubicación de
Blocks Editor.
instalación, pero registre el directorio de instalación, ya que podría
necesitarlo para verificar los controladores más adelante. El directorio
diferirá según su versión de Windows y si ha iniciado sesión o no como
administrador.

5. Es posible que se le pregunte si desea permitir que un programa de un

editor desconocido realice cambios en esta computadora. Haga clic en
Programación sí .
By Manzanarez
 Instalar y ejecutar
I
N
A V

el emulador en AI2
P E
p N
T
O
R
Tienes tres opciones para configurar las pruebas en vivo, mientras
• Primeros pasos construyes aplicaciones.
• Ciclo de Vida
para crear un
app. Opción 1 - RECOMENDADO
• Instalar y
ejecutar el Construir aplicaciones con un dispositivo Android y conexión
emulador en AI2
WiFi Instrucciones:
• Interfaz Si tienes una computadora, un dispositivo Android, y una
• Gestor de conexión Wi-Fi, esta es la manera más fácil para probar tus
Proyectos
aplicaciones.
• App Inventor Conectar tu teléfono o tableta sobre WiFi
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 Instalar y ejecutar
I
N
A V

el emulador en AI2
P E
p N
T
O
R

• Primeros pasos Opción 2

• Ciclo de Vida
para crear un
app. ¿Todavía no tienes un dispositivo Android? Utiliza el
• Instalar y emulador: Instrucciones. Si no tienes un teléfono Android o
ejecutar el
emulador en AI2
tableta a mano, puedes seguir utilizando la aplicación Inventor.
Pueden trabajar principalmente en emuladores y compartir unos
• Interfaz
pocos dispositivos.
• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 I

A
N
V
E
Instalar y ejecutar
el emulador en AI2
P
p N
T
O

Opción 3
R

• Primeros pasos

• Ciclo de Vida
para crear un
No WiFi? Construir aplicaciones con un dispositivo Android y
app. Cable USB:
• Instalar y
ejecutar el
emulador en AI2
Instrucciones:
• Interfaz
Algunos servidores de seguridad dentro de las escuelas y las
• Gestor de
Proyectos
organizaciones no permiten el tipo de conexión Wi-Fi necesario.
• App Inventor
Designer Si WiFi no funciona , usa la conexión USB.
• App Inventor
Blocks Editor.

Programación
By Manzanarez
 I

A
N
V
E
Cómo activar y desactivar las opciones de
P
p N
T desarrollador en cualquier teléfono Android
O
R

• Primeros pasos
Activar las opciones de desarrollador:
• Ciclo de Vida
para crear un
app.
• Vamos a los “Ajustes” o “Configuración” de nuestro dispositivo.
• Instalar y
ejecutar el
emulador en AI2
• Nos desplazamos hasta la opción de “Acerca del dispositivo” o
• Interfaz “Información del teléfono”
• Gestor de • Buscamos la opción “Número de compilación” o “Número de
Proyectos

• App Inventor versión” y presionamos 7 veces seguidas sobre esta opción.

Designer
• Nos pedirá nuestro PIN, patrón o contraseña para activar las
• App Inventor
Blocks Editor.
opciones de desarrollador.
• Listo, ya puedes entrar a las opciones de desarrollador.
• Y por ultimo activa "Depuración USB".

Programación
By Manzanarez
 I
N
A V
P
p
E
N
T
Desactivar las opciones de
O
R desarrollador
Si quieres deshacer este ajuste que ya realizaste tienes que
• Primeros pasos
seguir estos pasos:
• Ciclo de Vida
para crear un
app.
• Ve a los “Ajustes” o “Configuración”
• Instalar y
ejecutar el • Posteriormente busca el apartado de “Aplicaciones”
emulador en AI2

• Interfaz
• Encuentra la app de “Ajustes” o “Configuración” y entra en
• Gestor de ella.
Proyectos

• App Inventor
• Nos vamos a la opción de “Espacio de almacenamiento” y
Designer
seleccionamos la opción de “Eliminar datos”.
• App Inventor
Blocks Editor. • Cerramos la aplicación y posteriormente ya no aparecerán las
opciones de desarrollador.

Programación
By Manzanarez
 I

A
P
N
V
E
N
Interfaz
p

Accedemos a la siguiente liga

T
O
R

• Primeros pasos https://appinventor.mit.edu/explore/get-started

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Diseñador de
Proyectos

• App Inventor
Designer

• App Inventor

• App Inventor
Designer

• App Inventor
Blocks Editor.
O directamente a esta liga
http://ai2.appinventor.mit.edu/?locale=es_ES
Programación
By Manzanarez
 Interfaz – Gestor de Proyectos
I
N
A V
P E
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor

• App Inventor
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 Interfaz – App Inventor Designer
I
N
A V
P E
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz
2
• Gestor de
Proyectos
1 3
• App Inventor
Designer

• App Inventor
Blocks Editor.

4
5
Programación
By Manzanarez
 Interfaz – App Inventor Designer
I
N
A V
P E
p N
T
O
R 1.- La paleta contiene todos los
• Primeros pasos
elementos que podemos
insertar en nuestra aplicación.
• Ciclo de Vida
para crear un
app.
Hay elementos gráficos como
• Instalar y
ejecutar el
cuadros de texto, botones, lienzo
emulador en AI2 de dibujo (Canvas) y elementos
• Interfaz que no se ven en la pantalla del
• Gestor de móvil, como base de datos
Proyectos
(TinyDB), acelerómetro, cámara
• App Inventor
Designer de vídeo, etc.
• App Inventor
Blocks Editor.

Programación
By Manzanarez
 Interfaz – App Inventor Designer
I
N
A V
P E
p N
T
O
R

• Primeros pasos
2.- Viewer: El visor de la pantalla,
• Ciclo de Vida
para crear un
simula la apariencia visual que
app. tendrá la aplicación en el móvil.
• Instalar y
ejecutar el
emulador en AI2
Para añadir un elemento a la
pantalla hay que arrastrarlo
• Interfaz
desde la paleta y soltarlo en el
• Gestor de
Proyectos
visor.
• App Inventor
Designer Los elementos que no tengan
visibilidad hay que arrastrarlos
• App Inventor
Blocks Editor. también al viewer y
automáticamente se desplazarán
debajo de él bajo el epígrafe
“Non-visible components”.

Programación
By Manzanarez
 Interfaz – App Inventor Designer
I
N
A V
P E
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
3.- Components muestra la lista
para crear un
app.
de los componentes que se han
colocado en el proyecto.
• Instalar y
ejecutar el
emulador en AI2
Cualquier componente que haya
• Interfaz
sido arrastrado y soltado desde la
• Gestor de
Proyectos
paleta al visor aparecerá ahí.
• App Inventor
Designer Si se quiere borrar alguno, es en la
• App Inventor lista de componentes donde está
Blocks Editor.
el botón que permite borrarlo.

Programación
By Manzanarez
 Interfaz – App Inventor Designer
I
N
A V
P E
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz 4.- Media muestra las distintas imágenes y sonidos que

• Diseñador de estarán disponibles para el proyecto.
Proyectos

• App Inventor Cualquier archivo de imagen o audio que se quiera usar en

Designer
la aplicación hay que insertarlo usando este apartado para
• App Inventor que esté disponible.
Blocks Editor.

Programación
By Manzanarez
 Interfaz – App Inventor Designer
I
N
A V
P E
p N
T
O
R

• Primeros pasos 5.- Properties: cada vez que en el

• Ciclo de Vida
Viewer se seleccione un componente,
para crear un
app.
en Properties aparecerán todos los
detalles que se puedan cambiar de
• Instalar y
ejecutar el ese componente.
emulador en AI2

• Interfaz
Por ejemplo, al hacer clic sobre un
• Gestor de
Proyectos
componente TextBox se podrá
cambiar en Properties su color,
• App Inventor
Designer texto, fuente, etc.
• App Inventor
Blocks Editor.
Para aquellos que hayan usado antes
entornos de desarrollo del tipo de
Visual Studio en Windows o Gambas en
Linux le será muy familiar esta forma
de trabajar.
Programación
By Manzanarez
 I

A
P
N
V
E
Interfaz – App Inventor Blocks Editor.
p N
T
O En App Inventor existen unos bloques integrados que son
R
comunes a todos los proyectos, independientemente de los
• Primeros pasos componentes que estos contengan.
• Ciclo de Vida
para crear un .
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 I

A
P
N
V
E
Interfaz – App Inventor Blocks Editor.
p N
T
O
R

• Primeros pasos Sitio WEB de Apoyo:

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2 https://codigo21.educacion.navarra.es/autoaprendizaje/des
• Interfaz cripcion-de-los-bloques-integrados-de-app-inventor-2/
• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

Programación
By Manzanarez
 I

Android: Desarrollo de una app Android

N
A V
P E
p N
T
O Ejemplo 1 - Hola mundo
R

• Primeros pasos

• Ciclo de Vida
para crear un ¡Empezando
app.
a jugar!
• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Descargar Imagen
“Hola Mundo.jpg”
Programación
By Manzanarez
 Android: Desarrollo de una app Android
I
N
A V
P E
p N
T Arrastramos: 4 Elementos
O
R

• Primeros pasos

• Ciclo de Vida 3 Elementos

para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Diseñador de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios 1 Elemento
1
Elemento
1 Elemento

Programación
By Manzanarez
 Android: Desarrollo de una app Android
I
N
A V
P E
p N
T Editamos/Cambiamos Valores:
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Programación
By Manzanarez
 Android: Desarrollo de una app Android
I
N
A V
P E
p N
T Editamos/Cambiamos Valores
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Etcétera….
Programación
By Manzanarez
 I

A
N
V
E
Android: Desarrollo de una app Android
P
p N
T
O
R Codificación:
• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Programación
By Manzanarez
 I

A
N
V
E
Interfaz – Desarrollo de Aplicaciones.
P

Ejemplo 2 - Presentación
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Programación
By Manzanarez
 I

A
N
V
E
Interfaz – Desarrollo de Aplicaciones.
P

Ejercicio 3 – Aprende Ingles

p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y Descargar
ejecutar el
emulador en AI2
Imágenes y
Sonidos
• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Programación
By Manzanarez
 I

A
N
V
E
Interfaz – Desarrollo de Aplicaciones.
P

Ejercicio 4 – Operaciones Aritméticas Básicas.

p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Programación
By Manzanarez
 I

A
N
V
E
Interfaz – Desarrollo de Aplicaciones.
P

Ejercicio 5 - Traductor
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor Descargar

Blocks Editor. Imágenes
• Ejercicios

Programación
By Manzanarez
 I

A
N
V
E
Interfaz – Desarrollo de Aplicaciones.
P

Ejercicio 5 - Traductor
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Programación
By Manzanarez
 I

A
N
V
E
Interfaz – Desarrollo de Aplicaciones.
P

Ejercicio 5 - Traductor
p N
T
O
R

• Primeros pasos

• Ciclo de Vida
para crear un
app.

• Instalar y
ejecutar el
emulador en AI2

• Interfaz

• Gestor de
Proyectos

• App Inventor
Designer

• App Inventor
Blocks Editor.

• Ejercicios

Programación
By Manzanarez