Apuntes sobre el curso SoundRecorde

App Inventor es un entorno de desarrollo de aplicaciones para dispositivos Android. Para

desarrollar aplicaciones con App Inventor sólo necesitas un navegador web y un teléfono
o tablet Android (si no lo tienes podrás probar tus aplicaciones en un emulador). App
Inventor se basa en un servicio web que te permitirá almacenar tu trabajo y te ayudará a
realizar un seguimiento de sus proyectos.

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

Al construir las aplicaciones para Android trabajarás con dos herramientas: App Inventor
Designer y App Inventor Blocks Editor. En Designer construirás el Interfaz de Usuario,
eligiendo y situando los elementos con los que interactuará el usuario y los componentes
que utilizará la aplicación. En el Blocks Editor definirás el comportamiento de los
componentes de tu aplicación.

App Inventor es al mismo tiempo un lenguaje de programación, una herramienta de

diseño y un entorno de desarrollo de aplicaciones para móviles y tabletas que funcionen
con el sistema operativo Android. App Inventor permite también ejecutar las aplicaciones
en un emulador, por lo que no es imprescindible disponer del teléfono para probar los
programas que se hagan.

Editor de Bloques

Con el Editor de bloques vamos a definir cómo se comportará la aplicación.

Estableceremos lo que los componentes deben hacer y cuándo hacerlo. Por ejemplo,
que debe ocurrir cuando el usuario pulsa un botón. El Editor de bloques se ejecuta en
una ventana independiente. Al hacer clic en Abrir el editor de bloques de la ventana de
diseño, el archivo del programa del Editor de bloques se descargará y a continuación se
debe ejecutar. El Editor de bloques tiene dos fichas en la esquina superior izquierda:
Built-In (incorporados) y My Blocks (mis bloques). Los botones de debajo de cada ficha
se amplían y se muestran los bloques cuando se hace clic. Los bloques Built-In son el
conjunto estándar de bloques que están disponibles para cualquier aplicación que
construyas. Los bloques My Blocks contienen bloques específicos que están vinculados
al conjunto de componentes que has elegido para tu aplicación.

Eventos

Las aplicaciones creadas con App Inventor están orientadas a eventos. No llevan a cabo
un conjunto de instrucciones en un orden predeterminado, sino que reaccionan a
eventos. Al hacer clic en un botón, arrastrar el dedo o tocar en la pantalla son eventos.

Componentes

Los componentes son los elementos básicos que utilizamos para hacer aplicaciones
Android. Son como los ingredientes de una receta. Algunos componentes son muy
simples, como una Etiqueta, que sólo muestra el texto en pantalla, o un botón que se
pulsa para iniciar una acción. Otros componentes son más elaborados: un lienzo que
puede almacenar imágenes fijas o animaciones, un sensor de movimiento que funciona
como un mando de Wii y detecta cuando se mueve o agita el teléfono, los componentes
para hacer o enviar mensajes de texto, los componentes que para música y video, los
componentes para obtener información de sitios Web, y así sucesivamente. Para utilizar
un componente en tu aplicación, debes hacer clic, arrastrar y soltar en el visor en el
centro de Designer. Cuando se agrega un componente al visor, también aparecerá en la
lista de componentes a la derecha de este

Propiedades

Los componentes tienen propiedades que se pueden ajustar para cambiar la forma en
que el componente aparece o actúa dentro de la aplicación. Para ver y cambiar las
propiedades de un componente, primero debe seleccionar el componente deseado en la
lista de componentes.

Partes de la pantalla de la Aplicación

Al momento de ingresar a la plataforma se abrirá la ventana del diseñador en la que se

construye, mediante el ratón, sin necesidad de usar ningún lenguaje de programación,
todo el interfaz gráfico que va a tener la aplicación. En ella se han marcado con números
cada una de sus partes principales:
1. Palette contiene todos los elementos que podemos insertar en nuestra aplicación. Hay
elementos gráficos como cuadros de texto, botones, lienzo de dibujo (Canvas) 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. Viewer: 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 viewer y automáticamente se desplazarán debajo de él bajo el epígrafe “Non-visible
components”

3. Components 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.

4. Media 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. Properties: cada vez que en el Viewer se seleccione un componente, en Properties

aparecerán todos los detalles que se puedan cambiar de ese componente. Por ejemplo,
al hacer clic sobre un componente TextBox se podrá cambiar en Properties su color,
texto, fuente, etc. Para aquellos que hayan usado antes entornos de desarrollo del tipo
de Visual Studio en Windows o Gambas en Linux le será muy familiar esta forma de
trabajar

Esta es la pantalla que usaremos para hacer los programas que interaccionan con el
interfaz gráfico. Se puede apreciar cómo está dividida en dos partes muy claras: un
enorme lienzo en “blanco” a la derecha donde se irán arrastrando los bloques de
programación y a la izquierda los menús que dan acceso a esos bloques.

El menú está formado por tres pestañas: Built-In, My Blocks y Advanced, y bajo cada
una de ellas aparecen a su vez distintos menús que permitirán seleccionar los bloques
disponibles en cada caso.
1. Built-In contiene los bloques que componen el lenguaje de programación propiamente
dicho, distribuidos en las secciones Definition, Text, Lists, Math, Logic, Control y Colors.

2. My Blocks ya se ha nombrado anteriormente y contendrá una lista de los elementos

que hayan sido colocados en la pantalla Viewer del diseñador para poder acceder
mediante el programa a sus propiedades y eventos

3. Advanced es una pestaña que permite acceder de forma global a algunas propiedades
comunes a todos los elementos que hemos colocado en el Viewer y que sean de un
mismo tipo. Por ejemplo, al colocar un par de botones aparecerá “Any Button” y se
podrán cambiar ahí algunas propiedades que afecten simultáneamente a los todos los
botones

Sound Recorder

Dentro de la plataforma de App inventor existe un componente llamado SoundRecorder

que es un componente multimedia que graba audio

Propiedades

SavedRecording
Especifica la ruta al archivo donde se debe almacenar la grabación. Si esta propiedad es
la cadena vacía, iniciar una grabación creará un archivo en una ubicación adecuada. Si
la propiedad no es la cadena vacía, debe especificar una ruta completa a un archivo en
un directorio existente, incluido un nombre de archivo con la extensión .3gp.

Eventos
AfterSoundRecorded (sonido de texto)
Proporciona la ubicación del sonido recién creado.
StartedRecording ()
Indica que la grabadora se ha iniciado y puede detenerse.
StoppedRecording ()
Indica que la grabadora se ha detenido y puede reiniciarse.

Métodos

Comienzo ()
Comienza la grabación.
Detener ()
Detiene la grabación.
Tutorial de Cómo Utilizar el componente Sound recorder en App Inventor

Si el ordenador está conectado a Internet, dispone del sistema operativo y el navegador

adecuado y tiene Java instalado ya se puede empezar a programar. En el navegador hay
que introducir la dirección http://appinventor.mit.edu/explore/. Entonces pedirá nuestros
datos de acceso al correo de Gmail y, si es la primera vez que se accede, pedirá permiso
para usar esa cuenta de correo. Una vez que se le concede el permiso se carga la
pantalla de inicio donde se explica de la manera más básica como utilizar el componente

El primer paso es sacar todos los elementos que vamos a utilizar en el diseñador de
pantalla. En este caso los elementos son: Dos disposiciones horizontales para meter
unos botones y que estén bien alineados. Tres botones que servirán para controlar el
comienzo, final y la reproducción del sonido. Un elemento de grabación de sonidos. Un
elemento reproductor.
2. El siguiente paso es adecentar un poco la pantalla con los botones para que se vean
bien y que el usuario sepa cómo utilizarlos. En este caso dentro de la primera disposición
hemos puesto un botón para iniciar la grabación de sonidos y otro para detener la
grabación. Ambos ajustados al ancho del contenedor.
3. En la otra disposición pondremos el tercer botón que queda (también ajustado al
contenedor) y que servirá para reproducir la última grabación realizada. Esto lo he
hecho así para que se vea el funcionamiento del grabador de sonidos. En la mayoría de
los casos lo lógico sería utilizar un elemento de almacenamiento para poder guardar
todos los sonidos y posteriormente elegir uno para reproducir.
4. Ahora pasamos al apartado de los bloques. Este apartado lo he dividido en 5
pequeños bloques:
El primero contiene únicamente una variable global que utilizaremos para hacer un
control de errores en los botones para que no comience una grabación que ya está en
curso o que no detenga una grabación que ya está parada. En este caso la variable la he
llamado “grabando” y la he puesto a “falso” utilizando una pieza del bloque de lógica.
En el segundo bloque programamos el botón de iniciar la grabación de la siguiente
manera: Sacamos el bloque “cuando Boton1 .clic ejecutar”, dentro introducimos el bloque
de control “si entonces”. En la condición “si” engancharemos un bloque de lógica para
comparar que 2 elementos sean iguales: el primero será la variable global “grabando” y
el segundo será una pieza del bloque de lógica que indica “falso”. Dentro de la resolución
“entonces” añadimos el bloque “llamar GrabadorDeSonidos1.Iniciar” para indicar que se
va a iniciar y a continuación ponemos la variable “grabando” a “cierto”.

Para el siguiente bloque haremos exactamente lo mismo pero con algunos pequeños
cambios ya que se trata del siguiente botón que hará detener la grabación: En la
condición “si” el segundo elemento a comparar será una pieza del bloque de lógica que
indica “cierto”. Dentro de la resolución “entonces” añadimos el bloque “llamar
GrabadorDeSonidos1.Detener” y a continuación ponemos la variable “grabando” a “falso”.
El siguiente bloque lo sacaremos del apartado de GrabadorDeSonidos1 que
será “cuando GrabadorDeSonidos1.DespuésDeSonidoGrabado ejecutar”. Aquí
pondremos la pieza “poner Reproductor1.Origen como” y junto a esta la pieza “tomar
Sonido” que se puede obtener haciendo click en el parámetro “sonido” y elegir la opción
“tomar”.

El último bloque contendrá la programación del botón restante, el de reproducir el sonido.

Para ello haremos lo siguiente:
Sacar la pieza de “cuando Boton3.click ejecutar” y añadimos la condición “si entonces”
(esto es igual que con los otros botones).

En la condición “si” pondremos otra pieza de comparación de elementos pero esta vez la
comparación será si es distinto. El primer elemento a comparar será
“reproductor1.origen” y el segundo será un elemento vacío” “. Esto es para que
solamente reproduzca un sonido si se ha grabado algo.

Dentro de la resolución “entonces” añadiremos la pieza “llamar Reproductor1.Iniciar”. De

esta manera se iniciará la reproducción.

Después de haber terminado nuestro código es necesario descargar aplicación y

emulador para probar la eficacia de nuestro programa una vez probado a partir de aquí
ya es usar la imaginación y adaptar estos elementos a los distintos casos que se quieran
programar.

Anexos Imágenes
 Partes de la pantalla de la plataforma

Tutorial para crear una aplicación con el componente SoundRecord