TinyWebDB es un almacén de datos que permite almacenar información mediante etiquetas en la aplicación, esto quiere decir que los datos estarán disponibles cada vez que se abra nuestra app. Los datos son cadenas de texto que se almacenan en etiquetas (tags). Para almacenar datos, debemos especificar la etiqueta que le corresponde a ese dato. Posteriormente, los datos pueden ser recuperados en esa misma etiqueta.Devonn

Debemos tener en cuenta que cuando usamos Companion y estamos trabajando con el componente elemento que presta un servicio de comunicación cuando se diseñan interfaces.

Devonn 

TinyDB, todas las aplicaciones están compartiendo la misma base de datos es un conjunto de datos relacionados a un mismo contexto y almacenados para su posterior uso. Esto no ocurre si empaquetamos la aplicación como un archivo apk, mientras estemos desarrollando la app debemos ser cuidadosos en los nombres de etiquetas que usemos en otras aplicaciones.

A continuación, realizaremos una Base de datos utilizando este componente. Se dividirá nuestra aplicación en dos pantallas con el siguiente diseño:

Organizaremos nuestra aplicación en dos pantallas. En la primera pantalla o Screen 1 donde el usuario ingresa su nombre y apellido y tendremos un botón donde almacenaremos esta información.

Yaestudio

El botón siguiente pantalla solo aparecerá cuando el usuario almacene los datos tal y como programamos en nuestro visor de bloques:

Al presionar el botón almacenar realizará las siguientes instrucciones donde guardará los dos valores que añadimos en nuestros campos de texto.

Se nos mostrara esta pantalla donde podremos extraer los datos de la base de datos:

Atencion Socio sanitaria

Abrimos el visor de Bloques y escribiremos la siguiente instrucción dentro de Screen2:

Vamos a realizar una App que nos permita hacer una foto desde nuestro dispositivo y cuando se ha realizado la foto, ésta aparece en tamaño 100 x 100 en la pantalla, además sale una notificación indicando que la foto ha sido realizada y además un mensaje de voz pronunciando “La foto ha sido realizada.” Necesitaremos:

Devonn 

→ Disposición horizontal

→ Dos botones

→ Imagen

→ Campo de texto

→ Cámara(medios)

→ Notificador (medios)

→ TextoVoz (medios)

Vender en Amazon

Estas son las propiedades de cada elemento que conforman nuestra app:

Yaestudio

Los elementos ocultos que hacen posible las funciones de tomar una foto y notificar que ya está hecha:

Dentro del visor bloques pasaremos a programar el botón de ejecutar el elemento Cámara y posteriormente programamos el comportamiento de este elemento después de realizar la acción de TomarFoto:

Ahora escribimos este código para ejecutar como sonará nuestro texto hablado:

Mediante el Tono podemos configurar el tono del sonido y mediante VelocidadDePronunciación la velocidad, estos número pueden tener un valor comprendido entre 0 y 2.

Por último, haremos que cuando cliquemos a nuestro Botón Clic este llame a la acción de hablar por lo que podremos oír el mensaje que pongamos en el CampoDeTexto1

Vamos a realizar una App que nos permita grabar sonidos en nuestro movil y reproducir posteriormente. Contará con tres botones para poder grabar, detener y reproducir el sonido desde nuestro teléfono.

Devonn 

Necesitaremos:

→ Disposición vertical
→ Disposición horizontalDevonn
→ Tres botones
→ Grabadora de audio (medios)
→ Reproductor de audio (medios)

Abrimos el visor de Bloques y lo primero de todo inicializamos la siguiente variable que utilizaremos como variable general en los botones de grabar, reproducir y parar.

Yaestudio

Programamos el botón de Rec o grabar, elegimos el control cuando clicamos el Botón Rec, después seleccionamos el condicional Si entonces:

Auxiliares del Estado

Con el elemento lógico de si la variable esta activa es verdad y por lo tanto iniciamos el componente de Grabador de Sonidos 1 y se desactiva cuando ha terminado de grabar.

Programamos la grabadora para que cuando hayamos grabado el sonido se escuche este.

Programamos para que cuando le demos al botón de play comience a reproducir el sonido grabado.

De nuevo tal y como hemos hecho en el botón de Rec programamos que detenga la grabación si se inicializa la variable y no lo haga cuando aparezca esta misma.

Realizaremos una app que nos mostrará un video con el que podremos interactuar desde nuestra interfaz. Para ello vamos a utilizar un componente llamado VideoPlayer que sirve para reproducir un archivo de vídeo.

Reproductor de vídeo es un componente multimedia que reproduce vídeos. Un reproductor de vídeo aparece en su aplicación como un rectángulo. Si el usuario pulsa el rectángulo, los controles de los medios de comunicación aparecen: reproducción / pausa, saltar hacia delante y saltar hacia atrás.

Avid Media

Su aplicación puede controlar el comportamiento de la reproducción mediante una llamada al inicio, pausa, e ir a: métodos.

Los archivos de vídeo deberán ser, Windows Media Video (. Wmv), 3GPP (.3 gp), o MPEG-4 (. Mp4). En este ejercicio subiremos a nuestra cuenta de App inventor un archivo .mp4 que se encuentra en nuestra carpeta de Material>Video

App Inventor acepta archivos de vídeo de hasta 1 MB de tamaño y limita el tamaño total de una aplicación de 5 MB. Si sus archivos de medios de comunicación son demasiado grandes, es posible que obtenga errores al empaquetar o instalar su aplicación, en cuyo caso se debe reducir el número de archivos de medios o sus tamaños. Puede utilizar Software de edición de vídeo, como Windows Movie Maker o iMovie de Apple, para reducir el tamaño de los vídeos, acortándolos o volver a codificarlos en formatos más compactos.

Devonn 

La interfaz que vamos a construir es la siguiente:

Como podemos ver los componentes de nuestra aplicación se dividen en dos disposiciones horizontales. La primera es para poner una etiqueta que sirve a modo de título de la app mientras que la segunda son los controles con los que podremos reproducir y parar nuestro video.

Yaestudio

Además de un botón que nos permitirá parar el video en un determinado punto con el elemento campo de texto donde pondremos un valor en milisegndos para determinar los segundos de nuestro video. Por ejemplo, si ponemos en este campo 8000 nuestro video se parará en el segundo 8.
Debajo de estos controles colocamos el componente ReproductorVideo

Para colocar nuestro elemento reproductor de video tenemos que seleccionar de la paleta de Componentes de App inventor el llamado ReproductorVideo:

Desde nuestra carpeta de Material buscamos el archivo Trailer20segundos la descargamos a nuestro ordenador y subimos a la aplicación a través de la opción Origen dentro de las propiedades del Reproductor.

Una vez diseñada nuestra interfaz pasaremos a programar nuestra aplicación, para ello abrimos el visor de bloques y construimos las siguientes líneas:

Quedando así nuestras líneas

Repetimos el procedimiento, pero ahora con el botón de Stop

Por último, escribiremos el comportamiento del botón Buscar a:

Vamos a realizar una App que realice la función de una pequeña radio en streaming. Utilizaremos una serie de botones con los que podremos reproducir, pausar y salir de la aplicación

Autonomos

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

Devonn 

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:

Yaestudio

La interfaz se organizará de la siguiente manera: (3 Disposiciones Horizontales)

Y dentro de cada disposición tenemos los siguientes elementos:

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. Para ello lo primero de todo le vamos a indicar que cuando cliquemos en el botón de play reproduzca una emisora. Elegimos el condicional siguiente:

Dentro de nuestro condicional tenemos que meter el elemento Reproductor el cual hará que oigamos la dirección de la emisora para ello utilizamos el siguiente bloque:

El origen tenemos que indicarle el enlace del cual oiremos nuestra emisora por lo que añadimos un bloque de texto y ahí pegaremos la emisora que queramos que reproduzca.

Inciso: La web de la cual hemos sacado esta dirección se llama; https://radiomap.eu/es/madrid, la que aquí aparece es la emisora de los 40 principales.
Podeís elegir la que más os plazca

Programamos el botón de pausa, con este condicional que hará que cuando cliquemos nuestro botón este llame al elemento Reproductor y lo pare. Primero selecionamos el B_Pause para poder poner el condicional y seguidamente clicamos al elemento Reproductor para colocar el bloque de llamar.

Por último, solo tenemos que añadir estas líneas para decirle que para apagar nuestra app hemos de ejecutar este bloque:

Vamos a crear una aplicación que muestre en diferentes ventanas las opciones de ver el pueblo de Titulcia.

Para ello crearemos un proyecto nuevo con el nombre de GuíaTuristica

Sistemas Gestion de Calidad

Se compone de una pantalla inicial, tal y como se muestra en la imagen:

Estas son las especificaciones de cada elemento:

Nos remite a esta otra página con el siguiente diseño:

Una vez hemos que hemos colocado y nombrado cada elemento en la pestaña de Componentes abriremos cada pestaña de Propiedades y dejamos estas especificaciones en cada elemento:

Cada uno de los botones debe de acceder a una pantalla nueva. Esto se hace colocando los siguientes bloques:

Accede a una web externa, donde se encuentra almacenada la información del Ayuntamiento de Titulcia. Se enlazará el botón a esa web utilizando como elemento el ActivityStarter.

Una nueva pantalla con una etiqueta donde aparece la descripción de la historia de Titulcia, así como un botón para volver a la pantalla de inicio o menú.

Una nueva pantalla con una etiqueta Rutas de Senderismo y una imagen con el mapa de Titulcia, así como un botón para volver a la pantalla de inicio o menú.

Vamos a añadir en la pantalla MENÚ un botón con el nombre de Maps. Aparecerá la imagen de Google Maps, que previamente se habrá localizado con dicha herramienta y se habrá capturado la url de acceso a esa imagen. También, en este caso, se tienen que utilizar los bloques de ActivityStarter1.

Para localizar la zona que se quiere visualizar se sigue el siguiente proceso:

Community Manager

1. Pulsar el icono superior izquierda de Google
2. Seleccionar Maps
3. Con el zoom (rueda del ratón, + y – del teclado) localizar el lugar que nos interesa
4. Arrastrar al punto que nos interese,
5. Y nos mostrará una imagen real de la localidad.

Vamos a desarrollar el juego del pong, donde vamos a disponer de una barra que vamos a poder desplazar de forma horizontal sobre la pantalla.

Una pelota irá rebotando en los bordes y deberemos evitar que dicha pelota caiga bajo la barra que nosotros movemos.

Alergenos Alimentarios

Cada vez que la barra toque la bola se acumulará un punto en el marcador.

Comenzamos un nuevo proyecto que llamamos Pong Modificamos las propiedades de “Screen1:Devonn

• Disposición horizontal: centro
• Nombre de la aplicación: Pong
• Marcar la opción Enrollable
• Título: Pong

Añadimos un Lienzo (Canvas) con las siguientes características:

• Color de Fondo: #a4eba6fd
• Alto: 350 pixels
• Ancho: Ajustar al contenedor

Posteriormente insertamos una Pelota y SpriteImage dentro del lienzo anterior:

• Color de pintura: Blanco
• Foto: Barra.gif
• Radio: 10
• X: 127 / Y: 300
• Nombre: Pelota
• Nombre: Barra

Ahora colocamos una Etiqueta bajo el lienzo anterior:
• Ancho: Ajustar al contenedor
• Texto: Puntos: 0
• Marcar la opción HasMargins
• Nombre: EtiquetaPuntos
• Posición del texto: centro

Ponemos una casilla de verificación bajo le etiqueta anterior:

• Marcar la opción Verificado
• Texto: Sonido
• Nombre: CheckBoxSonido

Insertamos una disposición horizontal bajo la casilla de verificación:

• Disposición horizontal: centro
• Ancho: Ajustar al contenedor

Añadimos un botón dentro de la disposición horizontal anterior:

• Color de fondo: Verde
• Ancho: Ajustar el Contendor
• Forma: redondeado
• Texto: Comenzar
• Posición del texto: centro
• Nombre: B_Comenzar

Colocamos un segundo botón junto al botón anterior, dentro de la disposición horizontal:

• Color de fondo: Naranja
• Ancho: Ajustar el contenedor
• Forma: redondeado
• Texto: Reset
• Posición del texto: centro
• Nombre: B_Reset

Insertamos una etiqueta bajo la disposición horizontal anterior:

• Marcar las opciones Negrita y Cursiva
• Tamaño de letra: 23
• Texto: dejar en blanco
• Nombre: E_GameOver

Añadimos el elemento Sonido

En la sección medios, subir los elementos que se van a utilizar en la parte de bloques:
Buzzer.mp3 ; Noink.mp3 ; note.wav ; Tada.mp3

Por último, colocamos una etiqueta de ancho 90px entre el lienzo y la etiqueta puntos.

Accedemos a la sección de bloques para implementar el código.

Lo primero de todo es inicializar una variable global que llamaremos puntos a 0:

Inicializar global puntos como 0

Creamos una función llamada CambiarYMostrarPuntos, que recibirá el número de puntos (NuevosPuntos) y modificará la variable puntos creada en el punto 2 y la EtiquetaPuntos que visualiza los puntos acumulados:

Ahora programaremos el B_Comenzar:

El Código para el sprite Barra, que va a permitir arrastrar dicho elemento de forma horizontal:

Código para B_Reset, donde se va a colocar la bola en unas coordenadas determinadas, se va a parar la bola y se van a resetear los puntos llamando a la función creada:

Crearemos una función TocaSonido que enviará el sonido que se quiere tocar, y lo reproducirá siempre y cuando el ChecBoxSonido esté activo:

Programamos para cuando la bola toca un borde. Si el borde que toca es el inferior (-1) la bola se para, aparece texto “Game over” y se toda el sonido Buzzer. Si toca cualquier otro borde, rebotará y tocará el sonido Note.

Por último, haremos el código para cuando la bola toca la barra:

Guardamos nuestro proyecto con el nombre de Pong dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador.

En la siguiente aplicación vamos a realizar una aplicación de cultura general, un minitrivial.

El funcionamiento será el siguiente:

Se van a ir mostrando fotos de distintos monumentos famosos de todo el mundo y se deberá seleccionar el nombre de cada uno de ellos en una lista.

CorelDraw

Si el nombre seleccionado es correcto, se indicará mostrando un texto junto con un sonido de aplausos, por otro lado, si el nombre seleccionado no es el que corresponde con la foto, se mostrará un texto indicando que es erróneo y se reproducirá un sonido de error.

Comenzamos un nuevo proyecto que llamamos Monumentos

Modificamos las propiedades de “Screen1”:

• AppName: Monumentos del Mundo
• Color de fondo: color azul personalizado #036aebff
• Marcar la opción Enrollable
• Título: Monumentos del Mundo

Insertar una imagen dentro del contenedor anterior:

• Darle el nombre ImagenMonumento
• Alto y Ancho: ajustar al contenedor

Colocar una Disposición Vertical bajo la disposición Horizontal (1)

• Disposición Horizontal: Centro
• Disposición Vertical: Arriba
• Alto y Ancho: Ajustar al contenedor

Colocamos una etiqueta dentro de la disposición vertical:

• Nombre de la etiqueta: E_Pregunta
• Marcar la opción Negrita
• Tamaño de la letra: 20
• Texto: ¿Cómo se llama este monumento?

Insertamos un Selector de Lista bajo la etiqueta anterior:

• Marcar la opción Negrita
• Tamaño de la letra: 16
• Alto: Automático
• Ancho: 250 pixels
• Texto: Selecciona la respuesta

Colocamos un botón bajo el Selector de Lista anterior:

• Nombre del botón: B_Siguiente
• Marcar la opción Negrita
• Tamaño de la letra: 16
• Alto: Automático
• Ancho: 250 pixels

Texto: SIGUIENTE.

Colocamos otro botón bajo el anterior:

• Nombre del botón: B_Salir
• Marcar la opción Negrita
• Tamaño de la letra: 16
• Alto: Automático
• Ancho: 250 pixels
• Color del texto: Rojo

Texto: SALIR
Insertar un elemento Sonido que se encuentra en la sección Medios de la Paleta

Accedemos a la sección de bloques para implementar el código.
Vamos a inicializar una variable que se llame PreguntaActual y darle el valor 1:

Inicializamos una variable que se llame RespuestasCorrectas que esté formada por una lista de cinco componentes a los que les daremos los valores correctos de las cinco preguntas que se van a realizar:

Inicializar una variable que llamaremos TodasLasPreguntas que estará formada por una listaque a su vez contenga cinco listas, y cada una de las listas tendrá las posibles respuestas entre las que se deberá seleccionar la correcta:

Al inicializar la aplicación se deberá poner como imagen la del primer monumento cuyo nombre se va a preguntar. Las imágenes de los distintos monumentos se han llamado monumento1, monumento2…. , de tal manera que dicha foto se pueda obtener sabiendo el número de la pregunta, concatenando “monumento” con el numero de la pregunta y con “.jpg”

Al pulsar sobre “Selecciona la respuesta” se nos mostrará las posibles respuestas de la pregunta en la que nos encontramos, es decir, que en la lista TodasLasPreguntas deberemos seleccionar el bloque de lista que coincida con el número de la pregunta. Dicho conjunto de elementos se cargará en el selector de la lista, mediante el proceso AntesDeSelección:

Una vez que seleccionemos uno de los presidentes que se muestran, habrá que controlar si la respuesta es correcta o no.

Este control se llevará mediante el proceso DespuésDeSelección del Selector de lista, y para saber si la respuesta es correcta, se comprueba si el elemento que hemos seleccionado es igual al elemento de la lista RespuestasCorrectas que se encuentra en la posición correspondiente al número de la pregunta.

Si hemos acertado se reproduce el sonido aplauso.mp3 y se muestra en una etiqueta el texto CORRECTO.

Si no hemos acertado se reproduce el sonido error.mp3 y se muestra en una etiqueta el texto INCORRECTO.

Al pulsar en el botón siguientes se deberá actualizar el valor de la pregunta actual, además se deberá poner de nuevo en la etiqueta en la que pusimos CORRECTO o ERROR de nuevo la pregunta

Si la pregunta es la última, la siguiente volverá a ser la primera, para llevar a cabo este control

se comprueba si el valor de la pregunta actual (después de haberla incrementado en 1) es mayor que la longitud de la lista de respuestas correctas, y si es así el valor de PreguntaActual pasa a ser 1

Finalmente, al pulsar en el botón salir se saldrá de la aplicación:

Guardamos nuestro proyecto con el nombre de Monumentos del Mundo dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador

En este ejercicio se va a realizar una aplicación que hable y que reproduzca el mensaje de texto que previamente se haya escrito.

El resultado final va a tener un cuadro de texto donde podamos escribir el texto que queramos que diga el móvil y un botón que al pulsar nos diga lo que hemos escrito.

APPCC

Comenzamos un nuevo proyecto que llamamos Parlanchin Modificar las propiedades de la ventana “Screen1”Devonn siguientes:

• Disposición horizontal: Centro
• Disposición vertical: Arriba
• Nombre de la aplicación: Parlanchin
• Imagen de fondo: archivo “blabla.jpg” facilitado
• Marcamos la opción Enrollable
• Título: Parlanchin

Colocamos una disposición Vertical con las siguientes propiedades:

Devonn 

• Disposición Horizontal: Centro
• Disposición Vertical: Arriba
• Alto: Automático
• Ancho: Ajustar al contenedor
• Color: ninguno

Insertamos un botón dentro de la disposición vertical con las siguientes características:

• Alto: Automático
• Ancho: 200 pixel
• Texto: Háblame
• Nombre: B_Hablame

Insertamos un segundo botón dentro de la disposición vertical que hemos creado anteriormente con las siguientes características:

Yaestudio

• Alto: Automático
• Ancho: 200 pixels
• Texto: Borrar
• Nombre: B_Borrar

A continuación, añadimos un campo de texto con las siguientes características:

• Alto: Automático
• Ancho: Ajustar al contenedor
• Nombre: TextoHablado

Insertamos un botón debajo de la disposición vertical anterior con las siguientes características:

• Marcar la opción “Negrita” “Cursiva“
• Ancho: 80 pixels Alto: 80 pixels
• Imagen:B_Salir.jpg
• Nombre: B_Salir

Por último, añadimos el componente TextoAVoz que, dentro de la Paleta, podemos encontrar en la sección Medios

Una vez ya hecha nuestra interfaz abrimos el visor de Bloques.

Vamos a trabajar en la sección de bloques, asignando código a cada uno de los elementos, fundamentalmente botones, que se han colocado en la pantalla principal.

Accedemos a la sección de bloques de Screen1 y asignamos código a los botones.

• Seleccionar “cuando BtnHablame.Clic”
• En los bloques de control seleccionar “si entonces sino” condicional del botón B_Hablame:

• Si: TextoHablado.texto = “”

Entonces: llamar TextoAVoz1.Hablar
Mensaje “no has dicho nada”
Sino: llamar TextoAVoz1.Hablar

Mensaje TextoHablado.Texto

• Cuando B_Borrar.Clic
Ejecutar poner TextoHablado.Texto como

• Cuando B_Salir.Clic
Ejecutar cerrar aplicación

Guardamos nuestro proyecto con el nombre de Parlanchin dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador

Presentaciones Eficaces

Vamos a aprender a crear una App con más de una ventana. Para ello deberás agregar más ventanas de navegación y botones para ir abriendo y cerrándolas.

Google Analytics

Lo primero que debemos hacer, como en todas las App, es dirigirnos a la pestaña Proyectos, y crear uno nuevo.

Seguidamente le damos un nombre a la App tal y como ves en las imágenes.

Ahora, como en la gran mayoría de aplicaciones, vamos a agregar una capa de distribución para los objetos que se añadirán a continuación. En este caso se va a seleccionar una capa DisposiciónHorizontal tal y como vemos en las imágenes.

Devonn 

Modificamos las propiedades de la capa agregada, de manera que el contenido quede centrado y el ancho de la capa se ajuste al tamaño máximo de la pantalla.

A continuación, vamos a agregar tres botones que encargarán de llevarnos a la ventana deseada cuando haces clic encima.

Seguidamente vamos a modificar el nombre de los botones dentro de la lista de componentes.

Yaestudio

Ahora vamos a modificar el texto que muestran los botones por pantalla mediante las propiedades de los componentes tal y como se muestra en la imagen.

Añadimos más ventanas para navegar por nuestra App.

Tal y como se ve en la imagen, hacemos clic en el botón y añadimos dos ventanas más, aparte de la que se crea al iniciar un proyecto.

Una vez tienes todas las ventanas creadas, vamos a agregar un botón para ir hacia atrás en la App.

Este botón lo pondremos en las ventanas 2 y 3, ya que la primera tendrá los tres botones agregados antes siendo el menú principal de la App.

Tal y como ves en la imagen deberás renombrar el botón de cada ventana y ya estará preparada la App para ser programada

Ahora nos vamos al visor de bloques y comenzamos con la programación de los objetos. En primer lugar, nos situamos en la primera ventana Screen1 y le decimos a los botones que reaccionen cuando hagamos clic encima de ellos.

Recuerda que los nombres que ves en las imágenes son los nombres que le hemos dado a los botones que van a abrir la ventana escogida

Ahora al hacer clic en cualquiera de estos tres botones, vamos a indicar que debe abrir la ventana deseada, y para ello vamos a seleccionar el conjunto de bloques Control y vamos a arrastrar dentro de los tres bloques anteriores, el bloque llamado “abrir otra pantalla Nombre de la pantalla”.

Añade un bloque de texto, con el nombre de la ventana que se desea abrir con cada botón.

Por último, vamos a repetir este mismo proceso en las ventanas 2 y 3 con el botón que hace retroceder hacia la ventana1 (botón de retroceso).

Después guardaremos nuestro proyecto y lo exportaremos a nuestro ordenador.