Este es un post en donde vamos a crear, paso a paso, una aplicación web con Django, el framework de Python.

Recuerda que para comenzar debes instalar Django. Lo que veremos en este inicio es:

  • Crear proyecto
  • Crear aplicación
  • Crear primera vista y renderizarla

Por cierto, si todavía no has instalado Python, mira este post.

Nota: el código se irá actualizando en GitHub.

Descripción del proyecto

Vamos a crear un proyecto muy simple pero que nos enseñará a manejar el framework Django.

Será una aplicación web de gastos e ingresos personales, solo eso. Más adelante podremos agregar más cosas, pero para comenzar y entender el funcionamiento básico basta con eso.

Crear y ejecutar proyecto de Django

Para crear el proyecto coloca la terminal en el directorio en donde lo vas a crear y ejecuta:

django-admin startproject proyecto_gastos

Ese comando va a crear un directorio llamado proyecto_gastos. Ahora hay que ingresar a esa carpeta con cd proyecto_gastos y dentro de la misma ejecutar el servidor con:

python manage.py runserver

Lo que estamos haciendo es ejecutar el archivo manage.py con Python, pasándole el argumento runserver, así de simple.

Ahora visita localhost:8000 y debe verse la bienvenida:

Crear y ejecutar primera aplicación

El puerto puede cambiarse pasando el número como argumento:

python manage.py runserver 8080

Y la ip también, ya que por defecto solo escuchará en localhost pero no en la LAN. Si quieres que se pueda ver desde otra lan:

python manage.py runserver 0.0.0.0:8080

En ambos ejemplos he usado el puerto 8080, pero puedes cambiarlo.

Para detener el servidor presiona CTRL + C.

Proyecto desde la red

Personalmente, al visitar el proyecto desde otro nodo de la red aparecía un error que decía algo como DisallowedHost at /.

Si quieres permitir el host, simplemente agrega la IP del servidor al archivo settings.py en la lista llamada ALLOWED_HOSTS

En mi caso queda así:

ALLOWED_HOSTS = ["192.168.1.72"]

Ya que mi IP es 192.168.1.72. Ahí podrían ir más hosts. Al visitar la IP desde mi teléfono, todo va bien y ya no aparece el error de DisallowedHost:

Proyecto de Django desde LAN

En resumen, solo tienes que poner la IP de tu servidor en ALLOWED_HOSTS.

Si haces este cambio, ahora en tu PC no visites localhost:puerto, sino la IP de tu PC con el puerto, así como lo harías desde otro nodo de la red.

Aplicación vs proyecto

El nombre de la carpeta del proyecto es proyecto_gastos porque es todo el proyecto, y dentro del mismo podemos agregar aplicaciones que se pueden conectar entre sí y ser independientes.

Un proyecto se compone de una o varias apps. El proyecto que hemos creado será de gastos, y solo tendrá una app con el mismo nombre.

Después, podemos exportar nuestra app de gastos a otro proyecto, y el dueño del proyecto podrá usar nuestra app sin problema.

Crear app de gastos

Para crear la app de gastos, ejecutamos:

python manage.py startapp gastos

De nuevo, solo estamos ejecutando el archivo manage.py con algunos argumentos.

Hasta el momento la estructura debe verse así:

Estructura del proyecto de Django

Ahora se entiende mejor. La carpeta del proyecto tiene otra carpeta con el mismo nombre, y como hermana tiene la app.

En la carpeta del proyecto configuramos las cosas del proyecto en general, y en la de la app, solo las de la app.

Crear y configurar vistas

Las vistas son lo que ve el usuario, son las interfaces con las que el usuario interactúa con nuestra app.

Normalmente una vista se renderiza o muestra cuando el usuario visita determinada url. Por ejemplo, cuando visite /gastos se mostrarán sus gastos y cuando visite /gastos/agregar (por ejemplo) se debería mostrar un formulario para agregar un gasto.

Por el momento veremos cómo responder con un mensaje y algo de HTML, sin usar plantillas, ya que eso es parte de otro post.

En la carpeta de la app de gastos (no en el proyecto) crea un archivo llamado views.py con el siguiente contenido:

from django.http import HttpResponse


def inicio(request):
    return HttpResponse("Esto se llama cuando se visita gastos/")

def hola(request):
    return HttpResponse("Ahora pediste gastos/hola")

def agregar_gasto(request):
    html = """
    <h1>Agregar gasto</h1>
    <p>Podemos mostrar HTML, pero es más interesante cuando usamos
    <strong>plantillas</strong> y motores ;)</p>
    """
    return HttpResponse(html)   

Cada función será llamada de acuerdo a una URL. Lo único que hay que hacer es regresar un HttpResponse.

En este caso solo regresamos algunas cadenas y un poco de HTML, más adelante regresaremos datos reales y plantillas renderizadas.

Las vistas no funcionan sin URLs así que en la app de gastos crea un archivo llamado urls.py con el siguiente contenido:

from django.urls import path

from . import views # Importar views.py

urlpatterns = [
    path('', views.inicio, name='inicio'),
    path('hola', views.hola, name='hola'),
    path('agregar', views.agregar_gasto, name='agregar_gasto'),
]

Cada path que configuramos será relativa a gastos/ como veremos a continuación. La path vacía es la que será llamada con /.

Si te fijas, cada ruta está ligada con una función del archivo views.py.

Por ejemplo, la ruta agregar está ligada al método agregar_gasto de views, la función agregar_gasto está definida en views.py

Ya definimos las rutas de nuestra app, solo queda ligarlas al proyecto en general. Abre el archivo llamado urls.py del proyecto (no de la app) y agrega:

path('gastos/', include("gastos.urls")),

En la lista de urlpatterns de manera que quede así:

"""proyecto_gastos URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    # Cuando visiten gastos/ se mapeará a lo que esté configurado
    # en gastos/urls.py
    path('gastos/', include("gastos.urls")),
]

Estas son las URLs globales y aquí indicamos que las rutas de gastos/ serán ligadas con lo que haya en urls.py de la carpeta o app gastos.

Si queremos agregar más ulrs de otras apps, simplemente las definimos en este mismo archivo.

Poniendo todo junto

Ahora al ejecutar de nuevo la app, ya sea con la IP o en localhost, podemos visitar las rutas que definimos:

URLs y vistas de Django

Conclusión

Con esto terminamos la primera parte. Hemos aprendido a configurar las rutas y las vistas, en los próximos tutoriales veremos cómo traer datos, interactuar con bases de datos y renderizar plantillas.

El código completo lo he puesto en GitHub, ahí iré subiendo los cambios.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.