Tutorial: ¿Cómo crear tu Primera Aplicación Web usando Django?

Durante muchos años y durante mi época como estudiante estuve aprendiendo cómo poder crear aplicaciones web de manera sencilla y con un back-end lo suficientemente robusto para poder realizar desde un blog hasta tareas de Machine Learning, así fue como descubrí Django.

¿Qué es Django y por qué usar Python?

Django es un framework para desarrollar aplicaciones web basado en Python, nos permite crear aplicaciones de manera sencilla y limpia, simplemente entendiendo conocimientos básicos del protocolo HTTP o HTTPS y con un poco de conocimiento de HTML5 podrás darles un toque personal y legible a tus aplicaciones. Una aplicación web puede ser desde un blog personal que quiero publicar en internet, una aplicación que por medio del concepto de Machine Learning pueda crear un chatbot para atender a mis clientes en un sitio web, hasta una aplicación que me permita llevar el manejo de inventarios en mi negocio y solo esté publicada dentro de mi red local (esto quiere decir que no es alcanzable por el internet.

En este blog podrás seguir paso a paso ¿cómo crear una aplicación web básica?, usando Django y aplicar tus conocimientos de Python. Éste pequeño tutorial está basado en Linux, específicamente en la distribución de Ubuntu, si deseas correr el mismo proceso, también lo puedes hacer en Windows, instalando Python y agregando las variables globales correspondientes. También es importante aclarar que este Tutorial es para Python3 específicamente.

Preparando un Ambiente Virtual de Python.

Entendamos como un ambiente virtual como una copia aislada de Python que nos permite trabajara en los objetos o dependencias de un proyecto sin necesidad de afectar otros proyectos con los cambios que se vayan a realizar, es por eso, que siempre recomiendo dar de alta un ambiente virtual por proyecto para no afectar los que estamos trabajando en otros. En este caso mi sugerencia es que creen un ambiente virtual para cada aplicación web en la que quieran trabajar.

Como primer paso, vamos a instalar en nuestra máquina virtual o instancia de Ubuntu Tutorial: ¿Cómo instalar Ubuntu Server 18.04 LTS? Python3 con todas sus librerías adicionales usando los siguientes comandos:

sudo apt update
sudo apt install python3-pip python3-dev libpq-dev

Ahora actualizaremos o instalaremos pip3 que es el sistema de gestión de paquetes basados en Python3, en nuestro caso ya que utilizamos Python3 usaremos los siguientes comandos:

sudo -H pip3 install --upgrade pip

Ya que tenemos actualizado pip instalaremos el paquete de Python3 que nos permite crear ambientes virtuales:

sudo -H pip3 install virtualenv

Ahora crearemos una carpeta que puede estar localizada en donde queramos llamada miproyecto usando el comando mkdir, mi sugerencia para esta prueba es dejarla en el directorio /home/username que es el directorio del usuario con el que estamos trabajando en Ubuntu:

mkdir miproyecto

Cambiamos de directorio a la carpeta miproyecto usando el comando cd:

cd miproyecto

Finalmente creamos nuestro ambiente virtual para Python3 usando el comando:

virtualenv miproyectoenv

Éste comando instalará una versión de Python3 y pip3 aislada para que pueda trabajar en mi proyecto, siempre que quiera trabajar en el ambiente virtual de miproyecto puedo iniciar mi ambiente virtual con el comando:

source miproyectoenv/bin/activate

Se activará el ambiente virtual mi proyecto, lo puedo notar por que antes de mi usuario y el nombre de mi equipo username@hostname$ ahora aparece (miproyectoenv) username@hostname$, en caso de querer salirnos a continuar trabajando en Ubuntu, podemos usar el comando:

deactivate

Lo que desactivará mi ambiente virtual, para poder continuar con este pequeño tutorial, sugiero que no desactiven su ambiente virtual ya que continuaremos trabajando con él. Es importante aclarar que dentro de nuestro ambiente virtual podemos usar los comando python y pip en lugar de python3 y pip3 ya que el ambiente virtual entiende que estamos trabajando en Python3.

Instalando y configurando Django.

Con nuestro ambiente virtual el listo es necesario que ahora instalemos el framework Django y podamos empezar a crear nuestra primera aplicación, para instalar Django usaremos el comando siguiente dentro de nuestro ambiente virtual:

pip install django

Finalmente empezaremos a crear nuestro primer proyecto de Django usando el siguiente comando para que se cree dentro del directorio de nuestro proyecto:

django-admin.py startproject miproyecto ~/miproyecto

Podemos notar que dentro de la carpeta mi proyecto se creó lo siguiente:
* Un archivo llamando manage.py que nos ayudará a realizar diversas funciones en nuestro proyecto como empezar a correr el servidor o web o migrar las bases de datos.
* En el directorio /home/username/miproyecto/miproyecto debemos tener los archivos init.py, settings.py, urls.py y wsgi.py que mas adelante explicaremos para que se usan.

El primer archivo que modificaremos es el archivo settings.py en el cuál agregaremos parámetros de configuración necesarios para el funcionamiento de nuestra aplicación, una manera sencilla de modificar este archivo es usando el comando nano que nos permite modificar archivos en Linux:

nano /home/username/miproyecto/miproyecto/settings.py

Dentro del archivo settings.py buscaremos la línea ALLOWED_HOSTS que contiene las direcciones IPv4 o Dominios de los equipos que podrán conectarse a nuestra aplicación, para fines de este tutorial se recomienda que se haga un cambio en la línea de la siguiente forma:

settings.py

ALLOWED_HOSTS = ['*']

Para que podamos acceder a la aplicación desde cualquier equipo de cómputo, sin embargo, en un ambiente de desarrollo real se sugiere agregar las direcciones IPv4 que tendrán acceso a la aplicación o el nombre del dominio mediante el cuál va a trabajar nuestra aplicación.

Ahora buscaremos la línea DATABASES donde podemos observar que tenemos lo siguiente:

settings.py

DATABASES = {
    'default: {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

En este caso Django por default trabaja con una base de datos de sqlite3 si en dado momento quisiéramos usar una base de datos un poco más profesional como postgresql o mysql podemos realizar los cambios en ésta sección que queda fuera del alcance de éste tutorial, lo que sucederá con sqlite3 es que nos creará un archivo de bases de datos en el directorio de nuestro proyecto el cual se llamará db.sqlite3 donde se contendrá toda la información de nuestro proyecto en formato SQL.

Ahora buscaremos la línea TIME_ZONE y le diremos a nuestro proyecto que toda la información que se maneje principalmente en las bases de datos lo va a manejar con nuestro horario local, en mi caso es America/Mexico_City:

settings.py

TIME_ZONE = 'America/Mexico_City'

Para poder tener un directorio donde se guardarán todos los elementos estáticos de nuestra aplicación web le diremos a nuestro proyecto de Django que cree una carpeta en el directorio raíz del proyecto para que los elementos estáticos como imágenes, archivos css, iconos, etc. se guarden en este directorio, para ello buscamos la línea STATIC_URL y debajo de la línea agregamos:

settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

Finalmente cerramos nano y salvamos el archivo settings.py con la última modificación.

Preparando nuestra Primera Aplicación.

Aquí es donde se empieza a poner interesante puesto que la aplicación de Django está lista para ser montada en el servidor web, sin embargo agregando un poco más de valor a éste pequeño tutorial, vamos a agregar una aplicación a nuestro proyecto de Django, todas las configuraciones que realizamos ahora nos permitirán tener un portal de administrador y visualizar el sitio principal de Django desde nuestra aplicación web, aunque el objetivo es que podamos tener una aplicación básica, para ello crear una aplicación llamada app dentro de nuestra aplicación web de Django eso lo hacemos ejecutando el siguiente comando:

python manage.py startapp app

Veremos que a la par de la carpeta /home/username/miproyecto/miproyecto se creará una carpeta llamada app en la dirección /home/username/miproyecto/app que contendrá lo siguiente:
* Se crearán los siguientes archivos init.py, admin.py, apps.py, models.py, tests.py, views.py
* Una carpeta llamada migrations conteniendo un archivo init.py donde se guardan todas las migraciones de las bases de datos con sus versiones.

Lo primero que haremos ahora que tenemos nuestra aplicación llamada app es cambiar el directorio a /home/username/miproyecto/app usando el comando cd:

cd /home/username/miproyecto/app

Crearemos dentro de este directorio un archivo llamando urls.py que nos permitirá manejar las direcciones url de nuestra aplicación llamada app:

nano urls.py

Y agregaremos el siguiente contenido:

urls.py

from django.urls import path, include
from app.routes import personas

app_name = 'app'
urlpatterns = [
    path('', personas.index, name='index'),
]

Salvamos el archivo urls.py con nano. Lo que estamos diciéndole a nuestro proyecto de Django es que nuestra aplicación llamada app ejecutará en la ruta principal todo el contenido de la función index que será creada más adelante en un archivo llamado main.py, ahora nuestro servidor con el proyecto de Django aún no está corriendo, pero más adelante se va a entender con más claridad.

Ahora vamos a crear una base de datos que se encargue de manejar la información de nuestra aplicación llamada app, para ellos vamos a modificar el archivo models.py y crear el esqueleto para una tabla en la base de datos que nos guarde la información de Personas:

nano models.py

Y agregaremos el siguiente contenido:

models.py

from django.urls import path, include
from app.routes import personas
import datetime
from django.db import models
from django.utils import timezone

class Personas(models.Model):
    nombre = models.TextField(null=False)
    apellidoPaterno = models.TextField(null=False)
    apellidoMaterno = models.TextField(null=False)
    createdAt = models.DateTimeField(auto_now_add=True)
    updatedAt = models.DateTimeField(auto_now=True)
    def __str__(self):
        return self.id

Salvamos el archivo models.py con nano. Ahora le estamos diciendo a la aplicación que durante la migración de la base de datos va a tomar como modelo el archivo }{: .badge .text-bg-light models.py y creará una tabla llamada }{: .badge .text-bg-light app_personas que tendrá las siguientes columnas:

• id - que asignará un id único en la entrada en la base de datos.
• nombre - que guardará la información del nombre de la persona que agreguemos.
• apellidoPaterno - que guardará la información del apellido paterno de la persona que agreguemos.
• apellidoMaterno - que guardará la información del apellido materno de la persona que agreguemos.
• createdAt - guardará automáticamente la fecha y la hora de cuando se crea la entrada en la base de * datos.
• updatedAt - guardará automáticamente la fecha y la hora de cuando se modifica la entrada en la base de datos.

Para poder tener un control de las vistas en nuestra aplicación crearemos una carpeta llamada routes en el directorio de nuestra aplicación usando el comando mkdir:

mkdir routes

Dentro de la carpeta routes crearemos el primer controlador de vistas, en este caso lo llamaremos personas, por lo tanto, crearemos usando nano el archivo personas.py (que si nos regresamos un poco antes en el tutorial los estamos importando al archivo urls.py) y se encargará de controlar todas las vistas que manejen algo relacionado con la tabla Personas en la base de datos:

nano routes/personas.py

Y agregaremos el siguiente contenido:

personas.py

from django.shortcuts import render, redirect
from django.urls import reverse
from django.conf import settings
from app.models import Personas

def index(request):
    persona = Personas.objects.create(
        nombre = 'John',
        apellidoPaterno = 'Doe',
        apellidoMaterno = 'Lopez'
    )
    persona.save()

    query_persona = Persona.objects.get(id = 1)
    context = {
        'persona' = query_persona
    }

    return render(request, 'index.html', context)

Salvamos el archivo personas.py con nano. Para explicar a detalle que hace el archivo personas.py es importante entender un poco del modelo cliente-servidor en el cuál usando el protocolo HTTP enviamos requests al servidor web a través de una url y esa url activa dentro del servidor un proceso que puede hacer diferentes funciones, que en éste caso serán nuestro código dentro de la carpeta routes, en específico hablando de personas.py donde tenemos una función llamada index que hará lo siguiente:

1. Creará un objeto de tipo Personas (que en realidad es el objeto que va a escribir la información a la base de datos), al cuál le estamos dando los parámetros nombre, apellidoPaterno, apellidoMaterno, es importante tomar en cuenta que la tabla personas también requiere los parámetros id, createdAt, updatedAt que se crearán automáticamente de acuerdo a la cantidad de entradas que tenga la base de datos y la fecha en la que está ocurriendo el proceso.
2. El objeto de tipo personas se guardará con el comando .save() donde le indicamos que la información se guardará en la base de datos, esto quiere decir que si abrimos nuestro archivo db.sqlite3 encontrarás una entrada con la información de John Doe Lopez.
3. Se realizará una consulta a la base de datos con la persona que tenga el id igual a 1
4. Se enviará ese query al contexto con el nombre persona.
5. Se renderizará el archivo index.html con la información del contexto que se guarda en la variable context como una variable diccionario.

Esto quiere decir que cada vez que haga un llamado en el navegador web a una url específica que definiremos en la siguiente sección ejecutará la función index la cuál desplegará la información en el navegador web.

Dentro de la carpeta templates crearemos un archivo llamando index.html usando el comando nano el cuál desplegaremos a través del navegador web y representará la información que tenemos guardada en la base de datos en la entrada número 1:

nano index.html

Y agregaremos el siguiente contenido:

index.html

{% extends "layout.html" %}
{% load static %}

{% block content %}

<p>{{ persona.nombre }} {{ persona.apellidoPaterno }} {{ persona.apellidoMaterno }} </p>
{% endblock %}

Salvamos el archivo index.html con nano y ahora creamos un archivo llamado layout.html el cuál contendrá el esqueleto de nuestra aplicación web, esto es muy útil cuando quieren poner por ejemplo un menú o poner un título al código HTML y no queremos estar repitiendo el código cada vez que creemos una vista:

nano layout.html

Y agregaremos el siguiente contenido:

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Aplicación App</title>
    <meta charset="utf-8">
    <meta name="author" content="John Doe">
    </head>
    <body>
        <h1>Prueba de la Base de Datos: </h1>
        {% block content %}
        {% endblock %}
    </body>
</html>

Publicando nuestra Primera Aplicación.

Ahora tenemos todo listo para poder publicar nuestra aplicación en nuestra red local, para ellos hay que cambiar el directorio para regresarnos a nuestro proyecto base de Django usando el comando:

cd /home/username/miproyecto/miproyecto

Para publicar nuestra aplicación llamada app tenemos que hacer un par de cambios, el primero es cambiar la url raíz modificando el archivo urls.py (que no es el mismo archivo urls.py que modificamos dentro de la aplicación) usando el comando nano:

nano urls.py

Y cambiaremos el contenido por lo siguiente:

urls.py

from django.contrib import admin
from django.urls import include, path
from app.routes import personas

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

Lo que hacemos cambiando este archivo es diciéndole a Django que queremos publicar nuestra aplicación llamada app en la url raíz y queremos que todas sus rutas que están en el archivo urls.py localizado en /home/username/miproyecto/app (el cual es diferente del archivo urls.py que acabamos de modificar) se puedan acceder a través de la ruta principal.

Para poder incluir nuestra aplicación llamada app en el proyecto de Django ahora modificaremos el archivo settings.py usando nano:

nano settings.py

Buscaremos la línea INSTALLED_APPS y agregaremos nuestra aplicación antes de la línea django.contrib.admin de la siguiente forma:

settings.py

INSTALLED_APPS = [
from app.routes import personas

urlpatterns = [
    'app.apps.AppConfig',
    'django.contrib.admin'
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Salvamos el archivo settings.py usando nano. Nos queda finalmente migrar las bases de datos y lanzar la aplicación para que podamos acceder desde nuestro navegador web, lo que haremos ahora será cambiarnos al directorio base donde se encuentra manage.py y ejecutaremos las siguientes líneas de código para nuestro proyecto de Django que nos ayudarán a migrar las bases de datos del proyecto:

cd /home/username/miproyecto
python manage.py makemigrations
python manage.py migrate

El proceso de migración consiste en crear las tablas adecuadas con las cuáles trabajará nuestro proyecto para poder guardar la información. Ahora migraremos la base de datos de la aplicación llamada app usando las siguientes líneas de comando:

python manage.py makemigrations app

Las migraciones de nuestra aplicación app se crearán en la carpeta /home/username/miproyecto/app/migrations lo que nos permitirá llevar un control de las migraciones en archivos que se irán guardando con número secuencial, esto nos servirá en caso de que queremos regresar aun esqueleto de bases de datos anterior, simplemente con una línea de comandos regresaremos al modelo que queremos y así podremos llevar un control por versionamiento, en nuestro caso la primera migración que se creará a la cuál le llamaremos migración inicial, se nombrará 0001_initial.py y para aplicar la migración ejecutamos el comando:

python manage.py sqlmigrate app 0001

Finalmente nos resta probar nuestra aplicación ejecutando la línea de comandos:

python manage.py runserver 0.0.0.0:8000

Si todos los elementos que cambiamos anteriormente no tienen ningún error aparecerá un mensaje en el cuál se contiene la frase:

Starting development server at http://127.0.0.1:8000/

Felicidades has creado tu primera aplicación web en Django siguiendo estos sencillos pasos, para poder acceder a ella, desde tu navegador web si es que estás en Ubuntu puedes acceder al sitio http://127.0.0.1:8000 o desde otro dispositivo de la red local a través de la dirección IPv4 que tiene tu equipo de Ubuntu, como por ejemplo http://192.168.1.100:8000

Ahora solo queda pulir un poco tu interfaz de usuario basada en código HTML, una recomendación que te puedo hacer es utilizar la herramienta Bootstrap basada en el código front-end de Twitter el cuál puedes utilizar para irle dando forma a tu aplicación.

Si te gustó este artículo o quieres que escriba sobre algún otro tema de tu interés, no dudes en dejarme tus comentarios.