I.

1 Instalando App Inventor

Paso 1: En tu navegador puedes escribir “app inventor” y seleccionar la opción “MIT App
Inventor 2” o puedes ingresar directamente el link: http://ai2.appinventor.mit.edu/
Paso 2: Ingresa tu correo y contraseña.

I.2 Diseño de Interfaz de Usuario

Para incluir elementos en App Inventor solo tendremos que buscar el que queremos incluir
en la aplicación y arrastrarlo en la pantalla Visor, pero hay ciertos elementos que nos
facilitarán crear una interfaz mejor, como los elementos Disposición.

I.3 Funciones de básicas de App Inventor

Paso 1: Para comprender mejor las opciones con las que cuenta el entorno, cambiamos
el idioma. Seleccionar la siguiente opción:

Paso 2: Crear un nuevo proyecto, seleccionar el botón “Comenzar un proyecto nuevo”.

Paso 3: Dar un nombre al proyecto.

En la siguiente imagen se verá la interfaz de los bloques.

Bloques
con
funciones
generales.

Funciones
de los
objetos
utilizados en
el diseño.

Los bloques son arrastrados hasta este cuadro y se va armando las

acciones que realizara la aplicación que se está creando.

Ejercicio 1: Crea una App que cambie el color de fondo de la pantalla al hacer clic en
un botón.

Paso 1: Crea un nuevo proyecto y nombrarlo.

Paso 2: Arrastra un botón a la pantalla de inicio del diseño.
Paso 3: Nombra al botón con las propiedades en la sección derecha. También puedes
darle nombre a la pantalla.

Paso 4: Ve al botón “bloques” para comenzar a programar.

Paso 5: Haz clic en el botón dentro los bloques, aparecerá una lista de eventos y acciones
que este botón puede hacer, elige el evento “cuando hacer clic”.
Paso 6: Después tenemos que establecer que hará el botón al hacer clic. Cambiar el color
del fondo. Hacer clic en la pantalla dentro de los bloques, aparecerá una lista de
eventos y acciones que la pantalla puede hacer, elige la que sea adecuada para
cambiar el color.
Paso 7: En los bloques elige el color que más te guste para cambiar.

DESAFÍO:

Crea una aplicación donde se tenga 4

botones y que cada uno cambie el color
de la pantalla. ¡TU PUEDES!

Ejercicio 4: Cambiar el color de fondo por una imagen.

Paso 1: Primero borra todos los botones de la pantalla de diseño y agrega un nuevo botón
a la pantalla y nómbralo como imagen de fondo.
Paso 2: En la misma pantalla de diseño, debajo de componentes esta una sección
llamada medios, ahí puede cargar una imagen de la computadora para que
aparezca al hacer clic.
Paso 3: En los bloques primero tienes que crear la imagen. Para eso haces clic en
variables y seleccionas el evento inicializar global, esto definirá que quieres usar
la imagen que cargaste.
Paso 4: Para unir el eslabón tienes que poner el nombre de la imagen completo dentro
de un texto.
Paso 5: Ahora tenemos que decirle al botón que cuando le hagamos clic cambia el fondo
por la imagen.
Paso 6: Seleccionas de la lista de acciones de la pantalla (screen1) la que te permita
cambiar el fondo por una imagen (ya no color) y luego seleccionas en variables
tomar el inicial global que creaste al principio.

Ejercicio 5: Modificar texto. Vamos a cambiar el estilo del texto escrito en una etiqueta

Paso 1: Arrastrar un botón a la pantalla y cambiar el nombre.

Paso 2: Arrastrar también etiqueta
Paso 3: En los bloques indicamos que al hacer clic en el botón nos muestre un texto.
Ahora cuando hagamos un clic largo cambiemos algunas de las propiedades del
texto como el tamaño de la letra, el color de la letra y el tamaño del campo de
texto (puedes cambiar más propiedades si quieres).

DESAFÍO:

Crea una aplicación donde haciendo un

click largo en el botón ponga una imagen
en pantalla y cuando se suelte cambie el
texto, tamaño y color de una etiqueta
¡TU PUEDES!