Embedded Files
Pasos para crear una aplicación en MIT App Inventor usando una API (Clima y Hora)
Pasos para crear una aplicación en MIT App Inventor usando una API (Clima y Hora)
1. Comprender qué es una API
1. Comprender qué es una API
El primer paso es entender el concepto de API (Application Programming Interface). Una API es un sistema que permite que una aplicación se conecte a un servidor de internet para solicitar información. Proceso:
La aplicación envía una solicitud al servidor.
El servidor procesa la solicitud.
Devuelve la información solicitada.
Ejemplo de información que puede devolver una API:
Clima de una ciudad
Hora de un país
Precio de una moneda
Datos científicos
2. Json
2. Json
La información que devuelve la API suele venir en formato JSON (JavaScript Object Notation).
JSON es una estructura de datos organizada en forma de:
claves (keys)
valores (values)
Ejemplo simplificado:
{
"current": {
"temperature": 23,
"windspeed": 5
}
}
Para acceder a los datos hay que navegar por esa estructura.
En el ejemplo:
current → temperature
3. Probar la API en el navegador
3. Probar la API en el navegador
Antes de usar la API en la app, se debe de probar en el navegador. Pasos:
Copiar la URL de la API.
Pegarlo en el navegador.
Ejecutarlo.
Observar los datos JSON que devuelve.
Ejemplo de API usada en el vídeo:
API del clima basada en:
latitud
longitud
Ejemplo:
latitude=19.04
longitude=-98.20
Esto devuelve el clima de Puebla.
4. Analizar la estructura JSON
4. Analizar la estructura JSON
Una vez obtenida la respuesta JSON, se analiza su estructura.
Ejemplo de jerarquía:
current
├── temperature_2m
└── windspeed
Para obtener la temperatura se debe acceder a:
current → temperature_2m
Diseño de la aplicación en App Inventor
Diseño de la aplicación en App Inventor
5. Crear la interfaz de la app
5. Crear la interfaz de la app
En el Designer de App Inventor se añaden los componentes. Componentes utilizados:
Elementos visuales
Elementos visuales
Labels (Etiquetas)
Para mostrar:temperatura
velocidad del viento
hora
Buttons (Botones)
Para iniciar las consultas.
Ejemplo:
Botón Consulta (para obtener clima)
Botón Time (para iniciar relojes)
Componentes de conexión a internet
Componentes de conexión a internet
Se utilizan componentes Web o WebViewer.
Se añade un WebViewer por cada consulta.
Ejemplo:
WebViewer clima Puebla
WebViewer hora Los Ángeles
WebViewer hora Londres
WebViewer hora Hong Kong
Cada uno usará una URL diferente.
Componente reloj (Clock)
Componente reloj (Clock)
Se añade un componente:
Clock
Configuración:
TimerEnabled → false
TimerAlwaysFires → false
TimerInterval → 1000 ms
Esto permite ejecutar acciones cada segundo
Programación con bloques
Programación con bloques
6. Configurar el botón de consulta
6. Configurar el botón de consulta
Cuando se presiona el botón:
Se establece la URL de la API
Se ejecuta una solicitud GET
Bloques:
Button.Click
set Web.URL
call Web.Get
Esto envía la solicitud al servidor.
7. Comprobar si la solicitud funciona
7. Comprobar si la solicitud funciona
Cuando llega la respuesta del servidor se verifica el código HTTP.
Si el código es:
200
significa que la solicitud fue correcta.
Bloque lógico:
if responseCode = 200
8. Convertir el JSON en un diccionario
8. Convertir el JSON en un diccionario
La respuesta JSON se convierte en un diccionario dentro de App Inventor.
Bloque utilizado:
decode JSON to dictionary
Esto permite acceder a los datos.
9. Guardar la información en una lista
9. Guardar la información en una lista
Se crea una lista vacía:
create empty list
Y se guarda allí el diccionario con todos los datos.
10. Extraer los datos necesarios
10. Extraer los datos necesarios
Ahora se accede a las claves del JSON.
Ejemplo:
Primero se accede a:
current
Después a:
temperature_2m
Esto devuelve el valor real de la temperatura.
11. Mostrar los datos en la pantalla
11. Mostrar los datos en la pantalla
El valor obtenido se envía a un Label.
Ejemplo:
set LabelTemperature.Text
Se hace lo mismo con:
velocidad del viento
otros datos.
Aplicación para la hora de diferentes ciudades
Aplicación para la hora de diferentes ciudades
12. Usar otra API para el tiempo
12. Usar otra API para el tiempo
Se usa otra API que devuelve:
year
month
day
hour
minute
second
En este caso los datos están en una sola estructura, por lo que es más fácil acceder.
13. Crear WebViewer para cada ciudad
13. Crear WebViewer para cada ciudad
Se crean tres WebViewer:
Los Ángeles
Londres
Hong Kong
Cada uno tiene una URL diferente.
14. Usar el Clock para actualizar la hora
14. Usar el Clock para actualizar la hora
Cada segundo el reloj ejecuta:
Solicitud a la API
Recepción de datos
Extracción de:
hora
minuto
segundo
15. Construir el reloj en pantalla
15. Construir el reloj en pantalla
Los valores obtenidos se combinan:
hora : minuto : segundo
Y se muestran en las etiquetas de la app.
Funcionamiento final de la app
Funcionamiento final de la app
La aplicación permite:
Consultar el clima en tiempo real de una ciudad.
Mostrar la hora de diferentes países.
Actualizar la información automáticamente.
Todo esto se consigue mediante:
APIs de internet
JSON
componentes Web
programación por bloques.
Page updated
Google Sites
Report abuse