Guía Estudiante App Inventor

Instituto de Cooperación Social - ICOS “Infancia es Destino”

Guía del estudiante Programando aplicaciones para dispositivos móviles Android utilizando App Inventor.

Ricardo Valdez

NIVEL DE EDUCACIÓN PRIMARIO

La realización de esta guía estuvo a cargo del siguiente equipo:

Coordinado por: Licda. Karina Melendez Directora Técnico Pedagógica ICOS

Edición y diseño Ricardo Vidal Valdez Cutzal Epesista ECYS-USAC

Asesoría técnica José Ricardo Morales Prado Ingeniero en Ciencias y Sistemas

Asesoría pedagógica Luis Angel Diego Docente área computación

Colaboración Inga. Sasha Palencia, Angélica Esmeralda Valdez

This work is licensed under a NonCommercial 4.0 International License.

Creative

Commons

Attribution-

NIVEL DE EDUCACIÓN PRIMARIO

Guía del estudiante

Programando aplicaciones para dispositivos móviles Android utilizando App Inventor.

Autor: Ricardo Vidal Valdez Cutzal

Primera Edición Guatemala C.A.

Tabla de Contenidos UNIDAD

1

Lección 1

Primeros pasos

Herramientas

Android App Inventor - Ventana diseño - Ventana bloques Emulador Android Pasos para construir una Aplicación App: Mi primera Aplicación - Análisis - Ambiente - Crear un proyecto - Diseñar - Armar - Depurar Proyectos

3 5 6 7 9 10 11 11 12 14 15 19 22 23

Lección 3

Ciclo Bloques para ciclos App: Ruleta - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos

UNIDAD Lección 4

Lección 2

Ciclos

2

43 43 44 44 45 45 46 57 60 61

Variables y funciones Datos

Condicionales

Condición Bloque Condicional App: Número par o impar - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos

25 25 27 27 28 29 29 33 40 41

Dato Tipos de datos Operadores App: Suma de dos números - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos

63 64 64 67 67 67 68 68 76 82 83

Lección 5

Variable Tipos de variables App: Suma de dos números - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos Lección 6

84 85 87 87 87 88 88 96 103 104

Listas

Lista App: Lista telefónica - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos Lección 7

UNIDAD

Variables

106 107 107 107 108 108 112 117 118 Funciones

Función Bloque para funciones App: Objetos con sonido - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos

120 120 122 122 122 123 123 129 134 135

3

Almacenamiento y dibujo

Lección 8

Almacenamiento

Almacenamiento Bloques de almacenamiento App: Apuntes - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos Lección 9

138 139 140 140 140 141 141 145 149 151

Lienzo y Dibujo

Lienzo Plano Cartesiano App: Lienzo - Análisis - Ambiente - Crear proyecto - Diseñar - Armar - Depurar Proyectos

153 153 155 155 156 156 157 160 165 166

Construcción de Proyecto Bloques Integrados Bibliografía

167 168 178

Actividades Actividad 1: ÂżLo conoces?

Actividad 2: Otras Apps Actividad 3: Laberinto Actividad 4: El ciclo del reciclaje del papel Actividad 5: Cuadro de datos Actividad 6: Datos a informaciĂłn Actividad 7: Variables Actividad 8: Lista de objetos Actividad 9: Funciones del cuerpo humano Actividad 10: Almacenar los alimentos Actividad 11: Hacer una copia Actividad 12: Proyecto

1

Primeros Pasos

Competencia



Comprende la necesidad de utilizar la tecnología como alternativa innovadora para la solución de problemas en su entorno.

En esta unidad se aprenderá sobre el sistema operativo Android, componentes de App Inventor y las instrucciones para construir aplicaciones utilizando condicional y ciclos.

Al finalizar esta unidad el estudiante será capaz de construir aplicaciones para dispositivos móviles de forma sencilla e intuitiva; utilizando notificadores, campos de texto, etiquetas, botones, imágenes, bloques condicionales, ciclos, matemática, entre otros.

LECCIÓN 1

HERRAMIENTAS

► Android Actividad 1: ¿Lo conoces? 

Observar el dibujo y escribir en qué lugares lo has visto.

_______________________________________________ _______________________________________________ _______________________________________________ _______________________________________________ _______________________________________________ _______________________________________________

2

¿Qué es Android?

Es un sistema operativo utilizado en teléfonos móviles y tablets. Este se encarga de controlar los componentes físicos, por ejemplo la cámara, sonidos, batería, entre otros.

La principal ventaja de utilizar Android es que existe una gran cantidad de aplicaciones que se pueden utilizar para facilitar tareas, por ejemplo juegos, agendas, reproductores de videos y música, medidor de temperatura, mapas, correo electrónico, etc.

Android cuenta con diferentes versiones y que cada una de ellas tiene un nombre de dulces o postres, además los nombres son asignados en orden alfabético.

Ice

Entre las aplicaciones más utilizadas en Android están:

Cream

Sandwich

(v4.0):

Sándwich de helado Jelly

Bean

(v4.1/v4.2/v4.3):



Facebook

Gominola



YouTube

KitKat (v4.4): Kit Kat



Whatsapp

Lollipop (v5.0/v5.1): Piruleta



Google Play

Marshmallow (v6.0) Malvavisco



Google Maps



Instagram



Gmail

3

Actividad 2: Otras Apps 

Escribir si has utilizado alguna de estas aplicaciones o si conoces otras. _______________________________________________ _______________________________________________ _______________________________________________ _______________________________________________ _______________________________________________ _______________________________________________ _______________________________________________

4

► App Inventor App Inventor es una herramienta que permite crear aplicaciones para dispositivos Android de forma sencilla y con una interfaz intuitiva. Desde una calculadora hasta aplicaciones más complejas.

Para desarrollar una aplicación en App Inventor es necesario:  Una computadora con navegador web*  Dispositivo móvil con sistema Android** * Google Chrome o Mozilla Firefox, no se puede utilizar con Internet Explorer. **Teléfonos inteligentes (Smartphone), tabletas (tablet) o utilizar un emulador.

Para construir una aplicación en App Inventor se trabaja el diseño y la lógica de forma separada. El diseño se trabaja arrastrando componentes y configurando propiedades. La lógica se realiza arrastrando y enlazando bloques de instrucciones.

Diseño

Bloques

5

► Diseño

6

1

3 2

4

1. La paleta contiene todos los elementos que se pueden insertar en nuestra aplicación. Hay elementos gráficos como campos de texto, botones, lienzo de dibujo y elementos que no se ven en la pantalla del móvil, como base de datos (TinyDB), acelerómetro, cámara de vídeo, etc.

2. El visor de la pantalla, simula la apariencia visual que tendrá la aplicación en el móvil. Para añadir un elemento a la pantalla hay que arrastrarlo desde la paleta y soltarlo en el visor. Los elementos que no tengan visibilidad hay que arrastrarlos también al visor y automáticamente se desplazarán debajo de él.

3.

En la sección de componentes se muestra la lista de los componentes que se han colocado en el proyecto. Cualquier componente que haya sido arrastrado y soltado desde la paleta al visor aparecerá ahí. Si se quiere borrar alguno es en la lista de componentes donde está el botón que permite borrarlo.

6

5

4. En Medios se muestra las distintas imágenes y sonidos que estarán disponibles para el proyecto. Cualquier archivo de imagen o audio que se quiera usar en la aplicación hay que insertarlo usando este apartado para que esté disponible.

5. Propiedades, cada vez que en el Visor se seleccione un componente, en el área de propiedades aparecerán todos los detalles que se puedan cambiar de ese componente. Por ejemplo, al hacer clic sobre un componente de campo de texto se podrá cambiar en propiedades su color de fondo, texto, fuente, etc.

6. En el menú de opciones se podrá encontrar opciones como crear proyecto nuevo, abrir un proyecto, conectarse al emulador, generar archivo apk, etc.

► Bloques

1 3

2

7

1. En esta área se encuentran los bloques integrados de control, lógica, matemáticas, texto, listas, colores, variables y procedimientos. Por ejemplo si se necesita realizar una suma lo encontramos en matemáticas, una sentencia condicional en lógica, cambiar de ventana en control, etc.

2. Aquí nos aparecen los componentes que se colocan en el visor, se puede obtener las propiedades o eventos de un componente, realizar funciones o procedimientos del componente.

3. En esta área se arrastran los bloques y se enlazan unos con otros de igual forma como se arma un rompecabezas. En esta área se encuentra una papelera de reciclaje, si se necesita borrar un bloque se arrastra hacia esta; y una parte de avisos que nos indica si faltan piezas o bloques por armar, o si los bloques no están armados correctamente.

8

► Emulador Android Un emulador es un software que permite ejecutar programas de otro dispositivo en nuestra computadora. Por ejemplo, en el año de 1996 fue lanzada la consola de videojuegos Nintendo 64, si se quiere jugar con esta consola no es necesaria tenerla físicamente, se puede instalar un emulador y ya con esto se puede disfrutar de esta consola.

https://es.wikipedia.org/wiki/Nintendo_64#/media/File:N64-Console-Set.png http://i244.photobucket.com/albums/gg31/samuraywil/project17.jpg

Como sucede en el ejemplo anterior, para probar las aplicaciones que se realicen no es obligatorio tener un dispositivo Android, para esto se utiliza un emulador de un dispositivo móvil Android. Para este fin App Inventor ofrece un emulador que lleva por nombre aiStarter. Basta con iniciar el emulador y App Inventor se encarga de mostrar la aplicación en el emulador. A partir de este momento cuando se mencione la palabra emulador se estará refiriendo al emulador del dispositivo móvil Android.

9

► Pasos para construir una aplicación en App Inventor Analizar el Problema

Depurar (revisar)

Preparar ambiente de trabajo

Diseñar

Crear proyecto 

    

Armar bloques

Analizar el problema: construir una aplicación tiene como finalidad resolver problemas específicos y el primer paso consiste en definir con precisión el problema hasta lograr la mejor comprensión posible. Una forma de realizar esta actividad se basa en formular claramente el problema, especificar los resultados que se desean obtener, identificar la información disponible, determinar las restricciones y definir los procesos necesarios para convertir los datos disponibles en la información requerida.

Teniendo una idea clara de cómo debe de funcionar nuestra aplicación, se debe de preparar el ambiente de trabajo iniciando los servicios de App Inventor, en caso de trabajar de forma local; iniciar el emulador y cambiar de idioma.

Crear proyecto nuevo.

Realizar el diseño de la aplicación.

Armar los bloques de instrucciones, en caso de ser necesario regresar a diseño y viceversa.

Por último se debe de probar lo realizado, si es necesario regresar a diseño o bloques.

10

► Mi primera aplicación: Sintetizador de voz

La primera aplicación a construir será un sintetizador de voz, esto quiere decir que la aplicación será capaz de convertir un texto a una voz artificial. ¿Cómo va a funcionar nuestra primera aplicación? Se tendrá un campo de texto donde se ingresará un texto, y un botón “escuchar”. Al momento de presionar el botón se obtendrá el texto ingresado en el campo de texto y convertirlo a una voz artificial.

Ingresar Texto.

Capturar evento al presionar botón.

Obtener el texto ingresado.

11

Pasar el texto ingresado a voz.

Iniciar emulador: Se debe de iniciar el emulador, dando clic sobre el icono, de la barra de tareas, con forma de pieza de rompecabezas con la imagen de Android. Previamente instalado.

Al darle clic, inmediatamente aparecerá una ventana de color negro con letras blancas, no te preocupes, no debes de cerrarla. Esta pantalla indica que ha iniciado el emulador y que está a la espera que se le envié una aplicación.

Abrir navegador web: Para utilizar App Inventor es necesario un navegador web, para esto se debe de darle clic al icono de Google Chrome o Firefox que aparece en la barra de tareas.

Icono Google Chrome

Icono Firefox

Cuando se muestre la pantalla del navegador se debe de escribir lo que te indique el instructor, para efectos de esta guía se escribirá lo siguiente: http://luis_angel:8888.

12

Se presiona la tecla Intro o Enter del teclado luego de escribir el texto.

En la siguiente pantalla únicamente se presiona el botón Log In.

Si el texto de la pantalla anterior está en inglés, se puede cambiar el idioma dando clic en el menú superior de la pantalla, donde se encuentra la palabra English, se desplegará los diferentes idiomas que se puede utilizar App Inventor, seleccionar Español y se recargará la página con el texto de la pantalla en español.

13

Crear proyecto: En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo.

Inmediatamente se mostrará una ventana, donde se debe de escribir el nombre del proyecto, tomar en cuenta que el nombre de los componentes y del proyecto no puede contener espacios en blanco, acentos o símbolos especiales, como por ejemplo signo +, -, $, #, “, ¿, etc.

Escribir en el campo de texto con recuadro azul, el texto “Leccion1TextoaVoz”, presionar el botón aceptar.

14

En el paso anterior se creó el proyecto pero este aún no tiene componentes, se diseñará nuestra primera aplicación, para esto de la paleta de Interfaz de usuario arrastrar al Visor:   

Una etiqueta Un campo de Texto Un botón

Como se podrá notar cada vez que se agrega un componente al visor, en el área de Componentes se van enlistando de acuerdo al orden colocado en el visor, de arriba hacia abajo.

Y de la paleta Medios arrastrar al Visor el siguiente componente: 

Texto a voz

15

El componente TextoAVoz aparece en la parte inferior del visor como componente no visible. Al momento de abrir la aplicación en nuestro dispositivo no se mostrará este componente en la pantalla.

Etiqueta1 Seleccionar la Etiqueta1 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 1” cambiar por “Ingrese un texto”.

En el visor ahora deberá de aparecer el nuevo texto.

CampoDeTexto1 Seleccionar el CampoDeTexto1 en el área de componentes, en la parte de abajo aparece el botón “Cambiar nombre”, presionar este botón y se desplegará una nueva ventana, en “nuevo nombre” colocar el nombre “Texto”. Al igual que un proyecto, el nombre de un componente no puede contener espacios en blanco, símbolos o acentos.

Presionar en aceptar.

16

En el área de componentes ya no aparece con el nombre de CampoDeTexto1 sino como Texto. En las propiedades del campo de texto cambiar la propiedad Pista, esta propiedad sirve para colocar una pista de lo que se espera que se escriba en este campo, remplazar el texto “Pista para CampoDeTexto1” por “Ingrese un texto”.

17

Boton1 De forma similar a lo realizado con la etiqueta (Etiqueta1) y el campo de texto (Texto), seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Sintetizar”.

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “Escuchar”.

18

Notar la diferencia, entre el cambiar nombre del componente y la propiedad texto, la propiedad texto es como se muestra en la aplicación, y el nombre del componente es como será identificado dentro de la aplicación.

Hasta el momento se ha realizado el diseño de nuestra aplicación, la forma en que se visual nuestra aplicación. Ahora se debe de armar los bloques de forma lógica, de manera que se cumpla con el comportamiento esperado.

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Si se necesita retornar a la parte de diseño, se puede hacer presionando el botón “Diseñador”.

19

Botón: Sintetizar Seleccionar el componente Sintetizar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Sitentizar.clic ejecutar”).

Al seleccionar un componente se despliega una serie de bloques de color amarillo oscuro los eventos; de color verde las propiedades y de color lila las funciones especiales.

Campo de Texto: Texto Obtener la propiedad texto del Campo de texto: Texto, esto es lo que será pasado a voz. De forma similar a lo realizado con el botón sintetizar, hacer clic al componente Texto, se desplegará un grupo de bloques y seleccionar el bloque (“Texto.Texto”).

20

Componente: TextoAVoz1 En el paso anterior se puede notar que las dos piezas no se pueden armar ya que tienen formas distintas. Esto se debe a que hace falta hacer uso del componente TextoaVoz1, hacer clic sobre este, y seleccionar la función TextoaVoz1.Hablar mensaje”).

(“llamar

Ahora si se podrá armar los bloques de la siguiente forma.

Notar que se han realizado todos los pasos propuestos en la fase de análisis: capturar el evento en el botón, obtener el texto ingresado y llamar el componente de texto a voz.

21

Ahora únicamente queda depurar (probar) nuestra aplicación. Seleccionar del menú opciones, la opción Conectar y luego en “Emulador”, aparece una ventana que indica que se espere mientras se carga la aplicación en el dispositivo móvil emulado.

Esto puede tarde de 1 a 2 minutos, así que paciencia.

En la barra de tareas aparece un icono de Android, al darle clic sobre este nos aparece un celular, esperamos que termine el conteo regresivo y se deberá mostrar nuestra aplicación. Ingresar un texto en el cuadro de texto y presionar el botón escuchar. Se deberá de escuchar una voz con el texto colocado en el campo de texto.

Con esto se ha realizado nuestra primera aplicación Android. Puedes agregar muchas más funcionalidades, regresando al modo de diseñador y bloques, ¡a seguir descubriendo y probando!

22

Para probar en algún dispositivo se debe de seleccionar en el menú de opciones, la opción Generar y en App (guardar archivo .apk en mi ordenador), conectar el dispositivo y guardar el archivo generado.

Desde el dispositivo móvil se abre el archivo generado, instalar y ¡listo! Ya se tiene en el dispositivo móvil tú primera aplicación móvil.

LECCIÓN 1 – PROPUESTAS DE PROYECTOS 

Aplicación que ayude a leer.



Aplicación deletrear palabras.



Un abecedario.



Un sistema de pronunciación para diferentes idiomas.

23

LECCIÓN 2

CONDICIONALES

Actividad 3: Laberinto 

Unir a Android con su computadora trazando una línea a través del laberinto.

.

24

► Condición ¿Qué es una condición?

Es una circunstancia necesaria e indispensable para que otra pueda ocurrir.

Ejemplos:   

Si llueve debes de utilizar un paraguas.

Si tienes 12 años puedes ver la película.

Si terminas tú tarea podrás salir a jugar.

► Bloque Condicional Es un bloque o grupo de bloques que se puede ejecutar o no, en función del valor de la condición. Debe ser cierto para que pueda suceder.

Ejemplos:   

Si el número de intentos es tres entonces finalizar juego.

Si recolectas una moneda entonces sumar a tu puntaje.

Si no hay salida entonces retornar caso contrario continuar.

Selección simple La estructura condicional de selección simple ejecuta un conjunto de bloques cuando la proposición (condición) es verdadera; si esta es falsa, no hace nada.

25

Selección doble La estructura condicional de selección doble ejecuta un conjunto de bloques cuando la proposición (condición) es verdadera y un conjunto diferente cuando esta es falsa.

Este bloque tan importante les permite a los programadores enseñarle al dispositivo cómo debe tomar las decisiones durante la ejecución de un programa. El bloque si-entonces sirve para darle inteligencia a las aplicaciones. Se usará este bloque muchísimas veces cuando se hagan las aplicaciones.

El cerebro es el centro de nuestro sistema nervioso, controla

nuestros

movimientos,

memorias y decisiones.

26

pensamientos,

â–ş AplicaciĂłn: NĂşmero par o impar

â–ş NĂşmero Par Todo nĂşmero que puede ser dividido exactamente por 2.

Ejemplo: los nĂşmeros 2, 14, 26, 30, 100, etc.

â–ş NĂşmero Impar Todo nĂşmero que no puede ser dividido exactamente por 2.

Ejemplo: los nĂşmeros 3, 7, 19, 31, 101, etc.

ComprobaciĂłn: ÂżEl 12 es par o impar?

12 á 2 = 6 đ?‘…đ?‘’đ?‘ đ?‘–đ?‘‘đ?‘˘đ?‘œ = 0 El nĂşmero 12 es par porque es divisible exactamente por 2, su residuo es 0. ÂżEl 18 es par o impar?

18 á 2 = 9 đ?‘…đ?‘’đ?‘ đ?‘–đ?‘‘đ?‘˘đ?‘œ = 0 El nĂşmero 18 es par porque es divisible exactamente por 2, su residuo es 0. ÂżEl 15 es par o impar?

15 á 2 = 7 đ?‘…đ?‘’đ?‘ đ?‘–đ?‘‘đ?‘˘đ?‘œ = 1 El nĂşmero 15 es impar porque no es divisible exactamente por 2, su residuo es 1. ÂżEl 27 es par o impar?

27 á 2 = 13 đ?‘…đ?‘’đ?‘ đ?‘–đ?‘‘đ?‘˘đ?‘œ = 1 El nĂşmero 17 es impar porque no es divisible exactamente por 2, su residuo es 1.

27

Conclusión:  Si el residuo de la división de un número por 2 es igual a cero el número es par.  Si el residuo de la división de un número por 2 es diferente a cero el número es impar.

¿Cómo va a funcionar nuestra aplicación? Se tendrá un campo de texto donde se ingresará un número, y un botón “comprobar”. Al presionar el botón se obtendrá el número ingresado y se comprobará sí el número es par o impar por medio del residuo de dividir por 2 el número y mostrar el resultado en un notificador.

Ingresar un número.

Capturar evento al presionar botón.

Comprobar si el número es par o impar

Mostrar alerta en el notificador

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

28

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribir en el campo de texto con recuadro azul, el texto “Leccion2PareImpar”, presionar el botón aceptar.

De la paleta de Interfaz de usuario arrastrar al visor:  Una etiqueta  Un campo de Texto  Un botón  Un notificador

29

El notificador aparece en la parte de abajo del visor como componente no visible.

Etiqueta1 Seleccionar la Etiqueta1 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 1” cambiar por “Ingrese un número”.

Campo DeTexto1 Seleccionar el CampoDeTexto1 en el área de componentes, hacer clic en “Cambiar nombre” y colocar el nombre “numero”. Presionar en aceptar.

30

En las propiedades cambiar la propiedad Pista, reemplazar el texto “Pista para CampoDeTexto1” por “Ingrese un número”.

En las propiedades chequear la propiedad SóloNúmeros. Al estar chequeada esta propiedad sólo se podrán ingresar números en el campo de texto.

31

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Comprobar”.

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “Comprobar”.

32

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Botón: Comprobar Seleccionar el componente Comprobar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Comprobar.clic ejecutar”).

33

Campo de Texto: numero Hacer clic sobre el

componente (“numero.Texto�).

34

numero,

y

seleccionar

el

bloque

Bloque Integrado: Matemáticas Seleccionar Matemáticas de los bloques integrados, se desplegará un grupo de (“módulo de ÷ ”).

bloques, seleccionar el bloque

De los bloques de Matemática seleccionar el bloque numérico permite ingresar un número.

El bloque anterior cambiar el

por el número

35

.

. Este bloque

Armar los bloques como se muestra a continuación.

Cambiar la operación a realizar haciendo clic sobre la expresión “módulo de” y seleccionar “resto de”. Esta operación matemática devuelve el residuo de una división.

Bloque Integrado: Control Seleccionar Control de los bloques integrados, se desplegará un grupo de

bloques, seleccionar el bloque (“si entonces si no”). Este bloque servirá para evaluar la condición si es un número sea par o impar, recordar que si el residuo de la división por 2 es igual a 0, entonces el número es par en caso contrario es impar.

36

Bloque Integrado: Matemáticas Para evaluar la condición se debe de comprobar si el residuo es igual a 0, para esto seleccionar Matemáticas de los bloques integrados, el bloque , como se muestra a continuación.

Para la derecha de la igualdad seleccionar un bloque numérico bloques integrados Matemáticas.

37

de los

Bloque Integrado: Texto Se deberá de desplegar un texto cuando se cumpla o no la condición. De los bloques integrados seleccionar Texto, seleccionar el bloque como se muestra en la siguiente imagen.

Escribir el mensaje

, cuando el residuo es igual a cero; y

, cuando el residuo no es igual a cero.

Notificador: Notificador1 Hacer clic sobre el componente Notificador1 y seleccionar el bloque (“llamar Notificador1.MostrarAlerta aviso”).

38

Finalizar de armar los bloques, quedando de esta manera.

Notar que se han realizado los pasos propuestos en la fase de análisis: capturar el evento en el botón, obtener el número, comprobar si el número es par o impar y mostrar el resultado en modo de alerta con un notificador.

39

Ahora únicamente nos queda depurar (probar) nuestra aplicación. Seleccionar del menú opciones, la opción Conectar y luego “Emulador”.

Ingresar un número en el cuadro de texto y presionar el botón Comprobar. Se obtendrá el resultado con un mensaje de notificación.

40

LECCIÓN 2 - PROPUESTA DE PROYECTOS



Aplicación temperatura corporal e indique si es normal.



Aplicación que determine si un número es primo.



Aplicación de acuerdo al mes ingresado indique en que estación se encuentra.



Aplicación que indique si un número es mayor o menor que otro.



Aplicación que determine la grasa corporal de una persona.

41

LECCIÓN 3

CICLOS

Actividad 4: El ciclo de reciclaje del papel 

Dibujar en el siguiente espacio el ciclo de reciclaje del papel.

42

► Ciclo Serie de fases por las que pasa un acontecimiento o fenómeno y que suceden en el mismo orden hasta llegar a una fase, vuelven a repetirse en el mismo orden.

Ejemplos:   

Ciclo escolar Ciclo de reciclaje Ciclo de la vida

► Bloque para ciclos Es una estructura de repetición que permite ejecutar una o varios bloques de instrucciones, un número determinado de veces o, indefinidamente mientras se cumpla una condición.

Existen dos tipos de bloques de repetición, ejecutando uno o más bloques:  Un número determinado de veces.  Mientras se cumpla una condición.

Hay luna llena cada 29.5 días, este es el llamado ciclo lunar.

43

► Aplicación: Ruleta

►Número Aleatorio Es un número resultado de una selección de números al azar.

Ejemplo: una bolsa que contenga papeles enumerados del 1 al 20, y luego sacar un número sin ver dentro de la bolsa. Ese número es un número aleatorio, ya que fue sacado al azar.

► Giro de 360 grados Una vuelta completa tiene un giro de 360° (el símbolo ° significa grados), media vuelta tiene un giro de 180°, y sirve para indicar la dirección en la que apunta un objeto. Por ejemplo, la aguja segundera de un reloj de pared para completar una vuelta debe de moverse 60 posiciones.

44

¿Cómo va a funcionar nuestra aplicación? Cuando ocurra el evento presionar el botón (flecha) se hará girar al azar la ruleta (haciendo girar 5 veces en direcciones distintas), al finalizar de girar la ruleta, la flecha estará apuntando a un número.

Capturar evento al presionar flecha.

Utilizar un ciclo de 5 repeticiones.

Girar ruleta de forma aleatoria

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribiremos en el campo de texto con recuadro azul, el texto “Leccion3Ruleta”, seguido de esto presionamos el botón aceptar.

45

De la paleta de Interfaz de usuario arrastrar al visor:  

Dos etiquetas Un botón

De la paleta de Dibujo y animación arrastrar al visor.  Un lienzo  Un SpriteImagen

46

El SpriteImagen debe de quedar dentro del lienzo.

Etiqueta1 Seleccionar la Etiqueta1 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 1” cambiar por “RULETA”.

Etiqueta2 Seleccionar la Etiqueta2 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 2” cambiar por “Presiona la flecha para girar la ruleta”.

47

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “girar”.

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “”.

48

Cambiar la propiedad Imagen en el área de propiedades, en el cuadro aparecerá el texto “Ninguno…”.

Presionar el texto “Ninguno…” se desplegará un submenú, presionar el botón “Subir Archivo”.

49

Se abrirá una ventana, en la que se deberá seleccionar una imagen. Presionar el botón “Seleccionar archivo”.

Se abrirá una nueva ventana, (seguir las instrucciones del instructor donde ubicar la imagen) seleccionar el archivo con la imagen de la flecha apuntando hacia arriba.

Presionar el botón Abrir.

50

Notar que ahora aparece el nombre de la imagen “flecha.png”, en caso no aparezca volver a seleccionar archivo. Para finalizar presionar el botón Aceptar.

Cambiar la propiedad Ancho y Alto en el área de propiedades. texto “Automático…” se desplegará un submenú: Propiedad Automático Ajustar al contenedor Pixeles

Al presionar el

Descripción - Tamaño predeterminado - Se ajusta al tamaño de la pantalla, horizontal o vertical - Tamaño fijo

Chequear en pixel, colocar el tamaño fijo de 50 pixeles para el ancho y alto, como se muestra a continuación.

51

52

SpriteImage1 Seleccionar SpriteImagen1 en el área de componentes, cambiar el nombre por “ruleta”.

Cambiar la propiedad Imagen en el área de propiedades, en el cuadro aparecerá el texto “Ninguno…”.

53

Al presionar el texto “Ninguno…” se desplegará un submenú, presionar el botón “Subir Archivo”.

Se abrirá una ventana, en la que se deberá seleccionar una imagen. Presionar el botón “Seleccionar archivo”.

Se abrirá una nueva ventana, (seguir las instrucciones del instructor donde ubicar la imagen) seleccionar el archivo con la imagen de una ruleta. Presionar el botón Abrir.

54

Notar que ahora aparece el nombre de la imagen “ruleta app.png”, en caso no aparezca volver a seleccionar archivo. Para finalizar presionar el botón Aceptar.

Cambiar la propiedad Ancho y Alto en el área de propiedades. Al presionar el texto “Automático…” se desplegará un submenú. Chequear en pixel, colocar el tamaño fijo de 250 pixeles para el ancho y alto, como se muestra a continuación.

55

Lienzo1 Seleccionar el Lienzo1 en el área de componentes, cambiar la propiedad Ancho y Alto en el área de propiedades. El lienzo contiene al dibujo por lo que el tamaño del lienzo deberá ser igual o más grande. Para este caso el tamaño del lienzo será igual al del dibujo. Chequear en pixel, definir el tamaño fijo de 250 pixeles para el ancho y alto, como se muestra a continuación.

56

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Botón: girar Seleccionar el componente girar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando girar.clic ejecutar”).

57

Bloque Integrado: Control Seleccionar Control de los bloques integrados, se desplegará un grupo de

bloques, seleccionar el bloque (“por cada número desde 1 hasta 5 en incrementos de 1 ejecuta”). Este bloque permite realizar desde 1 hasta 5 repeticiones, con saltos de uno por uno, siendo modificable el punto de inicio, fin y saltos.

Bloque Integrado: Matemáticas Seleccionar Matemáticas de los bloques integrados, se desplegará un grupo de (“entero aleatorio entre

bloques, seleccionar el bloque 1 y 100”).

Cambiar el por el número giro desde 0° hasta 360°.

. Esto quiere decir que se puede hacer un

58

SpriteImagen: ruleta Seleccionar el componente ruleta, se desplegará un grupo de bloques, seleccionar el bloque (“poner ruleta.Dirección como”). Este bloque permite colocar la propiedad dirección a la que apunta el dibujo.

Finalizar de armar los bloques, quedando de esta manera.

Notar que se han realizado los pasos propuestos en la fase de análisis: capturar el evento en el botón, realizar cinco repeticiones obteniendo un número aleatorio entre 1 y 360, cambiar la dirección de la imagen de la ruleta en cada repetición.

59

Ahora únicamente nos queda depurar (probar) nuestra aplicación. Seleccionar del menú opciones, la opción Conectar y luego “Emulador”.

Al presionar sobre la flecha la ruleta girará.

60

LECCIÓN 3 - PROPUESTA DE PROYECTOS 

Aplicación que muestre las tablas de multiplicar de un número.



Aplicación que escriba una multiplicación en forma de sumas.



Aplicación que indique los números primos de un rango.



Aplicación con un banner animado.

61

2

Variables y Funciones

Competencia



Analiza situaciones de la vida cotidiana en forma algorítmica.

En esta unidad se aprenderá sobre datos, tipos de datos, variables globales, variables locales, listas y funciones.

Al finalizar esta unidad el estudiante será capaz de construir aplicaciones móviles utilizando bloques de variables, listas, funciones y procedimientos.

62

LECCIÓN 4

DATOS

Actividad 5: cuadro de datos 

Llenar el siguiente cuadro con los datos de tus compañeros de clase o familiares.

Nombre

Edad

Fecha Nacimiento

Color favorito

► Dato Los datos son representaciones simbólicas, bien sea mediantes números o letras. Los datos indican un valor asignado a las cosas.

Ejemplos:    

Una dirección Un color La temperatura El clima

63

Cada uno de los datos por sí mismos no da información. Para crear información de los datos, es necesario interpretarlos. Por ejemplo: La temperatura es de 5°C. El dato como tal no da información. Pero al interpretar este dato se puede determinar que al estar a 5°C el ambiente es necesario abrigarse para evitar un resfriado, esto ya es información.

La información que se introduce en las aplicaciones es recibida en forma de datos y son manipulados para que se pueda desarrollar distintas soluciones a los diferentes problemas.

► Tipos de Datos 

Números: se utilizan como entradas en las operaciones matemáticas.



Palabras: están formadas por letras y/o números. Pueden estar delimitadas por espacios en blanco.



Listas: es una secuencia de palabras separadas por un delimitador. Por ejemplo una lista de nombres delimitados por la coma: Luis, Marta, Sara, Marcos

► Operadores 

Aritméticos: Posibilitan las operaciones entre datos de tipo numérico y dan como resultado otro valor de tipo numérico.

Bloques integrados: Matemática

64



Alfanuméricos: Permite operar con datos de tipo de carácter o cadenas.

Bloques integrados: Texto 

Relacionales: Permite la comparación entre datos del mismo tipo y dan como resultado dos valores posibles: verdadero o falso.



Lógicos: Posibilitan la evaluación lógica de dos expresiones de tipo lógico. Dan como resultado uno de dos valores posibles: Verdadero o Falso.

Bloques integrados: Lógica

La Biblioteca del Congreso de Estados Unidos, fundada en 1800 y distribuida en tres edificios de Washington DC, es la mayor del planeta con más de 164 millones de publicaciones. Ahora imagina la cantidad de datos existentes en internet.

65

Actividad 6: datos a información



Con los datos de la actividad 5, responder las siguientes preguntas. ¿Quiénes tiene el mismo apellido? _________________________________________________________ ¿Cuántos tienen tu misma edad? _________________________________________________________ ¿Cuántos cumplen años en enero? _________________________________________________________ ¿A quiénes les gusta el color azul? _________________________________________________________



Indicar el tipo de dato para cada uno de los siguientes atributos: Atributo

Tipo de Dato

Nombre Cantidad de llantas Dirección Punteo Edad

66

► Aplicación: Suma de dos números

Se desea que la aplicación sea capaz de sumar dos números ingresados por el usuario. ¿Cómo va a funcionar nuestra aplicación? Se tendrán dos campos de texto donde se ingresarán dos datos numéricos en cada uno de ellos, y un botón “Sumar”. Al presionar el botón se utilizará el operador numérico de suma para obtener el resultado y mostrarlo en una etiqueta.

Ingresar primer número.

Ingresar segundo número.

Capturar evento al presionar botón.

Sumar los números.

Mostrar resultado en una etiqueta.

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

67

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribir en el campo de texto con recuadro azul, el texto “Leccion4Suma”, presionar el botón aceptar.

De la paleta de Interfaz de usuario arrastrar al visor:   

Cuatro etiquetas Dos campos de Texto Un botón

68

Etiqueta1 Seleccionar la Etiqueta1 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 1” cambiar por “Sumador”.

Etiqueta2 Seleccionar la Etiqueta2 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 2” cambiar por “Ingrese primer número”.

69

Etiqueta3 Seleccionar la Etiqueta3 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 3” cambiar por “Ingrese segundo número”.

Etiqueta4 Seleccionar la Etiqueta4 en el área de componentes, cambiar el nombre “Etiqueta4” por “resultado”.

70

Cambiar la propiedad Texto en el área de propiedades, reemplazar el texto “Texto para Etiqueta 4" por “”.

Ya no aparecerá el texto de la etiqueta en el visor, ya que se ha dejado vacío y será donde se muestre el resultado de la suma.

Campo DeTexto1 Seleccionar el CampoDeTexto1 en el área de componentes, hacer clic en “Cambiar nombre” y colocar el nombre “numero1”. Presionar en aceptar.

71

En las propiedades cambiar la propiedad Pista, reemplazar el texto “Pista para CampoDeTexto1” por “Ingrese un número”.

En las propiedades chequear la propiedad SóloNúmeros.

72

Campo DeTexto2 Seleccionar el CampoDeTexto2 en el área de componentes, hacer clic en “Cambiar nombre” y colocar el nombre “numero2”. Presionar en aceptar.

En las propiedades cambiar la propiedad Pista, reemplazar el texto “Pista para CampoDeTexto2” por “Ingrese un número”.

73

En las propiedades chequear la propiedad SóloNúmeros.

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Sumar”.

74

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “Sumar”.

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

75

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Botón: Sumar Seleccionar el componente Sumar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Sumar.clic ejecutar”).

76

Campo de Texto: numero1 Hacer clic sobre el

componente

número1,

y

seleccionar

el

bloque

número2,

y

seleccionar

el

bloque

(“numero1.Texto”).

Campo de Texto: numero2 Hacer clic sobre el

componente

(“numero2.Texto”).

77

Bloque Integrado: Matemáticas Seleccionar Matemáticas de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque

.

Bloque Integrado: Texto Seleccionar Texto de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque

(“unir”).

78

Al hacer clic sobre el botรณn de color azul del bloque al lado derecho, de tal forma que el bloque permita unir 6 textos.

De los bloques de Texto seleccionar tres bloques ingresar un texto.

Escribir en los bloques

los textos:

79

arrastrar

. Este bloque permite

Hacer clic derecho sobre y seleccionar duplicar para realizar una copia de estos bloques.

Armar los bloques de la siguiente manera.

80

,

Etiqueta: resultado Hacer clic sobre

el

componente

resultado

y

seleccionar

el

bloque

(“poner resultado.Texto como”).

Finalizar de armar los bloques, quedando de esta manera.

Notar que se han realizado los pasos propuestos en la fase de análisis: capturar el evento en el botón, obtener el primer número, obtener el segundo número, realizar la suma de los números y mostrar el resultado en la etiqueta.

81

Ahora únicamente nos queda probar nuestra aplicación. Vamos a seleccionar del menú opciones, la opción Conectar y luego Emulador.

Ingresar dos números en cada uno de los cuadros de texto y presionar el botón sumar. Se desplegará el resultado bajo el botón.

82

LECCIÓN 4 - PROPUESTA DE PROYECTOS



Calculadora.



Calculadora científica.



Aplicación que compare dos números he indique cuál es mayor o menor.



Conversor de unidades de medida.

83

LECCIÓN 5

VARIABLES

► Variable Es un espacio de trabajo reservado para guardar datos. El valor de una variable puede cambiar en algún paso de la aplicación.

Las variables son similares a cajones en los que se pueden guardar datos. El valor que contiene una variable es el último dato asignado a esta.

Ejemplo: Determinar los valores almacenados al final, en las variables a, b, c:

1. a= 20, b= 5, c= 25 2. c= 40 3. b= c – a + 12 4. c= c – a 5. a= 8 6. c= a + b + c

a 20

b 5

c 25 40

40-20+12 = 32 40-20= 20 8 8

32

Solución: a = 8, b = 32, c = 60

84

8 + 32 + 20 = 60 60

► Tipos de Variables 

Variable local: se pueden utilizar únicamente dentro de una función o bloque.



Variable global: se puede utilizar en toda la aplicación.

Los primeros dispositivos de almacenamiento fueron las tarjetas perforadas en los años de 1960 y 1970, eran tarjetas de lámina hecha de cartulina que contenían información en forma de perforaciones en una codificación especial.

85

Actividad 7: Variables 

Determinar los valores almacenados al final, en las variables e, f, g, h:

e

f

1. e=5, f=5, g=5, h=5 2. e=e – f + g + h 3. f= e + f + g - h 4. g= e + f + g + h 5. h= e – f + g + h

86

g

h

► Aplicación: Suma de números con variables

Se desea que la aplicación sea capaz de sumar dos números ingresados por el usuario utilizando internamente variables. ¿Cómo va a funcionar nuestra aplicación? Se tendrán dos campos de texto donde se ingresarán dos datos numéricos en cada uno de ellos, y un botón “Sumar”. Al presionar el botón se utilizará el operador numérico de suma para obtener el resultado y mostrarlo en una etiqueta.

Ingresar primer número.

Ingresar segundo número.

Capturar evento al presionar botón.

Asignar valor a variables.

Sumar las variables.

Mostrar variable de resultado en etiqueta.

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

87

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribir en el campo de texto con recuadro azul, el texto “Leccion5SumaVariable”, presionar el botón aceptar.

Se utilizará nuevamente la interfaz de la lección 4, por lo que se puede saltar esta parte de diseño.

De la paleta de Interfaz de usuario arrastrar al visor:   

Cuatro etiquetas Dos campos de Texto Un botón

88

Etiqueta1 Seleccionar la Etiqueta1 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 1” cambiar por “Sumador”.

Etiqueta2 Seleccionar la Etiqueta2 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 2” cambiar por “Ingrese primer número”.

89

Etiqueta3 Seleccionar la Etiqueta3 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 3” cambiar por “Ingrese segundo número”.

Etiqueta4 Seleccionar la Etiqueta4 en el área de componentes, cambiar el nombre “Etiqueta4” por “resultado”.

90

Cambiar la propiedad Texto en el área de propiedades, reemplazar el texto “Texto para Etiqueta 4" por “”.

Campo DeTexto1 Seleccionar el CampoDeTexto1 en el área de componentes, hacer clic en “Cambiar nombre” y colocar el nombre “numero1”. Presionar en aceptar.

91

En las propiedades cambiar la propiedad Pista, reemplazar el texto “Pista para CampoDeTexto1” por “Ingrese un número”.

En las propiedades chequear la propiedad SóloNúmeros.

92

Campo DeTexto2 Seleccionar el CampoDeTexto2 en el área de componentes, hacer clic en “Cambiar nombre” y colocar el nombre “numero2”. Presionar en aceptar.

En las propiedades cambiar la propiedad Pista, reemplazar el texto “Pista para CampoDeTexto2” por “Ingrese un número”.

93

En las propiedades chequear la propiedad SóloNúmeros.

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Sumar”.

94

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “Sumar”.

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

95

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Botón: Sumar Seleccionar el componente Sumar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Sumar.clic ejecutar”).

96

Campo de Texto: numero1 Hacer clic sobre el

componente

número1,

y

seleccionar

el

bloque

número2,

y

seleccionar

el

bloque

(“numero1.Texto”).

Campo de Texto: numero2 Hacer clic sobre el

componente

(“numero2.Texto”).

97

Bloque Integrado: Variables Seleccionar Variables de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque

.

Cambiar el nombre de la variable, hacer clic sobre “nombre” y reemplazar por “c”. Será la variable global donde se almacenará el resultado de la suma.

De los bloques de Matemática seleccionar el bloque numérico inicializar la variable “c”.

De los bloques de Variables seleccionar dos bloques

98

para

Cambiar el nombre de las variables locales por “a” y “b”. Serán las variables que obtengan el valor ingresado en los campos de texto.

Colocar el cursor sobre la variable “c” y seleccionar el bloque

99

Seleccionar Matemáticas de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque , asignar este bloque a la variable global y seleccionar las variables locales colocando el cursor sobre el nombre de la variable.

Etiqueta: resultado Hacer clic sobre

el

componente

resultado (“poner resultado.Texto como”).

100

y

seleccionar

el

bloque

Bloque Integrado: Texto Seleccionar Texto de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque

(“unir”).

Al hacer clic sobre el botón de color azul del bloque al lado derecho, de tal forma que el bloque permita unir 6 textos.

101

arrastrar

De los bloques de Texto seleccionar tres bloques ingresar un texto. Escribir en los bloques los textos:

. Este bloque permite

Por último colocar el cursor sobre el nombre de cada una de las variables y colocar en los espacios correspondientes las variables.

Notar que se han realizado los pasos propuestos en la fase de análisis: capturar el evento en el botón, obtener el primer número, obtener el segundo número, almacenar los valores en variables, realizar la suma de las variables y mostrar el resultado en la etiqueta.

102

Ahora únicamente nos queda probar nuestra aplicación. Vamos a seleccionar del menú opciones, la opción Conectar y luego Emulador.

Ingresar dos números en cada uno de los cuadros de texto y presionar el botón sumar. Se desplegará el resultado bajo el botón.

103

LECCIÓN 5 - PROPUESTA DE PROYECTOS



Calculadora.



Calculadora científica.



Aplicación que compare dos números he indique cuál es mayor o menor.



Conversor de unidades de medida.

104

LECCIÓN 6

LISTAS

Actividad 8: Lista de objetos 

Escribir una lista de 5 útiles escolares que usas en el aula de clase.

1. __________________________ 2. __________________________ 3. __________________________ 4. __________________________ 5. __________________________



Escribir o dibujar una lista de 5 bloques que hayas utilizando en App Inventor.

1. __________________________ 2. __________________________ 3. __________________________ 4. __________________________ 5. __________________________

105

► Lista Una lista es una enumeración, generalmente en forma de columna, de personas, cosas, cantidades.

Ejemplos:  Lista de animales.  Lista de colores.  Lista de estudiantes.

► Bloques para Lista Una lista es una colección de elementos entre los que existe una relación.

Las listas son flexibles en cuanto a tamaño. Cada elemento de una lista posee una posición o índice, que inicia en 1.

Ejemplo: Construir una lista en App Inventor de útiles escolares: 1. Borrador 2. Lápiz 3. Cuaderno 4. Libro

Un

buscador

internet, Google,

de como

realiza

búsquedas

las con

palabras clave de un

Se utilizan los siguientes bloques:

listado de sitios que tienen relacionados.

En caso de necesitar uno de los elementos de la lista, se hacer por medio del índice.

El valor devuelto es “Lápiz”, ya que se encuentra en la posición 2 de la lista.

106

temas

► Aplicación: Lista telefónica

Se desea que la aplicación sea capaz de mostrar una lista de números telefónicos agregados por el usuario. ¿Cómo va a funcionar nuestra aplicación? Se tendrán un campo de texto donde se ingresará un número, y un botón “Agregar”. Al presionar el botón se agregará el nuevo número a una lista y será mostrada a través de un visor de lista.

Ingresar un número telefónico.

Capturar evento al presionar botón.

Agregar número teléfonico a lista.

Mostrar lista en visor de lista.

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

107

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribir en el campo de texto con recuadro azul, el texto “Leccion6Telefonos”, presionar el botón aceptar.

De la paleta de Interfaz de usuario arrastrar al visor:    

Una etiqueta Un campo de texto Un botón Un visor de lista

108

Etiqueta1 Seleccionar la Etiqueta1 en el área de componentes, y cambiar la propiedad Texto en el área de propiedades, en el cuadro aparece el texto “Texto para Etiqueta 1” cambiar por “Números Telefónicos”.

Campo DeTexto1 Seleccionar el CampoDeTexto1 en el área de componentes, hacer clic en “Cambiar nombre” y colocar el nombre “numero1”. Presionar en aceptar.

109

En las propiedades cambiar la propiedad Pista, reemplazar el texto “Pista para CampoDeTexto1” por “Ingrese un número telefónico”.

En las propiedades chequear la propiedad SóloNúmeros.

110

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Agregar”.

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “Agregar”.

111

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Botón: Agregar Seleccionar el componente Agregar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Agregar.clic ejecutar”).

112

Bloque Integrado: Variables Seleccionar Variables de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque .

Cambiar el nombre de la variable, hacer clic sobre “nombre” y reemplazar por “telefonos”. Será la variable global donde se almacenará la lista de números.

113

Bloque Integrado: Listas Seleccionar Listas de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque

.

Asignar a la variable global “telefonos” el nuevo bloque:

Seleccionar

Listas

de

los

bloques

integrados,

seleccionar

el

bloque

. Esta función permite agregar un nuevo elemento a una lista.

114

Campo de Texto: numero Hacer clic sobre el

componente

número,

y

seleccionar

el

bloque

(“numero.Texto”).

Colocar el cursor sobre la variable global “telefonos” y seleccionar el bloque

Armar los bloques utilizando el bloque para añadir un elemento a la lista de teléfonos capturado por el campo de texto.

Visor de Lista: VisorDeLista1 Hacer clic sobre el componente VisorDeLista1, y seleccionar el bloque (“Poner VisorDeLista1.Elementos como”).

115

Colocar el cursor sobre la variable global “telefonos” y seleccionar el bloque . Asignar al VisorDeLista1 los elementos de la variable global.

Para finalizar armar los bloques de la siguiente manera.

Notar que se han realizado los pasos propuestos en la fase de análisis: capturar el evento en el botón, obtener el número telefónico, agregar el elemento a una lista, y mostrar la lista en un visor.

116

Ahora únicamente nos queda probar nuestra aplicación. Vamos a seleccionar del menú opciones, la opción Conectar y luego Emulador.

Ingresar un número telefónico en el cuadro de texto y presionar el botón agregar.

Se desplegará una lista con el número ingresado, ingresar más números para observar el comportamiento.

117

LECCIÓN 6 - PROPUESTA DE PROYECTOS



Agregar validación de número repetido, opción de borrar teléfono.



Agregar más listas con información del contacto.



Utilizar elemento de llamada de teléfono (paleta social) para realizar llamada.



Aplicación recetario de cocina guatemalteca.

118

LECCIĂ“N 7

FUNCIONES

Actividad 9: Funciones del cuerpo humano 

A continuaciĂłn encontrarĂĄ dos columnas, una con tĂŠrminos y otra con las definiciones. Trazar una lĂ­nea donde correspondan el tĂŠrmino y la definiciĂłn.

Entrada: sustancias nutritivas FunciĂłn: dar soporte a los mĂşsculos y tejidos, protecciĂłn a los Ăłrganos.

Salida: movimiento

Digestivo

Circulatorio

Entrada: aire.

FunciĂłn: tomar el oxĂ­geno utilizado por el cuerpo y eliminar el diĂłxido de carbono.

Salida: Oxigeno (đ?‘‚2 ) y diĂłxido de carbono (đ??śđ?‘‚2 ).

Respiratorio

Entrada: nutrientes.

FunciĂłn: pasar nutrientes a las cĂŠlulas del cuerpo a travĂŠs de las venas.

Salida: desechos metabĂłlicos.

Entrada: alimentos FunciĂłn: transformaciĂłn de los alimentos para que puedan ser absorbidos y utilizados por el organismo.

Salida: nutrientes y sustancias de desecho.

Ă“seo

119

► Función ¿Qué es una función?

Es una actividad particular que realiza una persona o una cosa dentro de un sistema de elementos con un fin determinado.

Ejemplos:   

La función de las plantas.

La función de los órganos del cuerpo humano.

La función del estudiante.

► Bloque para funciones En App Inventor las funciones son conocidas como procedimientos. Un procedimiento es un conjunto de pasos definidos para ejecutar una tarea concreta que debe ser ejecutada muchas veces.

Ejemplo: Procedimiento para el lavado de manos: 1. Abrir la llave 2. Mojar manos 3. Poner jabón 4. Frotar manos 5. Quitar jabón 6. Cerrar la llave 7. Secar las manos Estos pasos podrían incluirse dentro de un procedimiento llamado “Lavar manos”.

Ya no se tendría que enumerar cada uno de los siete pasos, sino referirse al procedimiento por su nombre.

Los procedimientos son muy importantes, porque permiten organizar mejor los bloques y ahorrar esfuerzo a la hora de programar. Se podrá llamar en cualquier momento al procedimiento.

120

Un procedimiento puede tener parámetros de entrada para ejecutar dentro de sus pasos. Por ejemplo sumar dos números.

También puede devolver un valor de resultado al ejecutar los pasos.

La

fotosíntesis

es

el

reacciones

que

las

transforman

el

agua

carbónico

en

conjunto

plantas

oxígeno

y

el y

de

verdes, anhídrido

sustancias

orgánicas ricas en energía. Sin el proceso de la fotosíntesis no sería posible la presencia del oxígeno en la atmosfera.

Son

muchos

los

seres

vivos

que

dependen del oxígeno que se libera durante la fotosíntesis.

121

► Aplicación: Objetos con sonido

¿Cómo va a funcionar nuestra aplicación? Se tendrá tres botones, cada uno de ellos con una imagen. Al momento de presionar el botón se obtendrá el nombre del objeto haciendo uso de un procedimiento. El procedimiento recibirá el nombre del objeto y el texto lo pasará a una voz artificial.

Capturar evento al presionar botón.

Llamar procedimiento y enviar texto.

Recibir texto en procedimiento.

Pasar el texto ingresado a voz.

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

122

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribir en el campo de texto con recuadro azul, el texto “Leccion7Objetos”, presionar el botón aceptar.

De la paleta de Interfaz de usuario arrastrar al visor:  Tres botones

123

De la paleta Medios arrastrar al visor:  Texto a voz

El componente TextoAVoz aparece en la parte inferior del visor como componente no visible.

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Lapiz”.

124

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “”.

Cambiar la propiedad Imagen en el área de propiedades, en el cuadro aparecerá el texto “Ninguno…”.

125

Presionar el texto “Ninguno…” se desplegará un submenú, presionar el botón “Subir Archivo”.

Se abrirá una ventana, en la que se deberá seleccionar una imagen. Presionar el botón “Seleccionar archivo”.

Seleccionar el archivo con la imagen de un lápiz. Presionar el botón Abrir.

126

Notar que ahora aparece el nombre de la imagen “lapiz.png”, en caso no aparezca volver a seleccionar archivo. Para finalizar presionar el botón Aceptar.

Cambiar la propiedad Ancho y Alto en el área de propiedades. Al presionar el texto “Automático…” se desplegará un submenú. Chequear en pixel, colocar el tamaño fijo de 50 pixeles para el ancho y alto.

127

Boton2 Seleccionar el Boton2 en el área de componentes, cambiar el nombre “Boton2” por “Pelota”. Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón2” por “”.

Cambiar la propiedad Imagen, Ancho y Alto. Colocar el tamaño fijo de 50 pixeles para el ancho y alto.

Realizar los mismos pasos realizados con el boton1.

Boton3 Seleccionar el Boton3 en el área de componentes, cambiar el nombre “Boton3” por “Sandia”. Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón3” por “”.

Cambiar la propiedad Imagen, Ancho y Alto. Colocar el tamaño fijo de 50 pixeles para el ancho y alto.

Realizar los mismos pasos realizados con el boton1.

128

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

129

Bloque Integrado: Procedimientos Seleccionar Procedimientos de los bloques integrados, se desplegará un grupo (“como procedimiento ejecutar”).

de bloques, seleccionar el bloque

Cambiar el nombre del procedimiento, hacer clic sobre “procedimiento” y reemplazar por “hablar”.

Al hacer clic sobre el botón de color azul del bloque arrastrar

130

al lado derecho.

Cambiar el nombre del parámetro de entrada, hacer clic sobre “x” y reemplazar por “objeto”.

Componente: TextoAVoz1 Seleccionar el componente TextoaVoz1, se desplegará un grupo de bloques, seleccionar el bloque

(“llamar TextoaVoz1.Hablar mensaje”).

Armar los bloques como se muestra a continuación.

Colocar el cursor sobre el parámetro de entrada “objeto”, seleccionar el bloque , y arrastrar al mensaje.

131

Botón: Lapiz Seleccionar el componente Lapiz, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Lapiz.clic ejecutar”).

Seleccionar Procedimientos de los bloques integrados, se desplegará un grupo (“Llamar hablar objeto”).

de bloques, seleccionar el bloque

De los bloques integrados seleccionar Texto, seleccionar el bloque se muestra en la siguiente imagen.

132

como

Escribir en el bloque el texto continuación.

y armar los bloques como se muestra a

Realizar los pasos anteriores para el botón: Pelota y el botón: Sandia. Al finalizar debe quedar de la siguiente manera.

Notar que se han realizado los pasos propuestos en la fase de análisis: capturar el evento en el botón, llamar al procedimiento con el parámetro de entrada y el procedimiento pasará a una voz artificial el texto recibido.

133

Ahora únicamente nos queda depurar (probar) nuestra aplicación. Seleccionar del menú opciones, la opción Conectar y luego “Emulador”.

Presionar una de las imágenes. Se deberá de escuchar una voz con el nombre de la imagen.

134

LECCIÓN 7 - PROPUESTA DE PROYECTOS



Calculadora.



Conversor de unidades de medidas.



Juego moviendo objetos.



Mapa interactivo de Guatemala.



Aplicaciones anteriores usando procedimientos.

135

3

Competencia

Almacenamiento y Dibujo



Utiliza

herramientas

tecnológicas

para

desarrollar su ingenio y creatividad.

En esta unidad se aprenderá sobre cómo se almacenan los datos en un dispositivo móvil, componentes de lienzo y dibujo, y cómo elaborar un proyecto.

Al finalizar esta unidad el estudiante será capaz de desarrollar un proyecto utilizando su 136 ingenio y creatividad, donde se pondrá en práctica todo lo aprendido a lo largo del curso.

LECCIÓN 8

ALMACENAMIENTO

Actividad 10: Almacenar los alimentos 

A continuación encontrará 6 clases de alimentos, trazar una línea donde corresponde su lugar de almacenamiento en el refrigerador.

137

► Almacenamiento ¿Qué es almacenamiento?

En informática almacenamiento es la capacidad de guardar datos contenidos en un dispositivo electrónico.

Un dispositivo de almacenamiento de datos es un conjunto de componentes utilizados para leer o grabar datos. Por ejemplo discos duros, memorias USB, teléfonos celulares, entre otros.

► Base de datos Es una forma de organizar la información para ser utilizada de forma eficiente. Por ejemplo un directorio telefónico, un diccionario, calendario o libro.

Cada registro contiene campos. Un campo se utiliza para almacenar una información particular. Por ejemplo, en el directorio telefónico un campo almacena el nombre, otro campo almacena la dirección y otro campo almacena el número telefónico de la persona. Cada registro contiene cada uno de estos campos y cada registro puede tener información en esos campos.

El conjunto de registros que utilizan los mismos campos conforma una tabla.

Una base de datos puede contener muchas tablas.

Campos

Registros

Nombre Pedro Gómez Andrés Luna Alberto González Marta Medina

Dirección 25 calle zona 7 4-25 zona 8 13-50 zona 6 14 Av. Zona 9

138

Teléfono 22556699 22669988 22889955 22994411

► Bloques de almacenamiento Son bloques que permiten almacenar información de diferentes formas, de acuerdo a la necesidad y componente. 

MiniWebDB: es un componente no visible, que permite almacenar datos en la web.



Archivo: es un componente que permite guardar textos en un archivo y luego recuperarlos.



FusionTables: es un componente que permite comunicación con el servicio de Google Tables.



TinyBD: es un componente que permite almacenar datos permanentemente en el dispositivo móvil. Los datos son cadenas de texto que se almacenan en etiquetas. Para almacenar datos, se debe de especificar la etiqueta que corresponde a ese dato. Posteriormente, los datos se pueden recuperar con esa misma etiqueta.

El ser humano cuenta con dos tipos de memoria a corto y largo plazo.

Al dormir, se favorece el almacenamiento de la memoria a largo plazo.

139

► Aplicación: Apuntes

¿Cómo va a funcionar nuestra aplicación? Se tendrá un campo de texto donde se ingresará una nota o recordatorio, y un botón “Guardar”. Al presionar el botón se obtendrá el texto ingresado y se almacenará para posteriormente cargarla cuando se ingrese de nuevo.

Ingresar nota.

Capturar evento al presionar botón.

Almacenar nota.

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

140

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribir en el campo de texto con recuadro azul, el texto “Leccion8Apunte”, presionar el botón aceptar.

De la paleta de Interfaz de usuario arrastrar al visor:  Un campo de Texto  Un botón

141

De la paleta de Almacenamiento arrastrar al visor:  TinyBD

El componente TinyBD aparece en la parte de abajo del visor como componente no visible.

Campo DeTexto1 Seleccionar el CampoDeTexto1 en el área de componentes, hacer clic en “Cambiar nombre” y colocar el nombre “nota”. Presionar en aceptar.

142

En las propiedades cambiar la propiedad Pista, reemplazar el texto “Pista para CampoDeTexto1” por “Notas”. Chequear la propiedad Multilinea. Al estar chequeada esta propiedad se podrá escribir más de una línea en el campo de texto.

Cambiar la propiedad Ancho y Alto en el área de propiedades. Chequear en “Ajustar al contenedor” para ancho y alto.

143

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Guardar”.

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “Guardar”.

144

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Botón: Guardar Seleccionar el componente Guardar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Guardar.clic ejecutar”).

145

TinyBD: TinyBD1 Seleccionar el componente TinyBD1, se desplegará un grupo de bloques, (“llamar TinyBD1.GuardarValor etiqueta

seleccionar el bloque ValorAGuardar”).

Campo de Texto: nota Hacer clic sobre el componente nota, y seleccionar el bloque (“nota.Texto”).

146

De los bloques integrados seleccionar Texto, seleccionar el bloque se muestra en la siguiente imagen.

Escribir en el bloque el texto continuación.

como

y armar los bloques como se muestra a

Screen: Screen1 Seleccionar el componente Screen1, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando Screen1.Inicializar ejecutar”).

147

Hacer clic sobre el componente nota, y seleccionar el bloque (“poner nota.Texto como”).

Hacer clic sobre TinyBD1, y seleccionar el bloque

(“llamar

TinyBD1.Obtener etiqueta valorSiEtiquetaNoExiste”).

De los bloques integrados seleccionar Texto, seleccionar el bloque Escribir en el bloque el texto continuación.

.

y armar los bloques como se muestra a

148

Ahora únicamente nos queda depurar (probar) nuestra aplicación. Seleccionar del menú opciones, la opción Conectar y luego “Emulador”.

Ingresar un texto y presionar el botón Guardar.

149

Para probar que se almacenรณ la nota se deberรก de reiniciar la conexiรณn con el emulador y volver a conectar con el emulador para que se cargue nuevamente la aplicaciรณn. Deberรก de mostrarse la nota ingresada anteriormente.

150

LECCIÓN 8 - PROPUESTA DE PROYECTOS



Una aplicación de lista de contactos.



Una aplicación para almacenar información personal.



Juego con diferentes niveles.



Diario personal.



Agenda electrónica.

151

LECCIÓN 9

LIENZO Y DIBUJO

Actividad 11: Hacer una copia 

Copiar el dibujo de la izquierda en la cuadricula vacía de la derecha.

152

► Lienzo ¿Qué es un lienzo?

Es un tejido que sirve como soporte para realizar artes pictóricas.

► Plano Cartesiano Es un método para definir la posición de un punto. En este sistema un punto en el plano tiene dos valores para localizar su posición exacta.

Se utilizan dos coordenadas, posición en X y posición en Y. La posición en X determina la localización horizontal y la posición en Y determina la localización vertical.

En la actividad realizada de copiar el dibujo de helado, la posición X está dado por las literales a, b, c, d, e y la posición en Y por los números 1, 2, 3, 4, 5

► Bloques de Lienzo Es un componente que permite realizar trazos sobre un área.

Sobre el lienzo se pueden dibujar: 

Círculos

153



Líneas



Puntos



Textos

Las primeras pinturas realizadas por el hombre se encuentran en las cuevas de Lascaux, en Francia, y de Altamira, en España. Tiene alrededor de 22,000 años.

154

► Aplicación: Lienzo

App Inventor utiliza el sistema cartesiano para determinar la posición de un punto determinado dentro de un lienzo. La posición X aumenta desde la izquierda a la derecha, y la posición Y lo hace desde arriba hacia abajo.

X

Y

Posición (X, Y)

Para dibujar una línea hace falta especificar el punto inicial de la línea y el punto final. Por ello para usar este bloque hay que indicarle dos coordenadas X y dos Y. El primer (X1, Y1) define el punto inicial de la línea, y el segundo par (X2, Y2) define el punto final de la misma. Al hacer clic sobre el lienzo, sin levantar el dedo, el programa guardará en su memoria el valor de la X y Y del punto que se ha tocado (determinado por XPrevio e YPrevio). Según se vaya deslizando el dedo el programa irá detectando el cambio de posición y dibujará una línea desde ese punto guardado hasta el punto que se ha tocado actualmente (determinado por XActual e YActual). Esto se repetirá todo el tiempo, muy rápidamente, mientras se siga arrastrando el dedo por la pantalla.

Se dibujarán por lo tanto muchas líneas muy cortas, una detrás de la otra, dando la sensación de ser una única línea continua.

155

¿Cómo va a funcionar nuestra aplicación? Al hacer clic sobre el lienzo se trazara una línea dado por los puntos previos y actuales.

Tocar área de lienzo.

Capturar evento al arrastar.

Dibujar linea a partir de posición previa y actual.

Iniciar el emulador, dando clic al icono de Android en la barra de tareas. No cerrar la ventana con fondo negro.

Abrir el navegador, ingresar a App Inventor y cambiar de idioma. Ver página 12.

En el menú de opciones, en Proyectos seleccionar la opción comenzar un proyecto nuevo. Escribir en el campo de texto con recuadro azul, el texto “Leccion9Lienzo”, presionar el botón aceptar.

156

De la paleta de Interfaz de usuario arrastrar al visor: 

Un botón

De la paleta de Dibujo y animación arrastrar al visor.  Un lienzo

157

Boton1 Seleccionar el Boton1 en el área de componentes, cambiar el nombre “Boton1” por “Borrar”.

Cambiar la propiedad Texto en el área de propiedades, cambiar el texto “Texto para Botón1” por “Borrar”.

158

Lienzo1 Seleccionar el Lienzo1 en el área de componentes, cambiar el nombre “Lienzo1” por “Lienzo”.

Cambiar la propiedad Ancho y Alto en el área de propiedades. Chequear en “Ajustar al contenedor” para ancho y alto.

159

Screen1 Seleccionar Screen1 en el área de componentes y cambiar la propiedad DispHorizontal por “Centro”. Esto con el fin de centrar de forma horizontal los componentes del visor.

Presionar el botón “Bloques” que aparece en la parte superior derecha de la pantalla.

Botón: borrar Seleccionar el componente borrar, se desplegará un grupo de bloques, seleccionar el bloque

(“cuando borrar.clic ejecutar”).

160

Lienzo: Lienzo Hacer clic

sobre

el

componente

Lienzo,

y

seleccionar

el

bloque

y

seleccionar

el

bloque

(“llamar Lienzo.Limpiar”).

Armar los bloques como se muestra a continuación.

Hacer

clic

sobre

el

componente

Lienzo,

(“cuando Lienzo.arrastrado ejecutar”).

161

Seleccionar el bloque

(“llamar Lienzo.DibujarLinea x1 y1 x2 y2”).

Armar los bloques como se muestra a continuación.

Colocar el cursor sobre la variable “XPrevio” y seleccionar el bloque

Colocar el cursor sobre la variable “YPrevio” y seleccionar el bloque

162

Colocar el cursor sobre la variable “XActual” y seleccionar el bloque

Colocar el cursor sobre la variable “YActual” y seleccionar el bloque

Seleccionar

el

(“poner

bloque

Lienzo.ColorDePintura como”).

163

Bloque Integrado: Colores Seleccionar Colores de los bloques integrados, se desplegará un grupo de bloques, seleccionar el bloque

.

Finalizar de armar los bloques, quedando de esta manera.

Notar que se han realizado los pasos propuestos en la fase de análisis: capturar el evento de arrastrar sobre el lienzo, dibujar una línea a partir de un punto previo y el punto actual.

164

Ahora únicamente nos queda depurar (probar) nuestra aplicación. Seleccionar del menú opciones, la opción Conectar y luego “Emulador”.

Hacer clic sobre el lienzo (área debajo del botón) y arrastrar para trazar una línea. Presionar el botón Borrar para limpiar el lienzo.

165

LECCIÓN 9 - PROPUESTA DE PROYECTOS



Agregar lista de colores, figuras, tamaño de línea.



Agregar opción de guardar la imagen.



Agregar opción de compartir imagen por redes sociales.



Juego de dibujo.

166

PROYECTO Actividad 12: Proyecto 

Utilizar el siguiente espacio para realizar una propuesta de proyecto. Puedes utilizar de referencias las propuestas al final de cada lecciĂłn.

167

Bloques integrados de App Inventor 2

CONTROL 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.

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.

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.

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.

Por cada elemento (variable) en la lista… ejecutar Ejecuta los bloques para cada elemento de una lista.

Mientras comprobar… ejecutar Comprueba el valor “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.

168

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é.

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.

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

Abrir otra pantalla Nombre de la pantalla Abre otra pantalla con el nombre proporcionado.

Abre otra pantalla con un valor inicial Nombre de la pantalla… Valor inicial…

Se abre otra pantalla y pasa un valor a la misma.

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…

Cerrar pantalla Cierra la pantalla actual Cerrar la pantalla con un valor resultado Cierra la pantalla actual y devuelve un valor a la próxima pantalla.

Cerrar la aplicación Cierra la aplicación.

Tomar el texto inicial Devuelve el texto sin formato que se pasó a esta pantalla cuando ésta se inició por otra aplicación. Si no se pasa ningún valor, devuelve el texto vacío.

Para aplicaciones con múltiples pantallas es mejor utilizar el bloque tomar el valor inicial.

Cerrar pantalla con texto texto Cierra la pantalla actual y pasa el texto a la aplicación que abrió éste. Este comando es para devolver texto a actividades que no son de app inventor, no para las pantallas de app inventor.

Para las pantallas de app inventor, como para aplicaciones con múltiples pantallas, utiliza el bloque cerrar la pantalla con un valor resultado.

169

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 representa una condición. 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.

No Realiza negación lógica, devolviendo falso si la entrada es un valor cierto, y verdadero si la entrada es falso. = Comprueba si los argumentos son iguales.

• Dos números son iguales si son numéricamente iguales, por ejemplo, 1 es igual a 1,0.

• Dos bloques de texto son iguales si tienen los mismos caracteres en el mismo orden, con el mismo caso. Por ejemplo, plátano no es igual Plátano.

• Números y texto son iguales si el número es numéricamente igual a un número que se imprime con el texto.

• Dos listas son iguales si tienen el mismo número de elementos y los elementos que incluyen son iguales.

Este bloque permite cambiar también por el valor desigual.

Y Devuelve cierto si todos los valores lo son.

O Comprueba si cualquiera de las dos condiciones es verdadera.

MATEMÁTICAS 0 Se puede utilizar como cualquier número positivo o negativo (decimales incluidos). Haciendo doble clic en el “0” en el bloque le permitirá cambiar el número. =, ≠,>, ≥, <, ≤ Compara dos valores y devuelve si es verdadero o falso.

170

+ Devuelve el resultado de la suma de cualquier cantidad de bloques que tienen un valor numérico. Los bloques con un valor numérico incluyen el bloque número básico, duración de la lista o de texto, las variables con un valor numérico, etc.

Este bloque puede mutar ampliándose para permitir más números en la suma.

– Devuelve el resultado de restar el segundo número del primero. x Como el de la suma con mutador, pero con la operación de multiplicación. / Devuelve el resultado de dividir el primer número por el segundo. ^ Devuelve el resultado elevar el primer número a la potencia indicada en el segundo. entero aleatorio entre 1 y 100 Devuelve un valor entero aleatorio entre los valores dados, ambos inclusive. El orden de los argumentos no importa. decimal aleatorio Devuelve un valor aleatorio entre 0 y 1. semilla aleatoria es Utiliza este bloque para generar secuencias repetitivas de números aleatorios. Es útil para los programas de pruebas que implican valores aleatorios. min Devuelve el valor mínimo de un conjunto de números. max Igual pero el valor máximo. raiz cuadrada Devuelve la raíz cuadrada del número dado. valor absoluto Devuelve el valor absoluto del número dado. neg Devuelve el negativo de un número dado. log Devuelve el logaritmo natural de un número dado, es decir, el logaritmo en base e (2,71828…). e^ Devuelve e (2,71828…) elevado a la potencia del número dado.

171

redondear Devuelve el número dado redondeado al entero más cercano. Si la parte fraccionaria es < 0,5 se redondeará hacia abajo. Si es > 0,5 se redondeará hacia arriba. Si es exactamente igual a 0.5, números con una parte aún entera se redondean hacia abajo, y los números con una parte entera impar se redondearán hacia arriba. superior Devuelve el número entero más pequeño que es mayor que o igual al número dado. inferior Devuelve el mayor entero que es menor o igual al número dado. módulo de Modulo (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. Modulo (a, b) siempre tiene el mismo signo que b, mientras que resto (a, b) siempre tiene el mismo signo que a.

Puede mutar también como resto de y cociente de. sen, cos, tan, asen, acos, atan Devuelve el seno, coseno, tangente, arco-seno, arcocoseno y arco-tangente respectivamente del número en grados.

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

convertir radiantes a grados Devuelve el valor en grados del número dado en radianes.

El resultado será un ángulo en el rango [0, 360). convertir grados a radiantes También permite convertir de grados a radianes con el selector. El resultado será un ángulo en el intervalo [-π, π +) 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 número entero no negativo. El resultado se realiza mediante el redondeo del número o añadiendo ceros a la derecha.

172

¿Es un número?

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

Este bloque se puede cambiar por ¿es base 10?, ¿es hexadecimal? y ¿es binario? 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. Por ejemplo, si la cadena de entrada es 10, entonces la conversión de la base 10 a binario producirá la cadena de 1.010; mientras que si la cadena de entrada es el mismo 10 la conversión de binario a la base 10 producirá la cadena 2. Si la cadena de entrada es el mismo 10 la conversión de la base 10 a hex producirá la cadena A.

TEXTO “…”

Contiene una cadena de texto.

Esta cadena puede contener caracteres (letras, números u otros caracteres especiales). En App Inventor se considerará un objeto de texto. unir Anexa todas las entradas para hacer una sola cadena. Si no hay entradas, devuelve una cadena vacía. longitud Devuelve el número de caracteres, incluidos los espacios en la cadena. Esta es la longitud de la cadena de texto dada. 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. comparar textos… (comparador) …

Compara si la primera cadena es lexicográficamente <,> o = a la segunda. recortar Elimina todos los espacios iniciales o finales de la cadena de entrada y devuelve el resultado. mayúscula Devuelve una copia de su argumento de cadena de texto en mayúscula.

Conmuta con minúscula.

173

comienzo 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. Por ejemplo, la cadena ana en el texto havana es 4. contiene texto… cadena…

Devuelve verdadero si el texto aparece en la cadena; de lo contrario, devuelve falso. recorta texto… en…

Divide el texto en partes utilizando el texto “en” como punto de corte y genera una lista con los resultados. dividir por espacios Divide el texto dado en partes separadas por espacios. segmento de texto… inicio… longitud…

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

sustituye en todo el texto… segmento… sustituto…

Devuelve un texto nuevo resultado de sustituir todas las ocurrencias del segmento por su sustituto.

Obsfucated Text “…”

Produce texto, como un bloque de texto simple. La diferencia es que este se oculta en el archivo apk.

LISTAS crear una lista vacía Crea una lista vacía sin elementos. construye 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. Al hacer clic en el signo más azul se permite añadir elementos adicionales a la lista. añadir elementos a la lista lista… item…

Añade elementos al final de una lista.

174

¿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 las sublistas no son miembros de la lista. longitud de la lista lista Devuelve el número de elementos de la lista. ¿está vacía la lista? lista Si la lista no tiene elementos, devuelve verdadero; de lo contrario devuelve falso. toma un elemento al azar lista Coge un artículo al azar de la lista. índice en la lista cosa… lista…

Devuelve la posición de la cosa en la lista. Si no está en la lista, devuelve 0. 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. insertar elemento en lista lista… índice… elemento Inserta un elemento en la lista en la posición dada. 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. eliminar elemento de la lista lista… índice…

Elimina el elemento de la posición indicada. añadir a la lista lista1… lista2…

Añade los elementos de la segunda lista al final de la primera lista. copiar lista lista Hace una copia de una lista, incluyendo la copia de todas las sublistas. ¿es una lista? cosa Si algo es una lista, devuelve verdadero; de lo contrario falso. 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 al registro.

175

lista a tabla csv lista Interpreta la lista como una tabla y devuelve un texto CSV que representa a la tabla. lista desde registro csv texto Analiza un texto como un registro en formato CSV para generar una lista de campos. lista desde tabla CSV texto Analiza un texto como una tabla con formato CSV para producir una lista de registros, cada uno de los cuales es una lista de campos. buscar por parejas clave… parejas… noEncontrado…

Se utiliza para buscar información en una estructura similar a un diccionario representado como una lista.

COLORES bloques básicos de colores Se trata de bloques de distintos colores identificados por el color de en medio. Si hace clic en centro de cualquier color aparece una ventana emergente y se puede cambiar entre una paleta de colores. crear color… construye una lista…

Permite crear colores rgb. El primer valor es rojo (red), el segundo verde (green) y el último azul (blue). separar color Al revés que el bloque anterior. Devuelve el código RGB.

VARIABLES inicializar 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. tomar Este bloque proporciona una manera de conseguir cualquier variable que se haya creado.

176

poner… a Asigna a esta variable el valor especificado como entrada. inicializar local nombre como… en …

Permite crear variables que solamente son accesibles en la parte ejecutar de este bloque.

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. como procedimiento resultado…

Igual que un el anterior bloque, pero al llamar a este procedimiento se devuelve un resultado. llamar procedimiento Llama a un procedimiento que no devuelve un valor. llamar procedimiento Hacer una llamada a un procedimiento que devuelve un valor.

177

Bibliografía 1.

Aulaclic

Android.

Artículos.

[en

línea].

http://www.aulaclic.es/articulos/android.html. [Consulta: septiembre de 2015].

2.

App

Inventor

me

gusta.

[en

línea].

https://sites.google.com/site/appinventormegusta/

[Consulta:

septiembre de 2015].

3.

Descripción de los bloques integrados de App Inventor 2. Código 21. [en

línea].

http://codigo21.educacion.navarra.es/autoaprendizaje/descripcionde-los-bloques-integrados-de-app-inventor-2. [Consulta: febrero de 2016]

4.

Guía

de

iniciación

a

App

Inventor

[en

línea].

http://codeweek.eu/resources/spain/guia-iniciacion-appinventor.pdf [Consulta: septiembre de 2015].

5.

López García, Juan Carlos. Algoritmos y programación (Guía para docentes). Segunda edición. 2009.

178

6.

Recursos Tic EducaciĂłn. Uso de App Inventor en la asignatura de TIC. [en

lĂ­nea].

http://recursostic.educacion.es/observatorio/web/en/software/progr amacion/1090-uso-de-appinventor-en-la-asignatura-detecnologias-de-la-comunicacion-y-la-informacion septiembre de 2015].

179

[Consulta:

181