El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Projecte 2: Aplicació del temps

Següent ►
►

En aquest projecte, construirem una aplicació del temps utilitzant React Native. Aquesta aplicació permetrà als usuaris veure la informació meteorològica actual per a una ubicació específica. Aprendrem a obtenir dades d'una API externa, gestionar l'estat de l'aplicació i mostrar la informació de manera atractiva.

Objectius del projecte

  • Obtenir dades meteorològiques d'una API externa.
  • Gestionar l'estat de l'aplicació amb Hooks.
  • Mostrar dades meteorològiques de manera clara i atractiva.
  • Implementar una interfície d'usuari responsiva.

Requisits previs

  • Coneixements bàsics de React Native.
  • Familiaritat amb l'ús de Fetch API o Axios per a sol·licituds HTTP.
  • Comprensió bàsica de l'estat i els efectes en React (useState, useEffect).

Passos del projecte

  1. Configuració inicial del projecte

Comencem creant un nou projecte de React Native.

npx react-native init WeatherApp
cd WeatherApp

  1. Instal·lació de dependències necessàries

Instal·larem Axios per gestionar les sol·licituds HTTP.

npm install axios

  1. Obtenir una API Key

Registra't a un servei d'API meteorològica com OpenWeatherMap i obté una API Key.

  1. Estructura del projecte

Organitzarem el projecte de la següent manera:

WeatherApp/
├── App.js
├── components/
│   ├── WeatherInfo.js
│   ├── WeatherForm.js
├── utils/
│   └── api.js

  1. Crear el component WeatherForm

Aquest component permetrà als usuaris introduir una ubicació per obtenir la informació meteorològica.

// components/WeatherForm.js
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

const WeatherForm = ({ onSubmit }) => {
  const [location, setLocation] = useState('');

  const handleSubmit = () => {
    onSubmit(location);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter location"
        value={location}
        onChangeText={setLocation}
      />
      <Button title="Get Weather" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default WeatherForm;

  1. Crear el component WeatherInfo

Aquest component mostrarà la informació meteorològica.

// components/WeatherInfo.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const WeatherInfo = ({ weather }) => {
  if (!weather) return null;

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

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    margin: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  temp: {
    fontSize: 48,
    fontWeight: 'bold',
  },
  description: {
    fontSize: 18,
    fontStyle: 'italic',
  },
});

export default WeatherInfo;

  1. Crear la funció d'obtenció de dades

Crearem una funció per obtenir les dades meteorològiques des de l'API.

// utils/api.js
import axios from 'axios';

const API_KEY = 'YOUR_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

export const fetchWeather = async (location) => {
  try {
    const response = await axios.get(BASE_URL, {
      params: {
        q: location,
        units: 'metric',
        appid: API_KEY,
      },
    });
    return response.data;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

  1. Integrar tot a App.js

Finalment, integrem tots els components i la funció d'obtenció de dades a l'arxiu principal de l'aplicació.

// App.js
import React, { useState } from 'react';
import { SafeAreaView, StyleSheet, Text } from 'react-native';
import WeatherForm from './components/WeatherForm';
import WeatherInfo from './components/WeatherInfo';
import { fetchWeather } from './utils/api';

const App = () => {
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState(null);

  const handleFetchWeather = async (location) => {
    try {
      const data = await fetchWeather(location);
      setWeather(data);
      setError(null);
    } catch (err) {
      setError('Could not fetch weather data');
      setWeather(null);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <WeatherForm onSubmit={handleFetchWeather} />
      {error && <Text style={styles.error}>{error}</Text>}
      <WeatherInfo weather={weather} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  error: {
    color: 'red',
    textAlign: 'center',
  },
});

export default App;

  1. Provar l'aplicació

Executa l'aplicació per assegurar-te que tot funciona correctament.

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

Exercicis pràctics

  1. Afegir més informació meteorològica: Extén l'aplicació per mostrar més dades com la humitat, la velocitat del vent, etc.
  2. Estilització avançada: Millora l'estilització de l'aplicació per fer-la més atractiva.
  3. Gestió d'errors: Implementa una millor gestió d'errors per mostrar missatges d'error més detallats als usuaris.

Conclusió

En aquest projecte, hem creat una aplicació del temps utilitzant React Native. Hem après a obtenir dades d'una API externa, gestionar l'estat de l'aplicació i mostrar la informació de manera atractiva. Aquest projecte ens ha proporcionat una bona base per a desenvolupar aplicacions més complexes en el futur.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats