Manual Básico de App Inventor 2 by limaceti982016

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “HERMANOS CÁRCAMO” - PAITA

Autores: ▪ Berrú Saavedra Kelly Elizabeth ▪ Céspedes Tizón Liliana Margot

ÍNDICE ¿Qué es App Inventor? ................................................................................................................... 3

I. 1.

Diseñador ..................................................................................................................................... 3

Editor de bloques ......................................................................................................................... 3

Generador de la aplicación ......................................................................................................... 4

II. ¿Qué es frameword? ....................................................................................................................... 4 III. Interfaz de App Inventor ................................................................................................................ 4 INTERFAZ DE DISEÑO............................................................................................................ 5

1.1

Paleta ..................................................................................................................................... 6

1.2

Visor ....................................................................................................................................... 6

1.3

Componentes ........................................................................................................................ 7

1.4

Propiedades ........................................................................................................................... 7

1.5

Medios ................................................................................................................................... 8

2. INTERFAZ DE PROGRAMACIÓN CON BLOQUES .............................................................. 9 2.1

Bloques ................................................................................................................................ 10

2.2

Visor ..................................................................................................................................... 37

IV. EJEMPLOS APLICATIVOS ........................................................................................................ 38 CALCULADORA DE DOS NÚMEROS ................................................................................ 39

1.1

Diseño de la aplicación. ....................................................................................................... 39

1.2

Componentes agregadas a la pantalla ................................................................................ 39

1.3

Programación en bloques de la aplicación. ......................................................................... 40

TEOREMAS DE PITAGORAS ............................................................................................... 48

2.1

Diseño de la aplicación. ....................................................................................................... 48

2.2

Componentes agregadas a la pantalla. ............................................................................... 48

2.3

Programación en bloques de la aplicación. ......................................................................... 49

V 1.0

¿Qué es App Inventor? App Inventor es un framework creado inicialmente por el MIT (Instituto Tecnológico de Massachusetts) y fue adoptada por Google para que cualquier persona con interés pueda crearse su propia aplicación móvil Android, ya sea para su empresa, para su casa o por otros intereses. Para crear una aplicación con App Inventor hay que realizar 3 pasos: 1. Diseñador: Muestra el display de un móvil y se utiliza para el diseño de las pantallas de la aplicación donde se situarán los distintos componentes: imágenes, botones audios, textos, entre otros, configurando sus propiedades (aspecto gráfico, comportamiento, etc.).

Fuente: Autores (2018) 2. Editor de bloques: Permite programar de una forma visual e intuitiva el flujo de funcionamiento del programa utilizando bloques.

Fuente: Autores (2018)

V 1.0

3. Generador de la aplicación: Una vez terminada la aplicación se puede generar el instalador APK obteniéndose un código QR para su descarga desde el móvil o bien el propio archivo APK para descargar y enviar.

Fuente: Autores (2018)

II.

¿Qué es framework? Es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o módulos de software concretos, en base a la cual otro proyecto de software puede ser organizado y desarrollado. Esto puedo incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros programas para ayudar a desarrollar y unir los diferentes componentes de un proyecto.

III.

Interfaz de App Inventor La plataforma App Inventor consta con 2 partes muy importantes, los cuales son: 1. Interfaz de Diseño. 2. Interfaz de Programación con bloques.

V 1.0

1. INTERFAZ DE DISEÑO

Dentro de la interfaz de diseño se encuentra 5 partes, las cuales son:

V 1.0

1.1 Paleta: Componentes que se aĂąaden en el escenario y arrastrando hacia la ventana central.

Fuente: Autores (2018) 1.2 Visor: Escenario, donde se coloca y visualiza los componentes que se insertaran.

Fuente: Autores (2018)

V 1.0

1.3 Componentes: Muestra los componentes que se han insertado en el escenario. Incluso se puede renombrar.

Fuente: Autores (2018) 1.4 Propiedades: Muestra las propiedades de cada componente que se han insertado en el escenario.

Fuente: Autores (2018) V 1.0

1.5 Medios: Permite subir archivos al servidor de App Inventor.

Fuente: Autores (2018)

V 1.0

2. INTERFAZ DE PROGRAMACIÃ&#x201C;N CON BLOQUES

V 1.0

Dentro de la interfaz de programación con bloques, se encuentra 2 partes, las cuales son: 2.1 Bloques: Muestra los bloques de uso general.

Fuente: Autores (2018)

Descripción de los bloques integrados de App Inventor 2 ▪

Bloques de “Control” si entonces 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.

Fuente: Autores (2018) El segundo bloque, “si entonces… si no”, prueba una condición dada. Si el resultado es verdadero, realiza las acciones de la secuencia de bloques -entonces; de lo contrario, realiza las acciones en la secuencia de bloques - si no.

Fuente: Autores (2018) V 1.0

El tercero, “si entonces… si no, si… entonces”, prueba una condición dada. Si el resultado es verdadero, realiza las acciones en la secuencia de bloques - entonces; de otro modo prueba la segunda condición – si no, si. Si el resultado es verdadero, realiza las acciones en la secuencia de bloques – entonces; de lo contrario, pasa al siguiente bloque.

Fuente: Autores (2018) Todos estos bloques son combinaciones que se construyen a partir del primer bloque, desde el botón azul de la esquina superior izquierda del mismo. por cada número (variable) desde Ejecuta los bloques que engloba para cada valor numérico en la gama a partir del valor desde y termina en hasta, incrementando el número por el valor determinado. Se puede cambiar el nombre de la variable número por otro si se desea.

Fuente: Autores (2018) por cada elemento (variable) en la lista… ejecutar Ejecuta los bloques para cada elemento de una lista.

Fuente: Autores (2018)

V 1.0

mientras comprobar… ejecutar Comprueba el valor “mientras comprobar”. De ser cierto, lleva a cabo la acción indicada en ejecutar, luego prueba de nuevo. Cuando ya no se cumple la condición se pasa al siguiente bloque.

Fuente: Autores (2018) si… entonces… si no Prueba una condición dada. Si la afirmación es cierta, realiza las acciones en la secuencia entonces y devuelve ese valor al origen; de lo contrario, lleva a cabo las acciones del si no y devolverá el valor que dé.

Fuente: Autores (2018) ejecutar… resultado Realiza las acciones definidas en ejecutar y devuelve una sentencia o resultado. Útil cuando se requiere ejecutar un procedimiento antes de devolver un valor a una variable.

Fuente: Autores (2018)

V 1.0

evaluar pero ignorar el resultado Ejecuta el bloque de código conectado, pero ignora el valor devuelto.

Fuente: Autores (2018) abrir otra pantalla Nombre de la pantalla Abre otra pantalla con el nombre proporcionado.

Fuente: Autores (2018) abre otra pantalla con un valor inicial Nombre de la pantalla… valor inicial… Se abre otra pantalla y pasa un valor a la misma.

Fuente: Autores (2018) tomar el valor inicial Devuelve el valor inicial dado en la pantalla actual. Este valor se indica con el uso del bloque anterior, abre otra pantalla con un valor inicial Nombre de la pantalla… valor inicial…

Fuente: Autores (2018)

V 1.0

cerrar pantalla Cierra la pantalla actual.

Fuente: Autores (2018) cerrar la pantalla con un valor resultado Cierra la pantalla actual y devuelve un valor a la próxima pantalla.

Fuente: Autores (2018) cerrar la aplicación Cierra la aplicación.

Fuente: Autores (2018) tomar el texto inicial Devuelve el texto sin formato que se pasó a esta pantalla cuando está se inició por otra aplicación vació. Para aplicaciones con múltiples pantallas es mejor utilizar el bloque tomar el valor inicial.

Fuente: Autores (2018)

V 1.0

cerrar pantalla con texto… texto Cierra la pantalla actual y pasa el texto a la aplicación que se abrió éste. El comando es para devolver texto a actividades que no son de App Inventor, como para aplicaciones con múltiples pantallas, utiliza el bloque cerrar la pantalla con un valor resuelto.

Fuente: Autores (2018)

▪

Bloques de “Lógica” Cierto Representa el valor constante verdadero. Se utiliza para establecer valores de propiedades booleanas de los componentes, o como el valor de una variable que represente una condición.

Fuente: Autores (2018)

falso Igual que el anterior, pero valor falso o no verdadero. Se puede alternar entre cierto y falso mediante la flecha que apunta hacia abajo.

Fuente: Autores (2018) no Realiza la negación lógica, devolviendo falso si la entrada es un valor cierto, y verdadero si la entrada es falsa.

Fuente: Autores (2018) V 1.0

= Comprueba si los argumentos son iguales. • Dos números son iguales si son numéricamente iguales, por ejemplo, 2 es igual 2,0. •

Números y texto son iguales si el número es numéricamente igual a un número que se imprime con el texto. Por ejemplo, 12.0 es igual al resultado de la unión del primer carácter de 1A con el último carácter de Teafor2.

Fuente: Autores (2018) Este bloque permite cambiar también por el valor desigual.

Fuente: Autores (2018)

Y Devuelve cierto si todos los valores lo son.

Fuente: Autores (2018)

O Comprueba si cualesquiera de las dos condiciones son verdaderos.

Fuente: Autores (2018)

V 1.0

▪

Bloques de “Matemáticas”

0 Se puede utilizar como cualquier número positivo o negativo (decimales incluidos). Haciendo doble clic en el “0” dentro del bloque, le permitirá cambiar el número.

Fuente: Autores (2018)

=, ≠,>, ≥, <, ≤ Compara dos valores y devuelve si es verdadero o falso.

Fuente: Autores (2018)

+ Devuelve el resultado de la suma de cualquier cantidad de bloques que tienen un valor numérico. El bloque puede mutar ampliándose para permitir más números en la suma.

Fuente: Autores (2018) V 1.0

Devuelve el resultado de restar el segundo número del primero.

Fuente: Autores (2018) X El bloque permite realizar la operación de la multiplicación.

Fuente: Autores (2018) / Devuelve el resultado de dividir, el primer número por el segundo.

Fuente: Autores (2018)

^ Devuelve el resultado de elevar el primer número a la potencia indicada en el segundo.

Fuente: Autores (2018)

V 1.0

entero aleatorio entre 1 y 100 Devuelve un valor entero aleatorio entre los valores dados, ambos inclusive. El orden de los argumentos no importa.

Fuente: Autores (2018) decimal aleatorio Devuelve un valor aleatorio entre 0 y 1.

Fuente: Autores (2018) semilla aleatoria es El bloque permite generar secuencias respectivas de números aleatorios. Es útil para los programas de pruebas que implican valores aleatorios.

Fuente: Autores (2018) min Devuelve el valor mínimo de un conjunto de números.

Fuente: Autores (2018)

V 1.0

max Devuelve el valor máximo de un conjunto de números.

Fuente: Autores (2018) raíz cuadrada Devuelve la raíz cuadrada del número dado.

Fuente: Autores (2018) valor absoluto Devuelve el valor absoluto del número dado.

Fuente: Autores (2018) neg Devuelve el negativo de un número dado.

Fuente: Autores (2018)

V 1.0

log Devuelve el logaritmo natural de un número dado, es decir, el logaritmo en base e (2,71828…).

Fuente: Autores (2018) e^

Devuelve e (2,71828…) elevado a la potencia del número dado.

Fuente: Autores (2018) Redondear Devuelve el numero dado redondeado al entero más cercano. Por ejemplo, si la fracción es <0,5, se redondea hacia abajo y si es > 0,5 se redondeará hacia arriba.

Fuente: Autores (2018) superior Devuelve el número entero más pequeño que es mayor que o igual al número dado.

Fuente: Autores (2018)

V 1.0

inferior Devuelve el mayor entero que es menor o igual al número dado.

Fuente: Autores (2018) módulo de Módulo (a, b) es el mismo que resto (a, b) cuando A y B son positivos. En general, módulo (a, b) se define para cualquier A y B de modo que (inferior (a/b) x b) + módulo (a, b) = a. por ejemplo, el módulo (11, 5) = 1 módulo (-11, 5) = 4, módulo (11, -5) = -4, módulo (-11, -5) = -1.

Fuente: Autores (2018)

sen, cos, tan, asen, acos, atan Devuelve el seno, coseno, tangente, arco-seno, arco-coseno y arco-tangente respectivamente del número en grados.

Fuente: Autores (2018)

V 1.0

atan2… y… x Devuelve el arco tangente de y / x, y y x dado.

Fuente: Autores (2018)

convertir radiantes a grados Devuelve el valor en grados del número dado en radiantes. El resultado será un ángulo en el rango (0, 360).

Fuente: Autores (2018) convertir grados a radiantes te permite convertir de grados a radiantes con el selector. El resultado será un ángulo en el intervalo (- π, π +).

Fuente: Autores (2018) Dar formato decimal al número… decimales… Da formato a un número como un decimal con un número dado de posiciones después del punto decimal. El número de plazas debe ser un numero entero no negativo. El resultado se realiza mediante el redondeo del número o añadiendo ceros a la derecha.

Fuente: Autores (2018) V 1.0

¿es un número? Devuelve verdadero si el objeto dado es un número, y falso en caso contrario.

Fuente: Autores (2018)

convert number base 10 to hex Bloque sin traducir que toma una cadena de texto que representa un número entero positivo en una base y devuelve una cadena que representa el mismo número es otra base.

Fuente: Autores (2018)

▪

Bloques de “Texto” “…” El bloque puede contener caracteres (letras, números u otros caracteres especiales). Se considera un objeto de texto.

Fuente: Autores (2018)

V 1.0

unir Anexa todas las entradas para hacer una sola cadena. Si no hay entradas, devuelve una cadena vacía.

Fuente: Autores (2018) longitud Devuelve el número de caracteres, incluidos los espacios en la cadena.es la longitud de la cadena de texto dada.

Fuente: Autores (2018) está vacío Devuelve si la cadena contiene caracteres (incluyendo espacios) o no. Cuando la longitud de la cadena es 0, devuelve verdadero de lo contrario, devuelve falso.

Fuente: Autores (2018)

V 1.0

comparar texto compara si la primera cadena es lexicográficamente <,>0 = a la segunda.

Fuente: Autores (2018) recortar Elimina todos los espacios iniciales o finales de la cadena de entrada y devuelve el resultado.

Fuente: Autores (2018) mayúscula Devuelve una copia de su argumento de cadena de texto en mayúscula.

Fuente: Autores (2018) minúscula Devuelve una copia de su argumento de cadena de texto en minúscula.

Fuente: Autores (2018)

V 1.0

comienza en el texto… cadena Devuelve la posición del carácter en el que el primer carácter del bloque aparece por primera vez en el texto, o cero si no está presente.

Fuente: Autores (2018) contiene texto… cadena… Devuelve verdadero si el texto aparece en la cadena, de lo contario, devuelve falso.

Fuente: Autores (2018) recorta texto… en… Divide el texto en partes utilizando el texto “en” como punto de corte y genera una lista con los resultados.

Fuente: Autores (2018) dividir por espacios Divide el texto dado en partes separada por espacios.

Fuente: Autores (2018)

V 1.0

segmento de texto… inicio… longitud… Extrae parte del texto a partir de la posición inicial y la longitud de los caracteres.

Fuente: Autores (2018) sustituye en todo el texto… segmento… sustituto… Devuelve un texto nuevo resultado de sustituir todas las ocurrencias del segmento por sustituto.

Fuente: Autores (2018) Obsfucated Text “…” Produce texto, con un bloque de texto simple. La diferencia es que este oculta en el archivo apk.

Fuente: Autores (2018)

V 1.0

▪

Bloques de “Listas” crear una lista vacía Crea una lista vacía sin elementos.

Fuente: Autores (2018) constituye una lista Crea una lista con un número de elementos dados. Si no se proporciona ningún argumento se crea una lista vacía. Este bloque es un mutador.

Fuente: Autores (2018) añadir elementos a la lista… ítem Añade elementos al final de una lista.

Fuente: Autores (2018) V 1.0

¿está en la lista? cosa… lista… Si algo es uno de los elementos de la lista, devuelve verdadero; de lo contrario falso. Conviene tener en cuenta que, si una lista contiene sublistas, los miembros de la sublista no son miembros de la lista.

Fuente: Autores (2018) longitud de la lista lista Devuelve el número de elementos de la lista.

Fuente: Autores (2018) ¿está vacía la lista? lista Si la lista no tiene elementos, devuelve verdadero; de lo contrario devuelve falso.

Fuente: Autores (2018) toma un elemento al azar lista Coge un artículo al azar de la lista.

Fuente: Autores (2018)

V 1.0

índice en la lista cosa… lista. Devuelve la posición de la cosa en la lista, si no está en la lista, devuelve 0.

Fuente: Autores (2018) seleccionar elemento de la lista… índice… Selecciona el elemento en el índice que figura en la lista dada. El primer elemento de la lista está en el índice 1.

Fuente: Autores (2018) insertar elemento en la lista… índice… elemento… Inserta un elemento en la lista en la posición dada.

Fuente: Autores (2018) sustituye elemento de la lista lista… índice… sustituto… Inserta la sustitución en la lista dada en el índice de posición. Se elimina el elemento anterior de esa posición.

Fuente: Autores (2018) V 1.0

eliminar elemento de la lista lista… índice… Elimina el elemento de la posición indicada.

Fuente: Autores (2018) añadir a la lista lista1… lista2… Añade los elementos de la segunda lista al final de la primera lista.

Fuente: Autores (2018) copiar lista lista Hace una copia de una lista, incluyendo la copia de toda las sublistas.

Fuente: Autores (2018) ¿es una lista? cosa Si algo es una lista, devuelve verdadero; de lo contrario falso.

Fuente: Autores (2018)

V 1.0

lista a registro csv lista Interpreta la lista como un registro de una tabla y devuelve un texto CSV (valor separado por comas) que representa a la tabla.

Fuente: Autores (2018)

lista desde registro csv texto Analiza un texto como un registro en formato CSV para generar una lista de campos.

Fuente: Autores (2018)

lista desde tabla CSV texto Analiza un texto como un registro en formato CSV para producir.

Fuente: Autores (2018) buscar por parejas clave… parejas… noEncontrado… Se utiliza para buscar información en una estructura similar a un diccionario representado como una lista.

Fuente: Autores (2018)

V 1.0

▪

Bloques de “Colores” bloques básicos de colores Se trata de bloques de distintos colores identificados por el color de en medio. Di hace clic en centro de cualquier color aparece una ventana emergente y se puede cambiar entre una paleta de colores.

Fuente: Autores (2018) crear color… construye una lista… Permite crear colores RGB. El primer valor es rojo (Red), el segundo verde (Green) y el ultimo azul (Blue).

Fuente: Autores (2018) separar color Al revés que el bloque anterior. Devuelve el código RGB.

Fuente: Autores (2018)

V 1.0

▪

Bloques de “Variables” inicializando global nombre como… Este bloque se utiliza para crear variables globales y asignarle el valor de los bloques encajados. Al hacer clic en el nombre se puede cambiar el nombre de esta variable global.

Fuente: Autores (2018) tomar Este bloque proporciona una manera de conseguir cualquier variable que se haya creado.

Fuente: Autores (2018) poner… a Asigna a esta variable el valor especificado como entrada.

Fuente: Autores (2018) inicializar local nombre como… en… Permite crear variables que solamente son accesibles en la parte ejecutar de este bloque.

Fuente: Autores (2018) V 1.0

▪

Bloques de “Procedimientos” como procedimiento ejecutar… Recoge una secuencia de bloques juntos en un grupo. A continuación, se puede utilizar la secuencia de bloques establecida mediante una llamada al procedimiento. Si el procedimiento tiene argumentos, especifique los argumentos con el botón mutador del bloque. Si haces clic en el icono más azul, puedes arrastrar argumentos adicionales en el procedimiento.

Fuente: Autores (2018) como procedimiento resultado… Igual que el anterior bloque, pero al llamar a este procedimiento se devuelve un resultado.

Fuente: Autores (2018) llamar procedimiento Llama a un procedimiento que no devuelve un valor.

Fuente: Autores (2018)

V 1.0

2.2 Visor: Permite visualizar los bloques que se ha utilizado para crear la aplicaciรณn que se desea.

Fuente: Autores 2018

V 1.0

IV. EJEMPLOS APLICATIVOS

V 1.0

1. CALCULADORA DE DOS NÚMEROS La aplicación permitirá realizar las cuatro operaciones básicas como son: suma, resta, multiplicación y división. 1.1 Diseño de la aplicación.

Fuente: Autores 2018

1.2 Componentes agregadas a la pantalla.

Fuente: Autores 2018

V 1.0

1.3 Programación en bloques de la aplicación.

Seleccionar el primer botón denominado: Btn_suma

Fuente: Autores 2018

Escoger el primer bloque llamado cuando… ejecutar para luego ser arrastrado al visor.

Fuente: Autores 2018

Seleccionar el tercer campo de texto denominado: Txt_resultado

Fuente: Autores 2018

V 1.0

Escoger el bloque llamado poner… como para luego ser colocado junto al primer bloque.

Fuente: Autores 2018

Seleccionar la opción Texto.

Fuente: Autores 2018

Escoger el primer bloque. Y ser llevado con los demás.

Fuente: Autores 2018

V 1.0

Nuevamente se debe seleccionar el tercer campo de texto denominado: Txt_resultado.

Fuente: Autores 2018

Escoger el bloque llamado poner… como para luego ser colocado junto a los demás.

Fuente: Autores 2018

Seleccionar la opción Matemáticas.

Fuente: Autores 2018

V 1.0

Escoger el bloque de suma para ser unido con el resto de bloques.

Fuente: Autores 2018

Seleccionar el segundo campo de texto denominado: Txt_A.

Fuente: Autores 2018

Escoger el siguiente bloque para ser insertado dentro del bloque de suma.

Fuente: Autores 2018

Hacer el mismo paso que el anterior. Pero con el tercer campo de texto.

Fuente: Autores 2018

V 1.0

Realizar los mismos pasos, que se aplicaron en la programación de suma. Para resta, multiplicación y división. Al final debe quedar como resultado igual que en la imagen.

Fuente: Autores 2018

Por último, se programa el botón de Borrar y se realiza como se muestra en la imagen.

Fuente: Autores 2018

V 1.0

Se debe dirigir a la parte superior para generar la aplicaciรณn en archivo apk.

Fuente: Autores 2018

Luego compartir el archivo apk con el mรณvil.

Fuente: Autores 2018

V 1.0

Fuente: Autores 2018

Fuente: Autores 2018 V 1.0

Fuente: Autores 2018

V 1.0

2. TEOREMAS DE PITAGORAS La aplicación permitirá al usuario realizar la suma de los cuadrados de las respectivas longitudes de los catetos. 2.1 Diseño de la aplicación.

Fuente: Autores 2018

2.2 Componentes agregadas a la pantalla.

Fuente: Autores 2018

V 1.0

2.3 Programación en bloques de la aplicación.

Seleccionar el botón denominado: Calcular

Fuente: Autores 2018

Escoger el primer bloque llamado cuando… ejecutar para ser llevado al visor.

Fuente: Autores 2018

Seleccionar la cuarta etiqueta denominada: Resultado

Fuente: Autores 2018

V 1.0

Escoger el bloque poner…como… y llevar con el primer bloque.

Fuente: Autores 2018

Seleccionar la opción Matemáticas.

Fuente: Autores 2018

Escoger el bloque de raíz cuadrada. Para luego ser llevado con los demás bloques.

Fuente: Autores 2018

V 1.0

Dentro de bloque de Matemรกticas. Escoger el bloque de suma.

Fuente: Autores 2018

Agregar 2 bloques con el signo de elevaciรณn e insertar dentro del bloque de suma.

Fuente: Autores 2018

Seleccionar el primer campo de texto denominado: Primer Resultado

Fuente: Autores 2018

Elegir el bloque que se muestra en la imagen. Y debe ser insertado dentro del bloque con el signo de elevaciรณn.

Fuente: Autores 2018

V 1.0

Luego elegir el primer bloque de Matemáticas y se debe digitar el número 2.

Fuente: Autores 2018

Realizar los mismos pasos que lo anterior. Pero con el segundo campo de texto.

Fuente: Autores 2018

Se debe dirigir a la parte superior para generar la aplicación en archivo apk.

Fuente: Autores 2018

V 1.0

Luego compartir el archivo apk con el mรณvil.

Fuente: Autores 2018

V 1.0