Desarrollar una aplicación móvil tipo cliente ligero que muestre:

• Clima actual según la ubicación del usuario.

• Pronóstico básico para las siguientes horas o días.

1. Tener Node.js instalado.

2. Crear una cuenta en OpenWeatherMap para obtener tu API Key.

3. Tener Expo CLI:

npm install -g expo-cli

npx create-expo-app clima-app

Entra a tu proyecto:

cd clima-app

expo install expo-location 
npm install axios

• expo-location → para acceder a la ubicación del dispositivo.

• axios → para hacer peticiones HTTP a la API del clima.

En App.js o App.tsx:

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import * as Location from 'expo-location';
import axios from 'axios';

export default function App() {
  const [location, setLocation] = useState(null);
  const [forecast, setForecast] = useState(null);
  const [loading, setLoading] = useState(true);

  const API_KEY = 'TU-API-KEY';

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        alert('Permiso denegado');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location.coords);

      const { latitude, longitude } = location.coords;

      try {
        const response = await axios.get(
          `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric&lang=es`
        );
        setForecast(response.data);
      } catch (error) {
        alert('Error al obtener datos del clima');
      }

      setLoading(false);
    })();
  }, []);

  if (loading) {
  return <ActivityIndicator style={{ flex: 1 }} size="large" />;
}

if (!forecast) {
  return <Text>No se pudo obtener el clima.</Text>;
}

return (
  <View style={styles.container}>
    <Text style={styles.city}>{forecast.name}</Text>
    <Text style={styles.temp}>{forecast.main.temp}°C</Text>
    <Text>{forecast.weather[0].description}</Text>
  </View>
);

}

const styles = StyleSheet.create({
  container: {
    flex: 1, alignItems: 'center', justifyContent: 'center',
  },
  city: {
    fontSize: 28, fontWeight: 'bold',
  },
  temp: {
    fontSize: 48, color: '#2196f3',
  },
});

Puedes usar la API de pronóstico de OpenWeatherMap:

https://api.openweathermap.org/data/2.5/forecast

Esto devuelve el pronóstico por bloques de 3 horas. Puedes mostrar los siguientes 3 o 5 bloques.

• Usa el emulador de Expo Go en Android/iOS o en web.

• Desactiva el GPS para ver cómo se comporta.

• Cambia la API a una ciudad fija si no deseas usar ubicación.

• Cómo un cliente ligero solicita datos al servidor (clima).

• El procesamiento ocurre del lado del servidor, y el cliente solo los muestra.

• Uso de Expo para desarrollo rápido multiplataforma.

• Documentación Expo Location: https://docs.expo.dev/versions/latest/sdk/location/

• Documentación OpenWeatherMap: https://openweathermap.org/current

Mas info:

https://www.frexus.dev/post/clientes-ligeros/