INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA

Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 1 de 18

ACTIVIDAD Nº1

Crear una aplicación donde al ingresar un nombre dé la bienvenida.

1. Nos ubicamos en el visor de Diseño, a la izquierda encontramos un menú llamado Paleta donde
encontraremos diferentes componentes para realizar la interfaz de la aplicación. Seleccionamos
dos Campos de texto o Text Box y lo arrastramos a la pantalla “Screen 1”.

Realizamos la misma operaci ón con dos Bot ones .

2. Renombraremos los objetos gráficos: Se realizará de la siguiente forma:

Objeto a usar Prefijo y forma de nombrar Ejemplo

Botón (Button) Btn+nombre (minúscula ) btnAceptar/btnPresionar/btnProcesar
Campo de texto
Txt+nombre (minúscula) txtAviso/txtNombre/txtApellido
(TextBox)

• Se presiona el botón Rename o Cambiar nombre para modificar el nombre del objeto gráfico.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 2 de 18

• Una vez modificado el nombre presionamos Aceptar

3. El siguiente paso es cambiar las propiedades (parte derecha de la pantalla) de cada objeto utilizado.

Cambiaremos el nombre de Screen 1 a Mi primera aplicación :

para esto nos desplazamos hacia abajo y en la casilla Título
ingresamos el nuevo nombre.

En la opción Color de Fondo hay dos opciones:

Por defecto: se despliega un menú con una serie de colores. Escogemos un color
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 3 de 18

Imagen de fondo: nos da la opción de escoger una

imagen desde nuestro ordenador. Seleccionamos ese
recuadro, subimos la imagen que deseemos y le
damos Aceptar

4. Cambiaremos las propiedades del Botones.

Seleccionamos el Botón 1 en la pantalla, vamos a propiedades y en la casilla Texto digitamos

Aceptar.
Repetimos la acción con el Botón 2 con el nombre Salir
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 4 de 18

5. Alinearemos los objetos gráficos:

En propiedades en la opción DispHorizontal seleccionamos Center:1.

6. Por ultimo nos dirigimos a la paleta y seleccionamos un Notificador, lo arrastramos y este se

situará en la parte inferior de la pantalla:
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 5 de 18

• El componente Notificador muestra cuadros con alertas temporales y mensajes.

7. A
¡LLEGÓ EL MOMENTO DE PROGRAMAR!
continuación nos dirigimos al visor de Bloques, allí aparecen los objetos visuales definidos (Nota:
en esta parte radica la importancia de los nombres)

• El desarrollo es con piezas de rompecabezas. Hacemos click en Screen 1 y aparecen los

eventos, seleccionamos el primero:
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 6 de 18

• Ahora llamaremos al objeto Notificador, al dar click en este, nos muestra todos los eventos,
acciones y cambio de valor de propiedades que pueden hacerse.

• Seleccionamos el que está dentro de la elipse y lo encajamos con el anterior bloque

seleccionado.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 7 de 18

• En la sección de Integrados seleccionamos Texto y luego click a la primera pieza, la

arrastramos hasta que se acople a la pieza

• Lo seleccionamos y lo encajamos con el anterior bloque. Escribiremos el texto BIENVENIDO

seguido de un espacio.

• Configurar el boton Aceptar:

8. Ahora le daremos un valor al TextAceptar, al dar click en este se despliegan todos los eventos,
acciones y cambios de propiedades que puedan hacerse: seleccionamos el que aparece en la
imagen subrayado, observamos que se acopla perfectamente al evento del botón.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 8 de 18

• Utilizaremos un evento donde nos enlace todas las entradas para que nos genere una única
entrada de texto. En la misma seccion de Integrados: Texto encontraremos la opción unir, la
arrastramos y encajamos con el evento anterior. (Nota: si no hay entradas, crea un texto en
blanco).
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 9 de 18

• Ahora en el TextAceptar emplearemos el evento donde aparecerá el texto que se escribirá

en la ejecución de la aplicación.

9. Configuración del botón Salir: seleccionamos el evento del botón salir y buscamos en la opción
Control: cerrar la aplicación.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 10 de 18

10. Probar la aplicación en el móvil: conectar el móvil al ordenador mediante el código.

Una vez hecho solo tenemos que probar desde nuestro móvil si al pulsar el botón funciona.

11. Guardar el proyecto: ¡Importante! Debes guardar el proyecto clicando en el menú superior
Proyectos > Guardar proyecto.

ACTIVIDAD Nº2
Crear una aplicación donde al presionar un botón en el móvil, nos diga una frase

1.
Creamos un nuevo proyecto que tendrá como nombre Talk to me.
(Nota: el nombre no debe contener espacios)
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 11 de 18

Una vez nombrado el nuevo proyecto estaremos dentro del programa en el apartado de
Diseño.

2. Crear un botón: Para crear un botón hay que ir a la Paleta,

y dentro del apartado “Interfaz de usuario” coger el Botón
(Button) y arrastrarlo al visor (Viewer).

3. Cambiar las propiedades del botón: en el apartado

propiedades donde encontramos todas las propiedades del botón, tenemos que modificar el
apartado “Texto” y escribir “Háblame” o bien en inglés “Talk to me”. En esta parte sí nos permite
escribir con espacios.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 12 de 18

4. Anadir voz: Primero deberemos añadir un componente de voz hablada. Para eso
deberemos ir a la paleta y dentro del apartado Medios arrastrar el componente
“TextoAVoz” al visor.

Al arrastrar el componente al visor y soltar el botón del mouse, veremos cómo automáticamente se
nos coloca en la parte inferior del visor. Esto sucede porque es un componente no visible.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 13 de 18

Hasta ahora hemos introducido todos los componentes que necesitábamos, ahora debemos
introducir y modificar bloques para que la aplicación funcione.

5. Programación (Edición de bloques): para programar debemos irnos al apartado de

“Bloques” clicando el botón que encontramos arriba a la derecha:

• Dentro de Screen 1, y de Botón 1 hay que añadir el bloque:

Análisis:
Cuando el Botón 1 se
oprima debe hacer….

• Ahora en Text a voz 1 hay que añadir el siguiente bloque y añadirlo en el espacio existente en el
bloque 1:

• Por lo tanto sólo nos falta añadir el texto que nos va a decir, esto se hace dentro del menú principal
“Integrados” en la opción de Texto, añadimos el primer bloque que nos permitirá escribir en él.

Análisis:
Cuando el Botón 1 se
oprima debe hacer: Llamar
TextoAVoz1 y dar el
mensaje.

• Entre las comillas debemos escribir el mensaje que queramos que nos diga el móvil: como por
ejemplo: “Felicidades, bienvenido a App Inventor”
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 14 de 18

6. Una vez hecho esto vamos a conectar nuestro móvil al ordenador para poder visualizar la aplicación
en la pantalla.

• Conectar móvil al ordenador: para ello, hay que ir a la opción Conectar del menú superior y
dentro de esta opción hay que clicar “All companion”

• Luego nos aparecerá una ventana con un código de barras que podemos escanear o bien un
código de 6 dígitos que debemos introducir en nuestro teléfono dentro de la aplicación que ya
habíamos descargado “MIT AI2 Companion”
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 15 de 18

DENTRO DE LA APLICACIÓN QUE YA TENEMOS CREADA, PODEMOS AÑADIRLE

MÁS COSAS PARA
HACERLA MÁS COMPLETA.

PARTE1

• Una vez escaneado el código o escrito el dígito, en nuestra pantalla del móvil aparecerá lo
mismo que vemos en el simulador de móvil en el ordenador.

Hemos creado una aplicación pero ésta puede mejorar. A continuación implementaremos nuestra
aplicación para que al pulsar el botón, el móvil nos diga la frase que escribamos en ese momento, y así
podamos ir cambiándola.

Pasos a seguir:

• Debemos situarnos en la pantalla de Diseño.

1. Introducir un bloque de “Text Box” o Cuadro de texto

 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 16 de 18

• Dentro de la Paleta, y dentro del menú de “Interface de usuario” debemos seleccionar y arrastrar al
visor el componente llamado “Campo de texto”.

• Para mejorar el diseño, pondremos el cuadro de texto en la parte superior .

2. PROGRAMACIÓN:

• Insertar el bloque “Campo de texto”

• Debemos arrastrarlo debajo del primer grupo de bloques.

• Eliminar el bloque antiguo desplazándolo hasta la papelera, dando lugar al Campo de Texto.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 17 de 18

• Finalmente debemos arrastrar el bloque del cuadro de texto al espacio disponible en el primer
grupo de bloques.

Análisis:
Cuando el Botón 1 se
oprima debe hacer: Llamar
TextoAVoz1 y muestre el
mensaje escrito en el
Cuadro de texto.

3. Probar la aplicación en el móvil: primero debemos comprobar que no hemos perdido la conexión,
en caso de que sí, debemos Reiniciar la conexión, es decir, conectar el móvil al ordenador mediante
el código nuevamente.

Una vez hecho solo tenemos que probar desde nuestro móvil si al pulsar el botón funciona.

4. Guardar el proyecto: importante! debes guardar el proyecto clicando en el menú superior

Proyectos > Guardar proyecto
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 18 de 18

PARTE 2
El objetivo es que el teléfono móvil vibre cuando lo agitemos, para ello tenemos que añadir un
componente que es un sensor de aceleración, es decir un acelerómetro, este elemento lo encontramos en
la parte inferior de la sección “Interfaz de usurario” >> Sensores.

5. DISEÑO

Al ser otro componente no visible al igual que con el audio se nos ubica en la parte inferior.

¿Qué es un acelerómetro? Un acelerómetro es cualquier instrumento destinado a

detectar o medir aceleraciones. Es decir cambio de velocidades. En nuestro caso el
acelerómetro permite medir la aceleración del móvil que pasa de velocidad cero a

velocidad mayor al estar en movimiento

 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 19 de 18

6. PROGRAMACIÓN

• Añadir un bloque para cuando el móvil se mueva. Dentro de “Screen” y de “Acelerómetro1” hay
que añadir el siguiente bloque:

Análisis:
Cuando el “Acelerómetro1”
se agita. Haga…

• Añadir los bloques para que el móvil nos hable y nos diga una frase:

En este caso necesitamos los mismos bloques que antes, pero no hace falta repetir todo el proceso, ya que
existe la posibilidad de copiar y pegar bloques que ya tenemos agregados.

Por tanto debemos seleccionar el primero de los bloques, el de color morado referente al audio añadido
anteriormente y hacer “copiar-pegar” o (copy-paste) de la manera que siempre lo hacemos con el texto.

De esta manera generamos dos bloques nuevos que podremos añadir al espacio que necesitamos.
Debemos de cambiar por último el texto y escribir algo del estilo: “¡Deja de moverme!”

Análisis:
Cuando elel“Acelerómetro1”
D ebes mejorar aspecto de tu aplicación, para ello
se un
debes poner agita.
fondoHaga: Llamar ay alinear los objetos
de pantalla
“TextAVoz1” a hablar.
gráficos.
Mensaje: ‘Deja de moverme’
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA
Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 20 de 18

7. Probar la aplicación en el móvil: primero debemos comprobar que no hemos perdido la conexión,
en caso de que sí, reiniciar la conexión, es decir, conectar nuevamente el móvil al ordenador
mediante el código.

Una vez hecho solo tenemos que probar desde nuestro móvil si al pulsar el botón funciona.
 INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO DUITAMA Grado Once

GUÍA DE TRABAJO Tecnología e Informática 29/04/2019

Henry Alberto Cárdenas R Página 19 de 18

8. Guardar el proyecto: ¡Importante! debes guardar el proyecto clicando en el menú superior

Proyectos > Guardar proyecto.

ACTIVIDAD Nº3
 Crea una aplicación donde aparezca la foto de una
INSTITUTO TÉCNICO SANTO TOMÁS DE AQUINO
mascota, al presionar
DUITAMA
un botón debe emitir el sonido
Grado Once
que hace el animal y además vibre el móvil.
GUÍA DE TRABAJO Tecnología Página

Docente practicante: e InformáticaJecika Ibedt Agudelo Rodríguez 29/04/201917 de

18

Material para esta aplicación:

• Foto de la mascota
• Archivo con el sonido correspondiente a la mascota