CONOCIENDO LA INTERFAZ DE APP INVENTOR ACTIVIDAD

DE APRENDIZAJE 2

APRENDÍZ
ALEIXO EDER PINEDA RAMIREZ
2037927
DOCENTE
DORIS GONZALEZ MARTINEZ

SERVICIO NACIONAL DE APRENDIZAJE

ANÁLISIS PARA EL DESARROLLO MÓVIL CON APP INVENTOR
MEDELLIN
NOVIEMBRE/2019
 INTRODUCCION

App Inventor es un entorno de desarrollo de software creado por

Google para la elaboración de aplicaciones destinadas al sistema operativo de
Android. El lenguaje es gratuito y se puede acceder fácilmente de la web. Las
aplicaciones creadas con App Inventor están limitadas por su simplicidad,
aunque permiten cubrir un gran número de necesidades básicas en un
dispositivo móvil.

Con App Inventor, se espera un incremento importante en el número

de aplicaciones para Android debido a dos grandes factores: la simplicidad
de uso, que facilitará la aparición de un gran número de nuevas aplicaciones; y
Google Play, el centro de distribución de aplicaciones para Android donde
cualquier usuario puede distribuir sus creaciones libremente.

A continuación, se presentará el paso a paso del diseño de una aplicación

móvil para el sistema operativo Android por medio de la aplicación inventor.

El proyecto tendrá el nombre de HOLAGATITO.

  CARACTERÍSTICAS DE LA APLICACIÓN HOLA GATITO:

App Inventor es un entorno de desarrollo de aplicaciones para dispositivos

Android. Para desarrollar aplicaciones con App Inventor sólo necesitamos un
navegador web y un Teléfono o Tablet Android si no se dispone de un
dispositivo se puede probar las aplicaciones en un emulador. App Inventor se
basa en un servicio web que permitirá almacenar trabajos y ayudará a realizar
un seguimiento en el desarrollo de proyectos.

Se trata de una herramienta de desarrollo visual muy fácil de usar, con la que
incluso los no programadores podrán desarrollar aplicaciones.

Al construir las aplicaciones para Android trabajaremos con dos herramientas:

App Inventor Designer y App Inventor Blocks Editor. En Designer se puede
construir una Interfaz de Usuario, eligiendo y situando los elementos con los
que se podrá interactuar con el usuario y los componentes que utilizará la
aplicación. En el Blocks Editor se podrá definir el comportamiento de los
componentes de la aplicación.

La aplicación HOLAGATITO tiene como caracteristicas la interfaz con el

usuario mediante pulsaciones en la pantalla táctil.

Al presionar la pantalla tenemos dos acciones:

Vibración del dispositivo por un tiempo determinado

Sonido por tiempo determinado y prolongado (maullido)

Básicamente el funcionamiento consiste en vibrar y maullar por un periodo de

500 milisegundos.

 LISTA DE COMPONENTES (HERRAMIENTAS) QUE UTILIZÓ PARA

LA APLICACIÓN HOLA GATITO:

La pantalla no aparece en la paleta igual que los restantes

componentes, pero aparece automáticamente en el proyecto. Cada proyecto
tiene una pantalla, llamada Screen1. Este nombre no puede ser cambiado.

Las etiquetas son componentes que se utilizan para mostrar texto.

Una etiqueta muestra el texto especificado en la propiedad Text. Otras

propiedades, que se pueden establecer tanto en el diseñador como en el editor
de bloques, controlan la apariencia y la colocación de ese texto.
 : Los botones son los componentes que los usuarios tocan para
realizar alguna acción en su aplicación. Los botones detectan cuando el
usuario lo pulsa. Muchos aspectos de la apariencia de un botón se pueden
cambiar. Con la propiedad Enabled podemos elegir si el botón está activo en la
aplicación.

El sonido es un componente no visible, que reproduce archivos de

sonido y vibra por el número de milisegundos (milésimas de segundo) que se
indica en el Editor de bloques. El nombre del archivo de sonido se puede
especificar en el diseño o en el Editor de bloques.

Este componente de los sentidos de Android el

acelerómetro del dispositivo, que detecta temblores y aceleración medidas en
tres dimensiones. La aceleración se mide en unidades del SI (m / s 2 ). Si el
dispositivo es un descanso acostado sobre su espalda, la aceleración Z será de
aproximadamente 9.8.
El componente produce tres valores.

 XAccel : positivo cuando el dispositivo está inclinada hacia la derecha

(es decir, su lado izquierdo se levanta), y negativos cuando el dispositivo
está inclinada hacia la izquierda (su tamaño correcto es elevado).
 YAccel : positivo cuando el fondo se levanta, y negativos cuando su
parte superior se levanta.
 ZAccel : positivo cuando la pantalla esté hacia arriba, y negativos
cuando la pantalla quede hacia abajo.

El primer bloque, si… entonces .., prueba una

condición dada. Si la condición es verdadera,
realiza las acciones en una determinada
secuencia de bloques; de lo contrario, los bloques
son ignorados.

Es un componente de multimedia que ejecuta

archivos de audio.

Es un componente de multimedia que

ejecuta un archivo de audio y
adicionalmente ejecuta también una
vibración que está condicionada al tiempo de duración que es es milisegundos.

 FUNCIONAMIENTO (DESCRIPCIÓN DE CÓMO SE CONECTAN LOS

COMPONENTES AL FUNCIONAR LA APP). HOLA GATITO

Fig. 1 Componentes y Bloques usados

Comenzamos con entrar a la página de inventor http://ai2.appinventor.mit.edu/

y creamos un usuario.

Luego de creado el usuario procedemos a crear un nuevo proyecto. En este

caso la actividad correspondiente sugiere el nombre de HOLAGATITO.

Fig. 2 Nombre de proyecto.

Comenzaremos con introducir una etiqueta Label dentro de la imagen del

teléfono móvil
 Fig. 3 Pantalla principal entorno app inventor.

En la parte superior izquierda de la pantalla podemos observar las

herramientas de uso de la interface allí seleccionamos la herramienta Label y la
arrastramos hasta dentro de la imagen del dispositivo móvil.

En la parte superior derecha encontramos todas las opciones de la herramienta

Label y por ende las que se seleccionen. Allí podemos hacer modificaciones
tales como el tipo de letra, color de fondo, relleno de borde, tamaño de la
etiqueta, color del texto.

Fig. 4 Opciones de Herramientas.

Después de realizado la inserción de Label procedemos a insertar un Text for
Button que nos da la posibilidad de interactuar con la aplicación.

Fig. 5 Opciones de Diseño.

En la parte derecha de la pantalla, podemos observar las diferentes opciones
de diseño, podemos modificar, el fondo, el ancho, el tamaño, el color, tono,
podemos agregar o quitar imágenes desde un fichero previamente guardado
hasta el Text For Button en el componente seleccionado en este caso Text For
Button.

En este caso hemos subido una imagen de un pequeño gato, se realiza con el
objetivo de conocer las diferentes opciones de diseño, también podemos
insertar sonidos que se activarán una vez presionado el botón de diseño.
Para insertar el sonido vamos a la parte superior derecha de la pantalla de
diseño y buscamos el recuadro llamado Blocks, damos clic en ese recuadro y
nos aparecerá la siguiente pantalla:
 Fig. 6 Bloque de diseño.

Una vez dentro de diseño buscamos en el Screen ubicado en la parte inferior

izquierda el componente que queremos adjuntar archivo de audio en este caso
Button 1, damos clic, nos debe aparecer una pantalla como la siguiente.

Fig. 7 Insertar archivo de audio.

En la pantalla aparecen varios “When Button” que son los encargados de

realizar una acción al presionar el Button, hay varias opciones de acciones
como lo es LongClic, LongFocus, TouchDown y varios mas que aparecen
corriendo la barra hacia la parte inferior.
En este caso utlizaremos el When Button1 Click que ejecuta archivos de audio
cuando se presiona. Lo seleccionamos y arrastramos hacia un lado del fondo
blanco, después de esto volvemos a la pantalla principal para hacer esto
damos clic en Designer, en las herramientas de Palette y buscamos la
herramienta Media que es la que nos va a interactuar entre el button y el
archivo de audio.
Podemos observar varias opciones de sonido, escogemos la opción Sound, lo
seleccionamos y al igual que el button arrastramos hasta la pantalla del móvil.
En las propiedades de sound adjuntamos el archivo de audio dendo clic en
source y buscamos el archivo de audio previamente seleccionado

Fig. 8 Opciones de Audio.

Una vez adjunto el audio procedemos a insertar también otras opciones como
vibración, todo esto lo podemos encontrar en el entorno bloques, además le
insertamos también un tiempo en milisegundos que es el tiempo de duración de
la vibración en este caso 500 milisegundos.
 Fig. 9 Opción de Vibración.

Además de vibración tenemos a disposición un sin numero de herramientas

que serán de mucha utilidad en el desarrollo de aplicaciones.
·En la parte superior hasta la inferior izquierda podemos observar todas las
herramientas disponibles que están separadas por categorías tales como:
User Interface
Layout
Media
Drawing and Animation
Maps
Sensor
Social
Storage
Connectivity
Lego®Mindstorms®
Experimental,
Extensión.
Al dar clic en una de ellas podemos observar las herramientas disponibles de
cada categoría:
 Fig. 10 Herramientas de Palette.
Una vez realizado nuestro diseño nos dirigimos a nuestro dispositivo y
descargamos la aplicación llamada MIT App Inventor2 que se encuentra en la
Play store de dispositivo Android
Una vez descargado abrimos la aplicación y nos muestra en la pantalla lo
siguiente:

Fig. 11 Aplicación MIT en el dispositivo móvil

Luego del procedimiento anterior continuamos con la conectividad entre el
dispositivo y la web.
 Fig. 12 Conectividad dispositivo y web.
Vamos a la a la pestaña Connect y seleccionamos Al companion, nos muestra
en la pantalla lo siguiente:

Fig. 13 Método Scan QR

Se tiene la opción de conexión por QR o por código, en nuestro caso por
código. Ingresamos el código en la aplicación y al ingresarlo sale la pantalla del
pc que significa la carga de la conexión.
 Fig. 14 Carga de Conexión entre dispositivos

Después de la conexión de los dispositivos realizamos pruebas al diseño

oprimiendo la pantalla de nuestro teléfono móvil y corroborando que se ejecute
lo diseñado (maullido del gato y vibración por tiempo determinado>).
Una vez finalizada la prueba procedemos a descargar la aplicación en nuestro
teléfono móvil.
Una recomendación al momento de descargar la aplicación primero tenemos
que configurar nuestro móvil para que permita la descarga.
Para eso nos dirigimos a Ajustes en nuestro Android y buscamos la opción
Seguridad. Una vez allí posicionado buscamos opción orígenes desconocidos y
la habilitamos esto con el fin de que el dispositivo permita descargar
aplicaciones que no sean de Play Store y la opción verificar aplicaciones
inactiva, esta ultima con el fin de permitir la instalación que pueden provocar
daños o mostrar una advertencia antes de instalarlas.
Finalizada la instalación nos dirigimos a la web inventor y buscamos el
recuadro Built, esta herramienta nos generar un código QR para convertirlo en
archivo .apk permite ver dos opciones:
App(provide QR code for .apk)  Nos permite descargar la aplicación
diseñada en el dispositivo para utilizarlo como una aplicación.

App (Save .apk to my computer)  Nos permite descargar el archivo en

nuestro host y podemos compartirlo y hacer uso de este.

Procedemos a utilizar este último como requisito de la actividad propuesta.

 Fig. 15 Herramienta Built.

Fig. 16 Compilando opción salvar en computadora.

Fig. 17 Archivo.apk generado.

 Fig. 18 Generando código QR para descarga de aplicación en el móvil.

Después de ejecutado la función nos aparecerá el siguiente código, que es

válido por dos horas.

Fig. 19 Código QR de descarga

 Fig. 20 Proceso de descarga al móvil

Fig. 21 Proceso de diseño de la aplicación culminado

 Fig. 22 Archivo .aia

CONCLUSIONES

Las aplicaciones móviles son un desarrollo tecnológico de grandes magnitudes

ya que nos permite interactuar con procesos lógicos, físicos, matemáticos y un
sin numero de usos en la industria, la sociedad y la economía.
El desarrollo de aplicaciones por medio del software Inventor nos permite
desarrollar nuestras ideas y presentarlas a la sociedad.