Guía 21

Guía 21

DAWM / Proyecto05

Objetivo general

Desarrollar una aplicación backend robusta y escalable utilizando Django que integre una interfaz de administrador intuitiva para la gestión eficiente de datos y funcionalidades junto con un REST API completo que facilite la comunicación con las aplicaciones cliente de tal forma que garantice la seguridad, el rendimiento y la extensibilidad del sistema.

Actividades previas

Ambiente de desarrollo

  1. Desde la línea de comandos

    • Cree y habilite el ambiente de desarrollo, con:
     python -m venv environment
 environment\Scripts\activate

    Nota: Instrucciones para Unix o MacOS

Repositorio local/remoto + librerías

  1. Crea un repositorio en GitHub con el nombre backend.

    • Agregue el README.md
    • Incluya el archivo .gitignore para Python.

  2. Desde la línea de comandos

    • Clone localmente el repositorio backend.
    • Acceda a la carpeta backend, con:
     cd backend
    • Instale django, con:
     pip install django

Actividades en clases

Proyecto: Backend

  1. Desde la línea de comandos

    • Cree el proyecto backend en la ubicación actual, con:
     django-admin startproject backend .
    • Abra el proyecto con VSCode, con:
     code .
    • Levante el servidor, con:
     python manage.py runserver

  2. (STOP 1) Revise los cambios en el navegador en el URL: http://127.0.0.1:8000/

Estructura de archivos del proyecto (backend) en Django.

Aplicación: main

  1. Desde la línea de comandos

    • Cree la aplicación main, con:
     python manage.py startapp main

  2. Edite el archivo backend/settings.py, con:

    • Registre la aplicación
     INSTALLED_APPS = [
     ...
     'main',
 ]

  3. Edite el archivo backend/urls.py, con:

    • Importe el módulo include y asocie la ruta raíz (‘’) con las rutas de la aplicación main
     from django.urls import ... , include

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

  4. Cree y modifique el archivo main/urls.py, con:

    • Asocie la ruta raíz (‘’) con la vista basada en función (function-based view), con el alias main_index.
     from django.urls import path
 from . import views

 urlpatterns = [
     path('', views.index, name='main_index'),
 ]

  5. Edite el archivo main/views.py, con:

    • Agregue el controlador index
     ...

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

 def index(request):
     return HttpResponse("Hello, World!")

  6. Desde la línea de comandos

    • Levante el servidor, con:
     python manage.py runserver

  7. (STOP 2) Revise los cambios en el navegador para las URLs:

Estructura de archivos de una aplicación (main) en Django.

Vistas

  1. Descargue y descomprima los archivos base_django.zip y static_django.zip en la raíz del proyecto.

     backend/					<!-- proyecto -->
 ├── backend/ 
 ├── main/				<!-- aplicación -->
 ├── static/				<!-- archivos estáticos -->
 │   	└──css/
 │   	└──js/
 │   	└──img/
 └── templates/			<!-- plantillas -->
     	└──main
         	└──base.html

    Fuente: windmill-dashboard.zip o Github:windmill-dashboard

  2. Edite el archivo backend/settings.py, con:

    • En el arreglo TEMPLATES, en la entrada ‘DIRS’, agregue la ruta ‘templates’
     TEMPLATES = [
     {
         ...
         'DIRS': [BASE_DIR /'templates'],
         ...
     }
 ]

  3. Edite el archivo main/views.py, con:

    • Agregue la renderización de la plantilla base.html
     ...

 def index(request):
     # return HttpResponse("Hello, World!")
     return render(request, 'main/base.html')

  4. (STOP 3) Revise los cambios en el navegador para las URLs:

Archivos estáticos

  1. En el archivo backend/settings.py:

    • Compruebe la carga de la aplicación django.contrib.staticfiles en la lista INSTALLED_APPS.
     INSTALLED_APPS = [
     ...
     'django.contrib.staticfiles',
     'main',
 ]
    • Agregue el arreglo de rutas STATICFILES_DIRS, con la ruta relativa a los archivos estáticos BASE_DIR / STATIC_URL
     ...

 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/5.1/howto/static-files/

 STATIC_URL = ...

 # Directorios adicionales donde buscar archivos estáticos
 STATICFILES_DIRS = [
    BASE_DIR / STATIC_URL,
 ]

 ...

  2. Modifique el archivo templates/main/base.html, con:

    • Cargue y utilice las etiquetas de plantilla static para construir las URLs de los archivos estáticos del proyecto.
     {% load static %}

 <!DOCTYPE html>
 ...
	
 <head>
		
     ...
     <!-- Local stylesheets -->
     <link rel="stylesheet" href="{% static 'css/tailwind.output.css' %}">

		
     ...
     <!-- Local script files -->
     <script src="{% static 'js/init-alpine.js' %}"></script>

     ...
     <!-- Local script files -->
     <script src="{% static 'js/charts-lines.js' %}" defer></script>
     <script src="{% static 'js/charts-pie.js' %}" defer></script>

 </head>

  3. (STOP 4) Revise los cambios en el navegador para las URLs:

Plantillas

  1. Cree el archivo templates/main/index.html, con:

    • Extienda de la plantilla base.html.
    • Defina los bloques title y content
     <!-- Extend "main/base.html" -->
 {% extends "main/base.html" %}

 <!-- START - Block title -->
 {% block title %} 

 Backend - Inicio 

 {% endblock %}
 <!-- END - Block title -->

 <!-- START - Block content -->
 {% block content %}

     <div class="flex flex-col flex-1 w-full">

         Header & Data

     </div>

 {% endblock %}
 <!-- END - Block content -->

  2. Modifique el archivo templates/main/base.html, con:

    • Defina los bloques title y content
     <head>
 ...
     <title> 

         {% block title %} 

         Windmill Dashboard
			
         {% endblock %} 

   </title>
 ...
 </head>

 <body>
 ...

     <!-- START - Block content -->
     {% block content %}

     <div> ... </div>

     {% endblock %}
     <!-- END - Block content -->

 </body>
 ...

  3. Edite el archivo main/views.py, con:

    • Cambie por la renderización de la plantilla index.html:
     ...

 def index(request):
     # return HttpResponse("Hello, World!")
     # return render(request, 'main/base.html')
     return render(request, 'main/index.html')

  4. (STOP 5) Revise los cambios en el navegador para las URLs:

Partials & Include

  1. Descargue y descomprima:

  2. Modifique el archivo templates/main/index.html, con:

    • Incluya el partials/header.html y content/data.html
     ...

 <!-- START - Block content -->
 ...

 <div class="flex flex-col flex-1 w-full">

     {% include './partials/header.html' %}
     {% include './content/data.html' %}

 </div>

 ...
 <!-- END - Block content -->

  3. (STOP 6) Revise los cambios en el navegador para las URLs:

Estructura de carpetas adicionales

Versionamiento local y remoto

  1. En la línea de comandos

    • Genere el archivo requirements.txt con la lista de paquetes utilizados, con:
     pip freeze > requirements.txt
    • Desactive el ambiente de desarrollo, con:
     deactivate

  2. Versione local y remotamente.

Documentación

Fundamental

Términos

ambiente de desarrollo, django, WSGI, function-based view

Referencias