EPT 4° - DEA 2 - Ficha de Aprendizaje

UNIDAD 1.
Elaboramos en equipo una aplicación con App Inventor

ACTIVIDAD 2. Creando la primera aplicación con App Inventor
App Inventor
1. Definición
Es un entorno de desarrollo de aplicaciones para dispositivos Android (Tablets o Smartphones). Utiliza la
metodología de bloques y un servicio basado en la nube por lo que todas las tareas se realizan en un navegador
web (Google Chrome, Microsoft Edge, etc.).
2. Ingresar y salir de la plataforma
2.1. Procedimientos para ingresar 2.2. Salir de la plataforma

1.º) Escribir App Inventor en el buscador de Google 1.º) Dar clic en tu correo electrónico que aparece en
y presionar la tecla Enter la parte superior derecha de la plataforma.
2.º) Dar clic en el enlace “MIT App Inventor”. 2.º) Dar clic en “Salir de la sesión”.
3.º) Dar clic en el botón “Create Apps” 3.º) Luego ir al buscador de Google y cerrar sesión
4.º) Agregar correo Gmail y contraseña para de tu cuenta de Google.
ingresar, o seleccionar el correo en la lista si en
caso ya registró la cuenta con anterioridad.
3. Entorno
1. Barra de menús
2. Gestor de pantallas
3. Tipo de vista: Diseñador /
Bloques
4. Paleta de componentes
5. Visor
6. Componentes
7. Propiedades
8. Medios
4. Tipos de vistas
Diseñador (Designer). La vista de diseño nos permite seleccionar los componentes de la App y definir el entorno
de usuario de la misma.
Bloques (Blocks). La vista de bloques sirve para dar las instrucciones a cada componente del diseño de la
aplicación y se programa mediante bloques o piezas encajando las piezas como en un puzle para establecer el
comportamiento de la app
5. Propiedades
5.1. Screen
PantallaAcercaDe (AboutScreen). Úselo para informar a los usuarios sobre su aplicación.
AlignHorizontal. Un número que codifica cómo los contenidos de la pantalla se alinean horizontalmente. Las
opciones son: 1 = alineado a la izquierda, 2 = centrado horizontalmente, 3 = alineado a la derecha.
AlignVertical. Un número que codifica cómo el contenido de la disposición se alinea verticalmente. Las opciones
son: 1 = alineado en la parte superior, 2 = centrado verticalmente, 3 = alineado en la parte inferior. La alineación
vertical no tiene efecto si la pantalla es desplazable.
AppName. Este es el nombre para mostrar de la aplicación instalada en el teléfono.
ColorDeFondo (BackgroundColor). Color de fondo de la pantalla.
ImagenDeFondo (BackgroundImage). Una imagen que se forma el fondo de la pantalla.
Icono (Icon). Una imagen que se utilizará como icono para la aplicación instalada en el teléfono. Debe de ser un
formato PNG o JPG.
ScreenOrientation. La orientación de pantalla solicitada, especificada como un valor de texto. Los valores
comúnmente utilizados son sin especificar, vertical, horizontal, sensor y usuario.
Título (Title). El título del formulario, que aparece en la barra de título.
Educación para el trabajo 4° Grado – Bimestre I - Unidad I – Actividad 2

5.2. Botón
ColorDeFondo (BackgroundColor). Devuelve el color de fondo del botón.
Enabled Si se establece, el usuario puede presionar la casilla de verificación para causar una acción.
Negrita (FontBold). Si está configurado, el texto del botón se muestra en negrita.
Cursiva (FontItalic). Si se establece, el texto del botón se muestra en cursiva.
Tamaño de letra (FontSize). Tamaño del punto para el texto del botón.
TipoDeLetra (FontTypeface). Familia de fuentes para el texto del botón.
Alto (Height). Tamaño de la altura del botón.
Ancho (Width). Tamaño del ancho del botón.
Imagen (Image). Imagen para mostrar en el botón.
Forma (Shape). Especifica la forma del botón (predeterminado, redondeado, rectangular, oval).
Texto (Text). Texto para mostrar en el botón.
Posición del texto (TextAlignment). Da la posición del texto en el botón y son las siguientes: izquierda, centro o
derecha.
Color de texto (TextColor). Color para el texto del botón.
Ejercicios
1. Crear 2 screen y cambia las siguientes propiedades:
Screen 1
PantallaAcercaDe (AboutScreen) = Pantalla principal del aplicativo.
ColorDeFondo (BackgroundColor) = color Turquesa.
AlignHorizontal = Centro
Screen 2
ColorDeFondo (BackgroundColor) = color Rosa.
AlignVertical = Centro
2. Al screen 1 agregar 4 botones y cambiar sus propiedades. Al primer botón cambiar la propiedad texto a
“Índice de masa corporal”, ColorDeFondo (BackgroundColor) a “Naranja”, Tamaño de letra (FontSize) a “20”,
y con “Negrita” (FontBold). Al segundo botón cambiar la propiedad texto a “Peso ideal”, ColorDeFondo
(BackgroundColor) a “Azul”, Tamaño de letra (FontSize) a “18”, Color de texto (TextColor) a “Blanco” y con
“Cursiva” (FontItalic). Al tercer y cuarto botón solo cambiar el texto a “Medir azúcar” e “Información”
respectivamente.
3. Al screen 2 agregar 3 botones y cambiar la propiedad de texto: Calcular, Limpiar y Regresar,
respectivamente. Luego cambiar la propiedad ColorDeFondo (BackgroundColor) a rojo, amarillo y verde, de
cada botón respectivamente.
4. Programar los bloques del primer botón (Índice de masa corporal) del screen 1 para que al presionar nos lleve
al screen 2.
5. Programar los bloques del tercer botón (Regresar) del screen 2 para que al presionar nos lleve al screen 1.
Práctica
1. Crear 2 screen y cambia las siguientes propiedades:
Al screen 3 agregar 3 botones y cambiar sus propiedades. Al primer botón cambiar la propiedad texto a “Calcular”,
ColorDeFondo (BackgroundColor) a “rojo”, Tamaño de letra (FontSize) a “16”, y con “Negrita” (FontBold). Al
segundo botón cambiar la propiedad texto a “Limpiar”, ColorDeFondo (BackgroundColor) a “amarillo”, Tamaño de
letra (FontSize) a “15” y con “Cursiva” (FontItalic). Al tercer botón cambiar la propiedad texto a “Regresar”,
ColorDeFondo (BackgroundColor) a “Verde”, Tamaño de letra (FontSize) a “17” y con “Negrita” (FontBold) y
“Cursiva” (FontItalic).
Al screen 4 agregar 3 botones y cambiar la propiedad de texto: Calcular, Limpiar y Regresar, respectivamente.
Luego cambiar la propiedad ColorDeFondo (BackgroundColor) a rojo, amarillo y verde, de cada botón
respectivamente.
2. Programar los bloques del segundo botón (Peso ideal) y del tercer botón (Medir azúcar) del screen 1 para que
al presionar nos lleve al screen 3 y 4, respectivamente.

3. Programar los bloques del tercer botón (Regresar) del screen 3 y 4 para que al presionar nos lleve al screen
1.

EPT 4° - DEA 2 - Ficha de Aprendizaje

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

EPT 4° - DEA 2 - Ficha de Aprendizaje

Cargado por

Copyright:

Formatos disponibles

UNIDAD 1.

Elaboramos en equipo una aplicación con App Inventor

2. Ingresar y salir de la plataforma

2.1. Procedimientos para ingresar 2.2. Salir de la plataforma

Educación para el trabajo 4° Grado – Bimestre I - Unidad I – Actividad 2

Educación para el trabajo 4° Grado – Bimestre I - Unidad I – Actividad 2

Educación para el trabajo 4° Grado – Bimestre I - Unidad I – Actividad 2

También podría gustarte