El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este proyecto, desarrollaremos una aplicación de comercio electrónico utilizando React Native. Este proyecto integrará muchos de los conceptos aprendidos en los módulos anteriores, como la navegación, el manejo de estado, la obtención de datos de una API y el estilizado de componentes.

Objetivos del Proyecto

Crear una interfaz de usuario atractiva y funcional para una aplicación de comercio electrónico.
Implementar la navegación entre diferentes pantallas.
Manejar el estado de la aplicación y los datos del usuario.
Integrar una API para obtener datos de productos.
Implementar funcionalidades clave como agregar productos al carrito y realizar compras.

Estructura del Proyecto

Configuración Inicial
Pantalla de Inicio
Pantalla de Detalles del Producto
Pantalla del Carrito de Compras
Pantalla de Checkout
Integración con API
Manejo de Estado y Contexto
Estilizado y Animaciones
Pruebas y Depuración

Configuración Inicial

Crear el Proyecto

Primero, crea un nuevo proyecto de React Native:

npx react-native init EcommerceApp
cd EcommerceApp

Instalar Dependencias Necesarias

Instalaremos algunas dependencias adicionales que necesitaremos para este proyecto:

npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs axios

Configurar la Navegación

Configura la navegación en tu proyecto:

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ProductDetailsScreen from './screens/ProductDetailsScreen';
import CartScreen from './screens/CartScreen';
import CheckoutScreen from './screens/CheckoutScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="ProductDetails" component={ProductDetailsScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
        <Stack.Screen name="Checkout" component={CheckoutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Pantalla de Inicio

Crear el Componente HomeScreen

Crea un archivo HomeScreen.js en la carpeta screens:

// screens/HomeScreen.js
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import axios from 'axios';

const HomeScreen = ({ navigation }) => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('https://fakestoreapi.com/products')
      .then(response => setProducts(response.data))
      .catch(error => console.error(error));
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        data={products}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('ProductDetails', { productId: item.id })}>
            <View style={styles.product}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.price}>${item.price}</Text>
            </View>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  product: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  price: {
    fontSize: 16,
    color: '#888',
  },
});

export default HomeScreen;

Pantalla de Detalles del Producto

Crear el Componente ProductDetailsScreen

Crea un archivo ProductDetailsScreen.js en la carpeta screens:

// screens/ProductDetailsScreen.js
import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import axios from 'axios';

const ProductDetailsScreen = ({ route, navigation }) => {
  const { productId } = route.params;
  const [product, setProduct] = useState(null);

  useEffect(() => {
    axios.get(`https://fakestoreapi.com/products/${productId}`)
      .then(response => setProduct(response.data))
      .catch(error => console.error(error));
  }, [productId]);

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{product.title}</Text>
      <Text style={styles.description}>{product.description}</Text>
      <Text style={styles.price}>${product.price}</Text>
      <Button title="Add to Cart" onPress={() => navigation.navigate('Cart', { product })} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  description: {
    fontSize: 16,
    marginVertical: 8,
  },
  price: {
    fontSize: 20,
    color: '#888',
  },
});

export default ProductDetailsScreen;

Pantalla del Carrito de Compras

Crear el Componente CartScreen

Crea un archivo CartScreen.js en la carpeta screens:

// screens/CartScreen.js
import React, { useContext } from 'react';
import { View, Text, FlatList, Button, StyleSheet } from 'react-native';
import { CartContext } from '../context/CartContext';

const CartScreen = ({ navigation }) => {
  const { cart, removeFromCart } = useContext(CartContext);

  return (
    <View style={styles.container}>
      <FlatList
        data={cart}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.product}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.price}>${item.price}</Text>
            <Button title="Remove" onPress={() => removeFromCart(item.id)} />
          </View>
        )}
      />
      <Button title="Checkout" onPress={() => navigation.navigate('Checkout')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  product: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  price: {
    fontSize: 16,
    color: '#888',
  },
});

export default CartScreen;

Pantalla de Checkout

Crear el Componente CheckoutScreen

Crea un archivo CheckoutScreen.js en la carpeta screens:

// screens/CheckoutScreen.js
import React, { useContext } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { CartContext } from '../context/CartContext';

const CheckoutScreen = ({ navigation }) => {
  const { cart, clearCart } = useContext(CartContext);

  const handleCheckout = () => {
    // Aquí podrías integrar un servicio de pago
    clearCart();
    navigation.navigate('Home');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Checkout</Text>
      <Text style={styles.total}>Total: ${cart.reduce((sum, item) => sum + item.price, 0).toFixed(2)}</Text>
      <Button title="Confirm Purchase" onPress={handleCheckout} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  total: {
    fontSize: 20,
    marginVertical: 16,
  },
});

export default CheckoutScreen;

Integración con API

Obtener Datos de Productos

Ya hemos integrado la API de productos en las pantallas de inicio y detalles del producto. Utilizamos axios para realizar solicitudes HTTP y obtener datos de https://fakestoreapi.com/products.

Manejo de Estado y Contexto

Crear el Contexto del Carrito

Crea una carpeta context y un archivo CartContext.js:

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

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const removeFromCart = (productId) => {
    setCart(cart.filter(item => item.id !== productId));
  };

  const clearCart = () => {
    setCart([]);
  };

  return (
    <CartContext.Provider value={{ cart, addToCart, removeFromCart, clearCart }}>
      {children}
    </CartContext.Provider>
  );
};

Envolver la Aplicación con el Proveedor de Contexto

Modifica App.js para envolver la aplicación con el CartProvider:

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ProductDetailsScreen from './screens/ProductDetailsScreen';
import CartScreen from './screens/CartScreen';
import CheckoutScreen from './screens/CheckoutScreen';
import { CartProvider } from './context/CartContext';

const Stack = createStackNavigator();

function App() {
  return (
    <CartProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="ProductDetails" component={ProductDetailsScreen} />
          <Stack.Screen name="Cart" component={CartScreen} />
          <Stack.Screen name="Checkout" component={CheckoutScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </CartProvider>
  );
}

export default App;

Estilizado y Animaciones

Estilizar Componentes

Ya hemos aplicado estilos básicos a nuestros componentes utilizando StyleSheet. Puedes mejorar estos estilos según tus necesidades.

Agregar Animaciones

Puedes agregar animaciones utilizando la API de Animaciones de React Native o bibliotecas como react-native-reanimated.

Pruebas y Depuración

Pruebas

Implementa pruebas unitarias y de integración utilizando bibliotecas como jest y react-native-testing-library.

Depuración

Utiliza herramientas de depuración como React Native Debugger y React DevTools para identificar y solucionar problemas en tu aplicación.

Conclusión

En este proyecto, hemos creado una aplicación de comercio electrónico funcional utilizando React Native. Hemos cubierto la configuración inicial, la creación de pantallas, la integración con una API, el manejo de estado y contexto, el estilizado y las animaciones, y las pruebas y depuración. Este proyecto te proporciona una base sólida para desarrollar aplicaciones móviles complejas y escalables.

¡Felicidades por completar el Proyecto 3! Ahora estás listo para enfrentar desafíos más avanzados y construir aplicaciones móviles aún más sofisticadas.

Proyecto 3: Aplicación de Comercio Electrónico