1
00:00:03,430 --> 00:00:07,549
Bien, bienvenidos a este tutorial en el cual vamos a aprender cómo programar y

2
00:00:07,549 --> 00:00:10,470
cómo desarrollar la aplicación del Teorema de Pitágoras. Es la primera

3
00:00:10,470 --> 00:00:14,050
tarea que vais a tener que hacer en este taller de tecnología y la tenéis

4
00:00:14,050 --> 00:00:17,489
también explicada en la página 210 de vuestro libro. Pero bueno, siguiendo este

5
00:00:17,489 --> 00:00:20,670
tutorial vais a encontrar toda la información paso a paso que necesitáis

6
00:00:20,670 --> 00:00:23,850
para poder programarla. El resultado de la aplicación es lo que estáis viendo

7
00:00:23,850 --> 00:00:27,589
ahora en la pantalla y es una aplicación muy sencilla. El usuario simplemente

8
00:00:27,589 --> 00:00:30,670
pulsando en este campo de texto introduce el valor de un cateto del

9
00:00:30,670 --> 00:00:34,909
triángulo o rectángulo, el valor del segundo cateto, pulsando en este botón donde pone hipotenusa,

10
00:00:35,009 --> 00:00:41,030
le daría el resultado de la medida de la hipotenusa. ¿Bien? Bueno, pues ¿cómo lo vamos a hacer o cómo

11
00:00:41,030 --> 00:00:45,250
vamos a programar? Pues en primer lugar vamos a programar esta interfaz gráfica. Vamos a dejarla

12
00:00:45,250 --> 00:00:49,609
definida para luego después poder programar toda la lógica de los bloques que van a hacer que esta

13
00:00:49,609 --> 00:00:54,770
aplicación funcione. Bien, voy a crear un proyecto nuevo para empezar de cero. Empezaría aquí, comenzar

14
00:00:54,770 --> 00:00:59,909
un proyecto nuevo. Le voy a dar el nombre, en este caso le voy a llamar Pitágoras, sin tildes, bien,

15
00:00:59,909 --> 00:01:11,709
A Pepinventor no admite tildes. Y, bueno, le voy a llamar mejor Teorema, ¿vale? Para que veáis que si dejo espacios, tengo que poner barra baja. Teorema de Pitágoras, ¿vale?

16
00:01:11,709 --> 00:01:17,790
No podría dejar espacios porque entonces me daría un error y no me dejaría guardarlo con ese nombre. Cuando tenga que poner espacios, pongo barra baja.

17
00:01:18,349 --> 00:01:25,290
Le doy a aceptar. Vale, me dice que ya existe porque tengo uno creado, que es el que os estoy enseñando, pues le voy a llamar Teorema de Pitágoras 2.

18
00:01:26,269 --> 00:01:28,629
Bien, entonces ya sí que me permitiría empezar de cero.

19
00:01:28,810 --> 00:01:31,109
Bueno, ¿qué vamos a hacer primero de todo?

20
00:01:31,310 --> 00:01:33,730
O qué, bueno, ¿qué es lo que os aconsejo que hagáis?

21
00:01:33,989 --> 00:01:35,650
Pues yo os aconsejo que vayáis de arriba a abajo.

22
00:01:36,030 --> 00:01:38,609
En el libro tenéis un modelo de cómo tendría que quedar esta aplicación

23
00:01:38,609 --> 00:01:40,989
y yo lo voy a ir haciendo paso a paso, como os he dicho antes.

24
00:01:41,450 --> 00:01:43,030
Bueno, en primer lugar vamos a poner el título.

25
00:01:43,250 --> 00:01:46,030
El título, eso que aparecía arriba, que pone Teorema de Pitágoras.

26
00:01:46,590 --> 00:01:49,450
Bueno, pues para ello tengo que añadir App Inventor.

27
00:01:49,450 --> 00:01:53,510
Si recordáis del año pasado, no es una aplicación donde yo pueda colocar elementos

28
00:01:53,510 --> 00:01:56,890
en el punto que yo quiera de la pantalla, sino que tiene que seguir una estructura

29
00:01:56,890 --> 00:02:01,150
que es por el propio funcionamiento de Android. Android funciona así, con lo cual no nos permite

30
00:02:01,150 --> 00:02:04,810
el poder incluir elementos de manera libre en la pantalla.

31
00:02:05,209 --> 00:02:09,229
Lo que tenemos que incluir son disposiciones y en este caso voy a añadir una disposición horizontal

32
00:02:09,229 --> 00:02:12,550
que es lo que me permite añadir elementos en formato horizontal.

33
00:02:13,330 --> 00:02:17,710
Y dentro de esta disposición horizontal, aquí en interfaz de usuario, voy a añadir una etiqueta.

34
00:02:18,069 --> 00:02:23,110
La disposición la he cogido de aquí, donde pone disposición, y la etiqueta la cojo de interfaz de usuario.

35
00:02:23,110 --> 00:02:29,949
Aquí en la trífuga de usuarios es donde están prácticamente todos los elementos, casi todos los que vais a necesitar para programar las aplicaciones que vamos a hacer en el taller.

36
00:02:30,330 --> 00:02:40,750
Bueno, pues cojo la etiqueta, la suelto dentro y lo primero que tengo que hacer es, aquí es el guión, una especie de guión de todos los elementos que voy añadiendo a mi pantalla de mi aplicación

37
00:02:40,750 --> 00:02:45,689
para poder configurar los pulsos sobre cada uno de ellos y aquí a la derecha me aparecen las propiedades.

38
00:02:45,689 --> 00:02:54,530
Bueno, pues la disposición horizontal, que sería todo el cajón donde voy a añadir estos elementos de texto, lo que voy a decirle es que el ancho se ajuste al contenedor.

39
00:02:54,689 --> 00:02:59,330
¿Y eso para qué? Para que el ancho de esta disposición ocupe todo el ancho de la pantalla.

40
00:02:59,789 --> 00:03:10,449
Ahora me voy a ir a editar el texto de la etiqueta. Pues pulso aquí donde pone etiqueta, le digo que el tamaño de la letra sea un poco más grande, le voy a poner por ejemplo 20,

41
00:03:10,449 --> 00:03:17,210
y aquí abajo donde pone texto lo que voy a escribir es teorema, aquí ya sí puedo poner tildes, teorema de Pitágoras.

42
00:03:17,849 --> 00:03:20,250
Bien, hago clic fuera y veis que el texto ya ha cambiado.

43
00:03:20,629 --> 00:03:25,310
Le voy a decir que la posición del texto sea centrada y para que aparezca en el centro de la disposición horizontal

44
00:03:25,310 --> 00:03:30,069
me voy a disposición horizontal y le digo que en lugar de estar a la izquierda esté en el centro.

45
00:03:30,069 --> 00:03:31,210
Y veis que ya se me ha centrado.

46
00:03:31,330 --> 00:03:36,150
Entonces recordad que tengo que centrar el texto tanto en la etiqueta, donde pone posición del texto,

47
00:03:36,729 --> 00:03:38,349
como en la disposición horizontal.

48
00:03:38,650 --> 00:03:38,930
¿De acuerdo?

49
00:03:39,349 --> 00:03:43,009
Podéis cambiar el color de fondo si queréis, yo no lo voy a hacer, pero lo haríamos aquí.

50
00:03:43,090 --> 00:03:46,629
Donde pone color de fondo por defecto, pues en lugar de negro podéis elegir cualquier otro.

51
00:03:46,729 --> 00:03:47,870
Bueno, lo voy a hacer para que lo veáis.

52
00:03:48,169 --> 00:03:49,569
Voy a poner, por ejemplo, en turquesa.

53
00:03:49,930 --> 00:03:51,129
Bien, ya tendría el título.

54
00:03:51,289 --> 00:03:55,430
Lo siguiente es añadir la imagen, esta imagen que es decorativa,

55
00:03:55,550 --> 00:03:58,750
donde aparece Pitágoras haciendo como que está pensando con números.

56
00:03:59,330 --> 00:04:01,490
Estas imágenes las podéis descargar del aula virtual.

57
00:04:01,930 --> 00:04:03,330
Bien, yo os diré en clase de dónde hacerlo.

58
00:04:03,330 --> 00:04:07,469
Si tenéis dudas me preguntáis, pero está en la sección donde aparecen las actividades del taller,

59
00:04:07,469 --> 00:04:09,189
de estas actividades de App Inventor.

60
00:04:09,590 --> 00:04:12,430
Bueno, pues para añadirlo voy a añadir otra disposición horizontal.

61
00:04:12,689 --> 00:04:16,970
Siempre vamos a ir añadiendo disposiciones horizontales para poder incluir elementos de arriba abajo.

62
00:04:17,829 --> 00:04:22,910
Bueno, pues añado esta disposición horizontal y dentro de ella voy a volcar un elemento de imagen.

63
00:04:23,470 --> 00:04:25,589
Bien, de momento no hay ninguna imagen seleccionada.

64
00:04:25,689 --> 00:04:29,910
Para poder seleccionar la que yo quiero, previamente la he tenido que descargar a mi disco duro

65
00:04:29,910 --> 00:04:34,790
y desde las propiedades, teniendo en cuenta que hemos seleccionado la imagen aquí,

66
00:04:34,790 --> 00:04:37,730
pulso donde pone foto, veis que pone ninguno

67
00:04:37,730 --> 00:04:39,329
y me da la opción de subir un archivo

68
00:04:39,329 --> 00:04:41,529
selecciono el archivo dentro de mi disco duro

69
00:04:41,529 --> 00:04:43,990
en este caso es una imagen que se llama Pitágoras

70
00:04:43,990 --> 00:04:45,930
es la misma que vosotros vais a utilizar

71
00:04:45,930 --> 00:04:48,009
bien, que la tengo por aquí descargada

72
00:04:48,009 --> 00:04:49,170
Pitágoras JPG

73
00:04:49,170 --> 00:04:50,269
y le doy a abrir

74
00:04:50,269 --> 00:04:53,529
bien, selecciono el archivo, le doy a aceptar

75
00:04:53,529 --> 00:04:56,350
y ya se me debería abrir la imagen

76
00:04:56,350 --> 00:04:56,990
¿qué ha ocurrido?

77
00:04:57,209 --> 00:04:58,490
que esta imagen es muy grande

78
00:04:58,490 --> 00:04:59,990
entonces para ajustar el tamaño

79
00:04:59,990 --> 00:05:01,829
me voy a la disposición horizontal

80
00:05:01,829 --> 00:05:04,329
le digo que el ancho me lo ajuste al contenedor

81
00:05:04,329 --> 00:05:10,110
y me voy a la imagen y lo mismo, le digo que el ancho de la imagen me lo ajuste al contenedor.

82
00:05:10,550 --> 00:05:12,970
Entonces, bueno, pues ya me habrá ajustado el tamaño de la imagen,

83
00:05:13,850 --> 00:05:18,009
el alto también le voy a decir que me lo ajuste al contenedor y en la disposición horizontal lo mismo.

84
00:05:19,269 --> 00:05:25,269
Vale, veis que ya tengo un tamaño de imagen adecuado a lo que sería la anchura de la pantalla de mi teléfono móvil.

85
00:05:25,589 --> 00:05:30,790
Claro, ¿qué ocurre? Que conforme yo vaya añadiendo elementos aquí abajo, se me va a ir comprimiendo el contenedor.

86
00:05:30,850 --> 00:05:34,110
El contenedor es toda esta parte gris donde veis que está incluida la imagen.

87
00:05:34,329 --> 00:05:46,069
Entonces, lo siguiente que voy a añadir es otra disposición horizontal donde voy a incluir el campo de texto para poder meter el primer valor del cateto A para poder calcular el teorema de Pitágoras.

88
00:05:46,550 --> 00:05:53,089
Bueno, pues a esta disposición horizontal ya le voy a decir directamente que me lo ajuste al contenedor. Esto es algo en horizontal, algo que vais a tener que hacer siempre.

89
00:05:53,610 --> 00:05:57,910
Y lo mismo, que en el alto me lo ajuste al contenedor. Bueno, pues aquí lo que voy a añadir son dos elementos.

90
00:05:57,910 --> 00:06:10,670
Voy a añadir una etiqueta de texto y voy a añadir también un campo de texto. Si queréis podéis quitar dentro de esta disposición horizontal lo de que el alto te lo ajusta al contenedor y lo hacéis automático, ¿vale? Para que no se nos haga demasiado grande.

91
00:06:10,670 --> 00:06:15,050
bueno y como os decía hemos añadido una etiqueta que ahora le cambiaremos el texto

92
00:06:15,050 --> 00:06:18,129
y vamos a añadir también un campo de texto que está aquí abajo

93
00:06:18,129 --> 00:06:23,069
el campo de texto es el lugar donde el usuario va a pulsar con el dedo

94
00:06:23,069 --> 00:06:27,389
y se le va a abrir el teclado del móvil para poder introducir el valor de la primera variable

95
00:06:27,389 --> 00:06:28,269
que es el cateto A

96
00:06:28,269 --> 00:06:32,329
entonces pulso en etiqueta, lo puedo hacer desde aquí o lo puedo hacer también desde aquí

97
00:06:32,329 --> 00:06:36,509
y cambio el texto y lo que voy a poner es cateto A

98
00:06:36,509 --> 00:06:40,269
y este sería el primer cateto de mi triángulo rectángulo

99
00:06:40,269 --> 00:06:43,029
puedo hacer la letra más grande, le voy a poner por ejemplo 18

100
00:06:43,029 --> 00:06:46,829
y bueno, también puedo hacer que el campo de texto

101
00:06:46,829 --> 00:06:49,310
se me ajuste el ancho al contenedor

102
00:06:49,310 --> 00:06:50,829
para que ocupe todo el ancho de la pantalla

103
00:06:50,829 --> 00:06:53,350
bien, esto es porque estéticamente queda mejor

104
00:06:53,350 --> 00:06:55,790
también le puedo decir a mi disposición horizontal

105
00:06:55,790 --> 00:06:58,910
que en lugar de ser de color negro, pues por ejemplo sea de color verde

106
00:06:58,910 --> 00:07:01,129
bien, y ya lo tengo decorado con otro color diferente

107
00:07:01,129 --> 00:07:03,089
y esto lo podéis hacer de color que queráis

108
00:07:03,089 --> 00:07:06,370
esto ya es a gusto de cada uno y personalizarlo como os dé la gana

109
00:07:06,370 --> 00:07:08,110
perdón

110
00:07:08,110 --> 00:07:31,230
Bueno, pues lo que voy a hacer a continuación es lo mismo, voy a repetir exactamente lo mismo, pero para el cateto B. Entonces, disposición horizontal, la coloco debajo, ancho automático, lo cambio por ajustar al contenedor, me voy a interfaz de usuario, arrastro y suelto una imagen, perdón, una imagen no, la voy a borrar, una etiqueta.

111
00:07:31,230 --> 00:07:48,810
Me voy a etiqueta, que lo tengo por aquí, arrastro y suelto, le cambio el texto, en este caso sería cateto B, aumento el tamaño, lo había puesto en 18, pues le voy a poner el mismo tamaño y arrastro un campo de texto.

112
00:07:48,810 --> 00:07:52,829
vale, el campo de texto le vamos a poner también que el ancho lo ajuste al contenedor

113
00:07:52,829 --> 00:07:57,329
y le vamos a decir que el fondo sea, pues lo voy a poner en este caso del mismo color

114
00:07:57,329 --> 00:08:00,149
que sea, uy perdón, perdón, perdón, perdón

115
00:08:00,149 --> 00:08:03,730
le voy a poner blanco porque estaba cambiando

116
00:08:03,730 --> 00:08:07,629
esto es algo que nos va a pasar muy habitualmente, estaba cambiando el fondo del campo de texto

117
00:08:07,629 --> 00:08:10,449
bien, lo que tengo que cambiar es el fondo de la disposición horizontal

118
00:08:10,449 --> 00:08:12,750
y le voy a decir que sea de color verde

119
00:08:12,750 --> 00:08:17,269
vale, entonces el campo de texto lo voy a poner blanco

120
00:08:17,269 --> 00:08:19,649
porque lo he puesto transparente sin darme cuenta

121
00:08:19,649 --> 00:08:22,149
para que sea exactamente igual que el de arriba, ¿vale?

122
00:08:22,149 --> 00:08:23,689
Y los dos tengan el mismo aspecto.

123
00:08:24,149 --> 00:08:26,470
Bueno, pues lo que voy a añadir a continuación es algo parecido

124
00:08:26,470 --> 00:08:27,329
pero con un cambio.

125
00:08:27,509 --> 00:08:29,269
En lugar de una etiqueta voy a añadir un botón

126
00:08:29,269 --> 00:08:32,730
para que después cuando programemos sea ese botón que tengo que pulsar

127
00:08:32,730 --> 00:08:35,710
para que me calcule, me haga la operación matemática que todos conocéis

128
00:08:35,710 --> 00:08:38,629
de raíz cuadrada, de cateto al cuadrado, más cateto al cuadrado

129
00:08:38,629 --> 00:08:40,529
para que me calcule el valor de la hipotenusa.

130
00:08:40,990 --> 00:08:43,029
Pero bueno, empiezo exactamente igual que he empezado

131
00:08:43,029 --> 00:08:45,110
con las etiquetas de cateto A y cateto B.

132
00:08:45,110 --> 00:08:53,470
Cojo una disposición horizontal, la suelto debajo de donde pone cateto B, que me la he añadido dentro, entonces la voy a borrar.

133
00:09:02,529 --> 00:09:10,889
Perdonad que lo que he hecho ha sido borrar el campo de texto en lugar de la disposición horizontal.

134
00:09:11,450 --> 00:09:17,149
Entonces voy a borrar esta disposición horizontal y voy a volver a añadir rápidamente ese campo de texto que se me haya borrado.

135
00:09:17,149 --> 00:09:21,789
Lo añado aquí y únicamente le digo que el ancho me lo ajuste al contenedor.

136
00:09:21,929 --> 00:09:23,450
Y ha recuperado lo que tenía antes.

137
00:09:24,129 --> 00:09:28,610
Bien, como os decía, disposición horizontal para poner el botón.

138
00:09:29,230 --> 00:09:33,490
Me aseguro que no os pase lo que me acaba de pasar a mí ahora, que lo añado justo debajo.

139
00:09:34,350 --> 00:09:37,789
Ancho, ajustar al contenedor. Esto es algo que vais a tener que hacer automáticamente.

140
00:09:37,929 --> 00:09:40,110
En el momento que añadáis algo, darle a ajustar al contenedor.

141
00:09:40,809 --> 00:09:46,389
Y voy a añadir un botón. Me voy a interfaz de usuario, cojo el botón que está aquí arriba, lo añado y lo suelto.

142
00:09:46,389 --> 00:09:49,470
y dentro del texto del botón lo que voy a escribir es

143
00:09:49,470 --> 00:09:52,190
hipotenusa y la voy a llamar C

144
00:09:52,190 --> 00:09:54,669
porque normalmente en matemáticas a la hipotenusa se le llama C

145
00:09:54,669 --> 00:09:57,690
hay profesores que la llaman H pero por no confundir con la altura

146
00:09:57,690 --> 00:10:00,769
que también se pone como letra H pues se suele utilizar la letra C

147
00:10:00,769 --> 00:10:02,990
y el tamaño de letra pues lo mismo, 18

148
00:10:02,990 --> 00:10:06,509
bien, y ya tendría mi botón para calcular la hipotenusa

149
00:10:06,509 --> 00:10:09,049
¿qué color le podemos poner? pues el que queráis, yo le voy a poner

150
00:10:09,049 --> 00:10:12,750
por ejemplo este azul oscuro y ¿qué me quedaría? añadir un campo

151
00:10:12,750 --> 00:10:15,350
de texto que es donde va a aparecer

152
00:10:15,350 --> 00:10:17,850
el resultado de esa operación.

153
00:10:18,009 --> 00:10:19,529
Este ya no va a ser un campo de texto

154
00:10:19,529 --> 00:10:21,389
donde el usuario puede pulsar para escribir

155
00:10:21,389 --> 00:10:23,429
sino que es donde va a aparecer el resultado

156
00:10:23,429 --> 00:10:25,450
de la operación matemática. Vamos a poner

157
00:10:25,450 --> 00:10:27,490
el ancho automático, cambiarlo por ajustar

158
00:10:27,490 --> 00:10:29,169
al contenedor, bien

159
00:10:29,169 --> 00:10:31,649
y bueno, si queréis en este caso

160
00:10:31,649 --> 00:10:33,409
el alto también lo podéis ajustar al contenedor

161
00:10:33,409 --> 00:10:35,529
para que, como el botón es un poquito más alto

162
00:10:35,529 --> 00:10:37,289
para que me lo ajuste a la misma altura que el botón

163
00:10:37,289 --> 00:10:38,730
y estéticamente pues quede mejor.

164
00:10:39,490 --> 00:10:41,470
Bueno, ¿y qué nos quedaría? Pues poner la última imagen

165
00:10:41,470 --> 00:10:43,629
que es una imagen del triángulo

166
00:10:43,629 --> 00:10:47,409
rectángulo con los tres catetos, que también es una imagen decorativa, y la vamos a añadir

167
00:10:47,409 --> 00:10:51,210
con una disposición horizontal en la parte inferior. Y lo vamos a hacer de la misma forma

168
00:10:51,210 --> 00:10:57,210
que añadimos esta imagen. Me voy a interfaz de usuario, añado la imagen, la suelto, la

169
00:10:57,210 --> 00:11:03,509
arrastro aquí, le digo que la disposición horizontal, el ancho, me lo ajuste al contenedor

170
00:11:03,509 --> 00:11:10,289
y en la imagen la tengo que subir, pulso donde pone fotos, doy a subir archivo, la busco

171
00:11:10,289 --> 00:11:16,549
dentro de mi disco duro. En este caso esta es la que se llama teorema de Pitágoras, que yo la tengo por aquí.

172
00:11:17,929 --> 00:11:22,429
Vosotros la vais a tener que descargar del aula virtual. Y lo mismo que hemos hecho antes.

173
00:11:23,870 --> 00:11:29,129
Ancho, ajustar al contenedor. Alto, ajustar al contenedor.

174
00:11:29,929 --> 00:11:46,960
Bien. Aquí ha habido una desconfiguración. Bien, ahora voy a intentar arreglarlo.

175
00:11:46,980 --> 00:11:55,480
y veis que esta imagen de arriba, la primera imagen, se nos ha quedado un poquito descolocada.

176
00:11:56,120 --> 00:12:00,440
Vale, entonces voy a intentar arreglarlo, sería esta primera disposición horizontal,

177
00:12:03,600 --> 00:12:10,279
vale, si le pongo el alto automático no me lo arregla, si le pongo ajustar al contenedor tampoco,

178
00:12:11,379 --> 00:12:17,899
bueno, esto me imagino que será por un tema del tamaño máximo que pueden ocupar los elementos que yo pongo en la pantalla,

179
00:12:17,899 --> 00:12:27,179
pero bueno, no os preocupéis, voy a intentar solucionarlo, si doy con la solución os lo cuento en clase, pero bueno, me voy a pasar directamente a la parte de programación

180
00:12:27,179 --> 00:12:33,899
para no extender demasiado el tutorial porque bueno, realmente el que esa imagen esté o no es un tema estético y bueno, voy a intentar obviamente solucionarlo

181
00:12:34,460 --> 00:12:43,000
y si doy con la solución pues os lo cuento en clase directamente. Bueno, ¿cómo voy a programar estos elementos para que cuando el usuario introduzca el cateto A y el cateto B

182
00:12:43,000 --> 00:12:50,340
y pulse el botón hipotenusa me dé como resultado el valor de la operación del teorema de Pitágoras que ya todos conocéis.

183
00:12:50,799 --> 00:12:55,720
Bien, pues me voy a bloques y lo primero que tengo que hacer es crear tres variables, ¿vale?

184
00:12:55,720 --> 00:12:59,480
Las variables en App Inventor funcionan de manera parecida a como funcionan en Scratch.

185
00:12:59,980 --> 00:13:04,700
Pulso aquí a la izquierda donde pone variables y lo que tengo que hacer es inicializarlas, ¿vale?

186
00:13:04,700 --> 00:13:06,840
Tengo que darles primero un nombre y después un valor.

187
00:13:06,980 --> 00:13:10,659
Para inicializarlas cojo este bloque de aquí y le digo inicializar global,

188
00:13:10,659 --> 00:13:14,639
pongo el nombre de la variable, en este caso la voy a llamar A porque sería el cateto A

189
00:13:14,639 --> 00:13:16,340
y le tengo que dar el valor 0.

190
00:13:16,679 --> 00:13:19,759
Para dar el valor 0 necesito la pieza de puzzle que me hace falta aquí

191
00:13:19,759 --> 00:13:22,759
y esta la voy a conseguir en matemáticas.

192
00:13:23,500 --> 00:13:26,940
Cojo este bloquecito de aquí y como ya tiene escrito el valor 0

193
00:13:26,940 --> 00:13:28,740
pues no necesito añadir ningún otro valor.

194
00:13:28,879 --> 00:13:31,980
Si la quisiera inicializar a 10, por ejemplo, pues aquí directamente escribo un 10.

195
00:13:32,700 --> 00:13:36,799
Bueno, como necesito otras dos, lo que hago directamente es botón derecho, duplicar

196
00:13:36,799 --> 00:13:40,240
ya tendría mi segunda variable, en lugar de A2 la voy a llamar B

197
00:13:40,240 --> 00:13:45,360
y necesitaría una tercera, que sería la hipotenusa, que la voy a llamar c.

198
00:13:45,759 --> 00:13:50,200
Y ya tengo mis dos catetos y mi hipotenusa inicializados con el valor c.

199
00:13:50,960 --> 00:13:54,960
Bueno, pues a continuación lo que voy a programar es qué va a ocurrir cuando pulse el botón.

200
00:13:55,559 --> 00:13:59,440
Esta es la parte que es menos intuitiva, que es un poco más complicada en App Inventor

201
00:13:59,440 --> 00:14:03,059
y es porque para programar el botón no tengo los bloques aquí,

202
00:14:03,580 --> 00:14:08,639
sino que los tengo donde he añadido el botón dentro de mi configuración de pantalla, que es aquí abajo.

203
00:14:08,639 --> 00:14:16,320
Entonces, como voy a programar el botón 1, pulso aquí y ya me aparecen los botones que necesito para programar el botón, el funcionamiento del botón.

204
00:14:16,720 --> 00:14:21,200
Y el que voy a coger es este de aquí arriba, que es cuando botón 1, clic, entonces ejecutar.

205
00:14:21,759 --> 00:14:26,679
Y dentro voy a poner qué es lo que se va a ejecutar cuando el usuario pulse con su dedo el botón, el botón 1.

206
00:14:27,480 --> 00:14:30,519
Bien, pues en primer lugar lo que tengo que hacer es darle un valor.

207
00:14:32,059 --> 00:14:37,100
Como lo primero que hace el usuario es meter el valor del cateto A, pues le voy a dar un valor a la variable A

208
00:14:37,100 --> 00:14:40,360
que se corresponda con el valor que introduzca el usuario.

209
00:14:40,500 --> 00:14:41,019
¿Cómo hago eso?

210
00:14:41,539 --> 00:14:47,799
Pues me voy a Variables y le digo poner la variable global A

211
00:14:47,799 --> 00:14:50,480
a el valor introducido en el campo de texto.

212
00:14:51,059 --> 00:14:53,740
Para eso tengo que irme al campo de texto, que está aquí abajo,

213
00:14:53,820 --> 00:14:56,320
el campo de texto 1, que es el del cateto A, ¿vale?

214
00:14:56,360 --> 00:14:58,460
Porque el 2, recordad, que corresponde al cateto B.

215
00:14:58,460 --> 00:15:02,039
Y el campo de texto 1, cuando pulso, me aparecen todos estos bloques.

216
00:15:02,259 --> 00:15:03,399
¿Qué bloque voy a coger?

217
00:15:03,860 --> 00:15:07,080
Pues voy a coger, por ejemplo, este, ¿vale?

218
00:15:07,080 --> 00:15:12,519
Porque luego podemos cambiar esto que pone aquí habilitado, lo podemos cambiar por lo que vamos a poner a continuación.

219
00:15:13,059 --> 00:15:18,559
Lo que necesito es recuperar el valor de texto que el usuario haya metido, haya introducido.

220
00:15:18,720 --> 00:15:20,440
Entonces, cambio habilitado por texto.

221
00:15:20,980 --> 00:15:22,600
¿Qué significa esto que acabo de poner?

222
00:15:22,960 --> 00:15:26,259
Que lo que va a hacer el programa es poner el valor de la variable global a,

223
00:15:27,080 --> 00:15:30,860
lo va a cambiar por el valor de texto que introduzca el usuario en el campo de texto 1.

224
00:15:31,159 --> 00:15:36,039
Entonces, ya lo que estaríamos haciendo es que si, por ejemplo, el usuario pone que el cateto a vale 5,

225
00:15:36,039 --> 00:16:07,100
pues la variable a en ese momento va a valer 5 bien voy a duplicar porque lo que lo que voy a poner para la variable b es lo mismo pero cambiaría el valor a por valor b de acuerdo y el valor campo de texto 1 por el campo de texto 2 que es el campo de texto es el segundo que hemos metido en nuestra aplicación donde el usuario va a pulsar para meter el valor del cateto y en la variable c la voy a incluir desde aquí lo que vamos a el valor que va a tomar la variable c vale aquí aparece un error

226
00:16:07,100 --> 00:16:13,379
pero luego se va a solucionar, es el valor de la operación matemática que calcula el teorema de Pitágoras.

227
00:16:13,519 --> 00:16:17,100
Y esto es la parte más complicada de la operación, porque lo vamos a tener que ir haciendo por pasos.

228
00:16:17,559 --> 00:16:22,399
Bueno, en primer lugar, lo voy a hacer aquí abajo y luego lo añadimos aquí al puzzle.

229
00:16:23,159 --> 00:16:28,500
En primer lugar, me tengo que ir a matemáticas y tengo que coger un bloque que es el de...

230
00:16:28,500 --> 00:16:34,500
Voy a empezar por el de raíz cuadrada, ¿vale? El de raíz cuadrada que lo tenemos, si no me equivoco, por aquí abajo.

231
00:16:34,500 --> 00:16:36,220
vale, es este de aquí

232
00:16:36,220 --> 00:16:38,980
y ¿de qué voy a calcular

233
00:16:38,980 --> 00:16:40,700
la raíz cuadrada? Pues de la suma

234
00:16:40,700 --> 00:16:43,159
del cateto A al cuadrado más el cateto B al cuadrado

235
00:16:43,159 --> 00:16:44,740
esta es la fórmula de Pitágoras que conocéis

236
00:16:44,740 --> 00:16:46,740
desde el primero de la ESO. Bueno, pues

237
00:16:46,740 --> 00:16:48,940
vuelvo a matemáticas y cojo un bloque de suma

238
00:16:48,940 --> 00:16:52,330
y dentro de este bloque de suma

239
00:16:52,330 --> 00:16:54,230
necesito otro

240
00:16:54,230 --> 00:16:56,210
bloque que sea de elevar al cuadrado, vale

241
00:16:56,210 --> 00:16:58,090
el bloque de potencia es este de aquí

242
00:16:58,090 --> 00:17:00,210
este simbolito significa elevado

243
00:17:00,210 --> 00:17:02,289
a. Entonces voy a coger dos

244
00:17:02,289 --> 00:17:03,629
uno le voy a meter aquí dentro

245
00:17:03,629 --> 00:17:05,109
y el otro

246
00:17:05,109 --> 00:17:08,509
que lo tengo por aquí, lo voy a meter aquí dentro.

247
00:17:08,630 --> 00:17:12,109
Entonces, si os fijáis, lo que hemos hecho aquí es raíz cuadrada de

248
00:17:12,109 --> 00:17:16,349
lo que yo meta aquí elevado al cuadrado, ahora pondré aquí el 2,

249
00:17:16,589 --> 00:17:19,970
más lo que yo meta aquí elevado al cuadrado, es decir, la fórmula de Pitágoras.

250
00:17:20,569 --> 00:17:23,450
Bueno, pues me voy a matemáticas, cojo este numerito de aquí

251
00:17:23,450 --> 00:17:29,269
y cambio el 0 por el 2, me vuelvo a matemáticas otra vez,

252
00:17:30,170 --> 00:17:34,470
cojo el mismo bloque y le pongo por aquí el 2.

253
00:17:35,109 --> 00:17:40,130
¿Qué me quedaría para rellenar en estos dos huecos? Pues el valor de la variable a y el valor de la variable b.

254
00:17:40,769 --> 00:17:55,390
¿Qué tengo que hacer? Pues irme a variables y decir tomar el valor de la variable a y de nuevo me vuelvo a variables y le digo tomar el valor de la variable b.

255
00:17:55,390 --> 00:18:01,109
Y ya tendría mi fórmula del teorema de Pitágoras. ¿Qué me quedaría para terminar? Pues añadir esto aquí.

256
00:18:01,109 --> 00:18:11,650
Y ya voy a conseguir que cuando pulsemos el botón, el valor de la variable c automáticamente sea el valor del resultado de aplicar la fórmula del teorema de Pitágoras.

257
00:18:11,829 --> 00:18:19,769
Para finalizar, lo que me quedaría sería programar para que ese valor numérico aparezca en el campo de texto que hemos creado donde hemos escrito la palabra hipotenusa.

258
00:18:20,490 --> 00:18:27,269
Bueno, pues para ello me voy al campo de texto 3, que está aquí abajo, y cojo el bloque de poner.

259
00:18:27,269 --> 00:18:47,069
Lo coloco aquí abajo, me da un error porque necesito ponerle aquí un valor, entonces lo que hago es poner campo de texto 3, en lugar de color de fondo lo cambio a texto y me quedaría darle el valor de la variable c, es decir, del valor de toda esta fórmula que hemos aplicado aquí.

260
00:18:47,069 --> 00:19:00,069
Entonces me voy a variables, cojo tomar, que este es el bloque que me recupera el valor de la variable c, tomar global c y ya tendría programada toda mi aplicación.

261
00:19:00,190 --> 00:19:10,250
Vamos a hacer un repaso rápido. Inicializamos la variable a0, la b0, la c0 y programo para que cuando haga clic en el botón 1 se ejecute todo esto.

262
00:19:10,250 --> 00:19:29,190
Primero que la variable a va a tomar el valor de lo que el usuario meta en el campo de texto 1, la variable b va a tomar el valor de lo que el usuario meta en el campo de texto 2 y la variable c va a tomar el valor de toda esta operación matemática, que es la raíz cuadrada de la variable a al cuadrado más la variable b al cuadrado, ¿vale? Lo que es el teorema de Pitágoras de toda la vida.

263
00:19:29,190 --> 00:19:39,329
Y por último, este valor numérico que se ha almacenado aquí, lo saco, lo extraigo en la pantalla a través del campo de texto 3, del texto del campo de texto 3, con el valor de esta variable c.

264
00:19:40,029 --> 00:19:45,049
Bien, una vez que ya lo tenemos programado, para poder instalarlo en nuestro móvil, lo que vamos a hacer es lo siguiente.

265
00:19:46,089 --> 00:19:52,690
Pulsamos en conectar y vamos a seleccionar AI Companion. ¿Esto para qué es? Esto es para que me genere un código QR.

266
00:19:53,190 --> 00:19:58,309
Este código QR lo capturo desde mi móvil y se me va a descargar el fichero APK,

267
00:19:58,930 --> 00:20:01,430
que es el que necesita mi teléfono para que la aplicación funcione.

268
00:20:02,009 --> 00:20:04,990
Bien, os contaré en clase un poco más detenidamente cómo lo podéis hacer,

269
00:20:05,069 --> 00:20:07,630
porque os va a dar un fallo de seguridad probablemente el teléfono.

270
00:20:08,450 --> 00:20:11,170
Y esto sería la primera opción, la primera manera para descargarlo.

271
00:20:11,170 --> 00:20:16,509
Hay otra opción que es pulsando en generar, fichero APP, que es el APK.

272
00:20:16,609 --> 00:20:20,069
El APK es el fichero que tendrías que descargar, tendrías que subir después a vuestro móvil

273
00:20:20,069 --> 00:20:21,390
para poder instalar la aplicación.

274
00:20:21,390 --> 00:20:34,109
Y este es el que os vamos a pedir que nos envíéis cuando tengáis que entregar la tarea, es decir, descargáis el APK, lo guardáis en vuestro ordenador y lo subiríais al aula virtual como resultado, como muestra de que habéis finalizado esta tarea.

275
00:20:34,809 --> 00:20:48,430
Bueno, pues espero que este tutorial os haya servido, creo que no me he dejado ningún paso por medio, había un error por aquí, que es esta imagen que se nos ha perdido, voy a investigar ahora ya una vez que termine el tutorial cómo solucionarlo y cuando dé con la solución os lo cuento en clase.