Diseño de la arquitectura y planificación del proyecto de e-commerce

Concepto clave

La arquitectura de software en React Native con Expo es como el plano de un edificio: define cómo se organizan y comunican las partes de tu app de e-commerce. En lugar de construir habitaciones al azar, planificas dónde irán los productos, el carrito y el checkout para que los usuarios naveguen sin perderse.

Imagina una tienda física: tienes la entrada (pantalla de inicio), pasillos (navegación), mostrador (carrito) y caja (pago). En React Native, esto se traduce en componentes, pantallas, estado global y servicios. Una arquitectura sólida evita que tu app se convierta en un "spaghetti code" donde cambiar un botón rompe todo el flujo de compra.

Cómo funciona en la práctica

Para nuestra app de e-commerce, seguiremos una arquitectura basada en componentes y estado global. Primero, definimos las pantallas principales: Home, ProductList, ProductDetail, Cart y Checkout. Luego, establecemos la navegación con React Navigation, usando un stack para el flujo de compra y un tab para secciones fijas.

El estado global (con Context API o Redux) manejará el carrito y el usuario. Los servicios se encargan de llamadas a APIs, como obtener productos o procesar pagos. Aquí un ejemplo de estructura de carpetas:

/src
  /components      # Componentes reutilizables (Header, ProductCard)
  /screens         # Pantallas principales
  /navigation      # Configuración de React Navigation
  /context         # Estado global (CartContext, UserContext)
  /services        # Llamadas a API y lógica de negocio
  /utils           # Funciones helper (formatear precios)
  /assets          # Imágenes y fuentes

Codigo en accion

Veamos cómo implementar el CartContext para manejar el estado del carrito. Primero, la versión básica sin optimizar:

// Antes: Estado local en cada pantalla
import React, { useState } from 'react';
const CartScreen = () => {
  const [cart, setCart] = useState([]);
  const addToCart = (product) => {
    setCart([...cart, product]);
  };
  return (
    // JSX con cart
  );
};

Después, refactorizado con Context API para estado global:

// Después: CartContext.js
import React, { createContext, useState, useContext } from 'react';
const CartContext = createContext();
export const CartProvider = ({ children }) => {
  const [cart, setCart] = useState([]);
  const addToCart = (product) => {
    setCart(prevCart => [...prevCart, product]);
  };
  const removeFromCart = (productId) => {
    setCart(prevCart => prevCart.filter(item => item.id !== productId));
  };
  return (
    
      {children}
    
  );
};
export const useCart = () => useContext(CartContext);
// Uso en cualquier pantalla
import { useCart } from '../context/CartContext';
const ProductDetail = ({ product }) => {
  const { addToCart } = useCart();
  return (
    
  );
};

Errores comunes

• No planificar la navegación: Usar navegación anidada sin estructura clara, causando pantallas inaccesibles. Solución: Dibuja un diagrama de flujo antes de codificar y usa React Navigation con rutas bien definidas.
• Estado duplicado: Tener el mismo dato (como el carrito) en múltiples componentes, llevando a inconsistencias. Solución: Centraliza el estado con Context API o Redux desde el inicio.
• Ignorar el rendimiento: Cargar todas las imágenes de productos a la vez, ralentizando la app. Solución: Implementa lazy loading para listas largas y optimiza assets con Expo Image.
• No manejar errores de API: Asumir que las llamadas a servicios siempre funcionan, mostrando pantallas en blanco. Solución: Agrega try-catch en servicios y estados de loading/error en componentes.
• Olvidar la escalabilidad

Checklist de dominio

1. He definido al menos 5 pantallas principales para la app de e-commerce.
2. He configurado React Navigation con un stack y tab navigator.
3. He implementado un contexto global para el carrito de compras.
4. He organizado el proyecto en carpetas por funcionalidad (components, screens, etc.).
5. He creado servicios separados para llamadas a API (ej: fetchProducts).
6. He optimizado imágenes y componentes para rendimiento en móviles.
7. He probado la navegación entre pantallas en un emulador o dispositivo real.

Planifica y configura la arquitectura base de tu app de e-commerce

Sigue estos pasos para crear la estructura inicial de tu proyecto:

1. Crea un nuevo proyecto Expo con npx create-expo-app ecommerce-app --template blank y ábrelo en tu editor.
2. Instala las dependencias esenciales: npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context.
3. Dentro de la carpeta src, crea las subcarpetas: components, screens, navigation, context, services, utils, assets.
4. En src/navigation, crea AppNavigator.js y configura un Bottom Tab Navigator con 3 pestañas: Home, Categorías y Perfil.
5. En src/context, crea CartContext.js con un provider que maneje un array de productos en el carrito y funciones para añadir/eliminar.
6. En src/screens, crea archivos vacíos para: HomeScreen.js, ProductListScreen.js, ProductDetailScreen.js, CartScreen.js, CheckoutScreen.js.
7. En App.js, envuelve tu navegador con CartProvider y asegúrate de que las pantallas se rendericen correctamente.
8. Ejecuta la app con npx expo start y verifica que la navegación funcione en un emulador o dispositivo.

Pistas

• Usa expo init si create-expo-app falla, asegurándote de tener Node.js actualizado.
• Para el CartContext, recuerda usar useReducer si el estado se vuelve complejo con múltiples acciones.
• Prueba cada paso incrementalmente: primero la navegación, luego el contexto, para aislar errores.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.