Activa JavaScript para disfrutar de los vídeos de la Mediateca.
4. Entorno de desarrollo de App Inventor - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Buenas a todos de nuevo. Hoy veremos el entorno de desarrollo de App Inventor y haremos nuestra
00:00:14
primera aplicación. Como veis, ya estoy dentro de App Inventor. La primera pantalla que vemos
00:00:20
será la que nos va a permitir crear un proyecto nuevo o ver y abrir los que ya tenemos. Para
00:00:25
crearlo, hacemos clic en Start New Project. Ahora introducimos el nombre del proyecto
00:00:33
y hacemos clic en OK. En esta pantalla diseñaremos la interfaz de nuestra aplicación.
00:00:37
Aquí tenemos el dibujo de una pantalla de teléfono cualquiera, donde podremos arrastrar los componentes que necesitemos.
00:00:44
Como podéis ver a la izquierda, tenemos toda una serie de elementos que podemos arrastrar dentro de la interfaz, agrupados en diferentes categorías.
00:00:52
Y aquí tenemos lo que se va a ver en el móvil.
00:01:09
Empezaremos utilizando los componentes más simples.
00:01:13
En la pestaña de Layout encontraréis los tres modelos de posicionado de componentes.
00:01:16
Estos layouts son los elementos que usaremos para organizar las cosas dentro de nuestra interfaz.
00:01:22
El primero, Horizontal Arrangement, nos permitirá colocar los elementos uno al lado del otro.
00:01:28
Vertical Arrangement los colocará en columna uno debajo del otro.
00:01:37
El último, Table Arrangement, nos servirá para colocar los elementos en forma de tabla por filas y columnas.
00:01:41
Una vez lo arrastramos a la derecha nos dejará configurar el número de filas y columnas
00:01:49
Para la aplicación que vamos a construir uniremos diferentes layouts
00:01:54
Empezamos con un VerticalLayout
00:01:58
En la primera fila arrastraremos un Label que servirá para poner un texto, como una explicación, que el usuario no podrá cambiar
00:02:01
Después arrastraré un HorizontalLayout y dentro de este pondré dos campos de texto o TextBox
00:02:10
Fijaos que este y este están dentro del vertical y dentro de este horizontal voy a introducir un textbox, que sería un cuadro de texto donde el usuario puede escribir.
00:02:19
Y luego añadimos otro textbox. Y por último añadimos un botón.
00:02:32
Entonces esta sería la configuración de nuestra aplicación.
00:02:38
Tenemos un vertical, dentro del vertical hemos puesto un label y un horizontal,
00:02:41
y dentro del horizontal dos textbox y un botón.
00:02:47
Dejadme poner otro label en la parte de abajo.
00:02:53
Fijaos que en este caso, este es el primer textbox, este es el segundo y el botón no me aparece en la pantalla.
00:02:57
Vamos a configurar el tamaño de todos los objetos para que todo esté bien organizado en la pantalla.
00:03:04
En la parte derecha encontramos la ventana de propiedades y en la parte de abajo encontramos el ancho, width.
00:03:09
Le diremos que rellene el objeto padre con fill parent.
00:03:19
Al botón le diremos que ejecute la misma acción, así como al horizontal y al vertical que rellene toda la pantalla.
00:03:29
Ahora ya lo tengo todo más cuadrado.
00:03:45
Tengo este label aquí arriba, este label aquí abajo, un textbox, otro textbox y ese botón.
00:03:48
Ahora le cambiamos el nombre al botón y lo llamamos Suma, ya que es el uso que le vamos a dar.
00:03:56
Ahora nos falta enseñarle a nuestra aplicación qué tiene que hacer con estos elementos.
00:04:02
Para ello hacemos clic en el pequeño botón de Blocks, que nos abrirá una nueva ventana donde podremos utilizar los bloques para determinar el comportamiento de nuestra app.
00:04:12
Este entorno de programación, como podéis ver, se asemeja mucho a Scratch.
00:04:28
En la izquierda tenemos acceso a los diferentes bloques y en la parte central realizaremos nuestros programas.
00:04:32
Fijaos que tenemos bloques que vienen ya programados y bloques que dependen de componentes que nosotros hemos insertado.
00:04:43
Si buscamos dentro del botón 1, encontraremos un bloque que se llama When Button One Click.
00:04:50
Lo arrastramos a la pantalla y lo pulsamos para poder programar lo que queremos que suceda.
00:04:57
Es decir, que el segundo label cambie su valor por la suma del contenido de los dos campos de texto.
00:05:02
Voy a buscar dentro del Label2 y veréis que tengo un SetLabelText2, es decir, cambia la propiedad texto del Label2.
00:05:08
Lo arrastro y le digo que cuando pulse el botón cambie la propiedad del Label2 a algo concreto.
00:05:20
Este algo va a ser una suma.
00:05:27
Ahora, desde el apartado de Matemáticas, arrastramos una suma aquí.
00:05:30
¿Y qué es lo que ha de sumar?
00:05:38
Pues ha de sumar el texto que tengamos escrito en el primer TextBox, que lo tenemos aquí. TextBox1Text más el texto del TextBox2Text. Ya lo tenemos.
00:05:40
O en ButtonOneClick lo unirá todo y ya tenemos nuestro código.
00:06:04
Ya lo tenemos programado.
00:06:08
Vamos a abrir el emulador, que lo he dejado listo previamente.
00:06:12
Fijaos que ya lo tenemos aquí.
00:06:16
Pongo un 2, pongo un 3 y pulsamos el botón.
00:06:20
Vamos a probarlo.
00:06:26
Y, exacto, el Label2 me ha sumado el 2 con el 3.
00:06:28
Muy bien, pues ya tenemos nuestra primera aplicación de App Inventor hecha.
00:06:33
- Subido por:
- Jesús P.
- Licencia:
- Reconocimiento - No comercial
- Visualizaciones:
- 150
- Fecha:
- 29 de marzo de 2022 - 19:29
- Visibilidad:
- Público
- Centro:
- IES LA DEHESILLA
- Duración:
- 06′ 48″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1280x720 píxeles
- Tamaño:
- 143.64 MBytes
