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

Integración con APIs REST

Siguiente ►
►

En esta lección, aprenderemos cómo integrar APIs REST en una aplicación React Native. Las APIs REST son una forma común de interactuar con servicios web y obtener datos. Utilizaremos la biblioteca axios para realizar solicitudes HTTP y manejar las respuestas.

Objetivos de la Lección

  • Comprender qué es una API REST.
  • Configurar axios para realizar solicitudes HTTP.
  • Realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) con una API REST.
  • Manejar respuestas y errores de la API.

¿Qué es una API REST?

Una API REST (Representational State Transfer) es un conjunto de reglas que permiten a los sistemas comunicarse entre sí a través de HTTP. Las APIs RESTful utilizan métodos HTTP estándar como GET, POST, PUT y DELETE para realizar operaciones CRUD.

Configuración de axios

Primero, necesitamos instalar axios en nuestro proyecto React Native. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

npm install axios

Realizando Solicitudes HTTP con axios

Vamos a crear un ejemplo práctico donde realizaremos operaciones CRUD con una API REST ficticia.

  1. Configuración Inicial

Primero, configuramos axios en nuestro proyecto. Creamos un archivo api.js para centralizar la configuración de axios.

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

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // URL base de la API
  timeout: 1000, // Tiempo de espera de la solicitud
  headers: { 'Content-Type': 'application/json' }
});

export default api;

  1. Realizando una Solicitud GET

Vamos a obtener una lista de usuarios desde la API.

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

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await api.get('/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    fetchUsers();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Lista de Usuarios</Text>
      <FlatList
        data={users}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.user}>
            <Text>{item.name}</Text>
            <Text>{item.email}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  user: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default App;

  1. Realizando una Solicitud POST

Vamos a crear un nuevo usuario en la API.

// App.js (continuación)
import { Button, TextInput } from 'react-native';

const App = () => {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const addUser = async () => {
    try {
      const response = await api.post('/users', { name, email });
      setUsers([...users, response.data]);
    } catch (error) {
      console.error('Error adding user:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Lista de Usuarios</Text>
      <TextInput
        style={styles.input}
        placeholder="Nombre"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <Button title="Agregar Usuario" onPress={addUser} />
      <FlatList
        data={users}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.user}>
            <Text>{item.name}</Text>
            <Text>{item.email}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  // ... estilos anteriores
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
  },
});

  1. Realizando una Solicitud PUT

Vamos a actualizar un usuario existente.

const updateUser = async (id, updatedName, updatedEmail) => {
  try {
    const response = await api.put(`/users/${id}`, { name: updatedName, email: updatedEmail });
    setUsers(users.map(user => (user.id === id ? response.data : user)));
  } catch (error) {
    console.error('Error updating user:', error);
  }
};

  1. Realizando una Solicitud DELETE

Vamos a eliminar un usuario.

const deleteUser = async (id) => {
  try {
    await api.delete(`/users/${id}`);
    setUsers(users.filter(user => user.id !== id));
  } catch (error) {
    console.error('Error deleting user:', error);
  }
};

Ejercicio Práctico

  1. Objetivo: Crear una aplicación que permita listar, agregar, actualizar y eliminar usuarios utilizando una API REST.
  2. Instrucciones:
    • Configura axios como se muestra en la lección.
    • Implementa las funciones para realizar solicitudes GET, POST, PUT y DELETE.
    • Crea una interfaz de usuario que permita interactuar con estas funciones.

Solución del Ejercicio

// App.js (solución completa)
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet, TextInput, Button } from 'react-native';
import api from './api';

const App = () => {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [editingUser, setEditingUser] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await api.get('/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    fetchUsers();
  }, []);

  const addUser = async () => {
    try {
      const response = await api.post('/users', { name, email });
      setUsers([...users, response.data]);
      setName('');
      setEmail('');
    } catch (error) {
      console.error('Error adding user:', error);
    }
  };

  const updateUser = async (id) => {
    try {
      const response = await api.put(`/users/${id}`, { name, email });
      setUsers(users.map(user => (user.id === id ? response.data : user)));
      setEditingUser(null);
      setName('');
      setEmail('');
    } catch (error) {
      console.error('Error updating user:', error);
    }
  };

  const deleteUser = async (id) => {
    try {
      await api.delete(`/users/${id}`);
      setUsers(users.filter(user => user.id !== id));
    } catch (error) {
      console.error('Error deleting user:', error);
    }
  };

  const handleEdit = (user) => {
    setEditingUser(user.id);
    setName(user.name);
    setEmail(user.email);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Lista de Usuarios</Text>
      <TextInput
        style={styles.input}
        placeholder="Nombre"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <Button
        title={editingUser ? "Actualizar Usuario" : "Agregar Usuario"}
        onPress={editingUser ? () => updateUser(editingUser) : addUser}
      />
      <FlatList
        data={users}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.user}>
            <Text>{item.name}</Text>
            <Text>{item.email}</Text>
            <Button title="Editar" onPress={() => handleEdit(item)} />
            <Button title="Eliminar" onPress={() => deleteUser(item.id)} />
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  user: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
  },
});

export default App;

Conclusión

En esta lección, hemos aprendido cómo integrar APIs REST en una aplicación React Native utilizando axios. Hemos cubierto cómo realizar operaciones CRUD y manejar respuestas y errores de la API. Con estos conocimientos, puedes interactuar con cualquier API RESTful y construir aplicaciones más dinámicas y funcionales.

En la siguiente lección, exploraremos conceptos avanzados como la API de Contexto y los Hooks en React Native. ¡Sigue adelante!

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