Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

frontend conectar

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 17 de abril de 2017 por Esther C.

108 visualizaciones

Cómo hacer el frontend en App inventor para poder conectar el móvil con un placa zum de bq

Más información Transcripción

Descargar la transcripción

Hola chicos, voy a subiros un par de vídeos para explicaros cómo conectar el móvil y la placa Zoom. 00:00:00
Voy a dividirlo en dos, uno para el front-end y otro para el back-end. 00:00:07
Empezamos por el front-end, en la página de App Inventor, en vuestro usuario, en la zona del diseñador. 00:00:11
Necesitamos poner primero qué vamos a utilizar. 00:00:21
Aquí ya acabo de sacar, voy a borrarlo. 00:00:24
sacamos un botón que vamos a utilizar para desconectar el móvil y la placa 00:00:27
y para conectarlo vamos a tener aquí que se vea otro botón 00:00:38
pero en realidad aunque tiene la misma pinta no es un botón 00:00:43
es un list speaker porque necesitamos buscar con el bluetooth a lo que queremos conectarnos 00:00:45
entonces como lo vamos a poner un poquito más bonito 00:00:52
lo ponemos los dos para que tenga la misma forma que las fotos que os he subido al archivo del drive 00:00:57
lo vamos a poner dentro de una estantería que está aquí 00:01:06
cogemos una estantería horizontal y la ponemos aquí 00:01:10
y dentro vamos a poner los dos botones 00:01:14
para que ocupe todo el espacio ya lo hemos hablado 00:01:19
vamos aquí a anchura 00:01:28
y en vez de poner automática 00:01:31
ponemos fill parent 00:01:33
estamos en el botón 00:01:35
le damos a ok 00:01:38
ahora al list picker 00:01:39
también lo ponemos que ocupe todo 00:01:41
y en la estantería 00:01:45
también 00:01:47
ahora ya tenemos 00:01:50
que ocupa todo el espacio 00:01:55
también podéis cambiar los colores 00:01:57
y todo lo que queréis para hacerlo más bonito 00:02:00
Pero en el vídeo vamos a ir a lo básico. 00:02:02
Vamos a cambiar los nombres de los botones para que sepamos qué es lo que hace cada uno. 00:02:04
Aquí, en texto, ponemos conectar, porque es el del list picker. 00:02:11
Vamos a poner, y ya, pone conectar. 00:02:19
Y en el botón vamos a poner desconectar. 00:02:29
Vale, muy bien. 00:02:42
También vamos a cambiarle el nombre para la zona del programa 00:02:43
Pero como ahora mismo no me acuerdo de cómo lo he llamado 00:02:49
Vale, al list picker le he llamado 00:02:52
Le vamos a tener que nombrarle aquí 00:03:02
Le he llamado list picker 00:03:03
Para que recordéis que es un list picker, no es un botón 00:03:07
Y conectar, porque es con el list picker que vamos a conectar 00:03:11
Ok. Y al botón le he llamado botón desconectar. 00:03:15
Botón en inglés, porque deja igual, desconectar. 00:03:27
Estos son con los nombres con los que los vais a ver cuando nos vayamos a la zona de bloques. 00:03:33
Aquí en bloques tenemos el list ticker conectar y el botón desconectar. 00:03:40
Vale, volvemos al diseñador. 00:03:48
Tenemos un botón para conectar y uno para desconectar. 00:03:50
Como lo que vamos a hacer con la placa con BitBlock es encender y apagar un LED, 00:03:54
vamos a poner también un botón que sea el que cuando le doy se encienda el LED 00:04:02
y otro que cuando le doy se apague el LED. 00:04:07
Entonces vamos a poner estos en una vertical, creo que le he puesto, un momento, en una estantería vertical para cambiar un poco 00:04:10
Y ponemos aquí dos botones, vamos a 206, un botón y otro botón, vale 00:04:23
Los cambiamos el nombre también, al botón 1 le llamamos conectar, le vamos a llamar encender porque conectar ya hemos llamado a luz 00:04:38
Vale, el botón 2, venimos aquí, borramos esto, y le nombramos como apagar. 00:04:54
Aquí lo vamos a llamar igual también. 00:05:18
Pero recordad que el nombre que tiene aquí no tiene por qué ser el mismo que el que se ve en la pantalla del móvil. 00:05:20
El que tiene aquí tiene que ser un nombre que os resulte cómodo a la hora de programar. 00:05:34
Vale, pues ya tenemos lo que necesitamos 00:05:38
Un botón para conectar, un botón para desconectar 00:05:47
Un botón para encender, un botón para apagar 00:05:50
Os recomiendo que practiquéis un ratito y le cambiéis de color 00:05:53
Por ejemplo, al apagar le llamemos, le pongamos gris 00:05:56
Y al encender, pues como los LEDs suelen ser de color verde 00:06:01
Les podemos poner verde o el color que más os guste 00:06:06
Le podéis poner circular, le podéis poner que ocupe más espacio 00:06:08
bueno, podéis jugar con ellos y hacerlo como más os guste 00:06:12
pero lo que es importante es que estén los cuatro botones 00:06:15
uno para conectar y otro para desconectar 00:06:18
y uno para encender el LED y otro para apagar el LED 00:06:21
por ahora en este vídeo nada más 00:06:24
voy a seguir con el otro en el que vamos a ver 00:06:28
qué hacemos con la parte de la programación en el backend 00:06:31
hasta luego 00:06:35
Subido por:
Esther C.
Licencia:
Dominio público
Visualizaciones:
108
Fecha:
17 de abril de 2017 - 20:41
Visibilidad:
Público
Centro:
CPR INF-PRI-SEC SANTO ANGEL LA DEHESA
Duración:
06′ 39″
Relación de aspecto:
2.16:1
Resolución:
1332x616 píxeles
Tamaño:
14.55 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid