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-decouple te 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.py de 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 .env en 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.py para 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 carpeta templates donde guardarás las plantillas HTML.
    
  
  
  
  
  
  

   mkdir -p iniciativas/templates

• 
  

  Copia el archivo index.html que ya tienes a esta carpeta.

  
  
  
  
  
  • 
    Configura una vista básica en views.py:
  
  
  
  
  
  

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.
  
  
  
  
  
  

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.