Instituto Tecnológico de

Villahermosa

INTERACCION HUMANO-COMPUTADORA

Practica. Elaboración de aplicaciones para Android:

Traductor español-ingles
Buscador de videos en YouTube

Alumno:
Samuel Avalos Rodríguez.

Facilitador:
Prof. Mauricio Arturo Reyes H.

Villahermosa, Tabasco, 23 Mayo de 2016.

Contenido
Objetivos ............................................................................................................................................. 2
Software necesario: ............................................................................................................................ 2
Pasos para su realización.................................................................................................................... 3
Funcionamiento: ............................................................................................................................... 12

1
Objetivos
Diseñar una aplicación para Android que traduzca una palabra o frase de
español a inglés.

Diseñar una aplicación para Android que busque enlaces o videos en

YouTube al introducir una palabra o frase.

Software necesario
Para realizar estas aplicaciones, se eligió trabajar en:

App Inventor 2 que es una plataforma de Google Labs para crear aplicaciones de
software para el sistema operativo Android. De forma visual y a partir de un conjunto
de herramientas básicas, el usuario puede ir enlazando una serie de bloques para
crear la aplicación. El sistema es gratuito y se puede descargar fácilmente de la
web.

Para ello se necesita también un navegador de internet

Es necesario de igual manera contar con conexión a internet
Teléfono con sistema operativo Android en este caso se usó (Motorola Moto
G1)

2
Pasos para su realización
Lo primero que tenemos que hacer es entrar en la página web de app inventor, la
cual nos pedirá una cuenta de Google para poder acceder e inmediatamente se
mostrara la pantalla principal.

Ilustración 1. Ventana de proyectos en App inventor.

Cuando seleccionamos start new Project, nos aparecerá una ventana donde vamos
a colocar el nombre de la aplicación, en este caso el traductor, y lo mismo se hará
para el buscador de videos

3
 Ilustración 2. Creación de un nuevo proyecto

Como primera instancia aparece una pantalla de dispositivo en blanco. Ahora solo
se tienen que agregar los elementos a esta.

Ilustración 3. Screen de aplicación en blanco

4
Los elementos se arrastran desde la paleta que se encuentra en la parte izquierda,
en ese caso se utilizaron elementos de “User interface” se utilizaron:
2 etiquetas,
Un cuadro de texto
2 botones
Yandex Translate (complemento)

Ilustración 4. Agregando elementos a la aplicación

El siguiente paso es cambiar los nombres y títulos de las etiquetas, así como de los
botones, esto se logra con el cuadro de propiedades que se encuentra ubicado a la
derecha, en el cual se puede cambiar tamaño y tipo de letra, color, etc. Entre otras
propiedades, tanto como para los botones como para las etiquetas y cuadros de
texto.

5
 Ilustración 5.Personalizando títulos y botones

De igual manera, es posible agregar un fondo de pantalla de imagen, cambiar

colores de los botones, todo ello para que podamos personalizar a nuestro gusto.
Finalmente así se ve la aplicación que en un principio comenzó a diseñarse.

Ilustración 6. Agregando imágenes como fondo de pantalla

Hasta ahora solo se tiene la interfaz gráfica de la aplicación, sin embargo, aún no
se le ha dado una funcionalidad, en este caso al traductor. Así que en app inventor

6
existe el apartado denominado bloques en el cual podremos agregar los bloques de
código. Para ello en la parte superior derecha, encontramos lo siguiente: Designer
(que es la parte donde desarrollamos la interfaz) ahora pasamos a Blocks (la parte
donde se agregan los bloques.)

Ilustración 7. Panel de intercambio de ventanas

Ahora que se está en la parte de bloques, es fácil ir generándolos ya que solo se

van agregando bloques por sentencias.
Se selecciona un elemento de la interfaz y este mostrara los bloques de código que
este puede utilizar.

7
 Ilustración 8. Ventana de Bloques en app inventor

A continuación, se muestra más claramente los bloques de código que se usaron.

Primero se utiliza una acción al botón, usando un when, cuando el botón sea
oprimido llamar al traductor, mismo que se le colocan los idiomas a los que se va a
traducir, y también se le indica de donde va a tomar lo que se va a traducir, en este
caso va a traducir lo que se haya escrito en el texto.
El siguiente bloque es el del proceso de traducción que indica que la traducción va
a ser enviada a la etiqueta.
Y por último aparece la acción para el botón de traducción en audio, al que se le
especifica que al dar click en el botón este mande a llamar lo que hay en la etiqueta.

8
 Ilustración 9. Bloques de código del traductor

Para realizar el buscador, de igual manera iniciamos un nuevo proyecto, y en el

apartado de Designer, arrastramos los elementos que se utilizaran en la interfaz.
Para este caso se utilizan:
2 etiquetas
Un cuadro de texto
Un botón
1 Web view (para visualizar contenido web)

9
 Ilustración 10. Elementos para el buscador de videos

Después se procede a agregar los títulos de las etiquetas, cambiar el tamaño,

color y tipo de las letras, así como del botón.

Ilustración 11. personalización de los elementos

Se le agrega una imagen de fondo y en este caso al botón también se le agrega

una imagen.

10
 Ilustración 12. agregando imagen de fondo

Ahora en la parte de los bloques, solo se agrega la acción al botón de búsqueda,

dando como resultado el siguiente bloque.
Al presionar el botón se hace una llamada al webviewer y se le indica una url en la
que debe hacer la búsqueda, también se le indica que va a buscar lo que contenga
el cuadro de búsqueda es decir el textbox.

Ilustración 13. Bloques de código del buscador de YouTube

Por último, una vez que ya se tienen las aplicaciones hechas, se procede a
exportarlas para instalarlas en nuestro teléfono, para ello las exportamos en (APK)
que es el formato con el que se pueden instalar aplicaciones en el Smartphone.
Para ello vamos al apartado Built y seleccionamos la segunda opción, para
descargar la app en nuestra computadora y posteriormente instalarlas en el
teléfono.

11
 Ilustración 14. exportando aplicaciones en apk

Funcionamiento
Una vez que hemos exportado nuestras aplicaciones en APK, las pasamos a
nuestro teléfono y las ubicamos dentro del almacenamiento para posteriormente
instalarlas, a como se ve en la captura se ubican las dos aplicaciones con sus
respectivos iconos que previamente se le coloco en app inventor.

Después de eso, las seleccionamos y la instalamos, le damos aceptar en todos los

permisos.

NOTA: es necesario tener activada la opción de permitir instalar aplicaciones de

orígenes desconocidos.

Esperamos que se instalen ambas aplicaciones.

12
Una vez que ambas aplicaciones se han instalado las podremos ver en el menú o
en la pantalla que nosotros deseemos, en ese caso se colocaron en la pantalla
principal.

Para probar el funcionamiento del traductor abrimos la app y nos mostrara su

pantalla principal.

13
Entonces escribimos una frase en español o también puede ser alguna palabra y
pulsamos el botón de traducir y en recuadro de abajo, aparecerá la traducción en
inglés.
De igual manera si queremos escuchar la pronunciación entonces pulsamos el
botón de traducción en audio e inmediatamente se va a escuchar la traducción de
dicha palabra o frase.

14
Ahora abrimos la aplicación del buscador de videos de YouTube, aparecerá su
pantalla principal y en el cuadro de texto escribimos una palabra o frase a buscar
con el API de YouTube.
Una vez que hemos escrito algo pulsamos el botón de buscar.

15
En este caso al buscar la palabra “Audi”, nos arrojara resultados que tengan que
ver con la búsqueda y podemos seleccionar alguno y visualizarlo.

16
17