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:
Por cierto, si todavía no has instalado Python, mira este post.
Nota: el código se irá actualizando en GitHub.
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.
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:
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.
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:
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.
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.
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í:
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.
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.
Ahora al ejecutar de nuevo la app, ya sea con la IP o en localhost, podemos visitar las rutas que definimos:
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
Muy interesante! Gracias por aportar información de este fantástico framework
De nada. Saludos!