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

Integració amb APIs REST

Següent ►
►

En aquest tema, aprendrem com integrar APIs REST en una aplicació React Native. Les APIs REST són una manera estàndard de comunicar-se amb serveis web i obtenir dades. Utilitzarem la biblioteca axios per fer sol·licituds HTTP i gestionar les respostes.

Objectius

  • Comprendre què és una API REST.
  • Aprendre a fer sol·licituds GET, POST, PUT i DELETE amb axios.
  • Gestionar respostes i errors de les sol·licituds HTTP.
  • Integrar les dades obtingudes en els components de React Native.

Què és una API REST?

Una API REST (Representational State Transfer) és un conjunt de regles que permeten la interacció entre clients i servidors a través del protocol HTTP. Les operacions principals són:

  • GET: Obtenir dades.
  • POST: Enviar dades.
  • PUT: Actualitzar dades.
  • DELETE: Eliminar dades.

Instal·lació d'axios

Primer, hem d'instal·lar axios a la nostra aplicació React Native. Executa la següent comanda al terminal:

npm install axios

Exemple pràctic: Integració d'una API REST

  1. Configuració bàsica d'axios

Crea un fitxer api.js per configurar axios amb la URL base de l'API:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // Exemple d'API pública
});

export default api;

  1. Fer una sol·licitud GET

En aquest exemple, obtindrem una llista de publicacions des de l'API i les mostrarem en un component de React Native.

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import api from './api';

const PostList = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await api.get('/posts');
        setPosts(response.data);
      } catch (error) {
        console.error('Error fetching posts:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <Text>Loading...</Text>;
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.post}>
            <Text style={styles.title}>{item.title}</Text>
            <Text>{item.body}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  post: {
    marginBottom: 16,
    padding: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default PostList;

  1. Fer una sol·licitud POST

Per enviar dades a l'API, utilitzarem una sol·licitud POST. Afegirem una funció per crear una nova publicació.

const createPost = async (title, body) => {
  try {
    const response = await api.post('/posts', {
      title,
      body,
      userId: 1,
    });
    console.log('Post created:', response.data);
  } catch (error) {
    console.error('Error creating post:', error);
  }
};

// Exemple d'ús
createPost('New Post', 'This is the body of the new post');

  1. Fer una sol·licitud PUT

Per actualitzar una publicació existent, utilitzarem una sol·licitud PUT.

const updatePost = async (id, title, body) => {
  try {
    const response = await api.put(`/posts/${id}`, {
      title,
      body,
      userId: 1,
    });
    console.log('Post updated:', response.data);
  } catch (error) {
    console.error('Error updating post:', error);
  }
};

// Exemple d'ús
updatePost(1, 'Updated Post', 'This is the updated body of the post');

  1. Fer una sol·licitud DELETE

Per eliminar una publicació, utilitzarem una sol·licitud DELETE.

const deletePost = async (id) => {
  try {
    await api.delete(`/posts/${id}`);
    console.log('Post deleted');
  } catch (error) {
    console.error('Error deleting post:', error);
  }
};

// Exemple d'ús
deletePost(1);

Exercici pràctic

Objectiu

Crea una aplicació que permeti als usuaris veure una llista de tasques, afegir noves tasques, actualitzar tasques existents i eliminar tasques utilitzant una API REST.

Passos

  1. Configura l'API: Utilitza axios per configurar l'API amb la URL base.
  2. Llista de tasques: Crea un component que mostri una llista de tasques obtingudes de l'API.
  3. Afegir tasques: Afegeix funcionalitat per crear noves tasques.
  4. Actualitzar tasques: Afegeix funcionalitat per actualitzar tasques existents.
  5. Eliminar tasques: Afegeix funcionalitat per eliminar tasques.

Solució

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

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // Exemple d'API pública
});

export default api;

// TaskList.js
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, TextInput, Button, StyleSheet } from 'react-native';
import api from './api';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [newTask, setNewTask] = useState('');

  useEffect(() => {
    const fetchTasks = async () => {
      try {
        const response = await api.get('/todos');
        setTasks(response.data);
      } catch (error) {
        console.error('Error fetching tasks:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchTasks();
  }, []);

  const addTask = async () => {
    try {
      const response = await api.post('/todos', {
        title: newTask,
        completed: false,
      });
      setTasks([...tasks, response.data]);
      setNewTask('');
    } catch (error) {
      console.error('Error adding task:', error);
    }
  };

  const updateTask = async (id, completed) => {
    try {
      const response = await api.put(`/todos/${id}`, {
        completed,
      });
      setTasks(tasks.map(task => (task.id === id ? response.data : task)));
    } catch (error) {
      console.error('Error updating task:', error);
    }
  };

  const deleteTask = async (id) => {
    try {
      await api.delete(`/todos/${id}`);
      setTasks(tasks.filter(task => task.id !== id));
    } catch (error) {
      console.error('Error deleting task:', error);
    }
  };

  if (loading) {
    return <Text>Loading...</Text>;
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="New Task"
        value={newTask}
        onChangeText={setNewTask}
      />
      <Button title="Add Task" onPress={addTask} />
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.task}>
            <Text style={styles.title}>{item.title}</Text>
            <Button
              title={item.completed ? 'Mark Incomplete' : 'Mark Complete'}
              onPress={() => updateTask(item.id, !item.completed)}
            />
            <Button title="Delete" onPress={() => deleteTask(item.id)} />
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
  task: {
    marginBottom: 16,
    padding: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default TaskList;

Conclusió

En aquest tema, hem après a integrar APIs REST en una aplicació React Native utilitzant axios. Hem vist com fer sol·licituds GET, POST, PUT i DELETE, i com gestionar les respostes i errors. També hem creat una aplicació pràctica per gestionar una llista de tasques. Amb aquests coneixements, estàs preparat per treballar amb APIs REST en les teves aplicacions React Native.

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