Una guía para crear una aplicación de acortador de URL con Django

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 Python más utilizado. Sus características integradas y la gran cantidad de paquetes de terceros lo han convertido en uno de los frameworks 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, podrá:

• Ha escrito una aplicación para acortar URL.
• Comprender el patrón MVT de Django
• Haber aprendido el flujo de trabajo de la creación de un proyecto.

Pre requisitos

Todos los siguientes requisitos son opcionales y le ayudarán a seguir el tutorial. Pero si no tiene experiencia con ninguno de estos, no se preocupe. El paso más importante es el primero.

• Comprensión básica de los comandos de 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 ha creado algo con Django.

Todo el código de trabajo estará disponible en este repositorio de Github.

Ahora que tiene muy claros los conceptos anteriores, entremos en el asunto.

Declaración de proyecto

En este tutorial, creará 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 utilizar 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ás el uso del patrón MVT, aprenderás los conceptos básicos del diseño de bases de datos con modelos Django y aprenderás cómo mostrar información al usuario a través de vistas, URL y plantillas.

Estructura de un proyecto de Django

Básicamente, un sitio web de Django se basa en un solo proyecto y varias 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 Stackoverflow. Su funcionalidad se basa en dos aspectos principales.

• Gestión de usuarios: Iniciar sesión, Cerrar 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 autónoma. 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.

En resumen, un proyecto se refiere a un conjunto de configuraciones y aplicaciones destinadas a crear una aplicación web. Por otro lado, una aplicación 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 de Django

En esta sección, configurará un proyecto de 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 eficaz de mantener un conjunto específico de dependencias. Pero su objetivo principal es aislar los paquetes de desarrollo de los globales.

Así que creemos un entorno virtual con python, el comando de formulario integrado.

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.

Hola Python, ejecuta como un script la biblioteca incorporada venv y crea un nombre virtualenv .venv

Ahora es el momento 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 aún no hemos instalado nada.

Entremos en Django

Para crear nuestra aplicación de acortador de URL, comenzaremos instalando el paquete Django. Django es un paquete de terceros, por lo tanto, necesitamos 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: Recuerde que $ no es más que su símbolo de shell.

Para comprobar si la instalación salió correctamente, comprobamos de nuevo los paquetes instalados de nuestro venv.

 $ pip freeze asgiref==3.3.4 Django==3.2.1 pytz==2021.1 sqlparse==0.4.1

No se preocupe si las versiones que obtiene son diferentes a las mías. Si Django aún está en la versión 3.x, puede continuar sin ningún problema.

Comenzando un proyecto de 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 de Django? Creemos uno ejecutando el siguiente comando.

 django-admin startproject config

Explicando 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 config puede ser cualquier nombre que desee. La razón por la que utilizo config como el nombre de este proyecto es solo por conveniencia. Es bueno cambiar entre proyectos y seguir teniendo la misma convención de nomenclatura. Así que no tenga miedo de usar otros nombres de proyectos cuando lo desee.

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 utilizará 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 veamos 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. Va a utilizar el archivo manage.py para realizar esta tarea.

 python manage.py startapp urlshortener

Esto crea una aplicación Django, con el nombre urlshortener . Si ejecuta el comando de árbol, obtendrá 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 la convención. Dentro de config, obtienes settings.py , es el archivo donde configuras 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.

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 acaba de crear, puede 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 reside la configuración de la aplicación. Por lo general, no te metas con eso, excepto que estás haciendo cosas bastante avanzadas.

admin.py es donde registras tus 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 (vagamente diciendo) son la forma en que se almacenan los datos. Escuchará más sobre los modelos más adelante.

migrations/ es la carpeta donde se almacenan las migraciones de Django. Veremos 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 su 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.

Comprender el patrón MVT

El patrón Modelo, Vista, Plantilla es el patrón de diseño de software que utilizan los desarrolladores de Django para crear aplicaciones web.

Se basa en 3 conceptos principales. Modelo (datos), Vista (interacción del usuario con los datos), Plantilla (Cómo ven los usuarios los datos).

Los modelos son clases de Python, que definen todos los campos y el comportamiento de los datos que está dispuesto a 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 Django template language (DTL) que le permite incorporar parte del poder de Python en documentos de texto.

Crea el modelo de Acortador

Una vez que haya comprendido rápidamente el patrón MVT, empecemos 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}'

Sé. Es una clase bastante grande, con muchas cosas raras, pero no se desespere. Iré paso a paso en cada cosa importante.

Explicación del modelo

En primer lugar, importamos el módulo de models . Este módulo contiene toda la funcionalidad que necesitamos para crear un modelo Django.

Echando un vistazo al modelo “Acortador”, lo primero que hay que tener en cuenta es que amplía models.Model . models.Model . De hecho, cualquier modelo en cualquier aplicación de Django debe ser una subclase de la clase models.Model.

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 abreviado, por lo que usamos DateTimeField para crear este tipo de funcionalidad. Usamos el argumento auto_now_add = True porque queremos que el campo solo se altere cuando se crea la instancia.

El segundo campo times_followed 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 refiere a la URL que long_url el usuario. Es un URLField , porque solo queremos que el usuario ingrese caracteres del formulario: 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 orden (llamando a Shortener.objects.all () ) de los objetos del acortador será discriminado por los más recientes.

El método __str__ indica cómo se debe imprimir el modelo. Entonces, si tenemos un objeto con long_url = “https://geekflare.com/” y la parte abreviada “123456”, y lo imprimimos.

 https://geekflare.com/ to 123456

Ahora es el momento de buscar una forma de guardar el enlace corto de forma aleatoria.

Creando 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, usaremos 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 se especifica.

Hagamos algunas matemáticas. Si tenemos 7 lugares donde puede haber hasta 62 caracteres disponibles para cada lugar, las posibles permutaciones son:

Entonces, según estos cálculos rápidos, la parte abreviada se puede completar hasta 2.5 billones de códigos diferentes. Así que podemos olvidarnos de salirnos de las URL abreviadas al azar.

Aunque puede existir tanta permutación, existe una pequeña probabilidad de obtener partes abreviadas repetidas. Esto es un problema ya que configuramos el campo shortened_url para que sea único. Por eso 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 "Acortador". Primero, la función genera un código aleatorio usando el create_random_code . Luego obtiene la clase 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 ver esta función de cerca.

Después de crear la función de utilidad, usémosla para crear códigos aleatorios en el modelo de acortador.

Modificar el método de guardado

Al final de la clase "Acortador", 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 guardado se sobrescribe, lo que significa que está introduciendo una nueva funcionalidad en un método principal preexistente. Básicamente, le dice a Django que cada vez que se guarda un objeto "Acortador" 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 hacer eso, 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 tiene que preocuparse por las migraciones. Solo tenga en cuenta que al ejecutar estos dos comandos, Django crea un archivo de base de datos db.sqlite, basado en los modelos que ha definido.

Creemos algunos objetos con el shell de Django.

 $ python manage.py shell >>> from urlshortener.models import Shortener >>> s = Shortener(long_url="https://geekflare.com") >>> s.short_url '' >>> s.save() >>> s.short_url 'kdWFVIc' >>> s.long_url 'https://geekflare.com' >>> print(s) https://geekflare.com to kdWFVIc

Así es como funcionarán todos los objetos acortadores.

Vistas de escritura

Como dije antes, una vista es una función simple que toma una solicitud y devuelve una respuesta. Así que veamos cómo crear una visión del mundo de hola.

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". Más adelante verá cómo se ve en el navegador. Ahora cree un "urls.py", allí estarán todos los patrones de URL de la aplicación.

touch 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 la 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 ejecutemos el servidor nuevamente.

 python manage.py runserver

Si ejecuta el servidor, obtendrá un simple mensaje 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 que permita al usuario crear URL abreviadas por sí mismo.

Creando formas

En Django, un formulario 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 utilizamos el argumento del widget, que nos permite especificar el atributo "class" (clase en CSS, no 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 el momento de crear la lógica comercial final de la aplicación.

Navegue hasta el archivo views.py dentro de la aplicación del acortador y modifique la vista home_view . Puede 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:

1. Vista de inicio: muestra el formulario abreviado y la nueva URL si el formulario ya se ha enviado.
2. Vista de redireccionamiento: esto redirige a la URL larga y agrega 1 a los tiempos seguidos.

Empecemos por la vista de inicio, que es la más compleja. Deberá importar el modelo y el formulario de Shortener. Sigues usando una función ya que quiero que comprendas todo el flujo de datos de la vista. Además, usará la ruta para una plantilla (que aún no se creó).

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:

1. Cuando el método HTTP es igual a GET: Solo pasamos como contexto, la forma Shortener utilizada para crear objetos Shortener.
2. Cuando el método HTTP es igual a POST: Seguimos pasando el formulario en el contexto ya que queremos que el usuario pueda ingresar otra URL. Pero estamos pasando la solicitud de publicación a otro formulario llamado used_form.

Una forma complicada de obtener la URL completa del sitio de forma dinámica es mediante 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 redireccionamiento

La 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 acortada 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 declaración 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 incluyendo la ruta a redirect_url_view .

Como siempre, comienza importando las vistas y luego creando una función de ruta y pasando como argumentos:

• La ruta URL
• La vista apuntando al camino
• El nombre de la ruta

 ''' 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

Creando plantillas

Ya casi has llegado. Lo único que te 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 carpeta doble con el formulario: "templates / appname"

 # urlshortener directory mkdir -p templates/urlshortener/

Nota: La estructura de carpeta doble y el lenguaje de plantilla de Django están más allá del alcance de este tutorial, pero puede leer sobre ellos en la 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 repetir).

 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 utilizar el bootstrap CDN, para hacer una interfaz rápida y bonita sin necesidad de archivos CSS o javascript.

Si desea obtener más información sobre las etiquetas DTL, puede hacerlo con los documentos oficiales.

Plantilla de inicio

La plantilla de inicio, inherente al 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. En el interior, el token crsf está configurado (razones de seguridad) y solo se muestra el campo URL largo del formulario. Recuerde que este campo tiene la clase CSS, “formulario-control formulario-control-lg”, porque lo configuramos en el formulario.
• Si se encuentran errores, muéstrelos
• Si la operación POST se realiza correctamente, se muestra la nueva URL.

Aplicación final

¡Felicidades! . Ha creado una aplicación de acortador de URL funcional completa con Django.

Aquí hay algunas capturas de pantalla de cómo se ve la aplicación.

Obtenga solo:

Error al acortar la URL:

URL abreviada correcta:

URL redirigida:

¿Qué opinas de exponer una demostración de esta aplicación de acortador de URL a alguien? Compruebe cómo exponer una aplicación de demostración de Django a Internet.

Desafío

Si se siente cómodo con sus habilidades de 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 en Twitter 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 te haya resultado de gran utilidad.

En este tutorial usted:

• Aprendí sobre el flujo de trabajo de crear una aplicación Django.
• Construyó un proyecto de currículum
• Entendí las diferencias y la estructura de los proyectos de Django y las aplicaciones de Django.
• Descubrió el patrón MVT.
• Vistas base de funciones creadas
• Usó Django ORM (Object Relational Mapper) para crear modelos simples

Eso es todo, hay mucho que cubrir con el marco web de Django, así que manténgase en contacto para obtener más tutoriales increíbles.