Guía 20: Django - Introducción

Guía 20: Django - Introducción#

Actividades previas#

Ambiente de desarrollo#

  1. Cree un repositorio en GitHub con el nombre django_api_suite.

    1. Agregue un archivo README.md con el título de su backend y una breve descripción del objetivo de su proyecto.

    2. Agregue un archivo .gitignore con la plantilla de Python.

  2. Acceda a su proyecto django_api_suite en Codespaces o en su máquina local.

  3. Cree y utilice la(s) rama(s) de desarrollo.

  4. Cree y habilite el ambiente virtual de desarrollo, con:

    python -m venv env
source env/bin/activate

    Nota

    Revise las instrucciones para habilitar el ambiente de desarrollo para su sistema operativo.

Actividades en clases#

Paquete: Django#

  1. Instale Django en su ambiente de desarrollo:

    pip install django

  2. Utilice su cliente de IAG generativa para explicar qué es Django, cuáles son sus principales características y los patrones de diseño que implementa.

Proyecto: Backend Data Server#

  1. Cree un proyecto Django llamado backend_data_server en la ubicación actual, sin crear una aplicación:

    django-admin startproject backend_data_server .

  2. Levante el servidor de desarrollo de Django:

    python manage.py runserver

  3. Revise los cambios en el navegador en la URL raíz.

  4. Utilice su cliente de IAG generativa para explicar la estructura de archivos de un proyecto en Django.

Aplicación: Homepage#

Creación de la aplicación#

  1. Cree una aplicación Django llamada homepage, con:

    python manage.py startapp homepage

Registro de la aplicación#

  1. Registre la aplicación en el archivo de configuración backend_data_server/settings.py del proyecto:

    INSTALLED_APPS = [
  ...
  "homepage",
]

  2. En el archivo backend_data_server/urls.py, importe el módulo include y asocie la ruta "homepage/" con las subrutas de la aplicación homepage:

    from django.contrib import admin
from django.urls import path, include

urlpatterns = [
   path("admin/", admin.site.urls),
   path("homepage/", include("homepage.urls")),
]

Rutas y Vistas de la aplicación#

  1. Cree el archivo homepage/urls.py con las rutas de la aplicación:

    from django.urls import path
from . import views

urlpatterns = [
   path("index/", views.index, name="index"),
]

  2. Cree la vista basada en funciones en homepage/views.py que retorne un mensaje de bienvenida:

    from django.shortcuts import render

# Create your views here.
from django.http import HttpResponse

def index(request):
    return HttpResponse("¡Bienvenido a la aplicación Django!")

  3. Levante el servidor de desarrollo de Django:

    python manage.py runserver

  4. Revise los cambios en el navegador con la URL raíz, seguida por la ruta /homepage/index/

  5. Utilice su cliente de IAG generativa para explicar la estructura de archivos de una aplicación, en el contexto de Django.

    Nota

    Para que su sitio web responda a la URL raíz, asocie la ruta vacía ("") del proyecto con la aplicación homepage y la ruta vacía ("") de la aplicación con la vista index.

SSR: Plantillas#

  1. En la raíz del repositorio, cree la jerarquía de carpetas templates/homepage

  2. Descargue el archivo index.html y colóquelo en la carpeta templates/homepage.

  3. Modifique el archivo backend_data_server/settings.py

    1. Importe el módulo os

    2. Agregue la ruta a las plantillas en el arreglo TEMPLATES, en la entrada DIRS.

    from pathlib import Path
import os

...

TEMPLATES = [
    {
        ...
        "DIRS": [os.path.join(BASE_DIR, 'templates')],
        ...
    },
]

  4. Edite el archivo homepage/views.py:

    1. Agregue la renderización de la plantilla homepage/index.html en la vista index:

    from django.shortcuts import render

def index(request):
    # return HttpResponse("¡Bienvenido a la aplicación Django!")
    return render(request, 'homepage/index.html')

  5. Revise los cambios en el navegador en la URL en la ruta de la aplicación.

  6. Utilice su cliente de IAG generativa para explicar la renderización de plantillas en Django.

    Nota

    La plantilla original se encuentra en el repositorio de GitHub Windmill Dashboard, con la vista previa en Windmill Dashboard.

Archivos estáticos#

  1. En la raíz del repositorio, cree la jerarquía de carpetas static/img

  2. Descargue el archivo team.jpg y colóquelo en la carpeta static/img.

  3. Edite el archivo backend_data_server/settings.py,

    1. Agregue el arreglo STATICFILES_DIRS con la ruta a la carpeta de archivos estáticos:

    STATIC_URL = "static/"

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, STATIC_URL),
]

  4. Edite el archivo templates/homepage/index.html:

    1. Agregue la etiqueta {% load static %} al inicio del archivo.

    2. Reemplace las rutas de los archivos estáticos por las etiquetas {% static “…” %}.

    {% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>

    ...

    <img aria-hidden="true" class="object-cover w-full h-full dark:hidden"
          src="{% static '/img/team.jpg' %}"
          alt="Office" />
     <img aria-hidden="true" class="hidden object-cover w-full h-full dark:block"
          src="{% static '/img/team.jpg' %}"
          alt="Office" />

    ...
</body>
</html>

  5. Revise los cambios en el navegador en la URL en la ruta de la aplicación.

  6. Utilice su cliente de IAG generativa para explicar la utilidad de la etiqueta {% load static %} y el uso {% static “…” %} en Django.

Gestión de dependencias#

  1. Genere el archivo requirements.txt con la lista de paquetes utilizados, con:

    pip freeze > requirements.txt

  2. Desactive el ambiente virtual de desarrollo, con:

    deactivate

Versionamiento#

  1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio django_api_suite.

  2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Contenido