Examinar categoría: App Inventor

TEMA 3. FUNCIONES. EJERCICIO 11 – Traductor

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

Vamos a realizar una App aplicación en la que se introduce un texto hablado. El móvil reconocerá el texto y lo traducirá al idioma que se seleccione, además de escribir dicho texto en el idioma seleccionado.

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

TEMA 3. FUNCIONES. EJERCICIO 11 - TraductorNos dirigimos a la barra de herramientas y en la pestaña Proyectos escoge la opción Comenzar un proyecto nuevo.

Aparecerá una pantalla en la que has de introducir el nombre con el que se va a nombrar esta App. Escribimos “Traductor”.

Importante los nombres de proyecto no pueden tener espacios Modificamos las propiedades de la ventana “Screen1” siguientes:

• Disposición Horizontal: centro
• Nombre de la aplicación: Traductor
• Icono: imagen descargada con nombre “icono.png”
• Título: Traductor

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Colocamos una disposición vertical con las siguientes propiedades:

• Disposición Horizontal: Centro
• Disposición Vertical: Arriba
• Color de fondo: Naranja
• Ancho: Ajustar al contenedor

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Dentro de la disposición vertical anterior colocar una Etiqueta:

• Negrita
• Color: Blanco
• Tamaño de la letra: 45
• Texto: Traductor

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

Dentro de la disposición vertical anterior colocar un botón:

• Negrita
• Tamaño de la letra: 20
• Texto: PULSE AQUÍ PARA HABLAR
• Color de Fondo: Gris Claro
• Nombre: B_Hablar

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Colocar una Etiqueta debajo de la disposición vertical anterior:

• Texto: Texto reconocido
• Nombre: TxtTextoReconocido

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Colocar una disposición tabular con las siguientes características:

• Columnas: 2
• Registros: 2

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Insertamos cuatro botones en la disposición tabular anterior con las siguientes características:

• Alto: 100 pixels
• Ancho: 100 pixels
• Imágenes:

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

• Nombre: B_Alemania; B_Francia; BtnItalia; B_ReinoUnido; B_España

• Texto: dejar en blanco

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

Insertamos una Etiqueta debajo de la disposición tabular anterior:

• Texto: Texto traducido
• Nombre: TxtTextoTraducido

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Insertamos los componentes TextoAVoz, TraductorYandex, ReconocimientoDeVoz que se encuentran en la pestaña de Medios

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Abrimos el visor de Bloques para empezar a programar; comenzamos con el Botón Hablar

Cuando B_Hablar.Clic
Ejecutar llamar ReconocimientoDeVoz1.ObtenerTexto
TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Ahora programamos el componenete ReconocimientoDeVoz (va a reconocer el texto que digamos y lo va a colocar en el cuadro de texto “TxtTextoReconocido”)

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

Vamos a programar el B_España:
• Cuando B_España.Clic ejecutar poner TextoAVoz1.Pais como “ESP” poner TextoAVoz1.Idioma como “es” llamar TraductorYandex1.
SolicitarTraducción

lenguajeAlQueTraducir “es-es”
TextoATraducir TxtTextoReconocido.Texto

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Repetir el punto anterior para B_Francia; B_Alemania; B_ReinoUnido con las siguientes modificaciones:

• B_Francia: poner TextoAVoz1.Pais como “FRA” poner TextoAVoz1.Idioma como “fr” lenguajeAlQueTraducir “es-fr”

• B_Alemania: poner TextoAVoz1.Pais como “DUT” poner TextoAVoz1.Idioma como “du” lenguajeAlQueTraducir “es-du”

• B_ReinoUnido: poner TextoAVoz1.Pais como “GBR” poner TextoAVoz1.Idioma como “en”
lenguajeAlQueTraducir “es-en”

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor
Una vez realizada la traducción, la vamos a visualizar en el cuadro de texto y la vamos a “hablar”

• Cuando TraductorYandex1.TraduccionRecibida
Ejecutar poner TxtTextoTraducido.Texto como tomar traducción

Llamar TextoAVoz1.Hablar

Mensaje tomar traducción

1

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

2

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

3

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

Al clicar encima de la opción traducción nos aparece el bloque tomar que colocaremos en ambas instrucciones para que la aplicación funcione correctamente:

TEMA 3. FUNCIONES. EJERCICIO 11 - Traductor

Ejercicio 10 – Uso de un reloj para calcular el tiempo

Ejercicio 10 - Uso de un reloj para calcular el tiempo

Un componente muy útil para controlar y gestionar la ejecución de los programas es el temporizador, o reloj. Gracias a este componente podemos definir cuándo suceden cosas, independientemente de lo que haga el usuario de la aplicación. O podemos controlar el tiempo que duran los procesos que se están ejecutando, por ejemplo.

En este caso lo utilizaremos para limitar el tiempo de que dispone el usuario para adivinar el número pensado. Cuando el tiempo se cumpla, el usuario no podrá seguir intentando adivinar el número.

Empezamos añadiendo desde la Paleta al Visor un componente del tipo Reloj. Como el reloj es un componente no visible, aparecerá fuera de la zona visible del Visor. Lo llamaremos Temporizador.

Ejercicio 10 - Uso de un reloj para calcular el tiempo
Una de las propiedades más importantes del reloj es Intervalo Del Temporizador, que controla cada cuánto tiempo se “dispara” el reloj.

Se expresa en milisegundos, y su valor inicial es 1000 = un segundo. Esto significa que cada segundo el reloj dirá “¡Ha pasado una unidad de tiempo!”. Si cambiamos su valor por 500, por ejemplo, el reloj avisará cada medio segundo.

Si ponemos 60000, entonces nos avisará cada minuto, porque 1000 milisegundos por 60 es exactamente un minuto.

Para esta aplicación lo definiremos con un valor de 30000, y así le daremos al jugador la posibilidad de intentar adivinar el número durante treinta segundos. Para saber cuándo se cumplen los treinta segundos usaremos el bloque mostaza cuando Temporizador.

Temporizador ejecutar, que se encuentra dentro del cajón del reloj, en el editor de bloques. Todo lo que queramos que suceda cuando se cumplan los treinta segundos habrá que ponerlo dentro de este bloque.

Ejercicio 10 - Uso de un reloj para calcular el tiempo
Ahora pondremos los bloques para que el juego nos informe de que han transcurrido los treinta segundos a través de un mensaje de texto.

Como llegados a este punto ya no vamos a utilizar más la etiqueta E_pista, podemos reutilizarla para mostrar al jugador el texto de tiempo agotado.

Ejercicio 10 - Uso de un reloj para calcular el tiempo
Vamos a hacer que el jugador sólo disponga de tres intentos para adivinar el número.

Para hacer esto tenemos que crear una variable, V_intentos, en la que guardaremos el número de intentos que el usuario ha consumido.

Inicial mete esta variable tendrá el valor cero, para indicar que no hemos consumido aún ningún intento.

Ejercicio 10 - Uso de un reloj para calcular el tiempo

Después, con un gran si-entonces, indicaremos qué hacer cuando aún queden intentos, y qué otra cosa cuando ya se hayan consumido todos.

Es importante que al final del proceso de preguntas se sume uno al número de intentos, para que se reduzcan los intentos restantes para la siguiente vuelta.

Ejercicio 10 - Uso de un reloj para calcular el tiempo

EJERCICIO 9 – ¿Qué número está pensando?

EJERCICIO 9 - ¿Qué número está pensando?

Vamos a hacer un programa sencillo pero eficiente. Él pensará un número y nosotros tenemos que adivinarlo.

Para que el dispositivo pueda hacer esto correctamente, tenemos que enseñarle cómo hacerlo, paso a paso, añadiendo bloques de código. Se trata de enseñarle al programa la lógica que seguimos nosotros, los seres humanos, cuando jugamos a este juego.

Definimos la interfaz del juego

Tenemos que crear un interfaz para para que la aplicación se relacione con el usuario, es decir, le pregunte un número, y le vaya dando pistas, diciendo si es demasiado alto, demasiado bajo, o si finalmente ha acertado el número secreto.
Creamos entonces en el Diseñador una etiqueta, y cambiamos el texto para que aparezca en ella la palabra “Número:”.

Uno de los retos más importantes cuando programamos ser ordenados.
Debemos acostumbrarnos a seguir prácticas o métodos que nos libren del problema de perder información de los componentes a largo plazo.

A partir de este proyecto vamos entonces a intentar ser más ordenados. Vamos a dejar una E_ delante del nombre mi nueva etiqueta.
Así siempre sabremos, cuando vea los bloques, que esa es una etiqueta, y no un botón, ni campo de texto, ni otro tipo componente. Llamaremos a la etiqueta E_número.

EJERCICIO 9 - ¿Qué número está pensando?
Además, el dispositivo va a tener que “escuchar” cada número que le digamos, para decidir si hemos acertado, así que añadiremos en nuestra ventana del visor un campo de texto. Servirá para que el jugador indique qué número cree que ha pensado el programa.
EJERCICIO 9 - ¿Qué número está pensando?
Para diferenciarlo de la etiqueta que hemos creado antes, al campo de texto le llamaremos T_número. Así cuando estemos en el editor de bloques podremos diferenciar fácilmente entre la etiqueta y el campo de texto, porque uno comienza con E_ y otro con T_.

Aunque parezca innecesario, esta costumbre en la asignación de nombres puede ser muy interesante. Con el tiempo cada programador va desarrollando sus propios métodos, o tomándolos de otros programadores, para disfrutar del “arte” de programar sin complicarse la vida.

Finalmente tendremos que añadir un botón con el texto “Adivina” para que el dispositivo sepa cuál hemos elegido. A este botón lo llamaremos B_adivinar. Cuando el jugador lo pulse el programa tendrá que hacer algunas comprobaciones que ahora iremos viendo.

EJERCICIO 9 - ¿Qué número está pensando?
Generamos un número aleatorio

Vamos al editor de bloques.

Lo primero que el programa tiene que hacer es pensar en un número. En este caso le vamos a indicar cómo debe pensar en un número entre 1 y 10. Al ser una instrucción matemática, abriremos el cajón Matemáticas, y usaremos el bloque entero aleatorio. Tendremos que especificarle entre qué dos números debe pensar su número.

EJERCICIO 9 - ¿Qué número está pensando?
A continuación, vamos a hacer que el programa guarde este número en su memoria, porque si no lo olvidaría y no podríamos jugar.

Guardamos el número en una variable

Una variable es un espacio de la memoria del dispositivo reservado para guardar datos que nuestros programas tienen que manejar durante su funcionamiento.

Para poder utilizar las variables de memoria es necesario en primer lugar darles un nombre. Para ello abrimos el cajón Variables y elegimos el bloque inicializar global…

Podemos darle a la variable el nombre V_número_pensado. Es importante dar a las variables un nombre descriptivo, porque en programas más complejos, con más variables, nos facilitará saber para qué sirve cada una.

Como venimos haciendo, y para identificar rápidamente que se trata de una variable, el nombre comienza con una V_.

EJERCICIO 9 - ¿Qué número está pensando?

EJERCICIO 9 - ¿Qué número está pensando?

Con estos dos bloques le hemos dicho al el juego que tiene que pensar un número entre uno y diez, y guardárselo en una variable de su memoria, sin mostrárselo al jugador.

IMPORTANTE

Una variable de memoria es como una caja dentro de un gran armario lleno de cajas, que es la memoria total del ordenador. La memoria total del ordenador está compuesta por millones de estas pequeñas cajitas de memoria, que sirven para guardar la información que el ordenador recibe del exterior, y la que él mismo genera durante la ejecución de las aplicaciones.

También se guarda en la memoria el propio programa que está ejecutándose

Para comenzar a jugar deberíamos pedirle al jugador que nos diga un número. Esto lo conseguiremos por medio del campo de texto T_número que hemos creado en el Visor. El jugador irá escribiendo números en este campo y el programa le irá indicando si el número aleatorio generado secretamente es mayor o menor al que el jugador ha escrito.
Por lo tanto, cada vez que el jugador escriba su número y pulse el botón B_adivinar el programa lo comparará con el número secreto.

Hacemos comparaciones con la instrucción si-entonces

Ahora que ya tenemos el número pensado y el número que ha elegido el jugador ¿cuál será el siguiente paso? La aplicación tiene que comparar ambos números, para saber si ha acertado, o si es mayor o menor.

Este bloque tan importante es el que nos permitirá a los programadores enseñarle al dispositivo cómo debe tomar las decisiones durante la ejecución de un programa. El bloque si-entonces bloque sirve para darle inteligencia a las aplicaciones.

Dependiendo del resultado de la comparación la aplicación deberá hacer una cosa u otra:

Si se cumple una condición

Entonces Ejecuta esto

EJERCICIO 9 - ¿Qué número está pensando?

El bloque que sirve para hacer una comparación entre dos números está en el cajón Matemáticas. Lo arrastraremos al editor de bloques, hasta encajarlo con el primero de los huecos del bloque si-entonces

EJERCICIO 9 - ¿Qué número está pensando?
En el primer hueco del bloque azul pondremos el número secreto que almacenamos antes en la variable, y en el otro lado indicaremos cuál es el número que ha escrito el jugador en el campo T_número

Podemos saber cuál es el contenido de una variable con el bloque tomar. Arrastramos al editor el bloque tomar que se encuentra dentro del cajón Variables hasta el primer hueco del bloque azul de comparación, y una vez colocado elegimos qué variable es la que queremos usar, desplegando la lista de variables situada dentro del bloque tomar.

EJERCICIO 9 - ¿Qué número está pensando?
Ahora que ya sabemos cómo consultar cuál es contenido de la variable V_numero_pensado, podemos modificar la comparación haciendo clic en el centro del bloque azul.
Empezaremos evaluando si el número pensado es mayor que el número del jugador.

EJERCICIO 9 - ¿Qué número está pensando?
En caso de que se cumpla la condición deberemos darle al jugador una pista, diciéndole que el número que nos ha dicho es demasiado bajo. Lo haremos creando una nueva etiqueta E_pista en el interfaz del juego.
EJERCICIO 9 - ¿Qué número está pensando?
Bloque poner para guardar el valor de una variable, texto o etiqueta

Igual que con el bloque tomar tomábamos el valor de la variable, con el bloque poner vamos a asignar el valor “Demasiado bajo” al texto de la etiqueta E_pista, para que el jugador lo vea en la pantalla del juego.

IMPORTANTE

Utilizaremos el componente Etiqueta cuando el valor de su propiedad Texto sólo va a ser modificada por el programa, es decir, cuando el usuario de la aplicación no tiene que escribir sobre ella para modificarlo. En caso de que el usuario pudiera modificarlo utilizaríamos un componente CampoDeTexto.

EJERCICIO 9 - ¿Qué número está pensando?
Para incluir el texto “Demasiado bajo” usaremos un bloque fucsia que hay dentro del cajón Texto

EJERCICIO 9 - ¿Qué número está pensando?
¿Cuándo debemos hacer la comparación?

Cada vez que el usuario haga clic en el botónB_adivinar. Por lo tanto, incluiremos todo el bloque anterior dentro del bloque cuando.B_adivinar.Clic

Hacemos tres bloques si-entonces, uno para cuando el número sea menor, otro para cuando sea mayor, y el último para cuando sea igual, en cuyo caso el jugador habrá acertado el número.

Observamos que en cada bloque azul elsigno de comparación será diferente. Podemos duplicar, botón derecho>Duplicar, los bloques si-entonces completos y luego modificar los bloques azules y fucsia para que se adapten a cada comparación.

EJERCICIO 9 - ¿Qué número está pensando?

EJERCICIO 9 - ¿Qué número está pensando?
Cuando estamos probando la aplicación, no sabemos cuál es el contenido de la variable V_número_pensado, así que no tenemos certeza de si el programa está ejecutándose bien, es decir, si está informando correctamente al jugador si el número es demasiado alto, o demasiado bajo.

Para saber si el programa funciona como debe tenemos que poner “chivatos”. Por ejemplo, podemos hacer que se muestre siempre el número pensado en pantalla, para saber si el programa funciona bien.

ATENCIÓN

Un chivato se utiliza sólo durante la fase de desarrollo del programa, mientras se está escribiendo. Cuando todo está probado, y antes de ponerlo a disposición de los usuarios, hay que acordarse de quitar todos los chivatos.

Para poner un chivato podemos definir una etiqueta E_chivato, y luego usar estos bloques:

EJERCICIO 9 - ¿Qué número está pensando?
Ubicamos este bloque es dentro del evento cuando B_adivinar.Clic, como primera instrucción.
Así se actualizará en la pantalla el valor delchivato cada vez que usuario pulse el botón de adivinar.

EJERCICIO 9 - ¿Qué número está pensando?
En nuestro programa, para evitar las ejecuciones de código innecesarias, vamos a utilizar sentencias si-entonces anidadas, o si-entonces-si no. Sólo se ejecutarán los bloques del si no cuando NO se cumpla la condición del si-entonces anterior.

De esta forma el bloque cuando.B_adivinar_Clic se ejecutará mucho más rápido, al evitar pasar por bloques sin necesidad.

EJERCICIO 9 - ¿Qué número está pensando?

EJERCICIO 8 – Botones Cambiantes

EJERCICIO 8 - Botones Cambiantes

Vamos a realizar una App que tenga tres botones que cuando presionemos encima cambie de cara y cuando soltemos vuelva a la cara original.

Para realizar esta práctica deberemos descargar a nuestro ordenador las caras de la carpeta material >Caras. En esta carpeta encontraremos los archivos necesarios para hacer nuestra app.

Este será el resultado final de nuestra app:

EJERCICIO 8 - Botones Cambiantes

Preparamos nuestro material, en la pestaña Medios clicamos en subir archivo y seleccionamos cada Cara que iremos subiendo a App Ivenntor
EJERCICIO 8 - Botones Cambiantes
Una vez que ya tenemos nuestros archivos pasaremos a organizar cada elemento:

EJERCICIO 8 - Botones Cambiantes
Ajustaremos ahora las propiedades de cada elemento tal y como aparecen en las siguientes imágenes:

EJERCICIO 8 - Botones Cambiantes

Las propiedades de los botones son idénticas salvo por la imagen de cada botón:

EJERCICIO 8 - Botones Cambiantes

Abrimos el visor de bloques, y vamos a programar el comportamiento de los botones. El primero será el botón 1 utilizaremos los bloques condicionales, instrucciones de poner y el bloque texto para indicar que cuando presionemos el botón cambie de imagen.

EJERCICIO 8 - Botones Cambiantes

Este sería el resultado para el Botón 1 cuando presionemos el botón pondrá la imagen
Cara4.jpg mientras que cuando soltemos el ratón volverá a la Cara1.jpg

EJERCICIO 8 - Botones Cambiantes
Haremos lo mismo con el resto de los botones tal y como aparece en la imagen:

EJERCICIO 8 - Botones Cambiantes
Guardamos nuestro proyecto con el nombre de Botones Cambiantes dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador.
EJERCICIO 8 - Botones Cambiantes

EJERCICIO 7 – Zoológico

EJERCICIO 7 – Zoológico

Vamos a realizar una App que tenga una serie de botones con la imagen de distintos animales y que cuando cliques encima de estos suene el sonido correspondiente a cada animal.

Para realizar esta práctica deberemos descargar a nuestro ordenador las imágenes y sonidos de la carpeta material >Zoo. En esta carpeta encontraremos los archivos necesarios para hacer nuestra app.

EJERCICIO 7 – Zoológico
Lo primero de todo subiremos todo el material que usaremos para realizar la aplicación. Desde la pestaña medios subimos los archivos que se encuentran en nuestro dispositivo:
EJERCICIO 7 – Zoológico
Organizaremos la interfaz en cuatro disposiciones horizontales. Desde la opción de Paleta>Disposiciones

EJERCICIO 7 – Zoológico
Una vez organizada nuestras disposiciones vamos a añadir dos botones en cada disposición salvo en la cuarta disposición donde solo estará el botón de salida.
EJERCICIO 7 – Zoológico

EJERCICIO 7 – Zoológico

EJERCICIO 7 – Zoológico
Por último, arrastramos hacía nuestra interfaz los diferentes sonidos de cada animal que se colocaran en la zona no visible del programa:

EJERCICIO 7 – Zoológico
Una vez dispuesto nuestra parte visual de la aplicación abriremos el visor de los Bloques donde programaremos las acciones para que nuestra app funcione

EJERCICIO 7 – Zoológico
Seleccionamos el Botón Elefante y a partir de ahí elegimos el primero de los condicionales que hará que cuando cliquemos en el botón inicialicemos el sonido del Elefante.

EJERCICIO 7 – Zoológico

Repetimos la operación con cada botón que corresponde a cada animal:
EJERCICIO 7 – Zoológico
Por último, vamos a programar el botón de stop o apagar la aplicación. Le ordenaremos que cierra la aplicación cada vez que lo cliquemos:
EJERCICIO 7 – Zoológico
Seleccionamos en la parte de arriba la opción de control en las opciones de Integrados, la opción cerrar aplicación. Arrastraremos ese bloque y lo uniremos a nuestro condicional ya colocado en el lienzo de programación.

EJERCICIO 7 – Zoológico
Quedando así la líneas de código. Probaremos la aplicación Conectando desde la opción Conectar Ai Companion a nuestro dispositivo.

EJERCICIO 7 – Zoológico
Guardamos nuestro proyecto con el nombre de Zoologico dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador.

EJERCICIO 7 – Zoológico

EJERCICIO 6 – Definir Variables

EJERCICIO 6 - Definir Variables

Vamos a realizar una App que se encargará de decirnos si el número que introduzcas es del tipo par o impar.

Para realizar esta práctica, primero vamos a conocer un nuevo concepto: las variables. Una variable la podemos imaginar como una carpeta donde almacenas algo, que luego podrás volver a reutilizar, ya que siempre estará almacenado en un lugar llamado variable con un nombre concreto.

Puedes crear las variables con un nombre que identifiquen el contenido de éstas. Así por ejemplo puedes tener una variable “animal” que puede contener diferentes valores: “perro”, “gato”, “loro”, etc

EJERCICIO 6 - Definir Variables

Clicamos en la sección Paleta y en la pestaña Disposición encontrarás la DisposiciónVertical, seguidamente arrástrala al Visor.

EJERCICIO 6 - Definir Variables

Se ha generado un nuevo objeto en la lista de Componentes. A continuación, establecemos un ancho adecuado para esta capa de disposición desde el apartado Propiedades.

En el campo llamado Ancho, debes seleccionar la opción Ajustar al contenedor.

EJERCICIO 6 - Definir Variables
Una vez hemos adaptado el tamaño de la capa a la pantalla del dispositivo, vamos a indicar a esta capa en sus propiedades que debe situar todo el contenido de su interior de un modo centrado. Para ello ves al apartado Propiedades y busca el campo que dice DispHorizontal y escoge la opción Centro.

EJERCICIO 6 - Definir Variables
Una vez ya está lista la disposición de los objetos dentro de la app, se van a comenzar a añadir éstos al apartado Visor.

Lo primero que añadimos va a ser un título sobre el campo donde se introducirán los números que luego serán verificados.

Para ello vamos a ir a la Paleta y en la sección de
Interfaz de usuario has de arrastrar el elemento Etiqueta dentro de la capa de disposición agregada anteriormente.

 

 

 

EJERCICIO 6 - Definir VariablesAñadimos el campo donde se introducirán los números que luego serán calculados.

Para ello vamos a ir a la Paleta y en la sección de Interfaz de usuario has de arrastrar el elemento CampoDeTexto dentro de la capa de disposición agregada anteriormente.
Añadimos el botón que ejecutará la comparación de los dos números, mediante el uso de instrucciones encapsuladas en bloques.

Seleccionamos Paleta y en la sección de Interfaz de usuario has de arrastrar el elemento Botón dentro de la capa de disposición.

Como se ve en las imágenes, se han modificado los textos que se muestran por pantalla.

Preparada la parte visual del la App. Ahora falta añadir instrucciones a los objetos visuales que se han añadido.

Es muy importante almacenar datos para posteriormente tratarlos.

Para ello vamos a crear dos Variables para almacenar el número a calcular y el resultado calculado. Vamos a la sección Variables e inicializamos 2 variables.

EJERCICIO 6 - Definir Variables
Seguidamente vamos a hacer clic en el objeto Botón que has añadido antes, de manera que van a aparecer las instrucciones asociadas a este bloque.

Tal y como se muestra en la imagen vas a agregar al programa el bloque llamado: Cuando Botón1.Clic

EJERCICIO 6 - Definir Variables

Indicamos que una vez se haga clic en el objeto, se van a coger los datos que haya dentro del CampoDeTexto1 para almacenarlo en una variable que ya se ha creado antes.

Tal y como ves en la imagen, se indica qué valor se debe almacenar, siendo el que tenga la propiedad de Texto.

Esto se almacena en la variable número.

EJERCICIO 6 - Definir Variables
Ahora vamos a hacer uso de la segunda variable creada con el nombre de resto, en la cual vas a almacenar el resultado de calcular el (módulo o resto resultado de dividir por 2) del valor guardado en la variable número.

Tal y como ves se añade un módulo matemático (módulo de) en el cual introducimos la variable número para dividirla entre 2.

EJERCICIO 6 - Definir Variables

Utilizando los bloques de control, en este caso del tipo si entonces podrás controlar mediante condiciones, qué instrucciones vamos a ejecutar y cuáles no. En este caso, si la condición da como respuesta falso querrás que se ejecuten las acciones que substituyen a las de una condición cierta. Tal y como ves en la imagen puedes modificar este tipo de bloques.

EJERCICIO 6 - Definir Variables
Vamos a tener que añadir un bloque del tipo (si, si no), con una condición anidada dentro para que, dependiendo del resultado matemático, se ejecute una acción u otra. Como condición vamos a tener que decir que si la variable llamada resto da como resultado 0 significa que el módulo calculado corresponde a un número par, en caso de que no sea 0 será un numero impar.

EJERCICIO 6 - Definir Variables
Por último, vamos a tener que especificar qué acciones se van a ejecutar en cada uno de los dos casos:

→ Si es cierto se va a poner como texto en la Etiqueta2 “número par”,
→ Si es falso será el texto “número impar”

EJERCICIO 6 - Definir Variables
Probamos en nuestro dispositivo con la opción Conectar Ai Companion.

EJERCICIO 6 - Definir Variables
Guardamos nuestro proyecto con el nombre de Calculadora dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador

 

EJERCICIO 5 – Paint

EJERCICIO 5 - Paint

En este ejercicio vamos a crear un espacio donde dibujar y pintar lo que queramos con una serie de colores que predefiniremos. Mediante un componente llamado Lienzo.

Esta aplicación va a constar de tres botones, que se encargarán de definir el color con el que se va a dibujar dentro del Lienzo.

EJERCICIO 5 - PaintNos dirigimos a la barra de herramientas y en la pestaña

Proyectos escogemos la opción – Comenzar un proyecto nuevo.

Aparecerá una pantalla en la que has de introducir el nombre para esta App: Paint

Abrimos la Paleta y en la pestaña Disposición seleccionamos la Disposición Horizontal, seguidamente la arrastramos al Visor

 

EJERCICIO 5 - Paint

EJERCICIO 5 - Paint

EJERCICIO 5 - Paint
Cambiamos tanto el texto que se muestra, como el aspecto visual de los botones. Mediante las propiedades de cada uno de los objetos, vas a modificar el color de fondo y el texto, tal y como se muestra en las imágenes.

EJERCICIO 5 - Paint
Seguidamente agregamos el componente lienzo, desde la Paleta en el apartado de Dibujo y animación. Lo Arrastramos al Visor y establecemos sus dimensiones desde las Propiedades del Lienzo

EJERCICIO 5 - Paint

EJERCICIO 5 - Paint
Ahora abrimos la vista bloques y empezamos a construir nuestro código Lo primero de todo vamos a indicarle al componente lienzo, qué tiene que hacer cuando se arrastra el dedo por encima.

En este caso le diremos que genere una línea a medida que vas arrastrando el dedo por la pantalla.

Para ello selecciona el componente lienzo y busca el bloque que se muestra en la imagen.

EJERCICIO 5 - Paint
Este bloque contiene una serie de parámetros predefinidos que aportan la información necesaria para que en este caso se dibuje una línea.

En este ejercicio vas a tener que utilizar los siguientes parámetros:

Xprevio, Yprevio, Xactual e Yactual (es decir los ejes horizontal y vertical de nuestra pantalla)

A continuación, dentro del bloque, debes escoger la instrucción morada predefinida llamada.

DibujarLínea

Una vez está agregada dentro del bloque, vas a añadir los parámetros tal y como se ve en la imagen.

EJERCICIO 5 - Paint
Desde los parámetros integrados elegimos el bloque variables y lo arrastramos hacía nuestro bloque morado encajándolo en sus correspondientes huecos:

EJERCICIO 5 - Paint
Por último, vamos a decirle a los botones que hemos agregado anteriormente, que establezcan el color que marca el texto, es decir, al botón Azul le dirás que establezca dicho color para que dibujes.

De este mismo modo repetirás el proceso con los tres botones. Para ellos haz clic en el componente de uno de los botones, y agrega el bloque Cuando Botón .Clic

EJERCICIO 5 - Paint
Una vez agregado este bloque para cada botón, vas a seleccionar el componente lienzo para decirle a los botones el color de la línea específico para cada uno. Tal y como ves en la imagen,

EJERCICIO 5 - Paint

EJERCICIO 5 - Paint
Por último, probamos la aplicación ya sea en el emulador o en el dispositivo móvil a través de Ai companion. Guardamos el proyecto.

EJERCICIO 4 – Calculadora

EJERCICIO 4 - Calculadora

Creamos un nuevo proyecto el cual tendrá de nombre Calculadora. Después abrimos el visor Diseñador y elegimos desde la pestaña Paleta>Disposiciones la opción Disposición vertical. La arrastramos:

EJERCICIO 4 - Calculadora
Veremos que se ha generado un nuevo objeto en la lista de Componentes.

A continuación, deberás establecer un ancho adecuado para esta capa de disposición desde el apartado Propiedades. En el campo llamado Ancho, debes seleccionar la opción Ajustar al contenedor, para que así el contenido se ajuste al tamaño de la pantalla del dispositivo.

EJERCICIO 4 - Calculadora

EJERCICIO 4 - Calculadora
Una vez se haya adaptado el tamaño de la capa a la pantalla del dispositivo, vas a indicar en las propiedades de esta capa que debe situar todo el contenido de su interior de un modo centrado.
Para ello vamos al apartado Propiedades y buscamos el campo que dice DispHorizontal y escogemos la opción Centro

 

 

 

Una vez ya está lista la disposición de los objetos dentro de la App, se van a comenzar a añadir éstos al apartado Visor. Lo primero que vas a añadir van a ser los campos donde se introducirán los números que luego serán calculados.

Para ello vamos a la Paleta y en la sección de Interfaz de usuario hemos de arrastrar el elemento CampoDeTexto dentro de la capa de disposición agregada anteriormente.

EJERCICIO 4 - Calculadora

De la misma manera que se han agregado campos de texto, vamos a repetir el procedimiento, pero para agregar una etiqueta que hará de cabecera en los campos agregados anteriormente.

Para ello vamos a ir a la Paleta y en la sección de Interfaz de usuario arrastramos el elemento Etiqueta encima de cada uno de los dos campos de texto.

EJERCICIO 4 - Calculadora

A continuación, vamos a renombrar estos componentes para hacer más fácil el trabajo con ellos. Para ello seleccionamos el componente deseado y clicamos en el botón Cambiar nombre. Poniendo Número 1 y Número 2.
EJERCICIO 4 - Calculadora
Ya tenemos los componentes renombrados para localizarlos más fácilmente, vamos a modificar los textos que muestran por pantalla estos mismos componentes. Solamente modificamos el texto de las etiquetas que hacen de cabecera.

Para ello marcamos la etiqueta correspondiente en el visor, vamos al apartado de Propiedades y modificamos el campo Texto.
EJERCICIO 4 - Calculadora
Vamos a tener que replicar los pasos para agregar otro campo de texto y otra etiqueta, los cuales servirán para mostrar el resultado del cálculo a realizar.

Deberá quedar algo como lo que se muestra en la imagen.
EJERCICIO 4 - Calculadora
Ahora ya tenemos preparada la App para introducir los números a calcular y para que muestre el resultado.

A continuación, vamos a agregar un Botón para que estos componentes sepan en qué momento realizar las operaciones.

Para ello vamos al apartado de la Paleta y en la sección de Interfaz de usuario arrastramos el elemento Botón debajo del campo resultado.
EJERCICIO 4 - Calculadora
Finalizada toda la parte de diseño, vamos a agregar bloques (instrucciones) a los componentes desde el apartado Bloques de la interfaz.

Para llevar a cabo esta tarea lo primero es plantear como va a funcionar la app:

El botón Suma va a recoger los valores de los campos 1 y 2, sumarlos.

Y mostrar el resultado en el campo 3. En el apartado bloques, primero selecciona el componente del botón “Suma” para que se muestren todos los bloques disponibles para este tipo de objeto.

En este caso vamos a querer que este botón inicie una serie de instrucciones.
Buscamos el siguiente bloque “Cuando Sumar .Clic”.

EJERCICIO 4 - Calculadora

Ahora hay que decirle qué deseamos que haga, en este caso es mostrar en el campo 3 la suma de dos números.

Para ello vamos a hacer clic encima del CampoDeTexto3 en bloques.

A continuación, buscarás el bloque llamado:

Poner campo_3.text como y lo encajas en el bloque previo
EJERCICIO 4 - Calculadora
Una vez encajado el bloque deberemos clicar en el hueco que marcamos en rojo y desde el triángulo invertido clicar y elegir la opción texto dentro de nuestro bloque.

EJERCICIO 4 - Calculadora
Es el momento de indicar al campo 3 de donde va a recoger los números para posteriormente sumarlos y mostrarlos.

Como los valores van a recibir un tratamiento matemático, vamos a buscar en la sección Matemáticas el bloque que se encarga de Sumar, y lo vamos a unir con el conjunto de bloques anterior.

EJERCICIO 4 - Calculadora
Por último, añadir el valor de los campos 1 y 2 a los huecos que propone el campo matemático. Ya que los datos que incluyen los campos 1 y 2 son representados en texto, vas a hacer clic.

En cada uno de éstos y buscarás el bloque de Texto para arrastrarlos al interior del bloque matemático, para obtener algo así.
EJERCICIO 4 - Calculadora
Lo guardamos en nuestra carpeta de proyectos y lo probamos con nuestro dispositivo móvil (Ai Companion) o con el emulador de la aplicación.

EJERCICIO 3 – Darth Vader

EJERCICIO 3 - Darth Vader

Para realizar esta práctica, vas a tener que seguir los pasos que se muestran a continuación

Paso 1: dirígete a la barra de herramientas y en la pestaña Proyectos escoge la opción Comenzar un proyecto nuevo.

Paso 2: aparecerá una pantalla en la que has de introducir el nombre que va a tener la App.

EJERCICIO 3 - Darth Vader EJERCICIO 3 - Darth Vader

 

Vamos a descargar de la carpeta de material la imagen de Darth Vader para nuestra aplicación, será la portada cada vez que abramos nuestro ejercicio se verá así:

EJERCICIO 3 - Darth Vader

Lo primero de todo es colocar dentro de nuestro Screen la imagen en la parte superior. Seleccionamos el elemento imagen y lo arrastramos a la pantalla del móvil aquí representado.

EJERCICIO 3 - Darth VaderEJERCICIO 3 - Darth Vader
Para agregar nuestra imagen a la pantalla deberemos irnos al menú medios y clicar en subir el archivo Fondo.jpg que tenemos en la carpeta de material del curso. Una vez hecho se nos visualizará el Darth Vader. Para que tenga el tamaño correcto le damos estos parámetros:
EJERCICIO 3 - Darth Vader
Seguidamente pondremos los botones de nuestra app debajo de esta dentro de una disposición horizontal, es decir en un contenedor que permita colocar dos botones en paralelo

Para ello desde la pestaña Disposición arrastramos la opción Disposición Horizontal hacía la parte baja de la imagen ya colocada:

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth Vader
EJERCICIO 3 - Darth Vader
Arrastramos desde la pestaña Interfaz de usuario el elemento Botón dentro de nuestra disposición horizontal y seguidamente otro botón que vaya justo al lado.

A la hora de colocar ambos botones tenemos que posicionarnos con el ratón encima del contenedor y esperar a que aparezca una arista azul en vertical la cual nos indica donde queremos que estén nuestros dos botones

Estos son los parámetros de los botones:

 

 

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth Vader

El cual será DarthVaderefectovoz.mp3 que estará dentro de la carpeta material del curso.

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth VaderPor ultimo, en la vista diseno haremos que el screen tenga estos parametros para que el diseno sea el mas acorde a la naturaleza de Darth Vader

 

 

 

 

 

 

 

Una vez diseñada la parte visual vamos a trabajar la programación de nuestra app para ello nos vamos a la opción bloques y desde ahí vamos a trabajar el comportamiento de los botones Respira y Salir

EJERCICIO 3 - Darth Vader

Clicamos encima del botón respira y añadimos el primer condicional que vemos Cuando Respira Clic>Ejecutar>Llamar VozDarthVader

Es decir, cuando cliquemos encima del botón Respira haremos que llame a la variable voz o sonido que ya tenemos implementado en el visor Diseño.

EJERCICIO 3 - Darth Vader

La primera línea de código o bloque viene a decir que cuando clicamos en el botón respira ejecuta la acción de reproducir el sonido que tenemos en nuestra app.

EJERCICIO 3 - Darth Vader
Para que no esté reproduciendo en bucle, vamos a escribir esta línea de código la cual nos permitirá que cuando cliquemos en el botón salir o Finalizar parara nuestra grabación:
EJERCICIO 3 - Darth Vader

Para añadir el componente cerrar aplicación, debemos irnos a los componentes genéricos>Control>Cerrar aplicación
EJERCICIO 3 - Darth Vader
Finalizamos guardando el proyecto en nuestra carpeta de proyectos. De esta manera lo tendremos ya acabado y podremos volver a él siempre que queramos si hay que modificar cualquier elemento.

EJERCICIO 1 – Instalación y la Interfaz

EJERCICIO 1 - Instalación y la Interfaz

MIT App Inventor es una herramienta web de programación visual y con ella vas a poder crear tus propias Apps para dispositivos Android.

EJERCICIO 1 - Instalación y la Interfaz

App Inventor es un producto desarrollado por el Instituto Tecnológico de Massachusetts (MIT) junto con Google, de manera que como requisito se debe disponer de una cuenta de Google para acceder a la web de MIT App Inventor.

Paso 1: Acceder a la web MIT App Inventor

Accede a la web oficial mediante este enlace: http://appinventor.mit.edu/

Paso 2: Crear un acceso a la web

Una vez tengas abierta la web, ¡verás en la barra superior un icono de color naranja donde dice Create apps!, haz clic en él y asocia tu cuenta de Google para acceder a la plataforma y comenzar a programar. Si no tienes una cuenta de Google, puedes crearla en: https://accounts.google.com/SignUp?hl=es

Paso 3: Comenzar a trabajar

Una vez hayas introducido tu cuenta de Google, te aparecerá un texto con el Acuerdo de Licencia de Uso, y al pulsar aceptar ya tendrás acceso a la interfaz de programación como se muestra en la siguiente imagen,

EJERCICIO 1 - Instalación y la Interfaz

La primera vez que abres la web aparece un cuadro de texto en el centro informándote de que no tienes proyectos, animándote a crear nuevos.

EJERCICIO 1 - Instalación y la Interfaz

La web de App Inventor de manera predeterminada se muestra en inglés, pero en la barra de herramientas superior podrás ver una opción desplegable con todos los idiomas disponibles.

Haz clic en la pestaña y selecciona español.

EJERCICIO 1 - Instalación y la Interfaz

App Inventor es un entorno de programación visual, que permite crear Apps usando objetos e instrucciones en forma de bloques.

Estas instrucciones proporcionarán un comportamiento a los objetos o componentes de la App para que hagan una u otra cosa.

En las siguientes imágenes podrás ver las diferentes partes de la interfaz del programa.

1_LA BARRA DE HERRAMIENTAS:

VISTA DISEÑADOR:

1. Barra de herramientas
2. Barra de la App abierta
3. Paleta
4. Visor
5. Componentes
6. Media
7. Propiedades

Tiene diferentes opciones que te permitirán acceder a la creación y edición de Apps.

EJERCICIO 1 - Instalación y la Interfaz

1. Proyectos: crear, editar, guardar, exportar, importar nuestros proyectos.

2. Conectar: probar el funcionamiento de nuestra App, ya sea en el emulador propio de MIT App Inventor o bien en un dispositivo móvil. Con esta opción podrás ir haciendo pruebas a medida que vas programando la App.

3. Generar: una vez tengas la App definitiva, vas a poder exportarla al PC o bien al móvil directamente mediante la tecnología QR, para de este modo hacer un uso real de lo que has creado.

4. Ayuda: acceso a todo tipo de información propia de App Inventor, desde tutoriales hasta foros de la comunidad.

5. Mis proyectos: acceso a la librería en la que se almacenan todos los proyectos que tienes guardados en tu perfil.

6. Galería: acceso a las aplicaciones compartidas en la comunidad, tutoriales y demás documentos compartidos por otros usuarios de la comunidad de MIT App Inventor.

7. Guía: acceso a documentación de soporte oficial que te ayudará con dudas que se puedan plantear.

8. Idioma: podrás cambiar el idioma de la interfaz web tal y como has visto anteriormente.

2_LA BARRA DE LA APP ABIERTA

EJERCICIO 1 - Instalación y la Interfaz

Esta Barra de la App abierta es la que ofrece las opciones que hacen referencia a la app que actualmente se encuentra abierta.

Ventanas: permite cambiar la ventana del programa con la cual quieres trabajar en un momento concreto, ya que una app puede disponer de varias ventanas.

Añadir ventanas: permite añadir nuevas ventanas a la app que estás desarrollando.

Eliminar ventanas: permite eliminar las ventanas del proyecto en el que trabajamos

Ventanas – Esta pestaña da la opción de cambiar la ventana del programa con la cual quieres trabajar en un omento concreto, ya que una app puede disponer de varias ventanas.

Añadir ventanas – Esta opción permite añadir nuevas ventanas a la app que estas desarrollando.

Eliminar ventanas – Esta opción permite eliminar las ventanas del proyecto.

EJERCICIO 1 - Instalación y la Interfaz

Diseñador: permite acceder a la ventana de diseño para colocar los objetos que forman la interfaz de nuestra App y hacer la composición del aspecto, los botones y el resto de los elementos que tendrá.

EJERCICIO 1 - Instalación y la Interfaz

Bloques: permite añadir instrucciones en forma de bloques a los elementos que se han agregado en el apartado de Diseñador. Desde aquí programaremos el funcionamiento de nuestra App, añadiendo funcionalidades a los objetos que hemos colocado.

3_PALETA

EJERCICIO 1 - Instalación y la Interfaz

Esta sección del entorno situada en el lateral izquierdo de la interfaz de App Inventor, contiene todos los elementos visuales o de otro tipo, que pueden ser agregados y tratados en una App.

Al pulsar en cada una de las opciones se despliega, abajo, el menú de elementos correspondientes a esa categoría

Interfaz de usuario:

Todos los elementos interactivos que se pueden agregar a una App, como por ejemplo botones, checkboxes (cuadros de selección), barras de desplazamiento, imágenes, listas, desplegables, campos de texto…

Disposición:

Permite añadir capas “no visibles” con el fin de organizar los elementos dentro de la pantalla. Pueden ser dispuestos de manera vertical, horizontal, dentro de tablas…

Medios:

Para añadir reproductores de música y video hasta galerías de imágenes. Este apartado contiene “Funciones interactivas predeterminadas”, es decir, listas para ser agregadas y utilizadas.

Dibujo y animación: una serie de objetos visuales e interactivos con los cuales podrás dibujar, interactuar entre objetos…

Sensores:

Este apartado es bastante relevante, ya que es con el que podrás agregar a tu app
funcionalidades que un dispositivo móvil incorpora hoy en día de manera habitual, tales como; acelerómetro, giroscopio, podómetro, brújula…

Social:

Una app también puede incorporar herramientas clásicas como; SMS, e-mail, navegador web y redes sociales, agenda de contactos…

Almacenamiento:

Como en todo tipo de programación, el hecho de reutilizar datos que obtenemos o que se encuentran almacenados es muy habitual y necesario. Con este apartado vas a poder generar tu base de datos para incluirla en tu app y utilizar archivos con información necesaria para el buen funcionamiento de tu App.

Conectividad:

Otra gran característica de las app móvil es la capacidad de comunicarse con otros dispositivos del entorno mediante tecnologías inalámbricas como Bluetooth ya incorporadas en los terminales

Lego Mindstorm:

Desde aquí podemos programar una serie de comandos que utilizaremos para programar robots de este modelo de Lego.

La app de programación gratuita LEGO® MINDSTORMS® para niños incluye una interfaz basada en Scratch, instrucciones de construcción digitales, más de 50 actividades y compatibilidad con Python para programadores más avanzados.

EJERCICIO 1 - Instalación y la Interfaz

Experimental

En esta pestaña podremos realizar programación de por libre o para desarrollar dentro de tu aplicación. Es una herramienta avanzada que no utilizaremos dada su complejidad.

EJERCICIO 1 - Instalación y la Interfaz

Una extensión es como una librería, un código que hace algo y que podemos insertar en nuestra aplicación.

+ Una extensión es un código que un programador que sepa programar en JAVA realiza de manera que crea un nuevo componente que podemos insertar y utilizar en nuestro App inventor 2.

+ Una extensión es un nuevo componente creado por un programador que tenga conocimientos de JAVA y de código fuente de App inventor, ese componente tendrá sus bloques y podremos utilizarlo como los demás componentes de App inventor 2. Por ahora los componentes son invisibles en la ventana, es decir no se ven, más adelante la MIT eliminará esta restricción. Los archivos de extensiones terminan en .aix

EJERCICIO 1 - Instalación y la Interfaz

5. Componentes

EJERCICIO 1 - Instalación y la Interfaz

Cada vez que se anada un componente al visor de tu App, se ira generando una lista de estos, de manera que podras identificar rapidamente con que objetos estas trabajando en todo momento. Para renombrar o eliminar  un elemento no deseado, lo tienes que hacer mediante esta seccion del interfaz

EJERCICIO 1 - Instalación y la Interfaz

EJERCICIO 1 - Instalación y la Interfaz

 

 

VISTA BLOQUES

Como ya hemos visto anteriormente, por un lado, deberás desarrollar visualmente tu App agregando y distribuyendo los componentes dentro de la pantalla, es decir trabajaras en la vista Diseñador.

También deberás programar con bloques el comportamiento de estos componentes.

Para ello seleccionaremos la vista Bloques donde podremos trabajar el lenguaje de programación del App Inventor

Cada objeto o componente tiene una serie de instrucciones organizadas por secciones de manera predeterminada.

En la siguiente imagen podrás ver el aspecto de la sección de Bloques.

EJERCICIO 1 - Instalación y la Interfaz

En el apartado de instrucciones genéricas (Integrados), si haces clic en la sección de control verás que hay bloques tales como (Si -Entonces) que es del tipo control de condiciones y puede ser aplicado a la gran mayoría de bloques.

EJERCICIO 1 - Instalación y la Interfaz

En el apartado de instrucciones especificas (Screen) encontrarás bloques como el siguiente que te permitirá cambiar el tamaño de letra de un determinado componente como un botón, por ejemplo, a un determinado tamaño.

EJERCICIO 1 - Instalación y la Interfaz