Desarrollo de Ecommerce con Django (parte 2)
Tags: webdev, django, csv, python
Published: 2024-03-28 22:43:56

Este tutorial cubre los siguientes puntos:

- Carga de datos mediante archivos csv para las tablas existentes del ecommerce.
- Mostrar el catálogo de productos mediante plantilla de Django.

**Paso 1: Carga de datos**

- Descarga los datos iniciales (csv de categorías y productos, así como imágenes de productos) desde el siguiente enlace: [Datos iniciales](https://assets-publicos-clases-prog.s3.amazonaws.com/django-ecommerce-initial-data.zip)

- Una vez descargado el archivo zip, descomprímelo y copia la carpeta `data/` en la raíz del directorio del proyecto. Del mismo modo copia las imágenes de los productos en la subcarpeta `media/imagenes/` del proyecto.

La estructura de directorios debería verse así:

```
eelaecommerce/
data/
├── categories.csv
├── products.csv
media/imagenes
├── .jpg
├── .jpg
├── .jpg
├── ....
├── .jpg
store/
manage.py
poetry.lock
pyproject.toml
```

A continuación, crea una carpeta `scripts/` en la raíz del directorio del proyecto. Puedes crear esta carpeta manualmente o hacerlo ejecutando el siguiente comando en tu terminal:

```mkdir scripts```

Vamos a hacer que la carpeta `scripts/` sea un paquete de Python y luego crearemos los scripts para importar los datos a los modelos de Categoría y Producto mediante los archivos csv descargados.

- Dentro del directorio "scripts", crea el archivo especial 
`__init__.py` para convertir el directorio en un paquete.
- Luego, dentro del paquete "scripts", crea dos archivos Python: `categoria_feeder.py` y `producto_feeder.py`.

- Abre el archivo `categoria_feeder.py` y pega el siguiente código:

```
import csv
from store.models import Categoria

def feed_categorias():
    Categoria.objects.all().delete()
    
    with open('data/categories.csv') as csv_file:
        csv_dict_reader = csv.DictReader(csv_file, delimiter=';')
        for item in csv_dict_reader:
            categoria = Categoria(nombre=item['name'], slug=item['slug'])
            categoria.save()
            print(f'Categoria creada: {categoria}')
        

def run():
    feed_categorias()

```

- Después, abre el archivo `producto_feeder.py` y pega el siguiente código:

```
import csv
from store.models import Producto, Categoria

def feed_productos():
    Producto.objects.all().delete()    
    
    with open('data/products.csv') as csv_file:
        csv_dict_reader = csv.DictReader(csv_file, delimiter=';')
        
        for item in csv_dict_reader:
            producto = Producto(nombre=item['name'],
                                descripcion=item['description'],
                                precio=item['price'],
                                imagen= 'imagenes/' + item['image'],
                                activo=(True if item['is_active']=='VERDADERO' else False)
                                )
            producto.save()
            categoria = Categoria.objects.get(slug=item['category_slug'])
            producto.categorias.add(categoria)
            producto.save()
            print(f'Producto creado: {producto}')
            
def run():
    feed_productos()
```

Para poder ejecutar estos scripts debemos instalar el paquete "django-extensions". Debemos hacerlo ejecutando en la terminal del comando:

```poetry add django-extensions```

"django-extensions" es un complemento para el framework Django y por ello debemos agregarlo en la configuración de INSTALLED_APPS del proyecto. Abre el archivo `eelaecommerce/settings.py` y busca la lista INSTALLED_APPS. Añade la aplicación al final de esta lista. Debería verse así:

```
INSTALLED_APPS = [
    ...
    'django_extensions'
]
```
Una vez concluidos estos pasos procederemos a ejecutar los scripts para cargar los datos iniciales. En la terminal vamos a ejecutar:

```poetry run python manage.py runscript categoria_feeder```
```poetry run python manage.py runscript producto_feeder```

Si todo va bien deberíamos tener cargados los registros de categorías y productos en la base de datos PostgreSQL. Verifiquémoslo ejecutando el proyecto con:

```poetry run python manage.py runserver```

Y accede al administrador de Django en http://localhost:8000/admin.

**Paso 2: Configuración de ruta raíz para renderizar los productos mediante una plantilla**

- En la carpeta de la aplicación store vamos a crear el archivo para las rutas de la aplicación `store/urls.py`. Una vez creado procedemos a crear la ruta raíz:

```
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home')
]
```

- Las rutas de la aplicación deben incorporarse a las rutas del proyecto. Por ello en el archivo `eelaecommerce/urls.py` incluiremos las rutas de la aplicación, así:

```
...
...

from django.urls import path, include

urlpatterns = [
    ...
    ...
    path('', include('store.urls'))
]
```

- Ahora procederemos a crear la función de vista "home". Para ellos en el archivo de vistas `store/views.py`, incorporamos:

```
from django.shortcuts import render
from store.models import Producto

def home(request):
    productos = Producto.objects.all()
    return render(request, 'index.html', {'productos': productos})
```

Esta función lo que hace es consultar en la base de datos todos los productos y luego los pasa a la plantilla `index.html`.

Para que la presentación de los productos surta efecto debemos crear la plantilla. Dentro del directorio de la aplicación crearemos una carpeta `templates` la cual será para manejar las plantillas. Podemos crear esta carpeta manualmente o hacerlo ejecutando el siguiente comando en tu terminal:

```mkdir store\templates```

Dentro de esta carpeta crearemos la plantilla (archivo) `index.html` con el siguiente código base:

```
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EELA Ecommerce</title>
</head>
<body>
  <h1>Lista de Productos</h1>
  <ul>
    {% for producto in productos %}
      <li>Producto: {{ producto.nombre }} - Precio: {{ producto.precio }}</li>
    {% endfor %}
  </ul>
</body>
</html>
```

Finalmente procederemos a personalizar la presentación de la plantilla.


**Da clic [aquí](https://dev.to/villacisg93/desarrollo-de-ecommerce-con-django-parte-3-5b38) para ir a la tercera parte de este tutorial.**