El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Proyecto 2: Aplicación del Clima

Siguiente ►
►

En este proyecto, desarrollaremos una aplicación del clima utilizando React Native. La aplicación permitirá a los usuarios ingresar una ciudad y obtener información meteorológica actualizada. Este proyecto consolidará los conocimientos adquiridos en los módulos anteriores y te dará experiencia práctica en la integración de APIs y manejo de datos en tiempo real.

Objetivos del Proyecto

  • Crear una interfaz de usuario intuitiva para ingresar y mostrar datos del clima.
  • Integrar una API de clima para obtener datos en tiempo real.
  • Manejar el estado y el ciclo de vida de los componentes.
  • Implementar navegación básica entre pantallas.

Requisitos Previos

Antes de comenzar, asegúrate de tener conocimientos sobre:

  • Componentes y Props
  • Estado y Ciclo de Vida
  • Manejo de Eventos
  • Navegación en React Native
  • Fetch API o Axios para solicitudes HTTP

Estructura del Proyecto

  1. Configuración Inicial
  2. Diseño de la Interfaz de Usuario
  3. Integración de la API de Clima
  4. Manejo del Estado y Renderizado Condicional
  5. Navegación entre Pantallas
  6. Pruebas y Depuración

  1. Configuración Inicial

Paso 1: Crear un Nuevo Proyecto

Primero, crea un nuevo proyecto de React Native utilizando npx react-native init:

npx react-native init WeatherApp
cd WeatherApp

Paso 2: Instalar Dependencias Necesarias

Instala las bibliotecas necesarias para la navegación y las solicitudes HTTP:

npm install @react-navigation/native @react-navigation/stack axios
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Paso 3: Configurar la Navegación

Configura la navegación en tu proyecto. Crea un archivo Navigation.js en la carpeta src:

// src/Navigation.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import WeatherScreen from './screens/WeatherScreen';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Weather" component={WeatherScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

  1. Diseño de la Interfaz de Usuario

Paso 1: Crear Pantallas Básicas

Crea dos pantallas básicas: HomeScreen y WeatherScreen.

// src/screens/HomeScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  const [city, setCity] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Weather App</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter city"
        value={city}
        onChangeText={setCity}
      />
      <Button
        title="Get Weather"
        onPress={() => navigation.navigate('Weather', { city })}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  title: {
    fontSize: 24,
    marginBottom: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    paddingHorizontal: 8,
    width: '80%',
  },
});

export default HomeScreen;
// src/screens/WeatherScreen.js
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import axios from 'axios';

const WeatherScreen = ({ route }) => {
  const { city } = route.params;
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchWeather = async () => {
      try {
        const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`);
        setWeather(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchWeather();
  }, [city]);

  if (loading) {
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.container}>
        <Text>Error: {error}</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{weather.name}</Text>
      <Text>Temperature: {Math.round(weather.main.temp - 273.15)}°C</Text>
      <Text>Weather: {weather.weather[0].description}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  title: {
    fontSize: 24,
    marginBottom: 16,
  },
});

export default WeatherScreen;

  1. Integración de la API de Clima

Paso 1: Obtener una API Key

Regístrate en OpenWeatherMap y obtén una API Key.

Paso 2: Realizar Solicitudes HTTP

Utiliza Axios para realizar solicitudes HTTP a la API de OpenWeatherMap.

// src/screens/WeatherScreen.js (modificado)
useEffect(() => {
  const fetchWeather = async () => {
    try {
      const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`);
      setWeather(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchWeather();
}, [city]);

  1. Manejo del Estado y Renderizado Condicional

Paso 1: Manejar el Estado de Carga y Errores

Asegúrate de manejar el estado de carga y los errores adecuadamente.

// src/screens/WeatherScreen.js (modificado)
if (loading) {
  return (
    <View style={styles.container}>
      <Text>Loading...</Text>
    </View>
  );
}

if (error) {
  return (
    <View style={styles.container}>
      <Text>Error: {error}</Text>
    </View>
  );
}

  1. Navegación entre Pantallas

Paso 1: Navegar desde HomeScreen a WeatherScreen

Utiliza navigation.navigate para pasar la ciudad ingresada a la pantalla de clima.

// src/screens/HomeScreen.js (modificado)
<Button
  title="Get Weather"
  onPress={() => navigation.navigate('Weather', { city })}
/>

  1. Pruebas y Depuración

Paso 1: Probar la Aplicación

Ejecuta la aplicación en un simulador o dispositivo físico para asegurarte de que todo funcione correctamente.

npx react-native run-android
# o
npx react-native run-ios

Paso 2: Depurar Errores

Utiliza las herramientas de depuración de React Native para identificar y corregir cualquier error.

Conclusión

En este proyecto, has aprendido a:

  • Configurar un nuevo proyecto de React Native.
  • Diseñar una interfaz de usuario básica.
  • Integrar una API de clima para obtener datos en tiempo real.
  • Manejar el estado y el ciclo de vida de los componentes.
  • Implementar navegación entre pantallas.

Este proyecto te ha proporcionado una experiencia práctica valiosa en el desarrollo de aplicaciones móviles con React Native. ¡Felicidades por completar el proyecto de la aplicación del clima! Ahora estás listo para abordar proyectos más complejos y desafiantes.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados