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 de Python más utilizado. Sus características integradas y una gran cantidad de paquetes de terceros lo han convertido en uno de los más queridos marcos web 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 empezar a utilizarlo.

Así que hoy vas a construir desde cero una aplicación Django totalmente funcional.

Al final de este tutorial, podrás:

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

Pre-requirements

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 Comandos de UNIX (ls, cd, rm, toque)
• 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 Repo de Github.

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

Project statement

En este tutorial, creará un acortador de URL. Básicamente, un Acelerador 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.

Structure of a Django project

Básicamente, un sitio web de Django se basa en un único proyecto y múltiples separados aplicaciones. 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 usuarios aplicación y la foros aplicación.

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.

Set Up a Django project

En esta sección, configurará un proyecto Django. Para ello, vas a utilizar diferentes herramientas como un Entorno virtual para organizar Python dependencias 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 trabajar.

python -m venv .venv

Este comando usa el pitón -m or Python –mod mando. 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 hace referencia 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, debemos instalarlo con Pip (Pip instala paquetes).

$ 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 el símbolo de su caparazón.

Para comprobar si la instalación fue correcta, 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 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.

Iniciar 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 el 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 un config / carpeta 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 manage.py texto. Tiene la misma funcionalidad que django-admin, pero la principal ventaja de usarlo es que le permite administrar la configuración al ejecutar el proyecto.

Ahora veamos si todo funciona correctamente.

python manage.py runserver

Creating the Url shortener app

Es hora de crear la aplicación principal del proyecto. Vas a usar el manage.py archivo para realizar esta tarea.

python manage.py startapp urlshortener

Esto crea una aplicación Django, con el nombre acortador de URL. Si ejecuta el árbol comando, 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 la configuración, 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 el asgi.py y wsgi.py archivos. Estos son archivos que le permiten configurar su aplicación en implementación.

La manage.py es el script de Python que le permite ejecutar todos los comandos disponibles de Django-admin.

Echando un vistazo al interior 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 vive la configuración de la aplicación. Por lo general, no juegas con eso, excepto que estás haciendo cosas bastante avanzadas.

admin.py es donde registras tu 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 el 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 settings.py archivar y modificar el INSTALLED_APPS variable 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.

Understanding the MVT pattern

El patrón Modelo, Vista, Plantilla es el patrón de diseño de software que los desarrolladores de Django utilizan 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 Lenguaje de plantilla Django (DTL) que le permite incorporar parte del poder de Python en documentos de texto.

Create the Shortener model

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 models.py archivo.

'''
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 models módulo. 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 se extiende models.Model. 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 hora en que se crea el enlace abreviado, por lo que usamos Campo de fecha y hora para crear este tipo de funcionalidad. Usamos el argumento auto_now_add = Verdadero porque queremos que el campo solo se modifique cuando se cree la instancia.

El segundo campo times_followed hace referencia a las veces que se ha utilizado la URL abreviada. Es un CampoEnteroPositivo y especificamos un valor predeterminado de cero. Eso significa que cada vez que una instancia ha creado el times_followed campo, Django completará ese campo con 0.

Por otra parte, long_url se refiere a la URL que ingresa el usuario. Es un campo URL, 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 Acortador.objetos.todos ()) de los objetos del acortador serán discriminados por los más recientes.

La __str__ El método 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, la posible 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. Este es un problema ya que configuramos el shortened_url campo para ser ú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. Entonces se pone el modelo clase y comprueba si hay algún otro objeto que tenga el mismo 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. La ahorrar se llama al método 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 a un método principal preexistente. Básicamente, le dice a Django que cada vez que se guarda un objeto "Acortador" y el short_url no se especifica, debe rellenarse 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 base de datos db.sqlite archivo, 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.

Writing views

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 saludo.

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 nombre de la aplicación variable declara (como su nombre indica) 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. La nombre atributo 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.

Creating forms

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 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 tarde.

Finishing the views

Después de construir los formularios, es el momento de crear la lógica comercial final de la aplicación.

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

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 formulario_utilizado.

Una forma complicada de obtener la URL completa del sitio de forma dinámica es mediante el solicita método de objeto 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_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 un probar / excepto declaración, en caso de que la parte abreviada no se encuentre en la base de datos. Si se encuentra el objeto, se suma 1 al times_followed campo y redirecciona con el HttpResponseRedirect función a la URL del sitio correspondiente al código aleatorio.

Updating URLs

Una vez que haya creado las dos vistas de la aplicación, es hora de crear los patrones de URL finales incluyendo la ruta al 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

Creating templates

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 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 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/bootstrap@5.0.0/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/bootstrap@5.0.0/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 CSS o archivos javascript.

Si desea obtener más información sobre las etiquetas DTL, puede hacerlo con el 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. Dentro de token de crsf está configurado (motivos 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.

Final application

¡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? Cheque cómo exponer una aplicación de demostración de Django al internot.

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 haga 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ó el Django ORM (Object Relational Mapper) para crear modelos simples

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