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.