CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

EL DISEÑO EN APP INVENTOR.

Lo primero antes de nada,  será descargar los archivos que contiene todo el material multimedia para seguir este tutorial. Después comenzaremos a construir nuestra aplicación comenzando por el diseño de la misma, para eso iremos a PROYECTOS > COMENZAR UN PROYECTO NUEVO, y le daremos el nombre que queramos, en mi caso yo le daré el nombre de LEEME_TEXTO. Nombre Nuevo Proyecto App Inventor

Una vez hecho esto, tendremos en el visor, nuestra pantalla vacía, a la que vamos a poner un logotipo con el nombre de nuestra aplicación a modo de pantalla de presentación. Para ello iremos a MEDIOS > SUBIR ARCHIVO,
Medios multimedia
y nos saldrá una ventana emergente a la que pulsaremos en el botón SELECCIONAR ARCHIVO,
Ventana Emergente
una vez hecho esto se nos abrirá el explorador  y seleccionaremos los archivos BOCA.png y icono.png  que anteriormente descomprimimos en nuestro ordendor, una vez seleccionado pulsaremos el botón aceptar de la ventana emergente. Ahora en MEDIOS se podrá visualizar el texto del archivo subido.

Ventana Emergente

Una vez subida la imagen nos dirigiremos a PALETA  y pulsaremos en DISPOSICIÓN, seguido arrastraremos el componente DISPOSICIONVERTICAL dentro de Screen1.

 

DisposicionVertical

Inmediatamente veremos un cuadro gris en la equina superior izquierda del Screen1 del visor.

DisposicionVerticalEnPantalla

 

Si lo seleccionamos, a nuestra derecha en PROPIEDADES tendremos una serie de opciones, nosotros modificaremos tanto el ancho como el alto que le pondremos como: ajustar al contenedor.

AnchoAlto

Ahora toca colocar la imagen anteriormente descargada dentro del componente DISPOSICIONVERTICAL  para ello en PALETA > INTERFAZ DE USUARIO arrastraremos el componente imagen a la DISPOSICIÓNVERTICAL, al hacerlo veremos como en el árbol jerárquico de COMPONENTES la imagen esta dentro de la DISPOSICIONVERTICAL
Componentes
esto hará que cualquier modificación en la DISPOSICIONVERTICAL afecte a la imagen o cualquier componente dentro del mismo, esto es muy útil si queremos que nuestra aplicación se adapte a cualquier tamaño de pantalla, ya que al marcar
ajustar al contenedor la DISPOSICIONVERTICAL tomará el ancho y al alto del dispositivo que está ejecutando nuestra aplicación. Seguido pulsaremos en el componente IMAGEN y en PROPIEDADAES  modificaremos tanto el ancho como el alto que le pondremos como ajustar al contenedor, y en foto seleccionaremos el archivo BOCA.png.
Componentes

Ahora agregaremos un componente no visible, que será un reloj, que controlará el tiempo en el que permanecerá la pantalla de presentación abierta, para ello iremos a PALETA > SENSORES y arrastraremos el componente reloj dentro de Screen1.
Reloj
Inmediatamente veremos que el componente no aparece dentro de la misma si no abajo, esto es porque es un componente que no es visto por el usuario, pero que si tendrá interacción con el mismo.
RelojNoVisible
En sus propiedades desmarcamos Temporizadorhabilitado y pondremos en IntervaloDelTemporizador 5000.
PropiedadesReloj1
Bien con esto ya tendremos nuestra pantalla de presentación y ahora nos toca crear la pantalla donde el usuario, pulsando los correspondientes botones, interactúe con la aplicación.

Crearemos una nueva pantalla, para ello pulsaremos en la barra superior añadir ventana.
Componentes
Se abrirá una ventana emergente en la que nos pedirá que introduzcas el nombre, yo le pondré pantalla PRINCIPAL, vosotros le podéis poner el nombre que queráis.
Componentes
Seguido iremos a PALETA, disposición y arrastrarnos el componente DISPOSICIONVERTICAL dentro de la nueva pantalla que hemos creado. En las propiedades el alto le daremos el 50% y el ancho le pondremos ajustar al contenedor, esto hará que independientemente del tamaño de la pantalla del dispositivo, siempre ocupe la mitad del alto, y el ancho total de la pantalla.

Componentes
Ahora iremos de nuevo a paleta, disposición y arrastrarnos el componente DISPOSICIONHORIZONTAL a la pantalla del visor, justo debajo de la DISPOSICIONVERTICAL que colocamos anteriormente, en sus propiedades le pondremos el alto en automático, esto ara que se ajuste automáticamente al alto de lo que metamos dentro y en ancho le pondremos ajustar al contenedor.

Ahora arrastrarnos del panel paleta interfaz de usuario una etiqueta dentro de la DISPOSIVIONVERTICAL y en las propiedades seleccionamos el cuadro de la opción negrita, el tamaño de letra a 30, el tipo de letra sans serif, marcamos el cuadro de HasMagirns, el alto lo ponemos como automático, el ancho seleccionamos ajustar al contenedor, el texto le cambiamos el que viene por defecto como LEEME TEXTO, o el nombre que quieras y ponemos la posición del texto en el centro con el color en negro.
Componentes

Seguido arrastramos el componente campo de texto situado en paleta, interface de usuario a la DISPOSICIONVERTICAL justo debajo de la etiqueta. En sus propiedades tanto el ancho como el alto seleccionaremos ajustar al contenedor y en pista pondremos un texto que describa al usuario la acción que tiene que hacer, yo pondré el texto»Introduzca un texto».

Ahora comenzaremos con la DISPOSICIONHORZONTAL que anteriormente colocamos en nuestra segunda pantalla, iremos a paleta, interface de usuario y arrastrarnos tres botones a esta DISPOSICIONHORIZONTAL, un al lado del otro quedando como muestra la imagen.
Componentes
Entrando en las propiedades de cada uno colocaremos el alto en automático y el ancho en ajustar al contenedor, al poner la propiedad ancho ajustada al contenedor  todos los botones se re-dimensionaran  quedando dentro del ancho de la DISPOSICIONHORIZONTAL. En el botón situado más a la izquierda, en el campo texto le pondremos «ESCRIBIR» en el del centro «DICTAR POR VOZ» y en el que queda más a la derecha «LEER», y en los tres el tamaño de letra le dejaremos en 10.

Componentes

Vamos a agregar dos componentes no visibles, que será, TextoAVoz y ReconocimientoDeVoz, que controlará dos aspectos importantes como son la escritura por voz y convertir el texto en audio, y permanecerán en la pantalla de Principal, para ello, iremos a PALETA > MEDIOS y arrastraremos el componente TextoAVoz y ReconocimientoDeVoz dentro de la pantalla con nombre Principal. Inmediatamente veremos que los componentes aparecen abajo.
ComponentesNoVisibles

Ahora que ya tenemos Todos los elementos dentro de nuestras pantallas pasaremos a hacer la comprobación que nuestro dispositivo móvil para ello iremos a la pestaña conectar y seleccionaremos la opción que más se ajuste a nuestras necesidades, ya sabes que son tres las opciones de conexión AI COMPANION Emulador o Usb.

Componentes

Con esto hemos terminado en el siguiente capítulo programaremos la lógica de nuestra aplicación para que al pulsar un botón nuestro dispositivo  haga la acción qué  queramos.

Si te ha gustado compartelo
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest

Deja un comentario

error: Content is protected !!