<100 subscribers

<100 subscribers

Share Dialog

Share Dialog

App de Clima en Tiempo Real con React Native + Expo

App de Clima en Tiempo Real con React Native + Expo

• 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/

• 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/