La mejor manera de aprender Django, o cualquier habilidad, es aplicando el conocimiento que tienes creando proyectos funcionales.
Django es el marco de desarrollo web de Python más utilizado. Sus funciones integradas y la gran cantidad de paquetes de terceros lo han convertido en uno de los marcos web más queridos en todo el mundo.
Es rápido, confiable y tiene muchas funciones integradas. Por ejemplo, un sistema de autenticación de agujeros, que le permite concentrarse en las características principales de su aplicación. Además, puede instalar paquetes externos para realizar tareas aún más complejas, como Django-allauth, que le permite registrar usuarios con sus cuentas sociales.
Pero expongamos algunos hechos. Django es un marco tan grande que a veces es un desafío comenzar con él.
Así que hoy vas a construir desde cero una aplicación Django totalmente funcional.
Al final de este tutorial, usted:
- Haber escrito una aplicación para acortar URL
- Comprender el patrón Django MVT
- Haber aprendido el flujo de trabajo de crear un proyecto.
Tabla de contenido
Pre requisitos
Todos los siguientes requisitos son opcionales y lo ayudarán a seguir el tutorial. Pero si no tienes experiencia con ninguno de estos, no te preocupes. El paso más importante es el primero.
- Comprensión básica de los comandos UNIX (ls, cd, rm, touch)
- Comprensión básica de las clases y funciones de Python
- Python instalado en su computadora (Tal vez obvio pero tuve que incluirlo)
- Sería genial si ya has construido algo con Django.
Todo el código de trabajo estará disponible en este repositorio de Github.
Ahora que tienes clarísimo los conceptos anteriores, entremos en materia.
Declaración de proyecto
En este tutorial, construirá un acortador de URL. Básicamente, un acortador de URL es un servicio que toma una URL larga y la convierte en una compacta.
Por ejemplo, si desea compartir un tweet y desea incluir un enlace a su sitio web, pero se enfrenta al límite de caracteres, puede usar un acortador de URL.
Veámoslo con un gráfico.
Como puede ver, el acortador de URL obtiene una URL larga y devuelve una corta. Eso es exactamente lo que vas a construir hoy.
Con este proyecto, practicará el uso del patrón MVT, aprenderá los conceptos básicos del diseño de bases de datos con modelos Django y aprenderá a mostrar información al usuario a través de vistas, URL y plantillas.
Estructura de un proyecto Django
Básicamente, un sitio web de Django se basa en un solo proyecto y múltiples aplicaciones separadas. Cada una de estas aplicaciones tiene una funcionalidad específica y puede funcionar por sí sola.
Imaginemos una aplicación web compleja como Desbordamiento de pila. Su funcionalidad se basa en dos aspectos principales.
- Gestión de usuarios: inicio de sesión, cierre de sesión, reputación, permisos
- Foro: Preguntas, respuestas, etiquetas, Filtros
Entonces, siguiendo la estructura del sitio web de Django, el proyecto se llamaría StackOverflow, que tiene dos aplicaciones principales. La aplicación de los usuarios y la aplicación del foro.
Cada una de estas aplicaciones tiene una funcionalidad independiente. Eso significa que ambos contienen todo el código que necesitan para funcionar correctamente.
Eso incluye modelos (estructura de la base de datos), vistas (solicitudes y respuestas), patrones de URL específicos y, por supuesto, plantillas y archivos estáticos (imágenes, CSS, JavaScript). Esto significa que cualquier aplicación de Django podría reutilizarse ya que pueden funcionar por sí mismas.
Abreviando, un proyecto se refiere a un conjunto de configuraciones y aplicaciones destinadas a construir una aplicación web. Por otro lado, una aplicación de Django es parte de un proyecto, que es autónomo (tiene todo lo que necesita para funcionar) y su propósito es realizar una operación específica.
Configurar un proyecto Django
En esta sección, configurará un proyecto Django. Para ello, utilizará diferentes herramientas como un entorno virtual para organizar las dependencias de Python y los scripts de Django más importantes. Django-admin y manage.py
Ambiente virtual
Siempre recomiendo trabajar con entornos virtuales al crear aplicaciones con Django. Es la forma más eficiente de mantener un conjunto específico de dependencias. Pero su objetivo principal es aislar los paquetes de desarrollo de los globales.
Entonces, creemos un entorno virtual con python, el comando de formulario incorporado.
Nota: este método requiere Python 3.6 o versiones más recientes para funcionar.
python -m venv .venv
Este comando usa el comando python -m o python –mod. Fundamentalmente ejecuta un módulo o biblioteca, como un script. Según el significado de este comando, venv es la biblioteca que estamos ejecutando y .venv se refiere al nombre del entorno virtual que queremos crear.
Entonces, en lenguaje sencillo, este comando significa.
Oye, Python, ejecuta como un script la biblioteca integrada venv y crea un nombre de virtualenv .venv
Ahora, es hora de activar el entorno virtual que acabamos de crear, con el siguiente comando.
source .venv/bin/activate
Para afirmar que no tiene paquetes instalados en el nuevo venv, ejecute.
pip freeze
Si activó el entorno virtual correctamente, no obtendrá ningún resultado. Eso es porque no hemos instalado nada todavía.
Entremos en Django
Para crear nuestra aplicación de acortador de URL, vamos a comenzar instalando el paquete Django. Django es un paquete de terceros, por lo que debemos instalarlo con Pip (Pip Installs Packages).
$ pip install django
Collecting django
Downloading Django-3.2.1-py3-none-any.whl (7.9 MB)
|████████████████████████████████| 7.9 MB 344 kB/s
Collecting asgiref<4,>=3.3.2
Using cached asgiref-3.3.4-py3-none-any.whl (22 kB)
Collecting sqlparse>=0.2.2
Using cached sqlparse-0.4.1-py3-none-any.whl (42 kB)
Collecting pytz
Using cached pytz-2021.1-py2.py3-none-any.whl (510 kB)
Installing collected packages: asgiref, sqlparse, pytz, django
Successfully installed asgiref-3.3.4 django-3.2.1 pytz-2021.1 sqlparse-0.4.1
Nota: Recuerda que $ no es más que tu símbolo de concha.
Para comprobar si la instalación se ha realizado correctamente, volvemos a comprobar los paquetes instalados de nuestro venv.
$ pip freeze asgiref==3.3.4 Django==3.2.1 pytz==2021.1 sqlparse==0.4.1
No te preocupes si las versiones que obtienes son diferentes a las mías. Si Django todavía está en la versión 3.x, puede continuar sin ningún problema.
Iniciando un proyecto Django
Una vez que haya instalado Django, es hora de crear la estructura del sitio web del acortador de URL. ¿Recuerdas qué es un proyecto Django? Vamos a crear uno ejecutando el siguiente comando.
django-admin startproject config
Al explicar todo sobre este comando, django-admin es una utilidad de línea de comandos que realiza todas las tareas necesarias para crear un proyecto Django. La parte «startproject» es el comando ejecutado por la utilidad Django-admin, y config es el nombre del proyecto que vamos a crear.
Es importante enfatizar que la configuración puede ser cualquier nombre que desee. La razón por la que uso config como el nombre de este proyecto es solo por conveniencia. Es agradable cambiar de proyecto y seguir teniendo la misma convención de nomenclatura. Así que no tengas miedo de usar otros nombres de proyectos cuando quieras.
Como puede notar, ahora tiene una carpeta config/ y dentro hay muchos archivos. Posteriormente veremos la estructura de archivos del proyecto. Por ahora, ingresemos al directorio del proyecto y ejecutemos el servidor local.
cd config/
El archivo más importante que usará es el script manage.py. Tiene la misma funcionalidad que django-admin, pero la principal ventaja de usarlo es que te permite administrar la configuración al ejecutar el proyecto.
Ahora vamos a ver si todo funciona correctamente.
python manage.py runserver
Creación de la aplicación de acortador de URL
Es hora de crear la aplicación principal del proyecto. Vas a utilizar el archivo manage.py para realizar esta tarea.
python manage.py startapp urlshortener
Esto crea una aplicación de Django, con el nombre urlshortener. Si ejecuta el árbol comando, obtendrás algo como esto.
.
├── config
│ ├── asgi.py
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── manage.py
└── urlshortener
├── admin.py
├── apps.py
├── __init__.py
├── migrations
│ └── __init__.py
├── models.py
├── tests.py
└── views.py
Aclaremos los diferentes archivos creados hasta este momento. “config” es el nombre de nuestro proyecto y se llama así solo por convención. Dentro de la configuración, obtienes settings.py, es el archivo donde estableces todas las configuraciones de tu proyecto. urls.py es la configuración general de las URL dentro del proyecto. Define las rutas URL de todas las aplicaciones dentro del proyecto.
No se preocupe demasiado por los archivos asgi.py y wsgi.py. Estos son archivos que le permiten configurar su aplicación en implementación.
El manage.py es el script de python que le permite ejecutar todos los comandos disponibles de Django-admin.
Echando un vistazo dentro de urlshortener, que es el nombre de la aplicación que acabas de crear, puedes notar que hay una carpeta extraña llamada «migraciones/» y algunos otros archivos que son cruciales para la lógica de cualquier aplicación.
apps.py es donde vive la configuración de la aplicación. Por lo general, no te metes con eso, excepto que estás haciendo cosas bastante avanzadas.
admin.py es donde registra sus modelos para hacerlos visibles dentro del panel de administración de Django.
models.py es el más importante. Dentro de este módulo, debe definir los modelos, que (digamos vagamente) son la forma en que se almacenan los datos. Más adelante escuchará más acerca de los modelos.
migraciones/ es la carpeta donde se almacenan las migraciones de Django. Vamos a echar un vistazo en profundidad más adelante.
tests.py es el archivo donde se almacenan las pruebas. No cubriremos las pruebas en este tutorial.
views.py es el archivo que almacena las vistas. Básicamente, define cómo el usuario interactuará con todos los aspectos de tu aplicación.
Instalación de una aplicación Django
Antes de continuar, abra el archivo settings.py y modifique la variable INSTALLED_APPS agregando la aplicación urlshortener.
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# Custom apps
'urlshortener',
]
Este es un proceso de rutina cuando crea una aplicación. Entonces, cada vez que lo haga, no olvide instalarlo en la configuración del proyecto.
Entendiendo el patrón MVT
El patrón Modelo, Vista, Plantilla es el patrón de diseño de software que los desarrolladores de Django usan para crear aplicaciones web.
Se basa en 3 conceptos principales. Modelo (datos), Vista (Interacción del usuario con los datos), Plantilla (Cómo los usuarios ven los datos).
Los modelos son clases de Python, que definen todos los campos y el comportamiento de los datos que desea almacenar. Normalmente, cada modelo se refiere a una tabla única en la base de datos.
Las vistas en su expresión más simple son invocables que toman una solicitud del usuario y generan una respuesta. Entre ese proceso se produce la lógica empresarial. Sé que la «lógica empresarial» es un concepto bastante oscuro, así que déjame explicarte exactamente qué es. La lógica empresarial es la forma en que se crean, almacenan y eliminan los datos, eso es todo.
Finalmente, las plantillas son documentos de texto (generalmente Html) que se muestran a los usuarios. Su propósito es presentar los datos lo más limpios posible. Django incorpora un mini-lenguaje llamado Lenguaje de plantillas Django (DTL) que le permite incorporar parte del poder de python en documentos de texto.
Crear el modelo de acortador
Una vez que haya entendido rápidamente el patrón MVT, comencemos a crear el acortador de URL de Django desde cero.
En primer lugar, definamos el modelo de acortador dentro del archivo models.py.
'''
Url shortener model
'''
from django.db import models
# Create your models here.
class Shortener(models.Model):
'''
Creates a short url based on the long one
created -> Hour and date a shortener was created
times_followed -> Times the shortened link has been followed
long_url -> The original link
short_url -> shortened link https://domain/(short_url)
'''
created = models.DateTimeField(auto_now_add=True)
times_followed = models.PositiveIntegerField(default=0)
long_url = models.URLField()
short_url = models.CharField(max_length=15, unique=True, blank=True)
class Meta:
ordering = ["-created"]
def __str__(self):
return f'{self.long_url} to {self.short_url}'
Lo sé. Es una clase bastante grande, con un montón de cosas raras, pero no te desesperes. Iré paso a paso en cada cosa importante.
Explicación del modelo
En primer lugar, importamos el módulo de modelos. Este módulo contiene toda la funcionalidad que necesitamos para crear un modelo de Django.
Echando un vistazo al modelo “Shortener”, lo primero a tener en cuenta es que amplía modelos.Modelo. De hecho, cualquier modelo en cualquier aplicación Django debe ser una subclase de la modelos.Modelo clase.
Luego definimos todos los campos que tendrá el modelo en la base de datos. El campo «creado» es la fecha y la hora en que se crea el enlace acortado, por lo tanto, usamos DateTimeField para crear este tipo de funcionalidad. Usamos el argumento auto_now_add=True porque queremos que el campo solo se modifique cuando se crea la instancia.
El segundo campo times_followed se refiere a las veces que se ha utilizado la URL abreviada. Es un PositiveIntegerField y especificamos un valor predeterminado de cero. Eso significa que cada vez que una instancia ha creado el campo times_followed, Django completará ese campo con 0.
Por otro lado, long_url se refiere a la URL que ingresa el usuario. Es un URLField, porque solo queremos que el usuario ingrese caracteres de la forma: http://yoursite.com.
El último campo es short_url y tiene detalles interesantes. Especificamos que solo puede tener 15 caracteres, debe ser único, lo que significa que no puede haber elementos repetidos en ese campo. Finalmente, indicamos que se puede dejar en blanco, lo que significa que al trabajar con formularios, los usuarios no necesitarán escribir su propio código abreviado.
La clase interna Meta, nos dice cómo debe comportarse la clase, y establecemos que el ordenamiento (llamando a Shortener.objects.all()) de los objetos más cortos será discriminado por los más recientes.
El método __str__ dice cómo se debe imprimir el modelo. Entonces, si tenemos un objeto con long_url = “https://kirukiru.es.com/” y la parte abreviada “123456”, lo imprimimos.
https://kirukiru.es.com/ to 123456
Ahora es el momento de buscar una forma de guardar el enlace corto de forma aleatoria.
Crear funcionalidad de acortamiento
Vamos a crear 2 funciones personalizadas. El primero generará un código aleatorio y el segundo evitará obtener códigos aleatorios repetidos del modelo Shortener. Para hacer esto, cree un archivo utils.py dentro de la aplicación «urlshortener».
touch utils.py
Dentro de este archivo, vamos a utilizar la función de elección del módulo integrado aleatorio. Esto facilita la tarea de elegir caracteres aleatorios para crear el código.
'''
Utilities for Shortener
'''
from django.conf import settings
from random import choice
from string import ascii_letters, digits
# Try to get the value from the settings module
SIZE = getattr(settings, "MAXIMUM_URL_CHARS", 7)
AVAIABLE_CHARS = ascii_letters + digits
def create_random_code(chars=AVAIABLE_CHARS):
"""
Creates a random string with the predetermined size
"""
return "".join(
[choice(chars) for _ in range(SIZE)]
)
Como puede ver, esta función devuelve una cadena aleatoria de la longitud especificada en el archivo de configuración o 7 por defecto. Está utilizando la función getattr para obtener una variable del módulo de configuración, pero sin arrojar un error si la variable no está especificada.
Hagamos algunas matemáticas. Si tenemos 7 lugares donde puede haber hasta 62 caracteres disponibles para cada lugar, el posible permutaciones son:
Entonces, según estos cálculos rápidos, la parte abreviada se puede completar con hasta 2,5 billones de códigos diferentes. Así que podemos olvidarnos de salir de las URL abreviadas aleatorias.
Aunque puede existir tanta permutación, existe una pequeña probabilidad de obtener partes acortadas repetidas. Esto es un problema ya que configuramos el campo shortened_url para que sea único. Es por eso que la siguiente función es tan útil.
def create_shortened_url(model_instance):
random_code = create_random_code()
# Gets the model class
model_class = model_instance.__class__
if model_class.objects.filter(short_url=random_code).exists():
# Run the function again
return create_shortened_url(model_instance)
return random_code
Veamos qué está pasando aquí. La función toma como argumento una instancia del modelo «Shortener». Primero, la función genera un código aleatorio usando create_random_code. Luego obtiene la clase del modelo y verifica si hay algún otro objeto que tenga la misma short_url. Si lo hace, se ejecuta solo una vez más, pero si todo está bien, devuelve el código aleatorio.
Más tarde interactuará con el shell, para observar de cerca esta función.
Después de crear la función de utilidad, usémosla para crear códigos aleatorios en el modelo más corto.
Modificar el método de guardar
Al final de la clase «Shortener», modificará el método de guardado del modelo. El método save se llama cada vez que se guarda un objeto en la base de datos, por lo que veremos cómo usarlo aquí.
# Import the function used to create random codes
from .utils import create_shortened_url
# At the end of the Shortener model
def save(self, *args, **kwargs):
# If the short url wasn't specified
if not self.short_url:
# We pass the model instance that is being saved
self.short_url = create_shortened_url(self)
super().save(*args, **kwargs)
El método de guardar se está sobrescribiendo, lo que significa que está introduciendo una nueva funcionalidad a un método principal preexistente. Básicamente le dice a Django que cada vez que se guarda un objeto «Shortener» y no se especifica short_url, debe llenarse con un código aleatorio.
Ejecutando migraciones
Ahora es el momento de realizar y ejecutar las migraciones del modelo Shortener. Para hacerlo, ejecute los siguientes comandos en la carpeta raíz del proyecto.
$ python manage.py makemigrations
Migrations for 'urlshortener':
urlshortener/migrations/0001_initial.py
- Create model Shortener
$ python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions, urlshortener
Running migrations:
......
# Apply the URL shortener migrations
Applying urlshortener.0001_initial... OK
Por ahora, no tienes que preocuparte por qué son las migraciones. Solo tenga en cuenta que al ejecutar estos dos comandos, Django crea un base de datos db.sqlite archivo, basado en los modelos que ha definido.
Vamos a crear algunos objetos con el shell de Django.
$ python manage.py shell >>> from urlshortener.models import Shortener >>> s = Shortener(long_url="https://kirukiru.es.com") >>> s.short_url '' >>> s.save() >>> s.short_url 'kdWFVIc' >>> s.long_url 'https://kirukiru.es.com' >>> print(s) https://kirukiru.es.com to kdWFVIc
Así es como funcionarán todos los objetos más cortos.
Vistas de escritura
Como dije antes, una vista es una función simple que toma una solicitud y devuelve una respuesta. Entonces, veamos cómo crear una vista de hola mundo.
Respuesta de plantilla básica
Dentro del archivo «urlshortener/views.py» cree una función home_view. Automóvil club británico
'''
Shortener views
'''
from django.shortcuts import render, get_object_or_404 # We will use it later
from django.http import HttpResponse
# Create your views here.
def home_view(request):
return HttpResponse("Hello world")
Devuelve un mensaje simple «Hola mundo». Posteriormente verás cómo se ve en el navegador. Ahora cree un «urls.py», allí se mantendrán todos los patrones de URL de la aplicación.
toque urls.py
Agrega el siguiente código.
'''
Urls for shortener app urlshortener/urls.py
'''
from django.urls import path
# Import the home view
from .views import home_view
appname = "shortener"
urlpatterns = [
# Home view
path("", home_view, name="home")
]
La variable appname declara (como sugiere su nombre) el espacio de nombres de la aplicación urlshortener.
Explicando rápidamente que estamos importando el función de ruta, que devuelve un elemento para incluir en los patrones de URL de la aplicación. El atributo de nombre es el espacio de nombres de la ruta, que se puede llamar dentro de las plantillas si es necesario.
Ahora, modifiquemos las URL generales del proyecto.
# config/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
# Shortener Urls
path('', include('urlshortener.urls'))
]
Ahora vamos a ejecutar el servidor de nuevo.
python manage.py runserver
Si ejecuta el servidor, obtendrá un mensaje simple de «Hola mundo». Esto se debe a que está incluyendo los patrones de URL de la aplicación de acortador de URL en el proyecto general.
Esto es sólo un punto de partida. Ahora es el momento de crear un formulario para permitir que el usuario cree URL acortadas por sí mismo.
Creando formularios
En Django, un forma es una clase simple que permite obtener información del usuario.
Vas a crear un archivo Forms.py. Es una convención almacenar todas las formas de la aplicación en ese archivo.
cd urlshortener/ touch forms.py
Dentro de ese archivo, creará una clase «ShortenerForm» que se extiende desde «ModelForm».
'''
Shortener Forms urlshortener/forms.py
'''
from django import forms
from .models import Shortener
class ShortenerForm(forms.ModelForm):
long_url = forms.URLField(widget=forms.URLInput(
attrs={"class": "form-control form-control-lg", "placeholder": "Your URL to shorten"}))
class Meta:
model = Shortener
fields = ('long_url',)
Es un formulario modelo ya que su propósito es crear un objeto modelo a partir de la entrada del usuario. También hacemos uso del argumento del widget, que nos permite especificar el atributo «clase» (clase en CSS, no en python). Esto se debe a que vamos a estilizar la aplicación con bootstrap más adelante.
Terminando las vistas
Después de construir los formularios, es hora de crear la lógica comercial final de la aplicación.
Navegue hasta el archivo views.py dentro de la aplicación de acortador y modifique la vista home_view. Puedes consultar el repositorio de Github en este momento para tener una idea de cómo se ve la estructura del proyecto.
Hay dos vistas para la aplicación de acortador de URL:
Comencemos con la vista de inicio, que es la más compleja. Deberá importar el modelo y el formulario de Shortener. Todavía usa una función porque quiero que comprenda todo el flujo de datos de la vista. Además, utilizará la ruta para una plantilla (que aún no se ha creado).
Vista de inicio
'''
Shortener views
'''
from django.shortcuts import render # We will use it later
from django.http import HttpResponse, Http404, HttpResponseRedirect
# Model
from .models import Shortener
# Custom form
from .forms import ShortenerForm
# Create your views here.
def home_view(request):
template="urlshortener/home.html"
context = {}
# Empty form
context['form'] = ShortenerForm()
if request.method == 'GET':
return render(request, template, context)
elif request.method == 'POST':
used_form = ShortenerForm(request.POST)
if used_form.is_valid():
shortened_object = used_form.save()
new_url = request.build_absolute_uri('/') + shortened_object.short_url
long_url = shortened_object.long_url
context['new_url'] = new_url
context['long_url'] = long_url
return render(request, template, context)
context['errors'] = used_form.errors
return render(request, template, context)
La vista se basa en dos condicionales:
Una forma complicada de obtener la URL completa del sitio de forma dinámica es usar el método de objeto de solicitud build_absolute_uri .
>>> print(request.build_absolute_uri('/'))
'https://localhost:8080/'
Como una forma segura de procesar una solicitud incorrecta (el usuario no ingresó una URL válida), obtenemos los errores del formulario, los pasamos como contexto y representamos la plantilla como de costumbre. Más adelante verá cómo implementar la visualización de errores en la plantilla.
Vista de redirección
El redirect_url_view es un poco más simple. Es una vista detallada, lo que significa que la vista solo funciona con un objeto.
Esta función toma como parámetros la solicitud del usuario y la parte_cortada de la URL. No es necesario afirmar el tipo de solicitud que estamos recibiendo, ya que no estamos trabajando con formularios en esta vista.
def redirect_url_view(request, shortened_part):
try:
shortener = Shortener.objects.get(short_url=shortened_part)
shortener.times_followed += 1
shortener.save()
return HttpResponseRedirect(shortener.long_url)
except:
raise Http404('Sorry this link is broken :(')
Protegemos la vista con una sentencia try/except, en caso de que la parte abreviada no se encuentre en la base de datos. Si se encuentra el objeto, agrega 1 al campo times_followed y redirige con la función HttpResponseRedirect a la URL del sitio correspondiente al código aleatorio.
Actualización de URL
Una vez que haya creado las dos vistas de la aplicación, es hora de crear los patrones de URL finales al incluir la ruta a redirect_url_view.
Como siempre, comienza importando las vistas y luego creando una función de ruta y pasándola como argumentos:
- La ruta URL
- La vista que apunta al camino.
- El nombre del camino
'''
Urls for shortener app urlshortener/urls.py
'''
from django.urls import path
# Import the home view
from .views import home_view, redirect_url_view
appname = "shortener"
urlpatterns = [
# Home view
path('', home_view, name="home"),
path('<str:shortened_part>', redirect_url_view, name="redirect"),
]
Con esta configuración de URL, el enrutamiento de la aplicación se ve así.
- localhost:8000/: vista de inicio
- localhost:8000/URL-code: Redirección a la URL larga
Creación de plantillas
Ya casi has llegado. Lo único que lo separa de haber creado esta aplicación es la interfaz de usuario. Para eso, usamos plantillas de Django.
Las plantillas se utilizan para representar una interfaz limpia para el usuario de la aplicación. Estos archivos se crean dentro de la aplicación en una estructura de doble carpeta de la forma: «plantillas/nombre de la aplicación»
# urlshortener directory mkdir -p templates/urlshortener/
Nota: La estructura de carpetas dobles y el lenguaje de plantilla de Django están más allá del alcance de este tutorial, pero puede leer sobre ellos en el documentación oficial.
Plantilla base
Django permite la herencia de plantillas. Esto significa que podemos tener una plantilla base y extenderla con el propósito de seguir el principio DRY (Don’t repeat yourself).
cd templates/urlshortener touch base.html
El archivo base.html es una convención y significa que todas las demás plantillas de la aplicación deben ser una extensión de esta.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Django Url shortener</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
</head>
<body>
{% block body %}
{% endblock body %}
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
crossorigin="anonymous"
></script>
</body>
</html>
Vamos a usar el CDN bootstrap, para hacer una interfaz rápida y bonita sin necesidad de archivos CSS o javascript.
Si quieres aprender en profundidad sobre las etiquetas DTL, puedes hacerlo con el documentos oficiales.
Plantilla de inicio
La plantilla de inicio, inherente del archivo base.html. Eso significa que esta plantilla incluye todo el HTML del archivo principal.
{% extends 'urlshortener/base.html' %}
{% block body %}
<div class="container">
<div class="card mt-5">
<div class="card-header text-center py-3">
<h1>URL Shortner Application <i class="fas fa-link px-2"></i></h1>
</div>
<div class="px-3 py-4">
<form action="" method="POST">
{% csrf_token %}
<div class="row g-1">
<div class="col-10">{{form.long_url}}</div>
<div class="col-2">
<button class="btn btn-success btn-lg w-100" type="submit">
Shorten
</button>
</div>
</div>
</form>
</div>
</div>
{% if errors %}
<div class="alert alert-danger mt-4" role="alert">
<p>{{errors}}</p>
</div>
{% endif %}
{% if new_url %}
<div class="mx-auto text-center mt-5">
<h2 class="text-danger">Your shortened Url</h2>
<p>You can copy the Link below and share it with your friends</p>
<p class="">{{new_url}}</p>
<p><span class="text-danger">Previous URL:</span> {{long_url}}</p>
</div>
{% endif %}
</div>
{% endblock body %}
Explicaré rápidamente el flujo de datos de esta plantilla:
- Se muestra el formulario Acortador. Dentro de ficha crsf está configurado (razones de seguridad) y solo se muestra el campo URL largo del formulario. Recuerde que este campo tiene la clase CSS, «form-control form-control-lg», porque lo configuramos en el formulario.
- Si se encuentran errores, muéstrelos
- Si la operación POST tiene éxito, se muestra la nueva URL.
aplicación definitiva
¡Felicidades! 🎉. Ha creado una aplicación completa y funcional para acortar URL con Django.
Aquí hay algunas capturas de pantalla de cómo se ve la aplicación.
Obtenga solo:
Error al acortar la URL:
URL acortada con éxito:
URL redirigida:
¿Qué opinas de exponer una demostración de esta aplicación para acortar URL a alguien? Compruebe cómo exponer una aplicación de demostración de Django en Internet.
Reto 🔥
Si te sientes cómodo con tus habilidades con Django, ¿por qué no practicar con un desafío?.
Clona el código de esta aplicación y crea un sistema de autenticación, donde solo los usuarios registrados pueden acortar sus URL.
Cuando haya terminado, envíe una solicitud de extracción y envíeme un ping Gorjeo para mostrar sus logros.
Terminando
Ha llegado al final de este tutorial. Lo crea o no, acaba de revisar todos los aspectos principales de la creación de un proyecto Django. Espero que lo hayas encontrado extremadamente útil.
En este tutorial usted:
- Aprendió sobre el flujo de trabajo de crear una aplicación Django.
- Construyó un proyecto de currículum
- Comprendió las diferencias y la estructura de los proyectos Django y las aplicaciones Django.
- Descubrió el patrón MVT.
- Vistas base de funciones creadas
- Utilizó Django ORM (Object Relational Mapper) para crear modelos simples
Eso es todo, hay mucho que cubrir con el Marco web de Djangoasí que manténgase en contacto para obtener más tutoriales sorprendentes.