UNIVERSIDAD NACIONAL DE EDUCACIÓN

La Cantuta
“Enrique Guzmán y Valle”

DEPARTAMENTO ACADÉMICO DE ELECTRÓNICA Y TELECOMUNICACIONES

PRÁCTICA N° 02 – MEDIOS Y SENSORES

APP4 – AFORO
INTERFAZ

1. Ingresamos a la siguiente página: http://ai2.appinventor.mit.edu/

2. Crear un nuevo proyecto con el nombre: App4_Aforo
3. Editaremos el componente Screem1 con las siguientes propiedades:
- Pantalla acerca de: Hecho en el Curso Desarrollo de Software
- Orientación de la pantalla: Horizontal
- Titulo: Aforo
- Icono: Subimos el archivo IconoApp.png
- AnimacionAbrirPantalla: Fundido
- AnimacionCerrarPantalla: Fundido
4. Insertamos DisposiciónHorizontal1
- Alto: 10 pixeles
5. Insertamos Disposición Horizontal2
- Ancho: Ajustar al contendor
6. Insertar 2 botones dentro de la
disposición2
7. Botón 1
- Texto: Limpiar Sala
- Ancho: Ajuste al contendor
8. Botón 2
- Texto: Escanear
- Ancho: Ajustar al contenedor.
9. Nomenclatura – Componentes
Cambiar los nombres de los botones:
- Boton1 =BtnLimpiarsala
- Botón2 = BtnEscanear
10. Insertamos Disposición Horizontal3 con tres etiquetas
- Ancho: Ajustar al contenedor.
11. Etiqueta1
- Texto: valor Escaneado
- Negrita
- Tamaño de la letra: 20
- Ancho: 180
12. Etiqueta2
- Texto: Fila:
- Negrita
- Tamaño de la letra: 20
- Ancho: 60 pixeles
13. Etiqueta3
- Texto: Asiento:
- Negrita
- Tamaño de la letra: 18
- Ancho: Se ajuste al contendor

-1-
14. Dirigirnos a la paleta Izquierda en la opción
Dibujo y animación y agregar Lienzo, (el
tema de lienzo sirve para interactuar con
Spritelmagen)
- Alto: Ajustar al contenedor
- Ancho: Ajustar al contenedor.
- Color de Fondo: Ninguno

15. Ahora insertamos 8 Spritelmagen.

16. Realizar los siguientes cambios::
a) Spritelmagen1: spr_1_1
- Foto: libre.png y ocupado.png
b) Spritelmagen2: spr_1_2
- Foto: libre.png y ocupado.png
c) Spritelmagen3: spr_1_3
- Foto: libre.png y ocupado.png
d) Spritelmagen4: spr_1_4
- Foto: libre.png y ocupado.png
e) Spritelmagen5: spr_2_1
- Foto: libre.png y ocupado.png
f) Spritelmagen6: spr_2_2
- Foto: libre.png y ocupado.png
g) Spritelmagen7: spr_2_3
- Foto: libre.png y ocupado.png
h) Spritelmagen8: spr_2_4
- Foto: libre.png y ocupado.png

17. Luego debemos ordenar las imágenes a través de la opción visible de cada
Spritelmagen. Ejemplo:

Spr_1_1 Spr_1_2 Spr_1_3 Spr_1_4

- X: 180 - X: 220 - X: 260 - X: 300
- Y: 26 - Y: 26 - Y: 26 - Y: 26

Spr_2_1 Spr_2_2 Spr_2_3 Spr_2_4

- X: 180 - X: 220 - X: 260 - X: 300
- Y: 66 - Y: 66 - Y: 66 - Y: 66

-2-
18. Cambiamos la nomenclatura de las etiquetas insertadas para este proyecto,
nos dirigimos a la panel Componentes y cambiamos de nombre:
a) Etiqueta1: etqValorEscaneado
b) Etiqueta2: etqFila
c) Etiqueta2: etqAsiento

19. Para generar los códigos de barra es a través de la siguiente página web:
http://barcode.tec-it.com/es

BLOQUES

1. Hacer clic en la opción bloques que se encuentra la parte superior derecha

del entorno App Inventor.
2. Ubicamos el botón: btnLimpiarSala y arrastrar al visor el evento: “Cuando
btnLimpiarSala. Clic ejecutar”.
3. Seguido en bloques ubicamos spr_1_1 y arrastramos al visor el evento:
“Poner spr_1_1.Foto Como” y ponerlo en ejecutar

4. Hacemos clic en el bloque Texto y arrastramos el evento y lo

empalmamos en “Poner spr_1_1.Foto Como”. Escribir en texto: Libre.png

5. Luego duplicamos:

6. Hacer clic en el btnEscanear y arrastramos el evento: “Cuando

btnEscanear.clic Ejecutar”

7. Luego vamos a buscar LectorCódigosdeBarras1 y arrastramos el evento:

“Llamar LectorCódigoDeBarras1. EjecutarScan” y enlazarlo en “Cuando
btnEscanear.clic Ejecutar”

-3-
8. Otra vez hacemos clic en LectorCódigosdeBarras1 y arrastramos el
evento: “Cuando LectorCodigoDeBarras1. DespuesDeScanear
Ejecutar”

9. Clic en etiqueta etqValorEscaneado y arrastramos el evento: “Poner

etqValorEscaneado. Texto Como” y lo enlazamos con el evento: “Cuando
LectorCodigoDeBarras1. DespuesDeScanear Ejecutar”

10. Luego clic en resultado y arrastrar: Tomar Resultado y enlazarlo en “Poner

etqValorEscaneado. Texto Como”

11. Ahora tenemos que programar para hacer saber cuándo el asiento se
encuentra ocupado.
Clic en el bloque Procedimientos y arrastramos el evento: Llamar
Procedimiento y lo enlazamos debajo del evento: “Poner
etqValorEscaneado. Texto Como Tomar Resultado”

Clic en el bloque Procedimientos y arrastramos el evento: “Como

Procedimiento Ejecutar” y cambiamos el texto Procedimiento en
ponAsiento

Ojo: cambiamos el texto Procedimiento en

ponAsiento

-4-
12. Clic en etqFila y arrastramos el evento: “Poner EtqFila. Texto Como” y lo
enlazamos en el evento: “Como ponAsiento Ejecutar

13. Luego duplicamos el evento: “Poner EtqFila. Texto Como” y cambiamos

EtqFila en etqAsiento.

14. Clic en etqValorEscaneado y arrastramos el evento: “etqValorEscaneado

Texto”
Nota: Este evento que hemos insertado tiene la apariencia Fila:X,Asiento:Y
15. Clic en Texto y arrastramos el evento: “recortar Texto en” y lo enlazamos
de esta manera:

16. Clic en Texto y arrastramos el evento y escribimos una coma “,” y

lo enlazamos en el evento “recortar Texto en”

Nota: Esto me va devolver una lista; en la cual; según el formato de mi

cadena por un lado voy a tener el primer elemento de la lista será Fila: __ y
otro elemento de la lista será Asiento:__

17. Clic en Lista y arrastramos el evento: “Seleccionar elemento de la lista

Indice” lo enlazamos en “recortar Texto en”

18. Luego Clic en Matemáticas y arrastramos el evento: y cambio al

numero 1, y lo enlazamos en Indice

-5-
19. Y todo ese bloque lo enlazamos de la siguiente manera:

20. Luego duplicamos:

21. Ahora el otro duplicado lo insertamos en el evento: “Poner etqAsiento.texto

como. Nota: Cambiar en el índice a 2

COMPROBAR
22. Clic en Control y añadir el evento: “Si entonces” y lo empalmamos debajo
del evento “Poner etqAsiento.texto como”

-6-
23. Ahora vamos hacer operaciones lógicas, clic en Lógica y
añadimos el evento

24. Clic en etqFila y arrastramos el evento: “etqFila.Texto”

25. Clic en texto y luego arrastramos el evento y lo enlazamos en la

función y escribimos Fila:1

26. Ahora vamos a comprobar con la operación “Y”; para

ello hacemos clic en lógica y arrastramos la operación
Lógica “Y”

27. Seguido duplicamos el evento:

Pero cambiando en etqFila a etqAsiento y también en el texto se escribe:
Asiento:1

28. Luego enlazamos los dos eventos en el siguiente evento en

el operador lógico “Y”, quedará de esta forma:

-7-
 Quedando de esta manera:

29. Luego enlazamos en el evento: “Si entonces”

Explicación de la conjunción: Si lo que está en la etqfila coincide con fila: 1

y al mismo tiempo etqAsiento coinciden con Asiento:1. Ahora tenemos que
añadir el spr.
30. Hacemos clic en Spr_1_1 y arrastramos el evento: “Poner spr_1_1 . Foto
como” y lo enlazamos en “SI entonces”

31. Ahora tenemos que añadir texto y escribimos Ocupado.png y lo

enlazamos en “Poner spr_1_1 . Foto como”

32. Ahora tenemos que insertar la comprobación y recuerda que son 8

comprobaciones: Añadimos si no, si

-8-
33. Ahora duplicamos para cada spr_”… “_”… ” y Asiento… Recuerda que
son 8 respuestas.

34. Ahora nos queda realizar la interacción manual.

Para ello Hacemos clic en Spr_1_1 y vamos a programar el elemento
Tocar, arrastramos el evento: “Cuando spr_1_1 . Tocar x y ejecutar”

35. Cuando el usuario toca Spr_1_1 lo que tiene pasar es Mirar, clic en
control y arrastramos el evento “Si entonces” y lo enlazamos con el
evento “Cuando spr_1_1 . Tocar x y ejecutar”.

-9-
36. Clic en lógica y arrastramos la función = y lo
enlazamos en el evento “Si entonces”

37. Clic en Spr_1_1 y arrastramos el evento “spr_1_1 . Foto” y lo enlazamos

con la función = y añadimos el evento texto y escribimos: libre.png

38. Ahora tengo que añadir el evento: “Poner spr_1_1 . Foto como ……”, para
ello podemos duplicar el evento que tenemos arriba y lo arrastramos en el
evento “Si entonces”

Nota: Cambiamos el texto de libre en ocupado.png

39. Ahora programamos, pero recuerda que es un caso contrario al bloque

anterior, porque vamos agregar conjunción Si no y añadimos el evento:
“Poner spr_1_1 . Foto como Libre.png”

-10-
40. Ahora todos los spr tienen que tener un comportamiento análogo, conlleva
a realizar 8 programaciones cambiando los Spr y lo más fácil es hacer
duplicaciones.

Nota debemos de cambiar los spr…

41. Ahora a probar su aplicación.

-11-