This content originally appeared on DEV Community and was authored by Gabriel Villacis
Tutorial 1: Configuración Inicial del Proyecto con Django, PostgreSQL y Variables de Entorno
Objetivo: En este tutorial, configuraremos el entorno inicial del proyecto Iniciativas Ecológicas utilizando Django, PostgreSQL y variables de entorno para gestionar configuraciones sensibles como la base de datos, secret key u otras. Además, reutilizaremos el HTML, CSS y JavaScript existentes, y configuraremos los archivos estáticos.
Paso 1: Configuración del Entorno Virtual con Poetry
- Instala Poetry (si aún no lo tienes instalado):
pip install poetry
- Crea el entorno del proyecto con Poetry: Desde la terminal, navega al directorio donde deseas crear el proyecto y ejecuta los siguientes comandos:
mkdir gestor_ecologico
cd gestor_ecologico
poetry init
- Instala Django y psycopg2 (para PostgreSQL):
poetry add django psycopg2-binary python-decouple
-
python-decouplete permitirá manejar las variables de entorno.- Crea el Proyecto Django:
poetry run django-admin startproject gestor_ecologico .
poetry run python manage.py startapp iniciativas
-
Registra la aplicación iniciativas. En el archivo
settings.pyde tu proyecto busca la variable de configuración INSTALLED_APPS e inserta la nueva aplicación. Debería quedar así:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'iniciativas'
]
Esto creará el proyecto principal llamado gestor_ecologico y una aplicación llamada iniciativas, donde gestionaremos las iniciativas ecológicas.
Paso 2: Configuración de Variables de Entorno para la Base de Datos y el SECRET_KEY
-
Configura el uso de variables de entorno con
python-decouple:
En el archivo settings.py de tu proyecto, cambia la configuración para usar variables de entorno. Primero, importa el módulo config de decouple:
from decouple import config
-
Crea un archivo
.enven el directorio raíz del proyecto y añade las siguientes variables de entorno:
SECRET_KEY=tu_secret_key
DEBUG=True
DB_NAME=iniciativas_db
DB_USER=postgres
DB_PASSWORD=your_password
DB_HOST=localhost
DB_PORT=5432
-
Modifica el archivo
settings.pypara usar las variables de entorno:
SECRET_KEY = config('SECRET_KEY')
DEBUG = config('DEBUG', default=False, cast=bool)
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': config('DB_NAME'),
'USER': config('DB_USER'),
'PASSWORD': config('DB_PASSWORD'),
'HOST': config('DB_HOST'),
'PORT': config('DB_PORT', default='5432'),
}
}
Paso 3: Creación de la Base de Datos con pgAdmin
- Abre pgAdmin y conéctate a tu servidor PostgreSQL.
-
Crea la base de datos:
- Haz clic derecho en "Databases" y selecciona "Create > Database".
- Nombre de la base de datos:
iniciativas_db. - Propietario:
postgres(o el usuario que hayas configurado).
- Asegúrate de que la base de datos esté configurada correctamente.
Paso 4: Configuración de Archivos Estáticos (CSS, JS, Imágenes)
-
Configura la ruta para los archivos estáticos en
gestor_ecologico/settings.py:
Asegúrate de que esta sección esté configurada correctamente para servir archivos estáticos:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
- Crea la carpeta para archivos estáticos:
Dentro de tu proyecto, crea una carpeta llamada static y dentro de ella, organiza tus archivos CSS, JavaScript e imágenes como se muestra a continuación:
gestor_ecologico/
├── static/
├── css/
└── estilos.css
├── js/
└── carrusel.js
└── img/
└── (coloca aquí tus imágenes)
- Mueve los archivos actuales de CSS, JS e imágenes que ya tienes a este directorio.
Paso 5: Reutilización del HTML en Django
-
Configura las vistas y las plantillas:
- Dentro de la aplicación
iniciativas, crea una carpetatemplatesdonde guardarás las plantillas HTML.
- Dentro de la aplicación
mkdir -p iniciativas/templates
-
Copia el archivo
index.htmlque ya tienes a esta carpeta.-
Configura una vista básica en
views.py:
-
Configura una vista básica en
En el archivo iniciativas/views.py, crea una vista simple para renderizar la página de inicio.
from django.shortcuts import render
def home(request):
return render(request, 'index.html')
-
Configura las URLs en
urls.py:
Crea un archivo urls.py dentro de la aplicación iniciativas y enlaza las rutas:
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
]
Luego, en el archivo gestor_ecologico/urls.py, incluye las rutas de la aplicación:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('iniciativas.urls')),
]
- Carga los archivos estáticos en la plantilla:
En el archivo index.html, asegura que los archivos CSS y JavaScript se carguen correctamente usando la etiqueta {% load static %} de Django.
Modifica la cabecera del archivo index.html así:
{% load static %}
<link rel="stylesheet" href="{% static 'css/estilos.css' %}">
Al final del archivo index.html, asegúrate de cargar el archivo carrusel.js:
<script src="{% static 'js/carrusel.js' %}"></script>
Paso 6: Migraciones y Verificación
- Realiza las migraciones iniciales para preparar la base de datos:
poetry run python manage.py migrate
- Inicia el servidor de desarrollo:
poetry run python manage.py runserver
-
Verifica en el navegador:
- Abre tu navegador en
http://127.0.0.1:8000/y verifica que tu página de inicio se cargue con los estilos CSS y el carrusel funcionando correctamente.
- Abre tu navegador en
Conclusión
En este primer tutorial, configuramos Django con PostgreSQL utilizando variables de entorno y pgAdmin para la creación de la base de datos. También reutilizamos los archivos HTML, CSS y JavaScript existentes, y configuramos el manejo de archivos estáticos.
This content originally appeared on DEV Community and was authored by Gabriel Villacis
Gabriel Villacis | Sciencx (2024-09-30T23:52:50+00:00) Gestor de Iniciativas Ecológicas: Django (Parte 1). Retrieved from https://www.scien.cx/2024/09/30/gestor-de-iniciativas-ecologicas-django-parte-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.