De una cuenta nueva en Render a una app Django conectada a MySQL en la nube

Paso 1.1 — Crear la cuenta

1. Ve a render.com y haz clic en "Get Started".
2. Elige "Sign up with GitHub" (recomendado: conecta directo tu cuenta de GitHub y evita otro usuario/contraseña).
3. Autoriza el acceso cuando GitHub te lo pida — Render solo lee tus repositorios, no los modifica sin tu permiso.

Paso 1.2 — Configurar tu perfil

1. Esquina superior derecha → ícono de tu cuenta → "Account Settings".
2. En "Profile", confirma que tu nombre y correo sean correctos (el docente puede revisarlos para identificar entregas).
3. En "Notifications" puedes activar el correo de aviso cada vez que un deploy termine o falle — muy útil para no estar refrescando la página.

Paso 1.3 — Entender el Dashboard

El panel principal de Render tiene 3 zonas que usarás constantemente en esta práctica:

Paso 3.1 — Crear carpeta, entorno virtual e instalar dependencias

mkdir gomez-perez-ana-practica-mysql
# Crea la carpeta raíz del proyecto, nombrada con tu identificador
cd gomez-perez-ana-practica-mysql
# Entra a esa carpeta

python -m venv venv
# Crea el entorno virtual aislado

# Windows (PowerShell):
venv\Scripts\Activate.ps1
# Ejecuta el script "activate" que vive dentro de venv; a partir de este comando, "python" y "pip" usan la copia aislada del proyecto

# Mac / Linux:
source venv/bin/activate
# "source" ejecuta ese mismo script activate dentro de la sesión actual de la terminal, activando el entorno aislado

pip install django pymysql python-decouple gunicorn whitenoise
# django = framework · pymysql = conector MySQL · python-decouple = lee el .env
# gunicorn = servidor de producción · whitenoise = sirve archivos estáticos en Render

Paso 3.2 — Crear el proyecto y la app (nombres con guion bajo)

django-admin startproject gomez_perez_ana_practica .
# Crea el proyecto Django; el "." final = "en esta misma carpeta"

python manage.py startapp conexion
# Crea la app "conexion", donde vivirá la vista y el modelo de prueba

Abre gomez_perez_ana_practica/settings.py y agrega tu app dentro de INSTALLED_APPS:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'conexion',   # Registramos nuestra app para que Django la reconozca
]

Paso 3.3 — Guardar credenciales en .env (nunca en el código)

DB_NAME=defaultdb          # Database name copiado de Aiven
DB_USER=avnadmin            # User copiado de Aiven
DB_PASSWORD=tu-password      # Password copiado de Aiven
DB_HOST=tu-host.aivencloud.com  # Host copiado de Aiven
DB_PORT=12345                 # Port copiado de Aiven
SECRET_KEY=escribe-una-cadena-larga-y-aleatoria
DEBUG=True                    # True solo mientras trabajas en tu computadora
IDENTIFICADOR=gomez-perez-ana # Tu identificador, usado dentro de la app para las pruebas

Crea también .gitignore:

.env
# Nunca subas tus credenciales reales a GitHub
venv/
# Tampoco subas la carpeta del entorno virtual

Paso 3.4 — Conectar Django a MySQL en settings.py

import pymysql
# Traemos el conector que traduce entre Django y MySQL
pymysql.install_as_MySQLdb()
# Hace que Django use pymysql como si fuera el driver oficial
from decouple import config
# Función para leer variables desde el archivo .env

SECRET_KEY = config('SECRET_KEY')
# La clave secreta se lee del .env, jamás escrita directo aquí
DEBUG = config('DEBUG', default=False, cast=bool)
# Convierte el texto "True"/"False" del .env en un booleano real de Python

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',   # Motor: MySQL
        'NAME': config('DB_NAME'),                # Nombre de la base de datos
        'USER': config('DB_USER'),                # Usuario de conexión
        'PASSWORD': config('DB_PASSWORD'),        # Contraseña de conexión
        'HOST': config('DB_HOST'),                # Servidor donde vive la base de datos
        'PORT': config('DB_PORT'),                # Puerto de conexión
        'OPTIONS': {'ssl': {'ssl-mode': 'REQUIRED'}},  # Aiven exige conexión cifrada
    }
}

Paso 3.5 — Migrar por primera vez

python manage.py migrate
# Crea en MySQL las tablas internas de Django (usuarios, sesiones, permisos, etc.)

Paso 3.6 — Crear el modelo de prueba (models.py)

En conexion/models.py:

from django.db import models
# Herramientas de Django para describir tablas como clases de Python

class RegistroPrueba(models.Model):
    # Cada clase que hereda de models.Model se convierte en una tabla en MySQL

    identificador = models.CharField(max_length=100)
    # Aquí guardamos tu identificador (apellidos-nombre) como dato de prueba

    mensaje = models.CharField(max_length=200)
    # Texto corto que describe la prueba realizada

    creado_en = models.DateTimeField(auto_now_add=True)
    # Django guarda automáticamente la fecha y hora del registro

    def __str__(self):
        # Define qué se muestra al "imprimir" este objeto (ej. en el panel admin)
        return f"{self.identificador} - {self.mensaje}"
        # f"..." arma un texto combinando los dos campos

En conexion/admin.py:

from django.contrib import admin
from .models import RegistroPrueba

admin.site.register(RegistroPrueba)
# Hace visible el modelo dentro del panel /admin

python manage.py makemigrations
# Prepara los cambios pendientes según el nuevo modelo
python manage.py migrate
# Crea la tabla "conexion_registroprueba" en tu base de datos MySQL real
python manage.py createsuperuser
# Crea tu usuario administrador para entrar a /admin

Paso 3.7 — Vista que prueba la conexión (views.py)

from django.db import connection
# connection = la conexión activa de Django hacia MySQL
from django.shortcuts import render
from decouple import config
from .models import RegistroPrueba

def probar_conexion(request):
    identificador = config('IDENTIFICADOR')
    # Leemos tu identificador desde el .env para usarlo en la prueba
    try:
        # try = "intenta hacer esto; si falla, no rompas la página, maneja el error"
        with connection.cursor() as cursor:
            # Abre un cursor: el objeto que ejecuta comandos SQL directos
            cursor.execute("SELECT NOW();")
            # Le pide a MySQL su fecha y hora actuales, la prueba más simple posible
            hora_servidor = cursor.fetchone()[0]
            # fetchone() trae el resultado; [0] toma el primer valor de esa fila
        RegistroPrueba.objects.create(
            identificador=identificador,
            mensaje="Conexion exitosa desde probar_conexion()"
        )
        # Inserta un nuevo registro real en la tabla, probando también la ESCRITURA
        contexto = {
            'exito': True,
            'hora_servidor': hora_servidor,
            'identificador': identificador,
            'registros': RegistroPrueba.objects.all().order_by('-creado_en')[:5],
            # Trae los últimos 5 registros, del más nuevo al más viejo
        }
    except Exception as e:
        # Si algo falla (credenciales mal escritas, base apagada, etc.) cae aquí
        contexto = {'exito': False, 'error': str(e), 'identificador': identificador}
    return render(request, 'conexion/resultado.html', contexto)

Paso 3.8 — Ruta y plantilla de resultado

Crea conexion/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.probar_conexion, name='probar_conexion'),
    # La URL raíz "" ejecuta la vista que prueba la conexión
]

En gomez_perez_ana_practica/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('conexion.urls')),
    # Cualquier URL en la raíz del sitio se busca dentro de conexion/urls.py
]

Crea la carpeta conexion/templates/conexion/ y adentro resultado.html:

<!DOCTYPE html>
<!-- Le dice al navegador "esto es HTML5 moderno", así lo interpreta con las reglas actuales -->

<html lang="es">
<!-- Abre el documento completo; lang="es" ayuda a lectores de pantalla y traductores automáticos a saber el idioma -->

<head>
<!-- Aquí va configuración que NO se ve directamente dibujada en la página -->

  <meta charset="UTF-8">
  <!-- Fija la codificación de caracteres; sin esto, tildes y la ñ pueden verse rotas -->

  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Descarga Tailwind CSS desde internet cada vez que se abre la página; con esto ya puedes usar sus clases de diseño -->

  <title>Prueba de conexión MySQL</title>
  <!-- Texto que aparece en la pestaña del navegador -->

</head>
<body class="bg-slate-50 p-6 font-sans">
<!-- bg-slate-50 (CSS) = pinta de gris muy claro el fondo de TODA la página -->
<!-- p-6 (CSS) = padding de 1.5rem: deja un margen interno de aire en los 4 lados del body -->
<!-- font-sans (CSS) = usa la familia de letra "sans-serif" configurada al inicio del archivo (Inter) -->

  <div class="max-w-xl mx-auto">
  <!-- max-w-xl (CSS) = el contenido de adentro nunca crece más de ~36rem de ancho, para que sea legible en pantallas grandes -->
  <!-- mx-auto (CSS) = centra este bloque horizontalmente (margen izquierdo y derecho calculados automáticamente) -->

    <h1 class="text-xl font-bold mb-4">Práctica: {{ identificador }}</h1>
    <!-- text-xl (CSS) = tamaño de letra grande · font-bold (CSS) = negritas · mb-4 (CSS) = margen inferior de aire -->
    <!-- {{ identificador }} = imprime el valor que la vista probar_conexion() envió al contexto con ese mismo nombre -->

    {% if exito %}
      <!-- {% if %} es una instrucción de Django Template Language: SOLO dibuja lo de adentro cuando "exito" llegó como True -->

      <div class="bg-emerald-50 border border-emerald-300 rounded-xl p-5">
      <!-- bg-emerald-50 (CSS) = fondo verde muy claro · border border-emerald-300 (CSS) = borde delgado verde -->
      <!-- rounded-xl (CSS) = esquinas bien redondeadas · p-5 (CSS) = relleno interno generoso -->

        <p class="text-emerald-800 font-bold">✅ Conexión exitosa a MySQL</p>
        <!-- text-emerald-800 (CSS) = texto verde oscuro, con buen contraste sobre el fondo claro de arriba -->

        <p class="text-emerald-700 text-sm mt-1">Hora del servidor: {{ hora_servidor }}</p>
        <!-- text-sm (CSS) = letra más pequeña que el párrafo anterior · mt-1 (CSS) = separación arriba -->
        <!-- {{ hora_servidor }} = imprime el valor que trajo cursor.fetchone() en views.py -->
      </div>

      <h2 class="font-bold mt-6 mb-2">Últimos registros guardados</h2>
      <!-- mt-6 (CSS) = separa este título del bloque verde de arriba · mb-2 (CSS) = un poco de aire antes de la lista -->

      <ul class="space-y-2">
      <!-- space-y-2 (CSS) = agrega separación vertical automática entre cada <li> hijo, sin escribir margen a mano en cada uno -->

        {% for r in registros %}
          <!-- {% for %} repite todo lo de adentro una vez por cada elemento de la lista "registros" que envió la vista -->
          <!-- en cada vuelta del ciclo, la variable "r" representa UN registro distinto de la base de datos -->

          <li class="bg-white border rounded-lg p-3 text-sm">
          <!-- bg-white (CSS) = fondo blanco, para que cada tarjeta resalte sobre el fondo gris del body -->

            <strong>{{ r.identificador }}</strong> — {{ r.mensaje }}
            <!-- <strong> pone en negritas el identificador; luego imprime el mensaje de ESTE registro -->

            <span class="text-slate-400">({{ r.creado_en }})</span>
            <!-- text-slate-400 (CSS) = gris tenue, para que la fecha se lea como un dato secundario -->
          </li>
        {% endfor %}
        <!-- {% endfor %} cierra de forma obligatoria el bucle {% for %} que abriste arriba -->
      </ul>

    {% else %}
      <!-- {% else %} se ejecuta SOLO cuando "exito" llegó como False desde la vista (hubo un error de conexión) -->

      <div class="bg-rose-50 border border-rose-300 rounded-xl p-5">
      <!-- Misma estructura de tarjeta que la verde de arriba, pero en tonos rosa/rojo (bg-rose-50, border-rose-300) para comunicar error -->

        <p class="text-rose-800 font-bold">❌ No se pudo conectar</p>

        <p class="text-rose-700 text-sm mt-1 font-mono">{{ error }}</p>
        <!-- font-mono (CSS) = muestra el texto del error con fuente de código, más fácil de leer para un mensaje técnico -->
        <!-- {{ error }} = imprime el texto que guardamos con str(e) en el bloque except de views.py -->
      </div>
    {% endif %}
    <!-- {% endif %} cierra de forma obligatoria el bloque {% if %} / {% else %} que abriste arriba -->

  </div>
</body>
</html>

Paso 3.9 — Probar en local

python manage.py runserver
# Levanta el servidor local

Abre http://127.0.0.1:8000/ en tu navegador.