1
00:00:14,130 --> 00:00:20,050
Buenas a todos de nuevo. Hoy veremos el entorno de desarrollo de App Inventor y haremos nuestra

2
00:00:20,050 --> 00:00:25,949
primera aplicación. Como veis, ya estoy dentro de App Inventor. La primera pantalla que vemos

3
00:00:25,949 --> 00:00:33,009
será la que nos va a permitir crear un proyecto nuevo o ver y abrir los que ya tenemos. Para

4
00:00:33,009 --> 00:00:37,950
crearlo, hacemos clic en Start New Project. Ahora introducimos el nombre del proyecto

5
00:00:37,950 --> 00:00:43,770
y hacemos clic en OK. En esta pantalla diseñaremos la interfaz de nuestra aplicación.

6
00:00:44,130 --> 00:00:50,729
Aquí tenemos el dibujo de una pantalla de teléfono cualquiera, donde podremos arrastrar los componentes que necesitemos.

7
00:00:52,149 --> 00:01:00,590
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.

8
00:01:09,920 --> 00:01:13,040
Y aquí tenemos lo que se va a ver en el móvil.

9
00:01:13,659 --> 00:01:16,359
Empezaremos utilizando los componentes más simples.

10
00:01:16,900 --> 00:01:21,680
En la pestaña de Layout encontraréis los tres modelos de posicionado de componentes.

11
00:01:22,299 --> 00:01:28,079
Estos layouts son los elementos que usaremos para organizar las cosas dentro de nuestra interfaz.

12
00:01:28,079 --> 00:01:34,760
El primero, Horizontal Arrangement, nos permitirá colocar los elementos uno al lado del otro.

13
00:01:37,129 --> 00:01:41,329
Vertical Arrangement los colocará en columna uno debajo del otro.

14
00:01:41,930 --> 00:01:49,150
El último, Table Arrangement, nos servirá para colocar los elementos en forma de tabla por filas y columnas.

15
00:01:49,150 --> 00:01:54,250
Una vez lo arrastramos a la derecha nos dejará configurar el número de filas y columnas

16
00:01:54,250 --> 00:01:58,709
Para la aplicación que vamos a construir uniremos diferentes layouts

17
00:01:58,709 --> 00:02:01,329
Empezamos con un VerticalLayout

18
00:02:01,329 --> 00:02:10,590
En la primera fila arrastraremos un Label que servirá para poner un texto, como una explicación, que el usuario no podrá cambiar

19
00:02:10,590 --> 00:02:19,090
Después arrastraré un HorizontalLayout y dentro de este pondré dos campos de texto o TextBox

20
00:02:19,090 --> 00:02:31,550
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.

21
00:02:32,389 --> 00:02:37,090
Y luego añadimos otro textbox. Y por último añadimos un botón.

22
00:02:38,050 --> 00:02:41,110
Entonces esta sería la configuración de nuestra aplicación.

23
00:02:41,930 --> 00:02:46,490
Tenemos un vertical, dentro del vertical hemos puesto un label y un horizontal,

24
00:02:47,189 --> 00:02:50,689
y dentro del horizontal dos textbox y un botón.

25
00:02:53,479 --> 00:02:55,740
Dejadme poner otro label en la parte de abajo.

26
00:02:57,599 --> 00:03:04,039
Fijaos que en este caso, este es el primer textbox, este es el segundo y el botón no me aparece en la pantalla.

27
00:03:04,039 --> 00:03:09,620
Vamos a configurar el tamaño de todos los objetos para que todo esté bien organizado en la pantalla.

28
00:03:09,620 --> 00:03:18,689
En la parte derecha encontramos la ventana de propiedades y en la parte de abajo encontramos el ancho, width.

29
00:03:19,270 --> 00:03:22,169
Le diremos que rellene el objeto padre con fill parent.

30
00:03:29,620 --> 00:03:37,479
Al botón le diremos que ejecute la misma acción, así como al horizontal y al vertical que rellene toda la pantalla.

31
00:03:45,710 --> 00:03:47,610
Ahora ya lo tengo todo más cuadrado.

32
00:03:48,550 --> 00:03:55,229
Tengo este label aquí arriba, este label aquí abajo, un textbox, otro textbox y ese botón.

33
00:03:56,949 --> 00:04:02,550
Ahora le cambiamos el nombre al botón y lo llamamos Suma, ya que es el uso que le vamos a dar.

34
00:04:02,889 --> 00:04:12,080
Ahora nos falta enseñarle a nuestra aplicación qué tiene que hacer con estos elementos.

35
00:04:12,080 --> 00:04:23,300
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.

36
00:04:28,259 --> 00:04:31,879
Este entorno de programación, como podéis ver, se asemeja mucho a Scratch.

37
00:04:32,519 --> 00:04:39,920
En la izquierda tenemos acceso a los diferentes bloques y en la parte central realizaremos nuestros programas.

38
00:04:43,680 --> 00:04:50,360
Fijaos que tenemos bloques que vienen ya programados y bloques que dependen de componentes que nosotros hemos insertado.

39
00:04:50,819 --> 00:04:56,540
Si buscamos dentro del botón 1, encontraremos un bloque que se llama When Button One Click.

40
00:04:57,160 --> 00:05:02,100
Lo arrastramos a la pantalla y lo pulsamos para poder programar lo que queremos que suceda.

41
00:05:02,899 --> 00:05:08,600
Es decir, que el segundo label cambie su valor por la suma del contenido de los dos campos de texto.

42
00:05:08,600 --> 00:05:19,250
Voy a buscar dentro del Label2 y veréis que tengo un SetLabelText2, es decir, cambia la propiedad texto del Label2.

43
00:05:20,250 --> 00:05:26,529
Lo arrastro y le digo que cuando pulse el botón cambie la propiedad del Label2 a algo concreto.

44
00:05:27,569 --> 00:05:29,550
Este algo va a ser una suma.

45
00:05:30,750 --> 00:05:35,129
Ahora, desde el apartado de Matemáticas, arrastramos una suma aquí.

46
00:05:38,709 --> 00:05:40,230
¿Y qué es lo que ha de sumar?

47
00:05:40,230 --> 00:06:04,410
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.

48
00:06:04,410 --> 00:06:08,269
O en ButtonOneClick lo unirá todo y ya tenemos nuestro código.

49
00:06:08,790 --> 00:06:10,550
Ya lo tenemos programado.

50
00:06:12,709 --> 00:06:15,949
Vamos a abrir el emulador, que lo he dejado listo previamente.

51
00:06:16,769 --> 00:06:18,730
Fijaos que ya lo tenemos aquí.

52
00:06:20,629 --> 00:06:25,230
Pongo un 2, pongo un 3 y pulsamos el botón.

53
00:06:26,930 --> 00:06:27,670
Vamos a probarlo.

54
00:06:28,889 --> 00:06:33,430
Y, exacto, el Label2 me ha sumado el 2 con el 3.

55
00:06:33,430 --> 00:06:38,990
Muy bien, pues ya tenemos nuestra primera aplicación de App Inventor hecha.