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. uc?export=view&id=1kOb WbA6c7m2bsxJl YeTsXuUPmovxWlcA - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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,
uc?export=view&id=15jQCyx3BUnaTYaZHaDoty8Vlg3vhQNDz - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
y nos saldrá una ventana emergente a la que pulsaremos en el botón SELECCIONAR ARCHIVO,
uc?export=view&id=1jPw59mRVx6EQhqZ MtvOQQm7zyKzdvNk - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.

uc?export=view&id=1ykhYBvBeKhfYeHd0XYDpy3IQ1fMZM5aU - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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

 

uc?export=view&id=14Z8156e58LKBsIWb7GVQ90y1cruXCWhJ - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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

uc?export=view&id=1jaP5gEa8eL3GH3cOL438t6MvL6lt3NZ9 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

 

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.

uc?export=view&id=1vDPZeCMTDHtD6YVqoqZT4D1EaTJj8W4H - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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
uc?export=view&id=1e7jRV4HO5SLT iVucROOwzam0S4QQY2X - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.
uc?export=view&id=1PMUaMBDual6zfoOjXJmYjhM9xlQ 6XSP - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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.
uc?export=view&id=1 CpxDY8d1AJ4k6247gTjDQq6HfTH4IQe - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.
uc?export=view&id=17BWIpCGZ kH2 h2PzwZlE6UNLbaXWADG - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
En sus propiedades desmarcamos Temporizadorhabilitado y pondremos en IntervaloDelTemporizador 5000.
uc?export=view&id=1cTu5tBi1RWlq78wETxcY u7S52nFnwIX - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.
uc?export=view&id=1n5JDubhzQBnGy qRbxsW2G9yArJmlHcJ - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.
uc?export=view&id=1p6OlHkpSvXDDr7RdvfoPDioNLE6ivo0b - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.

uc?export=view&id=13YOvq3OZ XkRVVUkWy mMlfxZSuiZK u - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.
uc?export=view&id=1N8DoOPA bIJFuMjYp MHKx aoHKsJ7Fw - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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.
uc?export=view&id=1XOK3nC2LmBurrZXVSNQInIiExrzEvo6l - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1
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.

uc?export=view&id=1OYR4eOBGIOe7mnJF3WCtm 5CSBeB5IBo - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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.
uc?export=view&id=1 gP0Z5wsaiXTW9zfROZwD qB3dTUNkaD - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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.

uc?export=view&id=1axaGidKc8MKPk2d2BhYixiG3  k1Le94 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

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.

Deja un comentario

error: Content is protected !!