Mit App Inventor 2

 APLI  APLICA CACI  CI Ó N  Saludo  do   1:  Salu “

”

Entramos al navegador y buscamos Mit-App-inventor 2 la l a cual fue la primera opción que salió salió al dar clic y entrar pidió ligar mi cuenta de Google a la plataforma después de eso salió la siguiente ventana

 Aquí solamente dimos en aceptar términos

Este mensaje aparecerá porque es la prima vez que ingresamos

Le damos en el tercer botón donde dice (never take survey  – que  – que en español es nunca tomar encueta) al dar clic saldrá la siguiente ventana

En esta ventana solo le damos en continuar

Nos aparare será de la siguiente forma

 A si aprese pero para crear un proyecto solo le daremos en el botón crear nuevo proyecto. Esta plataforma esta total mente en inglés pero si notaron la captura esta en español esto se debe porque he puesto la extinción de google del traductor y transforma la página web y la traduce al español. Ya que hallamos pulsado iniciar un nuevo proyecto saldrá la siguiente ventana. En esta venta pedirá el nombre del proyecto y le pondremos “SALUDO” ya puesto puesto el nombre le daremos clic en “DE ACUERDO” Nos saldrá la siguiente ventana.

•

Vamos a cambiar el color de fondo a gris, para ello vamos a “Propiedades” y cambiamos el “color de fondo” a gris.

Como vemos hemos cambiado el color de fondo al color “grey” que “grey” que es el color gris

  En segundo lugar, vamos a añadir el icono que veremos en nuestra aplicación, para ello vamos “Icono”   añadir, y seleccionamos el archivo (En este caso saludo.jpg)

•

Le damos en la herramienta icono y le damos clic donde do nde dice None… Le daremos en subir archivo y nos ladra la siguiente ventana

Y le volvemos a poner seleccionar archivo saldrá

esta ventana de explorador a tu ordenador y ahí buscas el icono a poner Una buscado le das clic y luego le das en el botón abrir. Te saldrá la siguiente ventana

En esta ventana le darás en de acuerdo y estará listo ahora vamos con el siguiente paso •

¡Para poner el botón botón de Saluda!:

 Ahora vamos a irnos a donde dice paleta elegimos la opción botón y lo arrastramos hacia el espectador

Cambiamos el nombre de Button1 por defecto, por otra más fácil de recordar (Ej. BotonSaludar), desde “Componentes” hasta abajo dice rebautizar ahí le damos clic y nos saldrá la siguiente ventana

Donde dice nuevo nombre le ponemos lo siguiente Ej. BotonSaludar Y le daremos en el botón que dice “de acuerdo”

 Ahora vamos a cambiar el tamaño del botón y su texto para ello ello nos remos a las propiedades

Y buscamos la siguiente herramienta

Borramos el nombre que trae por defecto y le ponemos el siguiente “Pulsa para saludar!”.

¡Ahora vamos a ver si efectiva mente se cambio!!

Como ven efectiva mente se cambio. cambio. Ahora aremos el siguiente paso

En propiedades del botón iremos a la anchura como lo verán en la siguiente imagen

Damos clic ahí y nos saldrá sal drá la siguiente venta

Y le damos damos clic en llenar los padres ya hecho hecho esto le damos en DEA CUERDO.

Imagen 1

Imagen 2

 Aquí les pongo como se ve cuando no habíamos puesto la opción llenar los padres de la configuración anchura la l a imagen 1 es cuando no la tiene aplicada y la imagen 2 cuando se aplico apl ico

 Ahora nos dirigiremos al mismo panel de propiedades solo que esta vez buscamos la altura como se muestra en la siguiente imagen

Le damos doble clic y saldrá la siguiente ventana

 Ahí elegimos la 3 opción donde dice pixeles y le escribimos 50 y una vez echo le damos en desacuerdo

Imagen 1

Imagen 2

En la imagen 1 no le hemos aplicado aplic ado la altura en la imagen 2 ya se le aplico los 50 pixeles de altura …

•

Ahora insertaremos la imagen de saludo en el lugar donde se mostrará, para ello:

Marcamos la opción de "Mostrar componentes ocultos en el visor" Que se encuentra en la parte de arriba de la screen1 sc reen1 como se muestra en la siguiente imagen

Le damos clic en la casilla para marcarla.  Arrastramos desde “Paleta”  “Basic”, el componente Imagen, Image n, y lo colocamos debajo del Botón Saludar. Como se muestra en la siguiente imagen

Cambiamos el nombre de Image1 por defecto, por otra más fácil de recordar (Ej. ImagenHola). Hacemos lo siguiente le damos clic en el botón rebautizar

Y cuando le hayamos dado clic nos saldrá la siguiente ventana

Y le damos clic en de acuerdo

Le quitamos la visibilidad, para que en el inicio no se muestre, desmarcando la opción “Visible” de “Propiedades”. Como “Propiedades”.  Como se muestra en la siguiente imagen

De desmarcamos la casilla que dice visible la cual estoy señalando con rojo y amarillo

Por último en “Propiedades” seleccionamos “imagen

Subir archivo que queremos subir (En este caso Hola.png). Hola.png). Una vez que ya hallamos subido el archivo arc hivo le damos en de acuerdo Ya saben que saldrá una venta donde igual se pone subir archivo lo buscamos en el ordenador y le das en abrir y luego dos veces de acuerdo

Si no notado la imagen no entra bien en la screen1 para remediarlo haremos lo siguiente Tenemos que dirigirnos propiedades de la imagen

a

la

Y de ahí buscamos lo siguiente

Como ya hemos hecho esto anterior mente de damos doble clic y saldrá lo siguiente

Por defecto siempre aparare cera automático y le daremos en la segunda que es llenar los padres y le daremos en de acuerdo

Como ven ahora si ya se puede visualizar mejor la imagen sale completamente perfecta •

Para poner los botones de reiniciar y salir haremos lo siguiente: Iremos a los componentes donde dice paleta damos clic donde dice diseño como se muestra en la siguiente imagen.  Arrastramos a la primera opción que sale que es la de HorizontalArrangement y se arrastra a la screem1

Dentro del cuadro que nos sale colocamos 2 botones, como en el paso 3 pero en este caso con estas características: característi cas: Como estamos en diseño ahora le daremos clic en interfaz del usuario y elegimos la prima opción que dice botón

 Arrastramos dos botones en el cuadro que apareció como se muestra en la siguiente imagen

Cambiamos el nombre del del primer botón botón en componentes, a “BotonReiniciar” y su texto a “Reiniciar” Nos dirigiremos a los componentes como se muestra en la siguiente imagen

Trabajaremos el botón 1 y le damos en el botón rebautizar y nos saldrá la siguiente venta

Escribiremos botón reiniciar en donde dice Nuevo N uevo nombre ya hecho esto le damos clic en DE ACUERDO. Ahora buscaremos donde dice propiedades del botón reiniciar que está justo alado como se muestra en la siguiente imagen:

Dentro de las propiedades buscamos donde dice texto como se muestra en la siguiente imagen:

En el texto le ponemos reiniciar.

Como ven se ha cambiado el nombre y le hemos cambiado el nombre de la variable. A si aremos con el siguiente botón pero el segundo botón le pondremos como nombre del componente a “BotonSalir” y su texto a “Salir”

Como ven ya he puesto el nombre de componentes y el nombre de los dos textos. •

Para poder poder hacer vibrar el teléfono cuando pulsamos saludar debemos de insertarle un sonido, para ello. Buscamos desde paleta donde dice media y le damos clic ahora arrastramos el sonido a la screen1 En la siguiente imagen se le mostrara donde y como se nota el sonido

ahora guardamos el proyecto  Ahora modificaremos el comportamiento de los distintos componentes con el Editor de bloques, para ello lo l o abrimos pulsando “Open the Blocks Editor”.

Damos clic donde dice bloques  Aquí será donde se codificara esta app como se mostrara la siguiente imagen

Les mostrare todas las funciones del blocks. Empezando por la primera herramienta la cual es BUIT-IN

 Arrastramos “My Blocks”  “BotonSaludar” la opción “when BotonSaludar.Click BotonSaludar.Click do” que do”  que es primero que aparece

 Ahora damos clic en imagen y buscamos lo siguiente

(Set imagen_hola visible to) que es la siguiente

Hasta ahorita llevamos solo 2 puestas que esto se ve de la siguiente manera

 Ahora hacemos lo siguiente desde “Built in”  “Logic” la opción true y la encajamos detrás del “to” de “ImagenHola.Visible”

Que es la primera que aparece

colocándolo atrás de del to de

Quedaría de la siguiente manera

Para que el teléfono vibre cuando pulsamos BotonSaludar haremos lo siguiente:  Añadimos debajo de “ImagenHola.Visible” “ImagenHola.Visible” “Sound1” la opción “Sound1.Vibrate”.

“My

Blocks”



Que es la sexta opción que sale al darle clic en sund1

Como esta opción debe ir debajo de imagen_hola que daría de la siguiente manera.

 Ahora vamos a poner la opción “number” y la encajamos detrás de “Sound1.Vibrate”, y cambiando camb iando el valor del número a 100 para ello nos iremos a la opción “Math”

Que es la primera opción que sale

Le damos clic dentro donde está el 0 y le ponemos 100 ya echo esto tendremos que ponerlo detrás de sound1 que quedaría de la siguiente manera

Reiniciar la aplicación cuando se pulse BotonReiniciar:

Que es la primera opción que nos sale

Damos clic en imagen_hola y buscamos lo siguiente (Set imagen_hola visible to)

Que es la opción

Y lo colocaremos dentro del botón reiniciar y nos quedara de la siguiente manera

 Ahora iremos a logic que se encuentra en BUIT-IN y arrastramos el false.

que es la segunda opción que sale como se verá a continuación

y la la encajamos detrás del “to” de (Set imagen_hola visible visible to) y nos quedaría de la siguiente manera

 Ahora hacemos lo siguiente con el botón salir

Y elegimos la primera opción que sale la cual es la siguiente:

 Ahora iremos al Built-in y damos clic en control

Y buscamos la opción que dice close application que es la siguiente:

Que ira dentro del boton salir y queda de la l a siguiente manera

El aspecto final se vera de esta manera como com o continuación verán

Para descargar la aplicación Iremos al menú que está en la parte de arriba

Damos clic en Build y saldrán dos opciones

La cual elegirán la 2 que la va a descargar a su ordenador en la carpeta de descarga y se descargara automática mente.

 CBTis250 LUIS ADAN AGUIRRE SANDOVAL