En esta parte del tutorial aprenderás a:
Utilizar variables de entorno para manejar datos sensibles (por ejemplo, SECRET_KEY, credenciales de base de datos, etc.).
Cargar tus datos iniciales (categorías, productos, etc.) usando un fixture.
Crear rutas y vistas para tu ecommerce, incluyendo una página principal y un menú que enlace a secciones como Productos, Carrito, Contacto, etc.
Implementar herencia de plantillas de Django para un diseño coherente y fácil de mantener.
Usar archivos estáticos (CSS, favicon) para mejorar la apariencia de tu sitio.
Paso 1: Configuración de Variables de Entorno con django-environ
Para manejar valores sensibles o variables que cambian según el entorno (desarrollo, producción, etc.), es recomendable usar variables de entorno. En Django, podemos apoyarnos en el paquete django-environ.
Instalar django-environ
En la raíz de tu proyecto, ejecuta:
poetry add django-environ
Esto agregará la dependencia en tu archivo pyproject.toml
.
Crear un archivo .env
En la misma carpeta donde se encuentra tu archivo manage.py
, crea un archivo llamado .env
y define las variables de entorno que desees utilizar. Por ejemplo:
SECRET_KEY=mi-clave-secreta-12345
DEBUG=True
DATABASE_HOST=localhost
DATABASE_PORT=5432
DATABASE_NAME=ecommerce
DATABASE_USER=postgres
DATABASE_PASS=mipassword
Importante: Añade el archivo
.env
al archivo.gitignore
para evitar subir información sensible a tu repositorio. Para generar una SECRET_KEY puedes utilizar el sitio: Djecrety
Configurar settings.py
para leer las variables
En tu archivo ecommerce/settings.py
, justo al inicio, agrega:
import environ
# Inicializa django-environ
env = environ.Env()
env_file = BASE_DIR / '.env'
if env_file.exists():
environ.Env.read_env(str(env_file))
# Ahora, reemplazamos los valores "hardcodeados" con variables de entorno:
SECRET_KEY = env('SECRET_KEY')
DEBUG = env.bool('DEBUG', default=True)
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': env('DATABASE_NAME'),
'USER': env('DATABASE_USER'),
'PASSWORD': env('DATABASE_PASS'),
'HOST': env('DATABASE_HOST', default='localhost'),
'PORT': env('DATABASE_PORT', default='5432'),
}
}
# Resto de la configuración permanece igual...
Con esta configuración, si
.env
existe, Django tomará los valores de ahí; si no existe o alguna variable no se define, usará los valoresdefault
.
¡Listo! Con esto, tu proyecto estará leyendo variables de entorno.
Paso 2: Carga de Datos Iniciales mediante Fixtures
Django permite poblar la base de datos con datos iniciales a través de fixtures. Un fixture es un archivo (por defecto, JSON o YAML) que contiene una lista de objetos con sus campos.
Descargar datos iniciales
Descarga los datos iniciales (fixture y archivos de imágenes) desde el siguiente enlace: Datos iniciales
Estructura de archivos
Al descomprimir, encontrarás una carpeta con los archivos de imágenes y el fixture. Por ejemplo, el archivo del fixture se llamará initial_data.json. Organiza tu proyecto de manera que el directorio quede más o menos así:
ecommerce/
├── store/
│ ├── fixtures/
│ │ └── initial_data.json
│ ├── templates/
│ └── ...
├── media/
│ └── imagenes_prod/
│ ├── producto1.jpg
│ ├── producto2.jpg
│ └── ...
├── manage.py
├── poetry.lock
├── pyproject.toml
Cargar el fixture
Para cargar los datos en la base de datos, utiliza el comando:
poetry run python manage.py loaddata initial_data.json
Esto buscará el archivo en la carpeta store/fixtures
y creará los registros (por ejemplo, categorías, productos) en tu base de datos.
Verificar datos
Inicia el servidor de desarrollo y verifica en http://localhost:8000/admin si los datos fueron cargados correctamente:
poetry run python manage.py runserver
Paso 3: Gestión de URLs y Páginas con Menú de Navegación
Ahora configuraremos varias rutas para tu ecommerce, cada una renderizando su propia plantilla. Además, crearemos una plantilla base para la herencia y un menú de navegación que aparecerá en todas las páginas.
Estructura de plantillas
Dentro de la aplicación store
, crea una carpeta templates/
.
Vamos a tener las siguientes plantillas:
-
base.html
(plantilla base con el encabezado, menú, footer, y un bloque para contenido). -
index.html
(página de inicio). -
catalog.html
(listado de productos). -
cart.html
(carrito de compras). -
contact.html
(formulario de contacto). -
signup.html
(registro de usuario). -
signin.html
(inicio de sesión).
Plantilla base.html
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EELA Ecommerce - {% block title %}{% endblock %}</title>
<meta name="keywords" content="Tienda en línea, Ecuador">
<meta name="author" content="Gabriel Villacis">
<link rel="stylesheet" href="{% static 'styles.css' %}">
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<header class="main-header">
<div class="container">
<div id="brand">
<h1>EELA Ecommerce</h1>
</div>
<nav>
<ul>
<li><a href="{% url 'home' %}">Inicio</a></li>
<li><a href="{% url 'catalog' %}">Productos</a></li>
<li><a href="{% url 'cart' %}">Carrito</a></li>
<li><a href="{% url 'contact' %}">Contacto</a></li>
<li><a href="{% url 'signup' %}">Registrarse</a></li>
<li><a href="{% url 'signin' %}">Iniciar Sesión</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
{% block main_content %}
{% endblock %}
</div>
</main>
<footer>
<p>© 2025 EELA Ecommerce - Todos los derechos reservados</p>
</footer>
</body>
</html>
Observa que:
- Usamos
{% load static %}
para poder incluir archivos estáticos (CSS, favicon). - Definimos dos bloques:
{% block title %}
y{% block main_content %}
.-
title
permitirá cambiar el título de la pestaña en cada página. -
main_content
contendrá el contenido específico de cada página.
-
Páginas que heredan de base.html
index.html
(Inicio)
{% extends 'base.html' %}
{% block title %}Inicio{% endblock %}
{% block main_content %}
<section>
<h2>Sobre nosotros</h2>
<p>
Somos una tienda en línea de productos electrónicos, dedicada a ofrecer
productos de calidad y un servicio al cliente excepcional.
</p>
</section>
<section>
<h2>Productos destacados</h2>
<div class="product-grid">
<div class="product-card">
<img src="https://placehold.jp/ffffff/000000/150x150.png" alt="Producto destacado 1">
<h3>Producto destacado 1</h3>
<p>$9.99</p>
<button class="btn">Añadir al carrito</button>
</div>
<div class="product-card">
<img src="https://placehold.jp/ffffff/000000/150x150.png" alt="Producto destacado 2">
<h3>Producto destacado 2</h3>
<p>$89.05</p>
<button class="btn">Añadir al carrito</button>
</div>
<div class="product-card">
<img src="https://placehold.jp/ffffff/000000/150x150.png" alt="Producto destacado 3">
<h3>Producto destacado 3</h3>
<p>$199.85</p>
<button class="btn">Añadir al carrito</button>
</div>
</div>
</section>
{% endblock %}
catalog.html
(Productos)
{% extends 'base.html' %}
{% block title %}Catálogo{% endblock %}
{% block main_content %}
<h2>Nuestro Catálogo de Productos</h2>
<p>Aquí listaremos los productos que obtengamos desde la base de datos.</p>
{% endblock %}
cart.html
(Carrito)
{% extends 'base.html' %}
{% block title %}Carrito{% endblock %}
{% block main_content %}
<h2>Carrito de Compras</h2>
<p>Aquí mostraremos los productos que el usuario ha agregado a su carrito.</p>
{% endblock %}
contact.html
(Contacto)
{% extends 'base.html' %}
{% block title %}Contacto{% endblock %}
{% block main_content %}
<h2>Contacto</h2>
<p>Aquí mostraremos el formulario de contacto.</p>
{% endblock %}
signup.html
(Registrarse)
{% extends 'base.html' %}
{% block title %}Registrarse{% endblock %}
{% block main_content %}
<h2>Formulario de Registro</h2>
<p>Aquí mostraremos el formulario de registro.</p>
{% endblock %}
signin.html
(Iniciar Sesión)
{% extends 'base.html' %}
{% block title %}Iniciar Sesión{% endblock %}
{% block main_content %}
<h2>Inicio de Sesión</h2>
<p>Aquí mostraremos el formulario de inicio de sesión.</p>
{% endblock %}
Configurar las rutas en urls.py
En store/urls.py
, define las rutas para cada una de estas páginas:
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
path('catalog/', views.catalog, name='catalog'),
path('cart/', views.cart, name='cart'),
path('contact/', views.contact, name='contact'),
path('signup/', views.signup, name='signup'),
path('signin/', views.signin, name='signin'),
]
Luego, en ecommerce/urls.py
, incluye las rutas de store
:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('store.urls')), # Ruta raíz
]
Crear las vistas en views.py
En store/views.py
, define las funciones que renderizarán cada plantilla:
from django.shortcuts import render
def home(request):
return render(request, 'index.html')
def catalog(request):
return render(request, 'catalog.html')
def cart(request):
return render(request, 'cart.html')
def contact(request):
return render(request, 'contact.html')
def signup(request):
return render(request, 'signup.html')
def signin(request):
return render(request, 'signin.html')
Cada vista retorna la plantilla correspondiente.
Paso 4: Archivos Estáticos (CSS, favicon)
-
Crear carpeta
static
Dentro de la carpeta principal del proyecto, crea una carpeta llamadastatic
. Por ejemplo:
ecommerce/
├── static/
│ ├── img/
│ │ └── favicon.ico
│ └── styles.css
...
-
Registrar
STATICFILES_DIRS
ensettings.py
Asegúrate de tener algo como esto en tusettings.py
:
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
-
Crear tu archivo
styles.css
En la carpetastatic/
, creastyles.css
con tus estilos:
/* CSS Variables */
:root {
--color-primary: #2c3e50; /* Deep Navy */
--color-secondary: #f9f7f7; /* Soft White */
--color-accent: #e67e22;
}
/* Reset default styles*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* etc... */
-
Uso del favicon
Coloca tu favicon (
favicon.ico
) dentro destatic/img/
. La referencia enbase.html
ya está configurada:
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
Recuerda: Para que Django sirva estos archivos en modo desarrollo, necesitas incluir
django.contrib.staticfiles
enINSTALLED_APPS
(que ya viene por defecto).
Conclusión
En este tutorial has aprendido:
Cómo configurar variables de entorno usando
django-environ
para que tu aplicación sea más segura y flexible.Cómo cargar datos iniciales a través de fixtures (
loaddata
) en lugar de scripts personalizados.Cómo gestionar múltiples páginas en tu ecommerce usando rutas (
urls.py
) y vistas (views.py
), implementando un menú de navegación.Cómo aplicar herencia de plantillas (
base.html
) para mantener un diseño coherente en todas las páginas.Cómo configurar y utilizar archivos estáticos (CSS, favicon) para darle estilo a tu aplicación.
Top comments (0)