DEV Community: Gabriel Villacis

Desarrollo de Ecommerce con Django (parte 5)

Gabriel Villacis — Fri, 21 Feb 2025 00:23:17 +0000

A continuación se presenta un tutorial completo y detallado que te guiará paso a paso para implementar la funcionalidad de checkout en tu ecommerce. En este ejemplo aprenderás a:

Definir los modelos Pedido y ItemPedido para almacenar cada pedido realizado y sus elementos, utilizando el modelo Producto existente y el modelo de usuario de Django.
Programar la vista y la URL para procesar el checkout mediante una solicitud AJAX con Axios, enviando los datos del carrito (almacenado en localStorage) al servidor.
Adaptar el script del carrito para que, además de permitir agregar y eliminar productos, envíe el pedido al hacer clic en el botón de checkout (identificado por un id único).
Configurar el panel de administración para visualizar el detalle de cada pedido y permitir filtrar por usuario, fechas e incluso por producto.

Con estos pasos, lograrás integrar el proceso de checkout de forma asíncrona, manteniendo la experiencia del usuario fluida y además tendrás herramientas en el admin para gestionar los pedidos.

1. Creación de los Modelos de Pedido e ItemPedido

1.1. Modelo Pedido

El modelo Pedido almacenará la información general del pedido, asociándolo al usuario (si está autenticado), registrando la fecha de creación y el total del pedido.

# store/models/pedido.py
from django.db import models
from django.conf import settings

class Pedido(models.Model):
    usuario = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        on_delete=models.SET_NULL,
        null=True, blank=True,
        verbose_name="Usuario"
    )
    fecha_creacion = models.DateTimeField(auto_now_add=True, verbose_name="Fecha de Creación")
    total = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="Total del Pedido")

    def __str__(self):
        return f"Pedido {self.id}"

    class Meta:
        db_table = 'st_pedidos'
        verbose_name = "Pedido"
        verbose_name_plural = "Pedidos"

1.2. Modelo ItemPedido

El modelo ItemPedido representará cada producto incluido en el pedido.

# store/models/itempedido.py
from django.db import models
from store.models import Producto, Pedido

class ItemPedido(models.Model):
    pedido = models.ForeignKey(
        Pedido, related_name='items', 
        on_delete=models.CASCADE, verbose_name="Pedido"
    )
    producto = models.ForeignKey(
        Producto, on_delete=models.PROTECT, verbose_name="Producto"
    )
    precio = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="Precio Unitario")
    cantidad = models.PositiveIntegerField(verbose_name="Cantidad")

    def total_item(self):
        return self.precio * self.cantidad

    def __str__(self):
        return f"{self.producto.nombre}"

    class Meta:
        db_table = 'st_items_pedido'
        verbose_name = "Item de Pedido"
        verbose_name_plural = "Items de Pedido"

Recomendación:

Si en el futuro deseas actualizar el precio del producto o conservar el precio histórico, este modelo almacena el precio en el momento del pedido.

2. Programación de la Vista y URL para el Checkout

2.1. Vista de Checkout

La vista de checkout recibirá una solicitud POST vía AJAX con un JSON que contenga los datos del carrito. Se espera que cada ítem incluya, al menos, el product_id (para identificar el producto), la cantidad y, opcionalmente, el precio y el nombre (aunque se obtendrá el precio real del producto en el servidor). La vista calculará el total, creará un Pedido y, para cada ítem, un ItemPedido.

En store/views.py agrega la siguiente función:

import json
from decimal import Decimal
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.contrib.auth.decorators import login_required
from store.models import Producto
from .models.pedido import Pedido
from .models.itempedido import ItemPedido

@require_POST
@login_required  # Solo usuarios autenticados pueden realizar pedidos
def ajax_checkout(request):
    """
    Se espera recibir un JSON en el cuerpo de la solicitud con la estructura:
    {
        "items": [
            {"product_id": "1", "nombre": "Producto A", "precio": 9.99, "cantidad": 2},
            {"product_id": "3", "nombre": "Producto B", "precio": 19.99, "cantidad": 1},
            ...
        ]
    }
    """
    try:
        data = json.loads(request.body)
        items = data.get('items', [])
        if not items:
            return JsonResponse({'success': False, 'message': 'El carrito está vacío.'})

        total_pedido = Decimal('0.00')
        for item in items:
            precio = Decimal(str(item.get('precio', '0.00')))
            cantidad = int(item.get('cantidad', 0))
            total_pedido += precio * cantidad

        pedido = Pedido.objects.create(
            usuario=request.user,
            total=total_pedido
        )

        for item in items:
            product_id = item.get('product_id')
            cantidad = int(item.get('cantidad', 0))
            # Se obtiene el producto desde el modelo Producto
            producto = Producto.objects.get(pk=product_id)
            # Se usa el precio actual del producto; alternativamente, se puede usar el enviado
            precio = producto.precio  
            ItemPedido.objects.create(
                pedido=pedido,
                producto=producto,
                precio=precio,
                cantidad=cantidad
            )

        return JsonResponse({
            'success': True,
            'message': 'Pedido procesado exitosamente.',
            'pedido_id': pedido.id
        })
    except Exception as e:
        return JsonResponse({'success': False, 'message': str(e)})

2.2. Configuración de la URL para Checkout

En store/urls.py añade la ruta correspondiente:

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_view, name='signup'),
    path('signin/', views.signin_view, name='signin'),

    # Endpoints para solicitudes AJAX (registro, inicio, logout)
    path('ajax/signup/', views.ajax_signup, name='ajax_signup'),
    path('ajax/signin/', views.ajax_signin, name='ajax_signin'),
    path('logout/', views.ajax_logout, name='logout'),

    # Ruta para el checkout
    path('checkout/', views.ajax_checkout, name='checkout'),
]

3. Adaptación y Administración del Carrito y Checkout en el Front End

3.1. Actualización de las Plantillas y el Script

a) Inyección de Datos del Producto en la Plantilla

Para que el script pueda almacenar correctamente el carrito, es necesario que cada tarjeta de producto incluya el product_id. Por ejemplo, en la plantilla del catálogo (o en la de inicio) modifica la tarjeta de producto para incluir un atributo data-product-id:

<!-- Ejemplo de una tarjeta de producto en catalog.html -->
<div class="product-card" data-product-id="{{ producto.id }}">
    <img src="{{ producto.imagen.url }}" alt="{{ producto.nombre }}">
    <h3>{{ producto.nombre }}</h3>
    <p>${{ producto.precio|floatformat:2 }}</p>
    <input type="number" min="1" value="1">
    <button class="btn" onclick="agregarAlCarrito(this)">Añadir al carrito</button>
</div>

b) Adaptación del Script JavaScript (static/js/script.js)

Actualiza el script para que al agregar un producto al carrito se almacene también el product_id, y para que el botón de checkout tenga un id (por ejemplo, btn-checkout) para asociarle el evento solo cuando esté presente en la página del carrito.

// Guardar y obtener el carrito en localStorage
const guardarCarrito = (carrito) => {
    localStorage.setItem('carrito', JSON.stringify(carrito));
}

const obtenerCarrito = () => {
    return JSON.parse(localStorage.getItem('carrito')) || [];
}

// Agregar un producto al carrito
const agregarAlCarrito = (boton) => {
    let divProductCard = boton.closest('.product-card');
    let productId = divProductCard.getAttribute('data-product-id');
    let nombreProducto = divProductCard.querySelector('h3').textContent;
    let precioProducto = parseFloat(divProductCard.querySelector('p').textContent.replace('$', ''));
    let cantidad = parseInt(divProductCard.querySelector('input').value);

    let carrito = obtenerCarrito();
    // Crear objeto con los datos necesarios
    let producto = { product_id: productId, nombre: nombreProducto, precio: precioProducto, cantidad: cantidad };
    let existente = carrito.find(item => item.product_id === productId);
    if (existente) {
        existente.cantidad += cantidad;
    } else {
        carrito.push(producto);
    }
    guardarCarrito(carrito);
    alert(`Se añadió el producto al carrito: ${nombreProducto}`);
}

// Renderizar el carrito en la página del carrito
const renderizarCarrito = () => {
    let tablaCarrito = document.getElementById('body-cart');
    if (!tablaCarrito) return;
    tablaCarrito.innerHTML = '';
    let carrito = obtenerCarrito();
    let total = 0;

    carrito.forEach((item, index) => {
        let fila = document.createElement('tr');
        fila.innerHTML = `
            <td>${item.nombre}</td>
            <td>$${item.precio.toFixed(2)}</td>
            <td>${item.cantidad}</td>
            <td>$${(item.precio * item.cantidad).toFixed(2)}</td>
            <td><button onclick="eliminarDelCarrito(${index})">Eliminar</button></td>
        `;
        total += (item.precio * item.cantidad);
        tablaCarrito.appendChild(fila);
    });
    document.querySelector('#foot-cart td:last-child').textContent = `$${total.toFixed(2)}`;
}

// Eliminar un elemento del carrito
const eliminarDelCarrito = (index) => {
    let carrito = obtenerCarrito();
    carrito.splice(index, 1);
    guardarCarrito(carrito);
    renderizarCarrito();
}

// Función para procesar el checkout del pedido
const procesarCheckout = () => {
    let carrito = obtenerCarrito();
    if (carrito.length === 0) {
        alert("El carrito está vacío.");
        return;
    }

    // Enviar los datos del carrito en formato JSON al servidor
    axios.post(ajaxCheckoutUrl, {
        items: carrito
    }, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => {
        if (response.data.success) {
            alert(response.data.message);
            // Limpiar el carrito
            localStorage.removeItem('carrito');
            window.location.href = homeUrl;
        } else {
            alert("Error al procesar el pedido: " + response.data.message);
        }
    })
    .catch(error => {
        console.error('Error en checkout:', error);
        alert("Ocurrió un error en el proceso de compra.");
    });
}

// Asignar eventos basados en la existencia de elementos en el DOM
document.addEventListener('DOMContentLoaded', function() {
    // Si estamos en la página del carrito, renderizamos el contenido
    if (document.getElementById('body-cart')) {
        renderizarCarrito();
    }
    // Si existe el botón de checkout (por id "btn-checkout"), asociar el evento
    let btnCheckout = document.getElementById('btn-checkout');
    if (btnCheckout) {
        btnCheckout.addEventListener('click', procesarCheckout);
    }
});

Variables Globales:

Estas variables (por ejemplo, ajaxCheckoutUrl, csrfToken, homeUrl) se definirán en la plantilla base, como se muestra a continuación.

c) Actualización de la Plantilla del Carrito (cart.html)

Asegúrate de que en la plantilla del carrito se incluya el id en el botón de checkout y los elementos para renderizar el carrito:

<!-- Fragmento de cart.html -->
...
<tbody id="body-cart"></tbody>
<tfoot id="foot-cart">
    <tr>
        <td colspan="3">Total</td>
        <td></td>
    </tr>
</tfoot>
...
<div class="cart-actions">
    <button id="btn-checkout" class="btn">Finalizar Compra</button>
</div>
...

4. Actualización de la Plantilla Base

En store/templates/base.html se incluirán es script y se definirá la variable global checkoutUrlque usará el script.


    <!-- Incluir Axios desde un CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Definir variables globales para el script -->
    <script>
        var ajaxSignupUrl = "{% url 'ajax_signup' %}";
        var ajaxSigninUrl = "{% url 'ajax_signin' %}";
        var signinUrl = "{% url 'signin' %}";
        var homeUrl = "{% url 'home' %}";
        var logoutUrl = "{% url 'logout' %}";
        var csrfToken = "{{ csrf_token }}";
        var ajaxCheckoutUrl = "{% url 'checkout' %}";

    </script>
    <!-- Incluir el JavaScript de autenticación -->
    <script src="{% static 'js/auth.js' %}"></script>
    <!-- Incluir el JavaScript del carrito y checkout -->
    <script src="{% static 'js/script.js' %}"></script>
</body>
</html>

5. Administración de Pedidos en el Panel de Django

Para facilitar la gestión de pedidos, configuraremos el panel de administración para que muestre el detalle de cada pedido y permita filtrar por usuario, fecha y producto.

En store/admin.py agrega lo siguiente:

from django.contrib import admin
from django.db.models import Count
from store.models import Pedido, ItemPedido

class ItemPedidoInline(admin.TabularInline):
    model = ItemPedido
    extra = 0  # No muestra formularios vacíos adicionales para agregar nuevos items inline

@admin.register(Pedido)
class PedidoAdmin(admin.ModelAdmin):
    inlines = [ItemPedidoInline]
    list_display = ('id', 'usuario', 'fecha_creacion', 'total', 'cantidad_items')
    list_filter = ('usuario', 'fecha_creacion')
    search_fields = ('items__producto__nombre',)

    def get_queryset(self, request):
        qs = super().get_queryset(request)
        return qs.annotate(num_items=Count('items'))

    def cantidad_items(self, obj):
        return obj.num_items
    cantidad_items.short_description = 'Cantidad de Items'

Detalles:

Se utiliza un TabularInline para mostrar los ítems asociados a cada pedido.

Con list_filter se pueden filtrar los pedidos por usuario y fecha.

Con search_fields se permite buscar pedidos por el nombre del producto relacionado (accediendo a través de la relación de ítems).

- extra=0 en ItemPedidoInline indica que en el panel de administración no se mostrarán formularios en blanco adicionales para agregar nuevos registros inline. Es decir, solo se mostrarán los items que ya existen, sin crear formularios vacíos extra.

Conclusión

En este tutorial se ha implementado de manera integral la funcionalidad de checkout en un ecommerce. Se han realizado los siguientes pasos:

Modelado de Datos:

Se crearon los modelos Pedido e ItemPedido para almacenar los pedidos y los elementos de cada pedido, relacionándolos con el usuario y con el modelo Producto.
Procesamiento del Checkout:

Se desarrolló una vista que recibe los datos del carrito (en formato JSON) vía AJAX, calcula el total, crea un pedido y sus respectivos ítems, y retorna una respuesta JSON.
Integración con el Front End:

El script de carrito se adaptó para almacenar el product_id junto con los demás datos, y se configuró para renderizar el carrito solo en la página correspondiente. Además, se agregó un botón de checkout con id específico para asociarle la función de procesar el pedido.
Administración en Django:

Se configuró el panel de administración para gestionar los pedidos, mostrando los detalles y permitiendo filtrar por usuario, fecha y producto.

Con estos pasos, tu ecommerce contará con un proceso de checkout asíncrono y administrable, integrando de forma fluida la parte del cliente (carrito en localStorage) y la persistencia en el servidor. ¡Sigue avanzando y personalizando tu proyecto para adaptarlo a tus necesidades!

Tutorial de Flujo de Trabajo con Git: ¡Empieza a Usar los Comandos Básicos de Git AHORA!

Gabriel Villacis — Wed, 17 Jul 2024 22:54:20 +0000

Ahora que sabes qué es Git y cómo encaja GitHub en el panorama, estás listo para aprender el flujo de trabajo básico de Git.

En este tutorial, aprenderás lo más básico de lo que debes hacer para seguir tus proyectos usando Git y GitHub. Hay mucho que se puede decir sobre el por qué, cómo y qué significa cada parte. Es demasiado para cubrir en un solo tutorial para principiantes, así que, si hay una sección que no entiendes y realmente quieres saber más, la mejor opción es buscarlo en Google. Googlear es una habilidad (sí, en serio) y necesitarás usarla día tras día si trabajas como desarrollador. ¡No tengas miedo de usarla!

Por ahora, quiero que intentes leer todo el post antes de profundizar en los detalles: a veces, es mejor obtener una visión general primero, porque profundizar demasiado pronto puede ser una receta para la confusión y la frustración.

Dividiremos este post en tres secciones: empezar con Git, conectar un proyecto a GitHub y luego el flujo de trabajo diario de Git/GitHub.

1. ¿Cómo empiezo a seguir mi proyecto con Git?

Aquí tienes una visión general básica de cómo trabajamos en proyectos usando Git. Vamos a asumir que ya tienes Git instalado en tu computadora y estás en la Terminal.

Creamos una carpeta de proyecto local en nuestra computadora y entramos en ella:

$ mkdir CarpetaDeProyecto
$ cd CarpetaDeProyecto

Iniciamos el seguimiento de Git en esa carpeta:

$ git init

Creamos nuestro archivo README.md con algo de texto de relleno:

$ echo Mi Nuevo Proyecto > README.md

Añadimos el contenido de nuestra carpeta al área de preparación, diciéndole a Git que estos son los archivos de los que queremos seguir los cambios:

$ git add .

Confirmamos nuestros archivos a Git, junto con un mensaje en tiempo presente explicando el cambio:

$ git commit -m "Añadir README.md"

El punto 4 necesita un poco de explicación: en Git, antes de "guardar cambios", añadimos archivos al "área de preparación" usando git add nombrearchivo.txt. Esto es en caso de que tengamos archivos específicos que hayamos cambiado, pero no queramos guardar. En el caso anterior (y en la mayoría de los casos), no necesitaremos ser tan específicos, así que simplemente podemos añadir todos los archivos en nuestro directorio actual. Si vas a buscar algo en Google hoy, ¡busca "Git Staging Area"!

El punto 5 es donde esencialmente presionamos "Guardar Como" en el proyecto. Le decimos a Git que mantenga una copia del proyecto exactamente como está ahora. De esta manera, si en el futuro algo sale mal, siempre podemos volver y ver versiones anteriores de cada archivo en nuestro directorio.

También podemos combinar los pasos 4 y 5, preparando y cometiendo todos los archivos a la vez usando la opción -am, por ejemplo:

$ git commit -am "Añadir README.md"

2. ¿Cómo conecto Git y GitHub?

Ahora tenemos un directorio de trabajo para nuestro proyecto, y Git está siguiendo todos los cambios que hacemos, pero aún no tenemos un repositorio remoto (en línea) donde podamos guardar todo. GitHub es la plataforma líder para almacenar y acceder a proyectos seguidos con Git, así que necesitarás ir allí y crear una cuenta antes de continuar.

Ahora que tenemos una cuenta de GitHub, estamos listos para crear un nuevo repositorio y vincularlo a nuestra carpeta local:

Conectando un repositorio existente en tu computadora a GitHub

Actualmente tenemos un repositorio local y queremos añadirlo a un repositorio vacío de GitHub. La dirección de la conexión es de local a remoto. Por lo tanto, usaremos git remote add origin como nuestro método de conexión.

Crea un nuevo repositorio en GitHub: haz clic en el botón verde en el menú de la izquierda, o haz clic en el signo más en la parte superior derecha y luego en "Nuevo Repositorio".
Ingresa el nombre de nuestro nuevo repositorio, idealmente similar o idéntico al nombre de nuestro repositorio local o lo más parecido posible para que no los confundamos en el futuro. Mantenlo público y haz clic en el botón verde "Crear Repositorio".
Ahora tenemos un repositorio remoto (¡hurra!), pero aún no hay nada en él, y no se ha establecido ningún enlace. Después de crear nuestro repositorio de GitHub, seremos llevados a una página con el enlace que necesitamos para Git. Toma el enlace SSH, cópialo y luego pégalo en la Terminal como en el ejemplo a continuación. Asegúrate de haber usado cd para entrar en la carpeta del proyecto correcta primero:

$ git remote add origin git@github.com:TuUsuario/MiNuevoProyecto.git

Nuestro repositorio local de Git ahora está vinculado a nuestro repositorio remoto (en línea) vacío de GitHub, pero aún necesitamos "empujar" (el término técnico para subir) nuestros archivos/cambios/historial a GitHub. Para hacerlo, escribimos:

$ git push -u origin main

Si actualizamos nuestra página de repositorio en GitHub, ahora deberíamos ver nuestro README.md junto con el texto de relleno que pusimos en él al principio.

Conectando un repositorio de GitHub a una carpeta local

Digamos que has hecho lo anterior en tu PC de casa, pero es un día hermoso y quieres ir a un café a trabajar en tu laptop en su lugar. En tu laptop, no tienes ninguno de los archivos de tu repositorio, pero sí tienes acceso a wifi (¡uf!).

Para copiar tu repositorio remoto (GitHub) a tu computadora, vamos a usar el comando git clone, proporcionándonos una copia exacta (¡clon!) de todos tus archivos y tu historial de commits de Git.

Ve a tu perfil de GitHub y haz clic en el repositorio que deseas clonar.
En la parte superior derecha, verás un botón verde. Hacer clic en ese botón mostrará una URL que puedes copiar.
En la Terminal, navega al directorio donde quieres almacenar el proyecto (ten en cuenta que clone creará una nueva carpeta para ti con el nombre del repositorio de GitHub, así que no necesitas crear una carpeta dedicada tú mismo). Digamos que queremos almacenarlo en nuestro Directorio de Inicio:

$ cd

Ahora usaremos la URL que copiamos para clonar el repositorio, por ejemplo:

$ git clone git@github.com:TuUsuario/MiNuevoProyecto.git

¡Felicidades! Ahora tienes una conexión entre Git y GitHub, y todos tus archivos están actualizados en ambos lugares. Ahora quieres empezar a construir tu proyecto y seguir los cambios...

3. Flujo de trabajo diario: pull, branch, add, commit, merge, push

El título anterior es el flujo de trabajo básico que necesitarás día tras día cuando trabajes entre Git y GitHub.

Dado que este post solo está dirigido a proyectos personales y no colaborativos, hay un argumento para ignorar el lado del "pull" (término técnico de Git para descargar) de esta relación, pero es un buen hábito adquirirlo, así que lo incluiré. Lo mismo aplica para las ramas: suponiendo que solo una persona está trabajando en nuestro proyecto, podríamos trabajar siempre en la rama principal (main), pero como queremos formar buenos hábitos a largo plazo, comencemos a ramificarnos desde hoy.

Antes de seguir cualquiera de los pasos siguientes, asegúrate de haber navegado a la carpeta de tu proyecto.

Haz un pull (es decir, descarga) de cualquier cambio que pueda haber ocurrido en el repositorio remoto (GitHub). De esta manera, si alguien más ha trabajado en el proyecto (o si lo hemos actualizado desde otra computadora), recibimos todos los cambios y nos mantenemos actualizados.

$ git pull

Crea una nueva rama: piensa en esto como un espacio de trabajo separado donde puedes probar y experimentar sin "arruinar" los archivos principales. En un espacio profesional, la ramificación se usaría para que diferentes miembros del equipo puedan trabajar en diferentes problemas al mismo tiempo. Eso no se aplica a nosotros, pero vamos a construir esos hábitos ahora para ahorrarnos algo de dolor más tarde. Así que comencemos a trabajar en una nueva rama llamada "MisCambios":

$ git checkout -b MisCambios

Añade, elimina o edita archivos y directorios a tu gusto. ¡Aquí es donde realmente ocurre la mayor parte de la codificación para nuestro proyecto!
Una vez que hayamos hecho algunos cambios y queramos guardarlos más permanentemente, ahora los añadiremos y cometeremos juntos en Git, con un mensaje cubriendo lo que cambiamos.

$ git commit -am "Añadir index.html y style.css"

Podemos (y deberíamos) repetir los pasos 3 y 4 múltiples veces mientras hacemos más y más cambios. Cuanto más confirmamos los cambios, más opciones tendremos para revertir cualquier cambio más tarde. Sin embargo, usualmente no querrás guardar cada pequeño cambio que hagas (aunque hay programadores que lo hacen).

¡Uf! Hemos pasado todo el día codificando en nuestra rama MisCambios y nuestros archivos se ven geniales. Pero antes de ir a casa, necesitamos asegurarnos de que nuestra rama principal esté actualizada con nuestro trabajo del día. Vamos a pasarnos a la rama principal (main), fusionarla toda y luego eliminar la rama que ahora es redundante:

$ git checkout main
$ git merge MisCambios
$ git branch -d MisCambios

Nuestro paso final es asegurarnos de que todos los cambios también se añadan a GitHub, por si necesitamos acceder a ellos en otro lugar, que alguien más vea nuestro código o nuestra computadora principal muera. Así que ahora empujamos (¡subimos!) todo a nuestro repositorio remoto (GitHub):

$ git push

¡Genial! ¡El día ha terminado! Todos nuestros cambios están actualizados y guardados en la nube, junto con cada versión del proyecto que hemos tenido. Podemos acceder a él desde cualquier lugar, nuestros amigos pueden acceder a él desde cualquier lugar, y si queremos, podemos dejar que otros trabajen en él con nosotros.

¿Eso fue mucha información? ¿Puedo ver todo en un solo lugar solo con los comandos?

¡Claro! Aquí tienes:

Crear carpeta de proyecto local

$ mkdir CarpetaDeProyecto
$ cd CarpetaDeProyecto
$ git init
$ echo Mi Nuevo Proyecto > README.md
$ git add .
$ git commit -m "Primer commit con README.md"

Conectar local a un repositorio vacío de GitHub

$ git remote add origin git@github.com:TuUsuario/MiNuevoProyecto.git
$ git push -u origin main

Traer tu repositorio de GitHub a una computadora diferente, por ejemplo

$ git clone git@github.com:TuUsuario/MiNuevoProyecto.git

Flujo de trabajo diario

$ cd NombreDeCarpetaDeProyecto
$ git pull
$ git checkout -b MisCambios
<<Trabaja en tu código aquí>>
$ git commit -am "Describe los cambios aquí"
$ git checkout main
$ git merge MisCambios
$ git branch -d MisCambios
$ git push

Conclusión

Sé que fue mucha información, pero esos son los comandos básicos que necesitas. Recuerda que las primeras y segundas secciones son puramente sobre la configuración del proyecto: día a día, todo lo que necesitarás son esos comandos en la sección de flujo de trabajo diario.

Como se dijo, podrías profundizar en temas relacionados con cualquier parte de este post, pero si eres nuevo en Git y GitHub, estos son los pasos que puedes seguir para comenzar a rastrear los cambios de un nuevo proyecto HOY. Espero que este tutorial haya sido de ayuda para ti.

Desarrollo de Ecommerce con Django (parte 4)

Gabriel Villacis — Mon, 15 Jul 2024 23:29:58 +0000

Introducción

En este tutorial aprenderás a:

Registrar un usuario: Se validarán los datos usando Django Forms y se procesará el registro vía AJAX con Axios.
Iniciar sesión: Se realizará la autenticación del usuario y, mediante AJAX, se mostrará el resultado (éxito o error) sin recargar la página.
Cerrar sesión: Se implementará una función de logout que, también mediante AJAX, cerrará la sesión del usuario.
Actualizar la plantilla base: Se mostrará el nombre de usuario activo en el encabezado si el usuario ha iniciado sesión.

A lo largo del tutorial se separará la lógica de validación (usando Django Forms) de la presentación (las plantillas HTML), y se desarrollará todo el código JavaScript en archivos externos para mantener el HTML limpio y organizado.

1. Formularios con Django Forms

Aunque la plantilla del formulario se construya manualmente, es recomendable centralizar la validación en Django. Crea o edita el archivo store/forms.py:

# store/forms.py
from django import forms
from django.contrib.auth.models import User

class SignupForm(forms.ModelForm):
    password = forms.CharField(
        widget=forms.PasswordInput, 
        min_length=8, max_length=12, 
        label="Contraseña"
    )
    confirm_password = forms.CharField(
        widget=forms.PasswordInput, 
        min_length=8, max_length=12, 
        label="Confirmar Contraseña"
    )

    class Meta:
        model = User
        fields = ['first_name', 'last_name', 'username', 'email', 'password']
        labels = {
            'first_name': 'Nombre'
        }

    def clean(self):
        cleaned_data = super().clean()
        password = cleaned_data.get("password")
        confirm_password = cleaned_data.get("confirm_password")
        if password and confirm_password and password != confirm_password:
            self.add_error('confirm_password', "Las contraseñas no coinciden.")

Importante: Aunque en la plantilla se construyen manualmente los campos, definir los labels y las validaciones en el formulario permite reutilizar esta lógica en el backend y mantener el código organizado.

2. Vistas para Registro, Inicio y Cierre de Sesión

Se separarán dos tipos de vistas:

Vistas para renderizar las plantillas: Cuando el usuario navegue a las páginas de registro o inicio de sesión.
Vistas para procesar los datos vía AJAX: Que recibirán los datos del formulario, realizarán las validaciones y devolverán respuestas en formato JSON.

2.1. Vistas para Renderizar las Plantillas

En store/views.py se utilizarán las funciones existentes para mostrar los formularios:

from django.shortcuts import render

def signup(request):
    return render(request, 'signup.html')

def signin(request):
    return render(request, 'signin.html')

2.2. Vistas para Procesamiento AJAX

Agrega en store/views.py las siguientes funciones para procesar los datos enviados mediante AJAX:

import json
from django.contrib.auth.models import User
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.contrib.auth import authenticate, login, logout
from .forms import SignupForm

@require_POST
def ajax_signup(request):
    form = SignupForm(request.POST)
    if form.is_valid():
        user = form.save(commit=False)
        # Encriptamos la contraseña correctamente
        user.set_password(form.cleaned_data['password'])
        user.save()
        return JsonResponse({'success': True, 'message': 'Usuario registrado exitosamente.'})
    else:
        return JsonResponse({'success': False, 'errors': form.errors})

@require_POST
def ajax_signin(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    user = authenticate(request, username=username, password=password)
    if user is not None:
        login(request, user)
        return JsonResponse({'success': True, 'message': 'Inicio de sesión exitoso.'})
    else:
        return JsonResponse({'success': False, 'errors': {'__all__': "Credenciales incorrectas."}})

def ajax_logout(request):
    logout(request)
    return JsonResponse({'success': True, 'message': 'Sesión cerrada exitosamente.'})

3. Configuración de URLs

En store/urls.py define las rutas para renderizar las plantillas y para las solicitudes AJAX. Por ejemplo:

# store/urls.py
from django.urls import path
from . import views

urlpatterns = [
    # Rutas para renderizar las plantillas:
    path('signup/', views.signup, name='signup'),
    path('signin/', views.signin, name='signin'),

    # Rutas para procesar solicitudes AJAX:
    path('ajax/signup/', views.ajax_signup, name='ajax_signup'),
    path('ajax/signin/', views.ajax_signin, name='ajax_signin'),
    path('logout/', views.ajax_logout, name='logout'),
    # Otras rutas de la aplicación...
]

Con esta configuración, cuando un usuario visite /signup/ o /signin/ se mostrará el formulario correspondiente; y al enviar el formulario, el código JavaScript realizará la petición a /ajax/signup/ o /ajax/signin/.

4. JavaScript Externo con Axios

Crearemos un archivo JavaScript externo para manejar las llamadas AJAX utilizando Axios. Esto permite mantener el código de interacción fuera de las plantillas HTML.

Crea el archivo static/js/auth.js con el siguiente contenido:

// static/js/auth.js

// Función para manejar el envío del formulario de registro vía AJAX
function submitSignupForm() {
    const form = document.getElementById('signup-form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        // Limpiar errores anteriores
        document.querySelectorAll('.error').forEach(el => el.innerText = '');
        const formData = new FormData(form);

        axios.post(signupUrl, formData, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => {
            if(response.data.success) {
                alert(response.data.message);
                window.location.href = signinUrl;
            } else {
                // Mostrar errores en cada campo
                const errors = response.data.errors;
                for(let field in errors) {
                    const errorElem = document.getElementById('error-' + field);
                    if (errorElem) {
                        errorElem.innerText = errors[field];
                    }
                }
            }
        })
        .catch(error => console.error('Error:', error));
    });
}

// Función para manejar el envío del formulario de inicio de sesión vía AJAX
function submitSigninForm() {
    const form = document.getElementById('signin-form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        document.querySelectorAll('.error').forEach(el => el.innerText = '');
        const formData = new FormData(form);

        axios.post(signinUrl, formData, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => {
            if(response.data.success) {
                alert(response.data.message);
                window.location.href = homeUrl;
            } else {
                if(response.data.errors.__all__){
                    alert(response.data.errors.__all__);
                } else {
                    const errors = response.data.errors;
                    for(let field in errors) {
                        const errorElem = document.getElementById('error-' + field);
                        if (errorElem) {
                            errorElem.innerText = errors[field];
                        }
                    }
                }
            }
        })
        .catch(error => console.error('Error:', error));
    });
}

// Función para cerrar sesión vía AJAX
function logoutUser() {
    axios.get(logoutUrl, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(response => {
        if(response.data.success){
            window.location.href = homeUrl;
        }
    })
    .catch(error => console.error('Error:', error));
}

// Inicialización: se ejecuta cuando la página carga
document.addEventListener('DOMContentLoaded', function() {
    if(document.getElementById('signup-form')) {
        submitSignupForm();
    }
    if(document.getElementById('signin-form')) {
        submitSigninForm();
    }
});

Variables Globales:

Este archivo utiliza las variables signupUrl, signinUrl, logoutUrl, homeUrl y csrfToken. Estas deben definirse en la plantilla base para que Axios las utilice correctamente.

5. Actualización de las Plantillas HTML

5.1. Plantilla Base (base.html)

Actualiza store/templates/base.html para incluir Axios, el archivo JavaScript externo y para mostrar el nombre del usuario si hay sesión activa:

{% 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 'css/styles.css' %}">
    <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">
    <link rel="shortcut icon" href="{% static 'img/favicon.png' %}" type="image/x-icon">
</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>
                    {% if user.is_authenticated %}
                        <li>Bienvenido, {{ user.username }}</li>
                        <li><button onclick="logoutUser()" class="btn btn-secondary">Cerrar Sesión</button></li>
                    {% else %}
                        <li><a href="{% url 'signup' %}">Registrarse</a></li>
                        <li><a href="{% url 'signin' %}">Iniciar Sesión</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
   </header> 
   <main> 
        <div class="container">
            {% block main_content %}{% endblock %}
        </div>     
   </main>
   <footer>
        <p>&copy; 2025 EELA Ecommerce - Todos los derechos reservados</p>
   </footer>

    <!-- Incluir Axios desde un CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Definir variables globales para Axios -->
    <script>
        var ajaxSignupUrl = "{% url 'ajax_signup' %}";
        var ajaxSigninUrl = "{% url 'ajax_signin' %}";
        var signinUrl = "{% url 'signin' %}";
        var homeUrl = "{% url 'home' %}";
        var logoutUrl = "{% url 'logout' %}";
        var csrfToken = "{{ csrf_token }}";
    </script>
    <!-- Incluir el JavaScript de autenticación -->
    <script src="{% static 'js/auth.js' %}"></script>
</body>
</html>

5.2. Plantilla de Registro (signup.html)

Edita la plantilla store/templates/signup.html:

{% extends 'base.html' %}
{% block title %}Registrarse{% endblock %}
{% block main_content %}
    <h2>Registrarse</h2>
    <div class="form-container">
        <form id="signup-form">
            <div class="form-group">
                <label for="name">Nombre:</label>
                <input type="text" name="first_name" id="name" required maxlength="40">
                <div class="error" id="error-first_name"></div>
            </div>
            <div class="form-group">
                <label for="name">Apellido:</label>
                <input type="text" name="last_name" id="last_name" required maxlength="40">
                <div class="error" id="error-last_name"></div>
            </div>
            <div class="form-group">
                <label for="username">Usuario:</label>
                <input type="text" name="username" id="username" required minlength="10" maxlength="20">
                <div class="error" id="error-username"></div>
            </div>
            <div class="form-group">
                <label for="email">Correo electrónico:</label>
                <input type="email" name="email" id="email" required>
                <div class="error" id="error-email"></div>
            </div>
            <div class="form-group">
                <label for="password">Contraseña:</label>
                <input type="password" name="password" id="password" required minlength="8" maxlength="12">
                <div class="error" id="error-password"></div>
            </div>
            <div class="form-group">
                <label for="confirm_password">Confirmar Contraseña:</label>
                <input type="password" name="confirm_password" id="confirm_password" required minlength="8" maxlength="12">
                <div class="error" id="error-confirm_password"></div>
            </div>
            <input type="submit" value="Registrarse" class="btn">
            <input type="reset" value="Cancelar" class="btn btn-secondary">
        </form>
    </div>
{% endblock %}

5.3. Plantilla de Inicio de Sesión (signin.html)

Crea o edita store/templates/signin.html:

{% extends 'base.html' %}
{% block title %}Iniciar Sesión{% endblock %}
{% block main_content %}
    <h2>Iniciar Sesión</h2>
    <div class="form-container">
        <form id="signin-form">
            <div class="form-group">
                <label for="username">Usuario:</label>
                <input type="text" name="username" id="username" required minlength="10" maxlength="20">
                <div class="error" id="error-username"></div>
            </div>
            <div class="form-group">
                <label for="password">Contraseña:</label>
                <input type="password" name="password" id="password" required>
                <div class="error" id="error-password"></div>
            </div>
            <input type="submit" value="Iniciar Sesión" class="btn">
            <input type="reset" value="Cancelar" class="btn btn-secondary">
        </form>
    </div>
{% endblock %}

Conclusión

En este tutorial se implementaron de manera integral las funcionalidades de registro, inicio de sesión y cierre de sesión en Django utilizando el modelo de usuario predeterminado, validaciones centralizadas en Django Forms y llamadas AJAX mediante Axios. Además, se movió el código JavaScript a un archivo externo para mejorar la organización y se actualizó la plantilla base para mostrar el nombre del usuario cuando existe una sesión activa.

Estos pasos permiten ofrecer una experiencia de usuario moderna y fluida, con validación robusta y comunicación asíncrona entre el front end y el back end. ¡Continúa ampliando y personalizando tu proyecto según las necesidades de tu ecommerce!

Despliegue de proyecto Django Ecommerce en Azure Web App

Gabriel Villacis — Sat, 11 May 2024 00:30:17 +0000

A continuación se presenta un tutorial integral para desplegar tu proyecto Django Ecommerce en Microsoft Azure. Después de haber desarrollado y probado localmente tu aplicación, llega el momento de ponerla en producción en la nube. En este tutorial aprenderás a:

Configurar tu proyecto para producción, incluyendo variables de entorno, manejo de archivos estáticos y media mediante Azure Storage y logging.
Aprovisionar una base de datos PostgreSQL Flexible en Azure y conectar tu aplicación.
Subir el código fuente a GitHub utilizando claves SSH, detallando el proceso de generación y registro de dichas claves.
Desplegar tu aplicación en una Azure Web App utilizando GitHub Actions para automatizar el proceso de CI/CD.

Con estos pasos, tu proyecto quedará listo para funcionar en un entorno de producción en la nube, con despliegues automáticos y una infraestructura escalable.

Paso 1: Configurar el Proyecto Django para Producción

1.1. Agregar Dependencias para Azure Storage

Utiliza Poetry para agregar las dependencias necesarias:

poetry add azure-storage-blob
poetry add django-storages[azure]

Estas dependencias permiten que Django se integre con Azure Storage para gestionar archivos estáticos y media en la nube.

1.2. Configurar Variables de Entorno en `settings.py`

En tu archivo settings.py utiliza django-environ para cargar las variables de entorno. Estas variables incluyen:

ALLOWED_HOSTS y CSRF_TRUSTED_ORIGINS: para definir los dominios autorizados en producción.
AZURE_ACCOUNT_NAME y AZURE_ACCOUNT_KEY: para acceder a la Storage Account de Azure.
Variables de base de datos, entre otras.

Ejemplo de configuración:

import environ
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent
env = environ.Env()
environ.Env.read_env(BASE_DIR / '.env')

ALLOWED_HOSTS = env.list('ALLOWED_HOSTS')
CSRF_TRUSTED_ORIGINS = env.list('CSRF_TRUSTED_ORIGINS')

MEDIA_ROOT = BASE_DIR / 'media'
STATICFILES_DIRS = (BASE_DIR / 'static',)

AZURE_ACCOUNT_NAME = env('AZURE_ACCOUNT_NAME')
AZURE_ACCOUNT_KEY = env('AZURE_ACCOUNT_KEY')
AZURE_CUSTOM_DOMAIN = f'{AZURE_ACCOUNT_NAME}.blob.core.windows.net'

if DEBUG:
    STATIC_URL = '/static/'
    MEDIA_URL = '/media/'
else:
    STORAGES = {
        'default': {
            'BACKEND': 'storages.backends.azure_storage.AzureStorage',
            'OPTIONS': {
                'azure_container': 'media'
            },
        },
        'staticfiles': {
            'BACKEND': 'storages.backends.azure_storage.AzureStorage',
            'OPTIONS': {
                'azure_container': 'static'
            },
        },
    }

    STATIC_URL = f'https://{AZURE_CUSTOM_DOMAIN}/static/'
    MEDIA_URL = f'https://{AZURE_CUSTOM_DOMAIN}/media/'

1.3. Configurar Logging

Agrega la configuración de logging para que Django imprima los errores en la consola:

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'console': {
            'class': 'logging.StreamHandler',
        },
    },
    'root': {
        'handlers': ['console'],
        'level': 'ERROR',
    },
}

Paso 2: Aprovisionar la Base de Datos PostgreSQL Flexible en Azure

Crea una instancia de PostgreSQL Flexible Server en Azure.

Durante la configuración, habilita la opción que permite conexiones desde servicios de Azure para asegurar que tu Web App pueda conectarse.
Conecta a la base de datos utilizando herramientas como PGAdmin para validar la conectividad.
Configura la conexión en Django:

En tu archivo .env define las variables necesarias (DATABASE_NAME, DATABASE_USER, DATABASE_PASS, DATABASE_HOST, DATABASE_PORT) y actualiza la configuración en settings.py.
Ejecuta migraciones y carga datos iniciales:

   poetry run python manage.py migrate
   poetry run python manage.py loaddata initial_data.json

Paso 3: Configurar Azure Storage para Archivos Media y Static

¿Qué es Azure Storage y por qué se utiliza?

Azure Storage es un servicio en la nube que ofrece almacenamiento escalable para diversos tipos de datos, como archivos, blobs (archivos binarios), colas, tablas y más. Para una aplicación web, es especialmente útil para almacenar archivos estáticos (CSS, JavaScript, imágenes) y archivos media (imágenes de productos, vídeos, etc.). Utilizar Azure Storage permite:

Escalabilidad y disponibilidad: Los archivos se sirven desde servidores distribuidos, reduciendo la carga en tu aplicación.
Acceso anónimo: Puedes configurar los contenedores para permitir el acceso público a archivos, ideal para imágenes y recursos estáticos.
Integración con Django: Mediante la librería django-storages, se puede configurar Django para usar Azure Storage sin cambiar la lógica de la aplicación.

Pasos para configurar Azure Storage:

Crear una Azure Storage Account desde el portal de Azure.
Configurar el acceso anónimo: En la configuración de la Storage Account, habilita permisos de acceso anónimo para los contenedores.
Crear dos Blob Containers:
- Uno para media (archivos subidos por el usuario, como imágenes del catálogo).
- Otro para static (archivos estáticos de la aplicación). Configura el nivel de acceso en cada uno como "Container" para que los archivos sean accesibles públicamente.
Recoger archivos estáticos: Ejecuta:

   poetry run python manage.py collectstatic

Esto subirá los archivos de la carpeta static a su contenedor correspondiente.

Paso 4: Subir el Proyecto a GitHub con Claves SSH

4.1. Crear el Repositorio en GitHub

Inicia sesión en GitHub y haz clic en New Repository.
Define el nombre del repositorio, selecciona la visibilidad y haz clic en Create Repository.

4.2. Generar y Configurar Claves SSH

Si es la primera vez que usas claves SSH:

Genera la clave SSH:

Abre tu terminal y ejecuta:

   ssh-keygen -t ed25519 -C "tu_correo@example.com"

Presiona Enter para aceptar la ubicación predeterminada y opcionalmente define una contraseña.

Copia la clave pública:

Ejecuta:

   cat ~/.ssh/id_ed25519.pub

Copia el contenido de la clave.

Agrega la clave a GitHub:

Ve a GitHub, haz clic en tu foto de perfil y selecciona Settings.
En el menú lateral, elige SSH and GPG keys y haz clic en New SSH key.
Pega la clave pública, asigna un título descriptivo y guarda.

4.3. Subir el Código a GitHub

En la raíz de tu proyecto, inicializa Git y sube el código:

git init
git add .
git commit -m "Primer commit: Proyecto Django Ecommerce"
git remote add origin git@github.com:tu_usuario/tu_repositorio.git
git push -u origin master

Asegúrate de incluir el archivo .env en tu .gitignore para no subir información sensible.

Paso 5: Desplegar la Azure Web App con CI/CD usando GitHub Actions

5.1. Crear la Azure Web App

En el portal de Azure, crea una Web App y selecciona la opción de desplegar desde GitHub.
Configura la Web App para que se conecte a tu repositorio y habilita el despliegue continuo.
Establece las variables de entorno necesarias en la Web App (ALLOWED_HOSTS, CSRF_TRUSTED_ORIGINS, AZURE_ACCOUNT_NAME, AZURE_ACCOUNT_KEY, DATABASE_*, etc.).

5.2. Configurar el Workflow de GitHub Actions

Crea un archivo en tu repositorio, por ejemplo, .github/workflows/deploy.yml, con el siguiente contenido:

name: Deploy Django Ecommerce to Azure

on:
  push:
    branches:
      - master  # O la rama que desees

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Python version
        uses: actions/setup-python@v1
        with:
          python-version: '3.12'

      - name: Install Poetry
        run: pip install poetry

      - name: Install dependencies
        run: poetry install

      - name: Collect static files
        run: poetry run python manage.py collectstatic --noinput

      - name: Run migrations
        run: poetry run python manage.py migrate

      - name: Upload artifact for deployment
        uses: actions/upload-artifact@v3
        with:
          name: django-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: django-app
          path: .

      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v2
        id: deploy-to-webapp
        with:
          app-name: 'nombre-de-tu-app'  # Reemplaza con el nombre real de tu Web App
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE }}

Este workflow se divide en dos trabajos:

Build: Instala dependencias, recoge archivos estáticos y ejecuta migraciones, luego sube el artefacto.
Deploy: Descarga el artefacto y despliega la aplicación en Azure Web App utilizando el publish profile almacenado en los secretos de GitHub.

Paso 6: Conclusión

En este tutorial se ha descrito de forma integral el proceso para desplegar tu proyecto Django Ecommerce en Azure. Se han abarcado los siguientes aspectos:

Configuración para Producción: Se agregaron dependencias específicas, se configuraron variables de entorno, se definieron logging y se ajustaron las URLs de archivos estáticos y media para trabajar con Azure Storage.
Base de Datos en Azure: Se creó una instancia PostgreSQL Flexible, se conectó el proyecto y se aplicaron las migraciones.
Azure Storage: Se explicó qué es y por qué se utiliza para almacenar archivos estáticos y media, y se detalló el proceso para crear la Storage Account y sus contenedores.
Subida a GitHub con Claves SSH: Se describió el proceso de generación y registro de claves SSH, y cómo subir el proyecto a GitHub.
Despliegue Automático con GitHub Actions: Se configuró un workflow que construye y despliega la aplicación en una Azure Web App.
Checkout y Administración de Pedidos: (Integrado en otros tutoriales) Se ha preparado el proceso de checkout y la administración en el panel de Django.

Con estos pasos, tu proyecto estará listo para operar en producción en la nube de Azure, con un flujo de despliegue automatizado que facilita las actualizaciones continuas y mejora la escalabilidad y seguridad de tu aplicación. ¡Éxito en el despliegue y continúa personalizando tu proyecto según las necesidades de tu negocio!

Gestión de Entidades en la DPE (parte 5 - despliegue)

Gabriel Villacis — Tue, 30 Apr 2024 22:54:43 +0000

Este tutorial tratará el despliegue del proyecto al entorno cloud de Microsoft Azure:

Paso 1: Aprovisionamiento e inicialización de la base de datos PostgreSQL

Crear base de datos PostreSQL Flexible Server en Azure y asegurarse de habilitar el check para permitir conexiones desde servicios Azure, así como habilitar la IP Pública en el firewall para las conexiones desde PGADMIN.
Conectarse a la base PostgreSQL vía PGADMIN con las credenciales creadas y crear la base de datos gestor_entidades.
Conectar a la base de datos desde el proyecto Django (reemplazando las variables de conexión) y aplicar migraciones poetry run python manage.py migrate
Aplicar scripts con carga de archivos de data inicial:

poetry run python manage.py runscript tipos_organizaciones_feeder
poetry run python manage.py runscript tipos_entidades_feeder
poetry run python manage.py runscript funciones_feeder
poetry run python manage.py runscript ambitos_accion_feeder
poetry run python manage.py runscript tipos_gad_feeder
poetry run python manage.py runscript zonales_feeder
poetry run python manage.py runscript provincia_feeder
poetry run python manage.py runscript canton_feeder
poetry run python manage.py runscript parroquia_feeder

Crear superuser poetry run python manage.py createsuperuser

Paso 2: Configurar proyecto Django para pase a producción

Agregar dependencias:
poetry add azure-storage-blob
poetry add django-storages[azure]
Crear variables de entorno y configurarlas dentro de settings.py::

DEBUG
ALLOWED_HOSTS
CSRF_TRUSTED_ORIGINS
AZURE_ACCOUNT_NAME
AZURE_ACCOUNT_KEY
AZURE_CUSTOM_DOMAIN

DEBUG = env('DEBUG') == 'True'
ALLOWED_HOSTS = env.list('ALLOWED_HOSTS')
CSRF_TRUSTED_ORIGINS = env.list('CSRF_TRUSTED_ORIGINS')

MEDIA_ROOT = BASE_DIR / 'media'
STATICFILES_DIRS = (BASE_DIR / 'static',)

AZURE_ACCOUNT_NAME = env('AZURE_ACCOUNT_NAME')
AZURE_ACCOUNT_KEY = env('AZURE_ACCOUNT_KEY')
AZURE_CUSTOM_DOMAIN = f'{AZURE_ACCOUNT_NAME}.blob.core.windows.net'

if DEBUG:    
    STATIC_URL = '/static/'
    MEDIA_URL = '/media/'
else:
    STORAGES = {
        'default': {
            'BACKEND': 'storages.backends.azure_storage.AzureStorage',
            'OPTIONS': {
                'azure_container': 'media'                
            },
        },
        'staticfiles': {
            'BACKEND': 'storages.backends.azure_storage.AzureStorage',
            'OPTIONS': {
                'azure_container': 'static'
            },
        },
    }

    STATIC_URL = f'https://{AZURE_CUSTOM_DOMAIN}/static/'
    MEDIA_URL = f'https://{AZURE_CUSTOM_DOMAIN}/media/'

Agregar configuración de logging de Django en settings.py

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'console': {
            'class': 'logging.StreamHandler',
        },
    },
    'root': {
        'handlers': ['console'],
        'level': 'ERROR',  # Nivel de registro que se desea ver
    },
}

Colectar archivos estáticos con poetry run python manage.py collectstatic

Paso 3: Enviar todos los cambios pendientes al repositorio Github

git add .
git commit -m "Commit inicial"
git push origin main

Paso 4: Crear una Azure Storage Account para los archivos media y static

Crear el azure storage account
En las configuraciones habilitarle el permiso para acceso anónimo
Crear dos blob containers: media y static con el nivel de permiso Anonymous Access Level -> Container

Paso 5: Desplegar una Azure WebApp

Crear una Azure Web App en la cual se vincule el código fuente del proyecto a través del repositorio Github
Enlazar la cuenta y el repo Github, habilitando la opción de despliegue continuo y autenticación básica
Crear y establecer las variables de entorno
Editar los jobs del workflow de Github Actions en base a la siguiente plantilla:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Python version
        uses: actions/setup-python@v1
        with:
          python-version: '3.11'

      - name: Install Poetry
        run: pip install poetry

      - name: Create a virtual environment and install the dependencies
        run: poetry install

      - name: Upload artifact for deployment jobs
        uses: actions/upload-artifact@v3
        with:
          name: python-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: python-app
          path: .

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v2
        id: deploy-to-webapp
        with:
          app-name: 'change-app-name'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_F17335B111134CAAA9F88E8CBAF0E7DB }}

Y listo, de esta manera cada vez que se hagan confirmaciones en el repositorio se desplegarán los cambios de forma automática.

Gestión de Entidades en la DPE (parte 4)

Gabriel Villacis — Fri, 26 Apr 2024 00:13:02 +0000

En este post vamos a revisar cómo enviar a guardar el formulario.

Enviar el formulario vía POST usando Ajax:

$('#form-entidad').submit(function(event) {
        event.preventDefault();  // Evitar que el formulario se envíe de forma convencional

        let csrfToken = $('input[name="csrfmiddlewaretoken"]').val();

        // Obtener los datos del formulario
        let formData = new FormData($(this)[0]);

        // Agregar el token CSRF a los datos del formulario
        formData.append('csrfmiddlewaretoken', csrfToken);

        // Enviar los datos al servidor mediante AJAX
        $.ajax({
            url: '/',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert('El registro de la entidad se procesó exitosamente.');
            },
            error: function(xhr, textStatus, errorThrown) {
                console.error('Error al enviar el formulario:', errorThrown);                
            }
        });
});

Como del lado del servidor pueden venir errores de validación, esos mensajes se manejarán y presentarán como 'invalid-feedback' en el campo correspondiente. Para ello se debe refactorizar la función de manejo de error en la petición ajax:

error: function(xhr, textStatus, errorThrown) {
    console.error('Error al enviar el formulario:', errorThrown);

    if (xhr.responseJSON) {
        let errores = JSON.parse(xhr.responseJSON.msg_error); // Obtener el JSON de errores de validación

        // Iterar sobre los mensajes de error y agregarlos a los elementos HTML correspondientes
        $.each(errores, function(campo, detalles) {

            let mensajesError = ''; // Inicializar la cadena de mensajes de error
            // Iterar sobre cada detalle de error para concatenar los mensajes
            $.each(detalles, function(index, detalle) {
                mensajesError += detalle.message + '<br>'; // Concatenar el mensaje de error con un <br>
            });

            let $campoInput = $('[name="' + campo + '"]'); // Seleccionar el elemento de formulario por su atributo name                        
            // Agregar el mensaje de error al elemento de formulario
            $campoInput.addClass('is-invalid'); // Marcar el campo como inválido
            $campoInput.next('.invalid-feedback').html(mensajesError); // Agregar el mensaje de error
        });
    } else {
        console.error('La respuesta no es un JSON de errores.'); // Manejar el caso en que la respuesta no sea un JSON
    }
}

El manejo del reset del fomulario debe considerar remover las clases 'is-invalid' y 'was-validated' de los inputs y del formulario, respectivamente:

$('#form-entidad').on('reset', function(event) {
    $(this).find('select, input').removeClass('is-invalid');
    $(this).removeClass('was-validated');
});

Gestión de Entidades en la DPE (parte 3)

Gabriel Villacis — Wed, 24 Apr 2024 04:06:34 +0000

Este tutorial cubre los siguientes puntos:

Definición de plantilla con formulario para registro de Entidades.
Definición de URLs y vistas.
Configuración de archivos estáticos.

Paso 1: Definición de URLs, vista y plantilla inicial

Crea un archivo urls.py en la aplicación "entidades": Una vez creado el archivo define la URL para la página de inicio y asóciala con una vista llamada "home" que renderice la plantilla correspondiente.

from django.urls import path
from entidades import views

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

Incluir las urls de la aplicación dentro del proyecto: En el archivo gestor_entidades/urls.py:

from django.urls import path, include

urlpatterns = [
    # Otras urls
    path('', include('entidades.urls'))
]

Definición de la vista: En el archivo views.py de la aplicación, define la vista home que renderizará la plantilla de inicio.

from django.shortcuts import render

def home(request):
    return render(request, 'index.html')

Creación de la plantilla: Crea la plantilla "index.html" en el directorio /entidades/templates.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Registro de Entidades de la DPE</title>
</head>
<body> 
</body>   
</html>

Paso 2: Configuración de archivos estáticos

Configurar el directorio estático: En el proyecto, asegúrate de tener configurado el directorio estático en tu archivo settings.py. Esto es necesario para que Django pueda servir los archivos estáticos correctamente.

STATIC_URL = 'static/'
STATICFILES_DIRS = (BASE_DIR / 'static',)

Colocar el archivo favicon en el directorio estático: Mueve el archivo favicon (favicon.ico) al directorio estático de tu proyecto
(static/img).
Referenciar el favicon en la plantilla: Abre la plantilla "index.html" y agrega el enlace al favicon en la sección
. Es importante agregar al inicio de la plantilla la directiva {% load static %}

{% load static %}

<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">

Agregrar estáticos de Bootstrap y JQuery vía CDN: En la plantilla "index.html" agregar los enlaces al CDN de Bootstrap CSS en el bloque <head> y Bootstrap JS, así como JQuery en el bloque <body>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Crear el archivo "form-entidad.js en el directorio estático:
(static/js).
Agregrar estáticos de JS en la plantilla "index.html" en el bloque <body>

<script src="{% static 'js/form-entidad.js' %}"></script>

Paso 3: Incluir formulario de Registro de Entidad

A continuación, vamos a incluir el formulario con todos los campos del modelo Entidad:

Agregar dentro del código de la plantilla "index.html" el siguiente bloque:

<div class="container my-3">
    <h1 class="text-center">Registro de Entidad</h1>        
    <form class="my-2 row g-3" id="form-entidad">            
        <div class="col-md-6">
            <label for="input-ruc" class="form-label fw-bold">RUC</label>
            <input type="text" class="form-control" id="input-ruc" name="ruc">
        </div>
        <div class="col-md-6">
            <label for="input-nombre" class="form-label fw-bold">Nombre</label>
            <input type="text" class="form-control" id="input-nombre" name="nombre">
        </div>
        <div class="col-md-12">
            <label class="form-label fw-bold">Tipo de Organización</label>                
            {% for tipo_org in tipos_organizaciones %}
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="tipo_organizacion" value="{{tipo_org.id}}" id="input-tipo-org-{{tipo_org.id}}">
                    <label class="form-check-label" for="input-tipo-org-{{tipo_org.id}}">{{tipo_org.nombre}}
                    </label>
                </div>
            {% endfor %}
        </div>
        <div class="col-md-6">
            <label for="select-tipo-entidad" class="form-label fw-bold">Tipo de Entidad</label>
            <select class="form-select" id="select-tipo-entidad" name="tipo_entidad">
                <option value="" selected disabled>Seleccione...</option>
                {% for tipo_ent in tipos_entidades %}
                    <option value="{{tipo_ent.id}}">{{tipo_ent.nombre}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-6">
            <label for="select-funcion" class="form-label fw-bold">Función</label>
            <select class="form-select" id="select-funcion" name="funcion">
                <option value="" selected disabled>Seleccione...</option>
                {% for funcion in funciones %}
                    <option value="{{funcion.id}}">{{funcion.nombre}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-12">
            <label class="form-label fw-bold">Control SNAP (Secretaría Nacional de la Administración Pública/Secretaría Técnica de Transparencia de Gestión):)</label>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="control_snap" value="1" id="input-control-snap-1">
                <label class="form-check-label" for="input-control-snap-1">SI</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="control_snap" value="0" id="input-control-snap-0">
                <label class="form-check-label" for="input-control-snap-0">NO</label>
            </div>
        </div>
        <div class="col-md-6">
            <label for="select-ambito-accion" class="form-label fw-bold">Ámbito de Acción</label>
            <select class="form-select" id="select-ambito-accion" name="ambito_accion">
                <option value="" selected disabled>Seleccione...</option>
                {% for ambito_accion in ambitos_accion %}
                    <option value="{{ambito_accion.id}}">{{ambito_accion.nombre}}</option>
                {% endfor %}
            </select>
        </div>
        <h4 class="text-center">Ubicación de la Entidad</h4>
        <hr>
        <div class="col-md-6">
            <label for="select-zonal" class="form-label fw-bold">Zonal</label>
            <select class="form-select" id="select-zonal" name="zonal">
                <option value="" selected disabled>Seleccione...</option>
                {% for zonal in zonales %}
                    <option value="{{zonal.id}}">{{zonal.nombre}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-6">
            <label for="select-provincia" class="form-label fw-bold">Provincia</label>
            <select class="form-select" id="select-provincia" name="provincia">
                <option value="" selected disabled>Seleccione...</option>
                {% for provincia in provincias %}
                    <option value="{{provincia.id}}">{{provincia.nombre}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-6">
            <label for="select-canton" class="form-label fw-bold">Cantón</label>
            <select class="form-select" id="select-canton" name="canton">
            </select>
        </div>
        <div class="col-md-6">
            <label for="select-parroquia" class="form-label fw-bold">Parroquia</label>
            <select class="form-select" id="select-parroquia" name="parroquia">
            </select>
        </div>
        <div class="col-md-12">
            <label for="input-direccion" class="form-label fw-bold">Dirección</label>
            <input type="text" class="form-control" id="input-direccion" name="direccion">
        </div>
        <div class="col-md-4">
            <label for="input-telefono" class="form-label fw-bold">Teféfono</label>
            <input type="text" class="form-control" id="input-telefono" name="telefono">
        </div>
        <div class="col-md-4">
            <label for="input-correo-institucional" class="form-label fw-bold">Correo institucional</label>
            <input type="email" class="form-control" id="input-correo-institucional" name="correo_institucional">
        </div>
        <div class="col-md-4">
            <label for="select-tipo-gad" class="form-label fw-bold">Tipo de GAD</label>
            <select class="form-select" id="select-tipo-gad" name="tipo_gad">
                <option value="" selected disabled>Seleccione...</option>
                {% for tipo_gad in tipos_gad %}
                    <option value="{{tipo_gad.id}}">{{tipo_gad.nombre}}</option>
                {% endfor %}
            </select>
        </div>
        <h4 class="text-center">Datos legales de la Entidad</h4>
        <hr>
        <div class="col-md-12">
            <label for="area-base-normativa" class="form-label fw-bold">Base Normativa</label>
            <textarea class="form-control" id="area-base-normativa" name="base_normativa" rows="10"></textarea>
        </div>
        <div class="col-md-6">
            <label for="area-base-normativa" class="form-label fw-bold">Fecha Publicación Base Legal</label>                
            <input type="date" class="form-control" id="input-fecha-pub-base-legal" name="fecha_publicacion_base_legal" min="1900-01-01" />
        </div>
        <div class="col-md-6">
            <label for="input-num-registro-oficial" class="form-label fw-bold">No. Registro Oficial</label>
            <input type="text" class="form-control" id="input-num-registro-oficial" name="num_registro_oficial">
        </div>
        <div class="col-md-12">
            <label for="area-nota-aclaracion" class="form-label fw-bold">Nota de aclaración alguna particularidad</label>
            <textarea class="form-control" id="area-nota-aclaracion" name="nota_aclaracion" rows="3"></textarea>
        </div>
        <div class="col-md-12">
            <label for="input-nombres-max-autoridad" class="form-label fw-bold">Nombres de la máx. autoridad</label>
            <input type="text" class="form-control" id="input-nombres-max-autoridad" name="nombres_maxima_autoridad">
        </div>
        <h4 class="text-center">Datos del responsable de ingresar informe anual</h4>
        <hr>
        <div class="col-md-12">
            <label for="input-nombres-responsable" class="form-label fw-bold">Nombres del responsable</label>
            <input type="text" class="form-control" id="input-nombres-responsable" name="nombres_responsable">
        </div>
        <div class="col-md-6">
            <label for="input-correo-responsable" class="form-label fw-bold">Correo</label>
            <input type="email" class="form-control" id="input-correo-responsable" name="correo_responsable">
        </div>
        <div class="col-md-4">
            <label for="input-telef-responsable" class="form-label fw-bold">Teléfono</label>
            <input type="text" class="form-control" id="input-telef-responsable" name="telefono_responsable">
        </div>
        <div class="col-md-2">
            <label for="input-ext-telef-responsable" class="form-label fw-bold">Ext. Teléfono</label>
            <input type="text" class="form-control" id="input-ext-telef-responsable" name="extension_telef_responsable">
        </div>
        <h4 class="text-center">Adjuntos</h4>
        <hr>
        <div class="col-md-12">
            <label for="input-file-ordenanza" class="form-label fw-bold">Ordenanza (pdf)</label>
            <input class="form-control" type="file" id="input-file-ordenanza" name="file_ordenanza">
        </div>
        <div class="col-md-12">
            <label for="input-file-reg-oficial" class="form-label fw-bold">Registro Oficial (pdf)</label>
            <input class="form-control" type="file" id="input-file-reg-oficial" name="file_registro_oficial">
        </div>
        <div class="col-md-12">
            <label for="input-file-ruc" class="form-label fw-bold">RUC (pdf)</label>
            <input class="form-control" type="file" id="input-file-ruc" name="file_ruc">
        </div>
        <div class="col-md-12">
            <button type="submit" class="btn btn-primary">Registrar</button>
            <button type="reset" class="btn btn-secondary">Cancelar</button>
        </div>
    </form>
</div>

En la vista home incluir el envío de los datos requeridos por la plantilla, tales como: tipos_organizaciones, tipos_entidades, funciones, ambitos_accion, zonales, etc.:

def home(request):
    tipos_organizaciones = TipoOrganizacion.objects.all()
    tipos_entidades = TipoEntidad.objects.all()
    funciones = Funcion.objects.all()
    ambitos_accion = AmbitoAccion.objects.all()
    zonales = Zonal.objects.all()
    provincias = Provincia.objects.all()
    tipos_gad = TipoGad.objects.all()
    return render(request, 'index.html',{'tipos_organizaciones': tipos_organizaciones,
                                          'tipos_entidades': tipos_entidades,
                                          'funciones': funciones,
                                          'ambitos_accion': ambitos_accion,
                                          'zonales': zonales,
                                          'provincias': provincias,
                                          'tipos_gad': tipos_gad,
                                        })

Para tener la posibilidad de consultar los cantones y parroquias de acuerdo a la provincia y cantón seleccionado por el usuario debemos crear las urls y funciones de vista que permitan obtener los datos en formato JSON:

Creamos las urls:

urlpatterns = [
    # Otras urls
    path('provincias/<int:provincia_id>/cantones/', views.get_cantones),
    path('cantones/<int:canton_id>/parroquias/', views.get_parroquias),
]

Creamos las funciones de vista:

def get_cantones(request, provincia_id):   
    cantones = Canton.objects.filter(provincia__id=provincia_id).values('id', 'nombre')
    cantones_dict_list = list(cantones)  # Convierte los objetos QuerySet en una lista de diccionarios
    return JsonResponse(cantones_dict_list, safe=False)


def get_parroquias(request, canton_id):   
    parroquias = Parroquia.objects.filter(canton__id=canton_id).values('id', 'nombre')
    parroquias_dict_list = list(parroquias)  # Convierte los objetos QuerySet en una lista de diccionarios
    return JsonResponse(parroquias_dict_list, safe=False)

Consumimos las rutas usando JQuery:

$(document).ready(function() {
    $('#select-provincia').change(function() {
        let provincia_id = $(this).val();
        $.ajax({
            url: '/provincias/' + provincia_id + '/cantones/',
            type: 'GET',
            success: function(data) {
                $('#select-canton').empty();
                $('#select-parroquia').empty();
                $.each(data, function(index, canton) {
                    $('#select-canton').append($('<option>', {
                        value: canton.id,
                        text: canton.nombre
                    }));
                });
            },
            error: function(xhr, textStatus, errorThrown) {
                console.error('Error al obtener los cantones:', errorThrown);                
            }
        });
    });

    $('#select-canton').change(function() {
        let canton_id = $(this).val();
        $.ajax({
            url: '/cantones/' + canton_id + '/parroquias/',
            type: 'GET',
            success: function(data) {
                $('#select-parroquia').empty();                
                $.each(data, function(index, parroquia) {
                    $('#select-parroquia').append($('<option>', {
                        value: parroquia.id,
                        text: parroquia.nombre
                    }));
                });
            },
            error: function(xhr, textStatus, errorThrown) {
                console.error('Error al obtener las parroquias:', errorThrown);                
            }
        });
    });
});

Gestión de Entidades en la DPE (parte 2)

Gabriel Villacis — Wed, 24 Apr 2024 00:10:18 +0000

Este tutorial cubre los siguientes puntos:

Definición de modelo Entidad.

Paso 1: Definición del Modelo

Dentro del paquete "models", crea el archivo Python: "entidad.py" con el siguiente código:

# entidades/models/entidad.py
from django.db import models
from entidades.models import *

class Entidad(models.Model):
    nombre = models.CharField(max_length=250)
    ruc = models.CharField(max_length=13)
    tipo_organizacion = models.ForeignKey(TipoOrganizacion, on_delete=models.CASCADE)
    tipo_entidad = models.ForeignKey(TipoEntidad, on_delete=models.CASCADE)
    funcion = models.ForeignKey(Funcion, on_delete=models.CASCADE)
    control_snap = models.BooleanField()
    ambito_accion = models.ForeignKey(AmbitoAccion, on_delete=models.CASCADE)
    zonal = models.ForeignKey(Zonal, on_delete=models.CASCADE)
    provincia = models.ForeignKey(Provincia, on_delete=models.CASCADE)
    canton = models.ForeignKey(Canton, on_delete=models.CASCADE)
    parroquia = models.ForeignKey(Parroquia, on_delete=models.CASCADE)
    direccion = models.CharField(max_length=150)
    telefono = models.CharField(max_length=9)
    correo_institucional = models.EmailField()
    tipo_gad = models.ForeignKey(TipoGad, on_delete=models.CASCADE)
    base_normativa = models.TextField(max_length=5000, blank=True, null=True)
    fecha_publicacion_base_legal = models.DateField()
    num_registro_oficial = models.CharField(max_length=25)
    nota_aclaracion = models.TextField(max_length=1000, blank=True, null=True)
    nombres_maxima_autoridad = models.CharField(max_length=100)
    nombres_responsable = models.CharField(max_length=100)
    correo_responsable = models.EmailField()
    telefono_responsable = models.CharField(max_length=9)
    extension_telef_responsable = models.CharField(max_length=5)
    file_ordenanza = models.FileField(null=True, upload_to='adjuntos/')
    file_registro_oficial = models.FileField(null=True, upload_to='adjuntos/')
    file_ruc = models.FileField(null=True, upload_to='adjuntos/')
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_entidades'
        verbose_name = 'Entidad'
        verbose_name_plural = 'Entidades'

En el módulo models/__init__.py incluye la importación del modelo creado:

from .entidad import Entidad

Paso 2: Configuración para el Manejo de archivos

Asegurar la configuración adecuada para manejar uploads en Django es esencial, especialmente al utilizar el campo FileField en el modelo Entidad.

Necesitamos configurar la carpeta para almacenar los archivos subidos. Por lo general, esto se hace agregando una configuración en tu archivo settings.py.

Abre tu archivo gestor_entidades/settings.py y agrega o modifica las siguientes líneas:

# Configuración para manejar archivos multimedia
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR  / 'media'

Adicionalmente, en las URLS del proyecto gestor_entidades/urls.py agrega:

from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Estas líneas de código permiten que, cuando estemos en modo de depuración (DEBUG=True en settings.py), Django pueda manejar automáticamente las solicitudes para archivos de medios y los sirva correctamente (publicarlos vía http) tomándolos desde el directorio establecido en MEDIA_ROOT.

Crea la carpeta media/ en la raíz de tu proyecto si aún no existe. Esto es donde se almacenarán los archivos subidos. Puedes crear esta carpeta manualmente o hacerlo ejecutando el siguiente comando en tu terminal:

mkdir media

Ahora, los archivos subidos se almacenarán en la carpeta media/adjuntos/ dentro de tu proyecto.

Paso 3: Configuración del Administrador

En el archivo entidades/admin.py, registra el modelo Entidad para que puedan ser gestionado a través del administrador de Django:

@admin.register(Entidad)
class EntidadAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'tipo_organizacion', 'fecha_registro', 'fecha_ult_act')

Y finalmente, para ejecutar el servidor de desarrollo de Django, usa el siguiente comando:

poetry run python manage.py runserver

Registro de Entidades en la DPE

Gabriel Villacis — Thu, 18 Apr 2024 23:18:05 +0000

Este tutorial cubre los siguientes puntos:

Definición de modelos.
Configuración de la conexión a una base de datos PostgreSQL.
Configuración del administrador de Django para gestionar los modelos.

Paso 1: Definición de Modelos

Dentro del directorio de la aplicación "entidades", primero crea un directorio llamado "models".
Dentro del directorio "models", crea un archivo especial __init__.py para convertir el directorio en un paquete de Python.
Luego, dentro del paquete "models", crea el archivo Python: "catalogs.py"

La estructura de directorios debería verse así:

entidades/
├── __init__.py
├── admin.py
├── apps.py
├── migrations/
│   └── ...
├── models/
│   ├── __init__.py
│   ├── catalogs.py
├── tests.py
└── views.py

Abre el archivo "catalogs.py" y pega el código de los modelos tipo catálogo dentro de él.


# entidades/models/catalogs.py
from django.db import models

class TipoOrganizacion(models.Model):
    nombre = models.CharField(max_length=250)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_tipos_organizacion'
        verbose_name = 'Tipo de Organización'
        verbose_name_plural = 'Tipos de Organización'


class TipoEntidad(models.Model):
    nombre = models.CharField(max_length=75)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_tipos_entidad'
        verbose_name = 'Tipo de Entidad'
        verbose_name_plural = 'Tipos de Entidad'


class Funcion(models.Model):
    nombre = models.CharField(max_length=50)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_tipos_funcion'
        verbose_name = 'Tipo de Función'
        verbose_name_plural = 'Tipos de Función'


class AmbitoAccion(models.Model):
    nombre = models.CharField(max_length=25)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_ambitos_accion'
        verbose_name = 'Ámbito de Acción'
        verbose_name_plural = 'Ámbitos de Acción'


class Zonal(models.Model):
    nombre = models.CharField(max_length=25)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_zonales'
        verbose_name = 'Zonal'
        verbose_name_plural = 'Zonales'


class Provincia(models.Model):
    nombre = models.CharField(max_length=50)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_provincias'
        verbose_name = 'Provincia'
        verbose_name_plural = 'Provincias'


class Canton(models.Model):
    nombre = models.CharField(max_length=100)
    provincia = models.ForeignKey(Provincia, on_delete=models.CASCADE)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_cantones'
        verbose_name = 'Cantón'
        verbose_name_plural = 'Cantones'


class Parroquia(models.Model):
    nombre = models.CharField(max_length=100)
    canton = models.ForeignKey(Canton, on_delete=models.CASCADE)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_parroquias'
        verbose_name = 'Parroquia'
        verbose_name_plural = 'Parroquias'


class TipoGad(models.Model):
    nombre = models.CharField(max_length=50)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'ent_tipos_gad'
        verbose_name = 'Tipo de GAD'
        verbose_name_plural = 'Tipo de GAD'

En el módulo models/__init__.py incluye la importación de los modelos creados:

from .catalogs import *

Paso 2: Configuración de la Conexión a PostgreSQL

En el archivo gestor_entidades/settings.py, asegúrate de configurar la conexión a la base de datos PostgreSQL. Reemplaza la sección DATABASES con lo siguiente:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'nombre_basededatos',
        'USER': 'usuario_basededatos',
        'PASSWORD': 'contraseña',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Asegúrate de reemplazar 'nombre_basededatos', 'usuario_basededatos', y 'contraseña' con los detalles correctos de tu base de datos PostgreSQL.

Adicionalmente se necesita instalar el controlador psycopg2 en tu entorno virtual. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

poetry add psycopg2-binary

Paso 3: Creación y Ejecución de Migraciones

Ejecuta el siguiente comando para crear las migraciones iniciales:

poetry run python manage.py makemigrations

Este comando buscará cualquier cambio en tus modelos y generará archivos de migración en el directorio migrations/ de cada aplicación de tu proyecto.

Después de crear las migraciones, ejecuta el siguiente comando para aplicar las migraciones a la base de datos:

poetry run python manage.py migrate

Este comando ejecutará todas las migraciones pendientes y actualizará la base de datos de acuerdo con los modelos definidos.

Si tienes algún problema con la migración o necesitas revertir los cambios, puedes usar el siguiente comando para deshacer la última migración aplicada:

poetry run python manage.py migrate <nombre_aplicacion> zero

Reemplaza con el nombre de la aplicación donde deseas deshacer la migración. También puedes usar zero en lugar de un nombre de migración específico para deshacer todas las migraciones de esa aplicación.

Paso 4: Configuración del Administrador

En el archivo entidades/admin.py, registra tus modelos para que puedan ser gestionados a través del administrador de Django:

from django.contrib import admin
from entidades.models import *

admin.site.site_header = 'Administrador del Catastro de Entidades'

@admin.register(TipoOrganizacion)
class TipoOrganizacionAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

@admin.register(TipoEntidad)
class TipoEntidadAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

@admin.register(Funcion)
class FuncionAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

@admin.register(AmbitoAccion)
class AmbitoAccionAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

@admin.register(Zonal)
class ZonalAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

@admin.register(Provincia)
class ProvinciaAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

@admin.register(Canton)
class CantonAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'provincia', 'fecha_registro', 'fecha_ult_act')

@admin.register(Parroquia)
class ParroquiaAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'canton', 'fecha_registro', 'fecha_ult_act')

@admin.register(TipoGad)
class TipoGadAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

¡Y eso es todo! Ahora puedes acceder al administrador de Django en http://localhost:8000/admin

Recuerda crear un superusuario ejecutando:

poetry run python manage.py createsuperuser

Y finalmente, para ejecutar el servidor de desarrollo de Django, usa el siguiente comando:

poetry run python manage.py runserver

Paso 5: Carga de datos

Descarga los datos iniciales desde el siguiente enlace: Datos iniciales
Una vez descargado el archivo zip, descomprímelo y copia la carpeta data/ en la raíz del directorio del proyecto.

La estructura de directorios debería verse así:

gestor_entidades/
data/
├── provincias.csv
entidades/
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 al modelo de Provincia 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 el archivo Python: provincia_feeder.py.
Abre el archivo provincia_feeder.py y pega el siguiente código:

import csv
from entidades.models import Provincia

def feed_provincias():
    Provincia.objects.all().delete()

    with open('data/provincias.csv') as csv_file:
        csv_dict_reader = csv.DictReader(csv_file, delimiter=';')
        for item in csv_dict_reader:
            provincia= Provincia(id=item['id'], nombre=item['nombre'])
            provincia.save()
            print(f'Provincia creada: {provincia}')


def run():
    feed_provincias()

Para poder ejecutar los scripts de carga de datos 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 gestor_entidades/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 el script para cargar los datos iniciales. En la terminal vamos a ejecutar:

poetry run python manage.py runscript provincia_feeder

Si todo va bien deberíamos tener cargados los registros de provincias 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.

Espero que este tutorial te haya sido útil.

Desarrollo de Ecommerce con Django (parte 3)

Gabriel Villacis — Mon, 01 Apr 2024 20:40:39 +0000

A continuación se presenta un tutorial completo y detallado que te guiará paso a paso en la implementación de tres funcionalidades en tu ecommerce:

Página de inicio (index.html): Se mostrarán los productos destacados.
Catálogo de productos (catalog.html): Se listarán todos los productos activos con paginación mejorada (botones para ir al inicio, anterior, siguiente y fin), y también se aplicará el formateo de precios.
Página de detalle del producto (product_detail.html): Se mostrará la información completa de un producto específico, utilizando una vista dedicada, su URL y una plantilla que hereda del layout base. Además, se incluirá el estilo CSS para el detalle del producto.

Cada sección se explica de forma didáctica para que puedas implementarla paso a paso.

1. Página de Inicio – Productos Destacados

1.1. Definir la Vista Home

En el archivo store/views.py, actualiza la función home para que consulte los productos que están activos y marcados como destacados. Esta consulta se realiza directamente sobre el modelo Producto.

from django.shortcuts import render
from .models import Producto

def home(request):
    # Filtramos los productos activos y que están marcados como destacados
    featured_products = Producto.objects.filter(activo=True, destacado=True)
    context = {'featured_products': featured_products}
    return render(request, 'index.html', context)

1.2. Actualizar la Plantilla index.html

En la carpeta store/templates/, edita el archivo index.html para que herede del layout base (base.html). En este ejemplo se utiliza el módulo humanize de Django para formatear los precios; por ello, es necesario cargarlo en la plantilla.

{% 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">
            {% for producto in featured_products %}
                <div class="product-card">
                    <!-- Se asume que 'imagen' es un ImageField -->
                    <img src="{{ producto.imagen.url }}" alt="{{ producto.nombre }}">
                    <h3>{{ producto.nombre }}</h3>
                    <p>
                        ${{ producto.precio|floatformat:2 }}
                    </p>
                    <button class="btn">Añadir al carrito</button>
                </div>
            {% empty %}
                <p>No hay productos destacados disponibles.</p>
            {% endfor %}
        </div>
    </section>
{% endblock %}

Detalles a tener en cuenta:

El filtro floatformat:2 asegura que el precio se muestre con dos decimales.

2. Catálogo de Productos con Paginación

2.1. Actualizar la Vista Catalog

En store/views.py, edita la función catalog que consultará los productos activos y aplicará paginación. Utilizaremos el objeto Paginator de Django para dividir el listado en páginas.

from django.core.paginator import Paginator

def catalog(request):
    # Consultamos todos los productos activos
    products = Producto.objects.filter(activo=True)
    # Configuramos la paginación: 6 productos por página
    paginator = Paginator(products, 6)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    context = {'page_obj': page_obj}
    return render(request, 'catalog.html', context)

2.2. Actualizar la Plantilla catalog.html

Edita el archivo store/templates/catalog.html para que muestre los productos de la página actual y agregue controles de paginación. La plantilla incluye botones para ir al inicio, a la página anterior, a la siguiente y al final.

{% extends 'base.html' %}
{% block title %}Catálogo de Productos{% endblock %}
{% block main_content %}
    <h2>Catálogo de Productos</h2>
    <div class="product-grid">
        {% for producto in page_obj %}
            <div class="product-card">
                <img src="{{ producto.imagen.url }}" alt="{{ producto.nombre }}">
                <h3>{{ producto.nombre }}</h3>
                <p>${{ producto.precio|floatformat:2 }}</p>
                <input type="number" min="1" value="1">
                <button class="btn" onclick="agregarAlCarrito(this)">Añadir al carrito</button>
            </div>
        {% empty %}
            <p>No hay productos disponibles.</p>
        {% endfor %}
    </div>
    <!-- Controles de paginación -->
    <div class="pagination">
        {% if page_obj.has_previous %}
            <a class="btn-secondary" href="?page=1">Inicio</a>
            <a class="btn-secondary" href="?page={{ page_obj.previous_page_number }}">Anterior</a>
        {% endif %}
        <span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>
        {% if page_obj.has_next %}
            <a class="btn-secondary" href="?page={{ page_obj.next_page_number }}">Siguiente</a>
            <a class="btn-secondary" href="?page={{ page_obj.paginator.num_pages }}">Fin</a>
        {% endif %}
    </div>
{% endblock %}

Aspectos destacados:

El objeto page_obj contiene los productos de la página actual y propiedades útiles para la navegación.
Los botones "Inicio" y "Fin" permiten saltar a la primera y última página, respectivamente.

3. Página de Detalle de Producto

La página de detalle mostrará la información completa de un producto específico.

3.1. Definir la Vista product_detail

En store/views.py, crea la función product_detail que reciba un identificador (pk) para obtener el producto. Utiliza get_object_or_404 para manejar casos en que el producto no exista o no esté activo.

from django.shortcuts import get_object_or_404

def product_detail(request, pk):
    # Obtiene el producto con la clave primaria especificada y que esté activo
    producto = get_object_or_404(Producto, pk=pk, activo=True)
    context = {'producto': producto}
    return render(request, 'product_detail.html', context)

3.2. Configurar la URL del Detalle

En store/urls.py, añade la ruta correspondiente para la vista del detalle del producto. Esto permite acceder a la página mediante una URL que incluya el identificador del producto.

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'),
    path('product/<int:pk>/', views.product_detail, name='product_detail'),
]

3.3. Crear la Plantilla product_detail.html

Crea el archivo store/templates/product_detail.html para mostrar los detalles del producto. La plantilla utiliza herencia para mantener el diseño global y define una sección especial para el contenido del detalle del producto. Incluiremos además estilos específicos para el detalle.

{% extends 'base.html' %}
{% block title %}Detalle del Producto{% endblock %}
{% block main_content %}
    <div class="product-detail">
        <h2>{{ producto.nombre }}</h2>
        <img src="{{ producto.imagen.url }}" alt="{{ producto.nombre }}">
        <p><strong>Precio:</strong> ${{ producto.precio|floatformat:2 }}</p>
        <p><strong>Descripción:</strong> {{ producto.descripcion }}</p>
        <!-- Puedes agregar más campos de detalle si los tienes -->
        <button class="btn">Añadir al carrito</button>
        <br>
        <a class="btn-secondary" href="{% url 'catalog' %}">Volver al Catálogo</a>
    </div>
{% endblock %}

3.4. Estilos para product_detail

Agrega al archivo CSS (por ejemplo, en static/styles.css) el siguiente bloque para darle un estilo adecuado a la sección de detalle del producto:

/* Estilos para la vista de detalle del producto */
.product-detail {
    border: 1px solid var(--color-primary);
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
    background-color: var(--color-secondary);
}

.product-detail img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-detail h2 {
    margin-bottom: 10px;
}

.product-detail p {
    margin: 10px 0;
    font-size: 18px;
}

Conclusión

En este tutorial has aprendido a:

Mostrar productos destacados en la página de inicio:

Se consultan los productos activos y destacados y se renderizan en index.html con los precios formateados a dos decimales y con separador de miles.
Implementar un catálogo de productos con paginación mejorada:

La vista catalog utiliza el objeto Paginator para dividir el listado de productos en páginas, y la plantilla catalog.html incluye botones para navegar hasta la primera y última página, además de los controles estándar.
Crear una página de detalle de producto:

Se ha implementado la vista product_detail junto con su URL y plantilla, para mostrar la información completa de un producto específico. Se ha añadido además un estilo específico para mejorar la presentación.

Estos pasos permiten que tu sitio de ecommerce ofrezca una experiencia de usuario dinámica, facilitando la navegación entre productos y proporcionando detalles completos de cada uno. ¡Sigue implementando mejoras para que tu proyecto sea cada vez más robusto y profesional!

Desarrollo de Ecommerce con Django (parte 2)

Gabriel Villacis — Thu, 28 Mar 2024 22:43:56 +0000

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 valores default.

¡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>&copy; 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 llamada static. Por ejemplo:

   ecommerce/
   ├── static/
   │   ├── img/
   │   │   └── favicon.ico
   │   └── styles.css
   ...

Registrar STATICFILES_DIRS en settings.py Asegúrate de tener algo como esto en tu settings.py:

   STATIC_URL = 'static/'
   STATICFILES_DIRS = [
       BASE_DIR / 'static',
   ]

Crear tu archivo styles.css En la carpeta static/, crea styles.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 de static/img/. La referencia en base.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 en INSTALLED_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.

Desarrollo de Ecommerce con Django (parte 1)

Gabriel Villacis — Wed, 27 Mar 2024 23:04:47 +0000

¡Bienvenidos a la primera parte de nuestro tutorial sobre cómo crear un ecommerce con Django! En esta sección, configuraremos nuestro proyecto de Django, crearemos la aplicación store dentro de él y definiremos los modelos esenciales. También configuraremos la conexión a una base de datos PostgreSQL y el administrador de Django para gestionar nuestros modelos.
¡Vamos a empezar!

Paso 1: Creación del proyecto

Primero vamos a crear la carpeta donde se almacenará el proyecto. El nombre recomendado es django_ecommerce. Cuando la carpeta esté creada ingresaremos en ella utilizando la terminal.

mkdir django_ecommerce & cd django_ecommerce

Después inicializaremos el proyecto con poetry (el cual será nuestro gestor de dependencias y del entorno virtual del proyecto. Cabe mencionar que en este punto se debe contar con poetry instalado de forma global: pip install poetry. El comando para inicializar el proyecto es:

poetry init

Una vez que el proyecto poetry esté inicializado vamos a agregar el paquete django:

poetry add django

A continuación, procederemos a crear el proyecto django. El nombre que daremos al proyecto es ecommerce, lo haremos usando el comando:

poetry run django-admin startproject ecommerce .

Y finalmente ejecutamos el proyecto:

poetry run python manage.py runserver

Paso 2: Creación de la Aplicación Store

Asegúrate de que estás en el directorio del proyecto django_ecommerce. Luego, ejecuta el siguiente comando:

poetry run python manage.py startapp store

Abre el archivo ecommerce/settings.py y busca la lista INSTALLED_APPS. Añade el nombre de la aplicación recién creada al final de esta lista. Debería verse así:

INSTALLED_APPS = [
    ...
    'store'
]

Paso 3: Definición de Modelos

Dentro del directorio de la aplicación "store", primero crea un directorio llamado "models".
Dentro del directorio "models", crea un archivo especial __init__.py para convertir el directorio en un paquete de Python.
Luego, dentro del paquete "models", crea dos archivos Python: "categoria.py" y "producto.py".

La estructura de directorios debería verse así:

store/
├── __init__.py
├── admin.py
├── apps.py
├── migrations/
│   └── ...
├── models/
│   ├── __init__.py
│   ├── categoria.py
│   └── producto.py
├── tests.py
└── views.py

Abre el archivo "categoria.py" y pega el código del modelo Categoria dentro de él.

# store/models/categoria.py
from django.db import models

class Categoria(models.Model):
    nombre = models.CharField(max_length=75)
    id_url_friendly = models.SlugField(max_length=100, unique=True)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'st_categorias'
        verbose_name = 'Categoría'
        verbose_name_plural = 'Categorías'

Abre el archivo "producto.py" y pega el código del modelo Producto dentro de él.

# store/models/producto.py
from django.db import models
from .categoria import Categoria

class Producto(models.Model):
    categorias = models.ManyToManyField(Categoria, related_name='productos')
    nombre = models.CharField(max_length=125)
    id_url_friendly = models.SlugField(max_length=150, unique=True)
    descripcion = models.TextField(blank=True, null=True)
    precio = models.DecimalField(max_digits=15, decimal_places=2)
    imagen = models.ImageField(upload_to='imagenes_prod/')
    activo = models.BooleanField(default=True)
    destacado = models.BooleanField(default=False)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.nombre} ({self.id})'

    class Meta:
        db_table = 'st_productos'
        verbose_name = 'Producto'
        verbose_name_plural = 'Productos'

En módulo models/__init__.py incluye la importación de los modelos creados:

from .categoria import Categoria
from .producto import Producto

Paso 4: Configuración para el Manejo de Imágenes

Asegurar la configuración adecuada para manejar imágenes en Django es esencial, especialmente al utilizar el campo ImageField en el modelo Producto.

Asegúrate de que tienes Pillow instalado. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

poetry add pillow

Después de instalar Pillow, necesitas configurar la carpeta para almacenar las imágenes subidas. Por lo general, esto se hace agregando una configuración en tu archivo settings.py. Abre tu archivo ecommerce/settings.py y agrega o modifica las siguientes líneas:

# Configuración para manejar archivos multimedia
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR  / 'media'

Adicionalmente, en las URLS del proyecto ecommerce/urls.py agrega:

from django.conf import settings
from django.conf.urls.static import static

# Si se está en modo desarrollo (DEBUG=True)
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Crea la carpeta media/ en la raíz de tu proyecto si aún no existe. Esto es donde se almacenarán las imágenes subidas. Puedes crear esta carpeta manualmente o hacerlo ejecutando el siguiente comando en tu terminal:

mkdir media

Ahora, las imágenes subidas se almacenarán en la carpeta media/imagenes_prod/ dentro de tu proyecto.

Paso 5: Configuración de la Conexión a PostgreSQL

En el archivo ecommerce/settings.py, asegúrate de configurar la conexión a la base de datos PostgreSQL. Reemplaza la sección DATABASES con lo siguiente:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'nombre_bd',
        'USER': 'usuario_bd',
        'PASSWORD': 'contraseña',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Asegúrate de reemplazar 'nombre_bd', 'usuario_bd', y 'contraseña' con los detalles correctos de tu base de datos PostgreSQL.

Adicionalmente se necesita instalar el controlador psycopg2 en tu entorno virtual. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

poetry add psycopg2-binary

Paso 6: Creación y Ejecución de Migraciones

Ejecuta el siguiente comando para crear las migraciones iniciales:

poetry run python manage.py makemigrations

Este comando buscará cualquier cambio en tus modelos y generará archivos de migración en el directorio migrations/ de cada aplicación de tu proyecto.

Después de crear las migraciones, ejecuta el siguiente comando para aplicar las migraciones a la base de datos:

poetry run python manage.py migrate

Este comando ejecutará todas las migraciones pendientes y actualizará la base de datos de acuerdo con los modelos definidos.

Si tienes algún problema con la migración o necesitas revertir los cambios, puedes seguir estos pasos:

Para deshacer la última migración aplicada y volver a una migración anterior específica, usa el siguiente comando:

poetry run python manage.py migrate <nombre_aplicacion> <nombre_migracion_anterior>

Reemplaza <nombre_aplicacion> con el nombre de la aplicación y <nombre_migracion_anterior> con el nombre de la migración a la que deseas regresar. Este comando revertirá las migraciones hasta alcanzar el estado de la migración especificada.

Para deshacer todas las migraciones de una aplicación y llevarla a su estado inicial, utiliza el siguiente comando:

poetry run python manage.py migrate <nombre_aplicacion> zero

Reemplaza <nombre_aplicacion> con el nombre de la aplicación. Este comando revertirá todas las migraciones aplicadas para esa aplicación, dejándola como si nunca hubieras ejecutado ninguna migración.

Paso 7: Configuración del Administrador

En el archivo store/admin.py, registra tus modelos para que puedan ser gestionados a través del administrador de Django:

from django.contrib import admin
from store.models import Categoria, Producto

admin.site.site_header = 'Administrador de Ecommerce'

@admin.register(Categoria)
class CategoriaAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'fecha_registro', 'fecha_ult_act')

@admin.register(Producto)
class ProductoAdmin(admin.ModelAdmin):
    list_display = ('id', 'nombre', 'descripcion', 'precio', 'activo', 'destacado', 'fecha_registro', 'fecha_ult_act')

¡Y eso es todo! Ahora puedes acceder al administrador de Django en http://localhost:8000/admin y gestionar tus categorías y productos. Recuerda crear un superusuario ejecutando:

poetry run python manage.py createsuperuser

Y finalmente, para ejecutar el servidor de desarrollo de Django, usa el siguiente comando:

poetry run python manage.py runserver

Espero que este tutorial te haya sido útil.

Da clic aquí para ir a la segunda parte de este tutorial.

DEV Community: Gabriel Villacis

Desarrollo de Ecommerce con Django (parte 5)

1. Creación de los Modelos de Pedido e ItemPedido

1.1. Modelo Pedido

1.2. Modelo ItemPedido

2. Programación de la Vista y URL para el Checkout

2.1. Vista de Checkout

2.2. Configuración de la URL para Checkout

3. Adaptación y Administración del Carrito y Checkout en el Front End

3.1. Actualización de las Plantillas y el Script

a) Inyección de Datos del Producto en la Plantilla

b) Adaptación del Script JavaScript (static/js/script.js)

c) Actualización de la Plantilla del Carrito (cart.html)

4. Actualización de la Plantilla Base

5. Administración de Pedidos en el Panel de Django

- extra=0 en ItemPedidoInline indica que en el panel de administración no se mostrarán formularios en blanco adicionales para agregar nuevos registros inline. Es decir, solo se mostrarán los items que ya existen, sin crear formularios vacíos extra.

Conclusión

Tutorial de Flujo de Trabajo con Git: ¡Empieza a Usar los Comandos Básicos de Git AHORA!

1. ¿Cómo empiezo a seguir mi proyecto con Git?

2. ¿Cómo conecto Git y GitHub?

Conectando un repositorio existente en tu computadora a GitHub

Conectando un repositorio de GitHub a una carpeta local

3. Flujo de trabajo diario: pull, branch, add, commit, merge, push

¿Eso fue mucha información? ¿Puedo ver todo en un solo lugar solo con los comandos?

Crear carpeta de proyecto local

Conectar local a un repositorio vacío de GitHub

Traer tu repositorio de GitHub a una computadora diferente, por ejemplo

Flujo de trabajo diario

Conclusión

Desarrollo de Ecommerce con Django (parte 4)

Introducción

1. Formularios con Django Forms

2. Vistas para Registro, Inicio y Cierre de Sesión

2.1. Vistas para Renderizar las Plantillas

2.2. Vistas para Procesamiento AJAX

3. Configuración de URLs

4. JavaScript Externo con Axios

5. Actualización de las Plantillas HTML

5.1. Plantilla Base (base.html)

5.2. Plantilla de Registro (signup.html)

5.3. Plantilla de Inicio de Sesión (signin.html)

Conclusión

Despliegue de proyecto Django Ecommerce en Azure Web App

Paso 1: Configurar el Proyecto Django para Producción

1.1. Agregar Dependencias para Azure Storage

1.2. Configurar Variables de Entorno en settings.py

1.3. Configurar Logging

Paso 2: Aprovisionar la Base de Datos PostgreSQL Flexible en Azure

Paso 3: Configurar Azure Storage para Archivos Media y Static

¿Qué es Azure Storage y por qué se utiliza?

Pasos para configurar Azure Storage:

Paso 4: Subir el Proyecto a GitHub con Claves SSH

4.1. Crear el Repositorio en GitHub

4.2. Generar y Configurar Claves SSH

4.3. Subir el Código a GitHub

Paso 5: Desplegar la Azure Web App con CI/CD usando GitHub Actions

5.1. Crear la Azure Web App

5.2. Configurar el Workflow de GitHub Actions

Paso 6: Conclusión

Gestión de Entidades en la DPE (parte 5 - despliegue)

Gestión de Entidades en la DPE (parte 4)

Gestión de Entidades en la DPE (parte 3)

Gestión de Entidades en la DPE (parte 2)

Registro de Entidades en la DPE

Desarrollo de Ecommerce con Django (parte 3)

1. Página de Inicio – Productos Destacados

1.1. Definir la Vista Home

1.2. Actualizar la Plantilla index.html

2. Catálogo de Productos con Paginación

2.1. Actualizar la Vista Catalog

2.2. Actualizar la Plantilla catalog.html

3. Página de Detalle de Producto

3.1. Definir la Vista product_detail

3.2. Configurar la URL del Detalle

3.3. Crear la Plantilla product_detail.html

3.4. Estilos para product_detail

Conclusión

Desarrollo de Ecommerce con Django (parte 2)

Paso 1: Configuración de Variables de Entorno con django-environ

Instalar django-environ

1.2. Configurar Variables de Entorno en `settings.py`

Paso 1: Configuración de Variables de Entorno con `django-environ`

Instalar `django-environ`

Crear un archivo `.env`

Configurar `settings.py` para leer las variables

Plantilla `base.html`

Páginas que heredan de `base.html`

Configurar las rutas en `urls.py`

Crear las vistas en `views.py`