Desarrollo Web en
Entorno Servidor

Pasos previos

1. Descargamos e instalamos VSCode y Git en nuestro ordenador. Ejecutamos los siguientes comandos en la terminal, manteniendo las comillas, pero sustituyendo el nombre y el correo electrónico:

git --global set user.name "Tu nombre"
git --global set user.email "tu.email@ejemplo.com"

2. Creamos una cuenta en GitHub
3. Dentro de la cuenta creamos un nuevo repositorio. No importa si es privado o público, pero si es privado asegúrate de añadirme como lectora/comentadora
4. Nos aseguramos de tener tres ramas creadas (master, staging y development)

Configuración de VSCode

1. Dentro de VSCode, buscamos el
2. Creamos una cuenta en GitHub
3. Dentro de la cuenta creamos un nuevo repositorio. No importa si es privado o público, pero si es privado asegúrate de añadirme como lectora/comentadora
4. Nos aseguramos de tener tres ramas creadas (master, staging y development)

1. Explica con tus palabras cuál es la función de un back-end. ¿Qué ventajas aporta? ¿Cuáles son sus mayores inconvenientes?
2. ¿Qué es un framework de desarrollo web? Menciona 2 ejemplos basados en diferentes lenguajes de programación. Haz una breve comparación entre ellos.
3. ¿Es lo mismo un servidor de aplicación que un servidor web? ¿Cuál es la principal diferencia entre ambos?
4. ¿Qué significa que una web se genere de forma dinámica?
Análisis DDD
5. Escoge un servicio web para estudiar su implementación basada en DDD. Puede ser el proyecto final del módulo.
6. Escribe una lista de 20 eventos que puedas suceder en el servicio.
7. Separa los eventos por dominios (principales y secundarios).
8. Para cada dominio, escribe una lista de entidades y sus atributos.

Requisitos Previos

Nota: La mayoría de comandos están escritos para ejecutarse en un entorno Linux ya que es lo más cercano a un entorno de desarrollo real. No debería costar demasiado entender lo que hacen y traducirlos a Windows si es necesario. IMPORTANTE: Verifica siempre que lees un paso completamente antes de pasar al siguiente, que respetas la jerarquía de directorios y que los comandos se ejecutan en el entorno virtual correcto.

1. Antes de empezar, vamos a asegurarnos de tener instalados Python y VSCode en nuestro ordenador
2. Vamos a crear una carpeta llamada Backend para alojar el código de nuestro proyecto. Puedes crear la carpeta donde quieras. Abre la carpeta con VSCode.
3. Dentro de VSCode instalamos los siguientes plugins:
• Python
• Python Environments
• Pylance
• Python Debugger
• HTML CSS Support
• Django (Baptiste Darthenay)
4. Dentro de VSCode y con la carpeta del proyecto abierta, abrimos la terminal de VSCode e instalamos el siguiente paquete de python.

terminal

---

sudo apt install pipenv

5. Pipenv es un entorno virtual para desarrollo de aplicaciones de Python. Podemos crear un entorno virtual de la siguiente forma:

terminal

---

mkdir .venv
pipenv install
pipenv shell

DJANGO

1. Instalamos Django en nuestro entorno virtual

terminal

---

pip install django
django-admin --version
                                

2. Si todo ha ido bien, deberíamos ver la versión de Django instalada.
3. Ahora ejecutamos el siguiente comando para crear un nuevo proyecto Django:

terminal

---

django-admin startproject $NOMBRE_DEL_PROYECTO

4. Si todo ha ido bien deberíamos tener la siguiente jerarquía de ficheros y directorios:

directorios

---

Backend/
├── .venv/
└── $NOMBRE_DEL_PROYECTO/
    ├── manage.py
    └── $NOMBRE_DEL_PROYECTO/
        ├── __init__.py
        ├── asgi.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py

5. Ahora podemos ejecutar el servidor de desarrollo con el siguiente comando:

terminal

---

cd $NOMBRE_DEL_PROYECTO
python manage.py runserver

6. Intenta conectarte a localhost:8000. ¿Puedes verlo todo bien?

Nueva Homepage

1. Nuestra servidor actualmente solo tiene la página por defecto de Django. Vamos a intentar entender cómo cambiarlo. Dentro de nuestra carpeta de proyecto crea un archivo views.py con un contenido como el siguiente:

directorios

---

Backend/
├── .venv/
└── $NOMBRE_DEL_PROYECTO/
    ├── manage.py
    └── $NOMBRE_DEL_PROYECTO/
        ├── __init__.py
        ├── asgi.py
        ├── settings.py
        ├── urls.py
        ├── views.py
        └── wsgi.py

---

views.py

---

from django.http import HttpResponse

def homepage(request):
    return HttpResponse("Hello World!")

2. Ahora vamos a modificar el archivo urls.py para que apunte a nuestra nueva vista. Añade la siguiente línea al final del archivo:

urls.py

---

from django.urls import path
from . import views
from django.contrib import admin

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.homepage),
]

3. Prueba el resultado. ¿Puedes ver el mensaje "Hello World!" en tu navegador? Si todo ha ido bien, podemos pasar al siguiente punto
4. Vamos a crear un directorio templates y un fichero home.html como sigue:

directorios

---

Backend/
├── .venv/
└── $NOMBRE_DEL_PROYECTO/
    ├── manage.py
    ├── $NOMBRE_DEL_PROYECTO/
    └── templates/
        └── home.html

5. Ahora vamos a modificar nuestra vista para que devuelva el contenido de nuestro template. Modifica el archivo views.py como sigue:

views.py

---

from django.shortcuts import render

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

Ten en cuenta que habrá líneas de views.py que debas borrar, otras que debas conservar y otras que debas modificar

6. Ahora tenemos que decirle a Django que puede buscar plantillas dentro de esa carpeta. Eso lo hacemos desde los ajustes de Django. Buscamos la variable TEMPLATES y añadimos las siguentes líneas:

settings.py

---

import os

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

7. Ya podemos usar nuestro template en la vista.

views.py

---

from django.shortcuts import render

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

8. Comprueba que puedas ver tu html. Si es así puedes continuar.
9. Ahora vamos a añadir assets estáticos a nuestra aplicación.
10. Dentro de la carpeta del proyecto, crea un directorio llamado static con una carpeta para cada tipo de archivo estático (img, js, css):

directorios

---

Backend/
├── .venv/
└── $NOMBRE_DEL_PROYECTO/
    ├── manage.py
    ├── $NOMBRE_DEL_PROYECTO/
    ├── templates/
    └── static/
        ├── img/
        ├── js/
        └── css/
                            

11. Ahora modificamos el archivo settings.py para indicarle a Django dónde buscar los archivos estáticos. Añadimos las siguientes líneas al final del archivo:

settings.py

---

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

12. Ahora podemos usar los archivos estáticos en nuestro template. Por ejemplo, para añadir un archivo CSS, podemos hacer lo siguiente:

home.html

---

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
    <script src="{% static 'js/script.js' %}"></script>
    <title>Home</title>
</head>
</html>

13. Comprueba que puedas ver tu html con los assets estáticos. Si es así puedes continuar.

Aplicaciones

1. Vamos a crear una aplicación de Django, recuerda que grosso modo, una aplicación corresponde a un dominio del DDD es un módulo que contiene lógica específica para una funcionalidad determinada. Para crear aplicaciones en Django, utilizamos el comando:

terminal

---

python manage.py startapp $NOMBRE_DE_LA_APP

---

settings.py

---

INSTALLED_APPS = [
    [...]
    '$NOMBRE_DE_LA_APP',
]

2. Se creará un directorio con el nombre de la aplicación y los archivos necesarios para su funcionamiento. Dentro de este directorio crearemos un templates nuevo y dentro de él otra carpeta con el nombre de la aplicación tal que así:

directorios

---

Backend/
    ├── .venv/
    └──  $NOMBRE_DEL_PROYECTO/
        ├── manage.py
        ├── $NOMBRE_DEL_PROYECTO/
        ├── templates/
        ├── static/
        └── $NOMBRE_DE_LA_APP/
            ├── __init__.py
            ├── admin.py
            ├── apps.py
            ├── migrations/
            ├── models.py
            ├── tests.py
            ├── views.py
            └── templates/
                └── $NOMBRE_DE_LA_APP/
                    └── $NOMBRE_DEL_ARCHIVO.html
                    

3. Ahora podemos editar los views.py y urls.py de la aplicación de la siguiente manera:

$NOMBRE_DE_LA_APP/views.py

---

from django.shortcuts import render

    def $NOMBRE_DE_LA_FUNCION(request):
        return render(request, '$NOMBRE_DE_LA_APP/$NOMBRE_DEL_ARCHIVO.html')

---

$NOMBRE_DE_LA_APP/urls.py

---

from django.urls import path
    from . import views

    urlpatterns = [
        path('', views.$NOMBRE_DE_LA_FUNCION),
    ]

---

urls.py

---

from django.urls import path, include

    urlpatterns = [
        [...]
        path('$NOMBRE_DE_LA_APP/', include('$NOMBRE_DE_LA_APP.urls')),
    ]
    ]

4. Comprueba que todo funncione correctamente y añade hipervínculos para poder saltar de una página a otra

1. Crea una plantilla parecida a la del ejemplo que contenga toda la estructura báśica de la web. Incluye bloques para lo que consideres necesario, pero especialmente:
• Título de la página
• Contenido principal (sin incluir menú de navegación ni pie de página)
2. Crea las siguientes webs que hereden de tu plantilla con {& extends '...' &}
• Página web principal de acogida
• Página de la aplicación que creaste en la tarea anterior
• Página web de contacto con un formulario HTML sencillo
3. Verifica que los estilos se mantienen de forma homogenea

URLs

1. Vamos a empezar por crear namespaces para nuestras URLs, es decir, nombres cortos y fáciles de escribir, fácilmente reconocibles para los desarrolladores y que permitan identificar al servicio al que hago referencia

urls.py

---

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.homepage, name='homepage'),
    path('reservas/, include(reservas.urls)'),
]

2. Añadir un argumento name a la función path le asigna un nombre que debería ser único dentro del proyecto, de tal forma que yo podría hacer lo siguiente dentro de mis HTMLs

index.html

---

    <a href="{% url 'homepage' %}">Home</a>

Django se encargará de sustituir {% url 'homepage' %} por la dirección correcta.

3. La mejor forma de proceder, para asegurar que los nombres son realmente únicos, es crear unos namespaces organizados

$APP/urls.py

---

app_name = “$APP”

urlpatterns = [
    path('', views.app_homepage, name='homepage'),
]

4. Al hacer esto, para una aplicación que se llame Reservas yo podría hacer algo así como:

index.html

---

    <a href="{% url 'reservas:homepage' %}">Reservas</a>

5. A este proceso se le llama normalizar. Asegurate de que todas tus URLs estén normalizadas antes de seguir (tanto en los htmls como en el código)

Parámetros

6. Vamos a hacer una pequeña página de prueba en nuestro proyecto para hacer una demostración de parámetros. Un ejemplo bastante sencillo puede ser un calendario. Crea una aplicación calendario dentro de tu web (es probable que no te interese conservarla para tu proyecto final).
7. Vamos a crear una página que muestre unos pocos detalles sobre la fecha que el usuario nos pase en parámetro.

calendario/views.py

---

'''
    Esta función toma como parámetro, además del request habitual, un parámetro fecha que tendrá que introducir el usuario en el formato "DD-MM-AAAA". La función está incompleta, intenta terminarla con las diferentes utilidades de python para tratar texto y fechas.

    Además, la función render puede tomar como parámetro un diccionario con datos para copiar dentro del html (luego veremos cómo)
'''
def calendario(request, fecha):
    
    [...]

    mi_dia = [...]
    mi_mes = [...]
    mi_ano = [...]
    mensaje = [...]

    return render(request, 'calendario/fecha.html', {'dia': mi_dia, 'mes': mi_mes, 'ano': mi_ano, 'mensaje': mensaje})

---

calendario/urls.py

---

urlpatterns = [

    #Con esta línea creamos una url genérica que va a hacer coincidencia con todas las URLs que cumplan esa forma. Por seguridad y buen funcionamiento, cuanto más genérica sea el patrón más cerca del fondo de la lista urlpatterns debería encontrarse.
    path('<str:fecha>', views.calendario, name='calendario'),
]

---

calendario/fecha.html

---

<p> Hoy es {{ dia }} del {{ mes }} del año {{ ano }}. {{ mensaje }}.</p>

8. Es posible que el usuario introduzca mal el formato de fecha, prepara una página de error que mostrar si se da el caso y modifica la función de calendario para que muestre uno u otro en función de si hay un error o no.

Exercises

1. Draw an HTTP request/response cycle that shows: A users logs in to Amazon and then searches “laptop computer”. Include requests to the database if necessary.
2. In your own words: When is a back-end necessary?
3. Watch this video. What are the HTTP methods? What are they for?

Writing

Make a short comparison (around 200 words) between two backend frameworks of your choice. What are they for? Where do they excel? Which languages are they written in?What is their main advantage? What are their market share?

Exercises

1. What's a virtual environment in python? Why is it useful?
2. We used a couple of different commands to create and activate a virtual environment. What do they do?
3. How do you run a Python script? (such as manage.py)
4. How do you install a Python package in Linux? And in Windows?
5. How do you make sure you are working within a virtual environment?

Writing

The MVC (Model-View-Controller) pattern is a software architectural pattern that separates an application into three main components: the model (data and business logic), the view (user interface), and the controller (handles user input and updates the model and view accordingly). In your own words (200 words), explain the three different languages/technologies that Django uses in this pattern and how they interact.

Exercises

1. Why are templates useful?
2. How does Django manage URL paths across applications?
3. What is the final part of the URL called?

Writing

It is very common to have generic urls such as /product/<int:product_id>/. Describe how is this kind of slug used in Django.