Práctica: Desarrollar y probar la app completa

Concepto clave

Desarrollar una app completa de comercio electrónico con React Native y Expo implica integrar múltiples componentes que funcionen como un sistema unificado. Piensa en esto como construir una tienda física: necesitas un mostrador de productos (catálogo), una caja registradora (carrito y checkout), y personal de atención (gestión de pedidos y usuarios). La clave está en que todos estos elementos se comuniquen entre sí de manera fluida, manteniendo el estado consistente a través de la navegación y las interacciones del usuario.

En el contexto técnico, esto significa dominar el manejo de estado global (con herramientas como Context API o Redux), la navegación entre pantallas (usando React Navigation), y la integración con APIs externas para datos en tiempo real. Un error común es tratar cada pantalla como un silo independiente; en realidad, deben ser partes de un flujo coherente donde los datos persistan y se actualicen según las acciones del usuario, similar a cómo un cliente en una tienda real puede agregar productos al carrito, ver su total, y proceder al pago sin perder información.

Cómo funciona en la práctica

Vamos a construir el flujo principal de nuestra app de comercio electrónico, desde la pantalla de productos hasta la confirmación de pedido. Primero, configuraremos la navegación con un stack para el catálogo y un tab para el carrito. Luego, implementaremos un contexto global para manejar el estado del carrito, asegurando que los productos agregados se reflejen en todas las pantallas. Finalmente, conectaremos con una API simulada para cargar productos y enviar pedidos.

Paso a paso: 1) Crea un componente CartContext que provea funciones para agregar, eliminar y calcular el total del carrito. 2) Configura React Navigation con un Stack Navigator para la pantalla de detalles del producto y un Tab Navigator para el carrito. 3) En la pantalla de productos, usa FlatList para renderizar items y botones que disparen las funciones del contexto. 4) En la pantalla de checkout, valida los datos del usuario y envía una solicitud POST a la API. Este enfoque asegura que la app sea escalable y fácil de mantener, como organizar una tienda con secciones claras y un inventario centralizado.

Codigo en accion

Aquí tienes un ejemplo funcional del contexto del carrito y cómo integrarlo en una pantalla de productos. Primero, el contexto:

// CartContext.js
import React, { createContext, useState, useContext } from 'react';

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (product) => {
    setCartItems(prevItems => {
      const existingItem = prevItems.find(item => item.id === product.id);
      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prevItems, { ...product, quantity: 1 }];
    });
  };

  const removeFromCart = (productId) => {
    setCartItems(prevItems => prevItems.filter(item => item.id !== productId));
  };

  const getTotalPrice = () => {
    return cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
  };

  return (
    
      {children}
    
  );
};

export const useCart = () => useContext(CartContext);

Ahora, cómo usarlo en una pantalla de productos:

// ProductScreen.js
import React from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import { useCart } from './CartContext';

const ProductScreen = ({ products }) => {
  const { addToCart } = useCart();

  const renderItem = ({ item }) => (
    
      {item.name}
      Precio: ${item.price}
      
  );

  return (
     item.id.toString()}
    />
  );
};

export default ProductScreen;

Errores comunes

• No manejar el estado de carga y error en las peticiones API: Esto puede causar que la app se bloquee o muestre interfaces rotas. Siempre usa estados como loading y error, y muestra indicadores o mensajes apropiados.
• Olvidar optimizar listas largas: Usar ScrollView en lugar de FlatList para listas grandes puede afectar el rendimiento. FlatList renderiza solo los items visibles, mejorando la eficiencia.
• No probar en ambos dispositivos (iOS y Android): Las diferencias en estilos y comportamientos pueden llevar a bugs. Usa Expo Go para probar en dispositivos reales o emuladores regularmente.
• Ignorar la persistencia de datos: Si el carrito se borra al recargar la app, frustra al usuario. Integra AsyncStorage o una base de datos local para guardar el estado entre sesiones.
• No validar entradas en formularios: En el checkout, falta validar emails o números de tarjeta puede causar errores en el backend. Usa librerías como Formik y Yup para validaciones robustas.

Checklist de dominio

1. Configurar y usar React Navigation para manejar al menos 3 pantallas con stack y tab navigators.
2. Implementar un contexto global o Redux para manejar el estado del carrito y actualizarlo en tiempo real.
3. Integrar una API REST para cargar productos y enviar pedidos, manejando estados de carga y error.
4. Diseñar interfaces responsivas que se vean bien en iOS y Android, usando componentes de React Native.
5. Probar la app en un dispositivo físico o emulador, verificando la navegación y funcionalidades clave.
6. Optimizar el rendimiento usando FlatList para listas y memoización de componentes cuando sea necesario.
7. Agregar persistencia local para el carrito, de modo que los items sobrevivan a recargas de la app.

Implementar el flujo completo de compra en la app de comercio electrónico

Sigue estos pasos para construir y probar la funcionalidad principal de tu app:

1. Configura la navegación: Crea un Stack Navigator con dos pantallas: ProductList y ProductDetail. Agrega un Tab Navigator que incluya las pantallas de ProductList y Cart.
2. Implementa el contexto del carrito: Usa el código proporcionado en la lección para crear CartContext. Asegúrate de que las funciones addToCart, removeFromCart y getTotalPrice funcionen correctamente.
3. Desarrolla la pantalla de productos: En ProductList, consume una API simulada (puedes usar json-server o datos estáticos) para mostrar una lista de productos. Cada producto debe tener un botón para agregar al carrito.
4. Construye la pantalla del carrito: En Cart, muestra los items agregados, permitiendo eliminar productos y ver el total. Conecta un botón para navegar a Checkout.
5. Crea la pantalla de checkout: Implementa un formulario con campos para nombre, email y dirección. Al enviar, simula una petición POST a una API y muestra un mensaje de confirmación.
6. Prueba la app: Ejecuta la app en Expo Go en tu dispositivo o emulador. Verifica que puedas agregar productos, ver el carrito, y completar el checkout sin errores.

Pistas

• Usa React Navigation v6 para una configuración más sencilla; la documentación oficial tiene ejemplos de stack y tab navigators.
• Para simular la API, puedes crear un archivo products.json y usar fetch en un useEffect para cargar los datos.
• No olvides envolver tu app con CartProvider en el punto más alto (ej. App.js) para que el contexto esté disponible en todas las pantallas.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.