Primer proyecto Django y conexión a MySQL remoto

# Crea una carpeta nueva para este proyecto
mkdir miproyecto-django
# Entra a esa carpeta (todo lo que sigue se hace dentro de ella)
cd miproyecto-django

# Crea el entorno virtual: una carpeta "venv" con una copia propia de Python
python -m venv venv

# Activa el entorno virtual — Windows (PowerShell, el que usa VS Code por defecto); debe aparecer "(venv)" al inicio de la línea
venv\Scripts\Activate.ps1
# Solo si el comando anterior dice "la ejecución de scripts está deshabilitada": permite scripts en esta terminal y vuelve a activar
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

# Activa el entorno virtual — macOS / Linux (bash o zsh); en Windows NO lo escribas
source venv/bin/activate

# django: el framework · pymysql: el traductor entre Django y una base de datos MySQL
pip install django pymysql

# startproject genera la estructura base · "miproyecto": nombre del paquete de configuración
# el "." final evita crear una subcarpeta extra: los archivos quedan directo en miproyecto-django/
django-admin startproject miproyecto .

# Levanta el servidor de desarrollo local, todavía con la base SQLite que trae Django por defecto (se detiene con Ctrl + C)
python manage.py runserver

# python-decouple: lee valores desde un archivo .env en vez de escribirlos directo en el código
pip install python-decouple

# Reemplaza cada valor por el que copiaste de Aiven en el paso 03 (sin comillas y sin espacios alrededor del =)
# DB_NAME: nombre de la base de datos dentro de Aiven (casi siempre defaultdb)
DB_NAME=defaultdb
# DB_USER: usuario de MySQL que te da Aiven (casi siempre avnadmin)
DB_USER=avnadmin
# DB_PASSWORD: la contraseña real de Aiven (botón del ojo en Overview); nunca se sube a GitHub
DB_PASSWORD=tu-password-real-de-aiven
# DB_HOST: el servidor de Aiven; termina en aivencloud.com y va SIN https://
DB_HOST=tu-host-real.aivencloud.com
# DB_PORT: el puerto de Aiven (un número de 5 cifras, NO 3306)
DB_PORT=12345

# Mismas claves que .env, con valores de ejemplo en vez de los reales
# DB_NAME: nombre de la base (ejemplo)
DB_NAME=defaultdb
# DB_USER: usuario de MySQL (ejemplo)
DB_USER=tu-usuario
# DB_PASSWORD: contraseña de relleno; la real solo va en .env
DB_PASSWORD=tu-password
# DB_HOST: servidor de ejemplo
DB_HOST=tu-host.aivencloud.com
# DB_PORT: puerto de ejemplo
DB_PORT=12345

# venv/: no se sube el entorno virtual completo, cada quien crea el suyo con requirements.txt
venv/
# .env: el archivo con tus contraseñas reales, nunca debe llegar a GitHub
.env
# __pycache__/: archivos compilados que Python genera solo, no son código fuente
__pycache__/

# pymysql: el conector que instalaste en el paso 02
import pymysql
# Hace que Django use pymysql como si fuera el driver oficial de MySQL para Python
pymysql.install_as_MySQLdb()

# config: función de python-decouple que lee valores del archivo .env
from decouple import config

# (más abajo en el archivo, reemplaza el DATABASES que trae Django por defecto)
DATABASES = {
    # 'default': la conexión principal; Django puede tener varias, esta es la que usa siempre
    'default': {
        # ENGINE: qué motor de base de datos usar — mysql en vez del sqlite3 por defecto
        'ENGINE': 'django.db.backends.mysql',
        # NAME: nombre de la base de datos, leído de la variable DB_NAME del .env
        'NAME': config('DB_NAME'),
        # USER: usuario de conexión, leído de DB_USER
        'USER': config('DB_USER'),
        # PASSWORD: contraseña de conexión, leída de DB_PASSWORD
        'PASSWORD': config('DB_PASSWORD'),
        # HOST: servidor donde vive la base de datos, leído de DB_HOST
        'HOST': config('DB_HOST'),
        # PORT: puerto de conexión; default='3306' se usa solo si DB_PORT no está en el .env
        'PORT': config('DB_PORT', default='3306'),
        # OPTIONS: Aiven exige que la conexión venga cifrada (SSL)
        'OPTIONS': {'ssl': {'ssl-mode': 'REQUIRED'}},
    # cierre del diccionario de configuración de la conexión
    }
# cierre del diccionario DATABASES
}

# Crea en tu base MySQL las tablas internas de Django: usuarios, sesiones, permisos, tipos de contenido
python manage.py migrate

# startapp genera la carpeta "core" con views.py, models.py, etc.
python manage.py startapp core

# INSTALLED_APPS: lista de apps que forman tu proyecto; Django solo "ve" las que están aquí
INSTALLED_APPS = [
    # admin: el panel /admin
    'django.contrib.admin',
    # auth: usuarios, contraseñas y permisos
    'django.contrib.auth',
    # contenttypes: registro interno de los modelos (lo usan admin y auth)
    'django.contrib.contenttypes',
    # sessions: recuerda quién inició sesión entre una página y otra
    'django.contrib.sessions',
    # messages: mensajes de una sola vez (ej. "guardado con éxito")
    'django.contrib.messages',
    # staticfiles: maneja los archivos CSS, JS e imágenes
    'django.contrib.staticfiles',
    # 'core': tu app nueva, agregada al final de la lista
    'core',
# cierre de la lista INSTALLED_APPS
]

# render: función que combina una plantilla con datos y arma la respuesta HTTP
from django.shortcuts import render
# connection: objeto de Django que expone la configuración de la base de datos activa
from django.db import connection

# def: toda vista es una función que recibe "request" (la petición del navegador)
def inicio(request):
    # settings_dict: diccionario interno con ENGINE, HOST, NAME, etc. de la conexión activa
    info_bd = connection.settings_dict
    # contexto: los datos que la plantilla va a poder usar con {{ variable }}
    contexto = {
        # motor: el tipo de base de datos (debe decir mysql)
        'motor': info_bd['ENGINE'],
        # host: el servidor de la base (en Aiven termina en aivencloud.com)
        'host': info_bd['HOST'],
    # cierre del diccionario contexto
    }
    # render: junta el template "core/inicio.html" con el contexto y devuelve el HTML final
    return render(request, 'core/inicio.html', contexto)

# path: función para definir una ruta individual
from django.urls import path
# views: el archivo que acabas de escribir, en la misma carpeta
from . import views

# urlpatterns: lista de rutas que esta app entiende
urlpatterns = [
    # '': la URL vacía (la raíz de esta app) · views.inicio: la función que la atiende
    # name='inicio': un alias interno para referirse a esta ruta sin escribir la URL a mano
    path('', views.inicio, name='inicio'),
# cierre de la lista urlpatterns
]

# admin: ya viene importado por defecto, no lo borres
from django.contrib import admin
# path, include: include permite delegar un grupo de rutas a otra app
from django.urls import path, include

# urlpatterns: las rutas principales del proyecto completo
urlpatterns = [
    # ruta del panel de administración, ya incluida por defecto
    path('admin/', admin.site.urls),
    # '': todo lo que llegue a la raíz del sitio se delega a core/urls.py
    path('', include('core.urls')),
# cierre de la lista urlpatterns
]

{# DOCTYPE + lang: igual que en tus HTML de las semanas 1 y 2 · en plantillas de Django los comentarios van con llaves y gato #}
<!DOCTYPE html>
{# lang="es": el contenido de la página está en español #}
<html lang="es">
{# head: datos de la página que no se ven #}
<head>
  {# charset UTF-8: permite acentos y ñ #}
  <meta charset="UTF-8">
  {# title: el texto de la pestaña del navegador #}
  <title>Hola desde MySQL</title>
{# cierra el head #}
</head>
{# body: lo que se ve en la página #}
<body>
  {# h1: el título grande de la página #}
  <h1>Hola desde MySQL</h1>
  {# motor: Django reemplaza esa variable por el valor de contexto['motor'] que armó la vista #}
  <p>Motor de base de datos: {{ motor }}</p>
  {# host: reemplazado por contexto['host']; si dice "aivencloud.com" es MySQL real #}
  <p>Host: {{ host }}</p>
{# cierra el body #}
</body>
{# cierra el documento HTML #}
</html>

# Arranca el servidor y abre http://127.0.0.1:8000 en el navegador (se detiene con Ctrl + C)
python manage.py runserver

# nueva función de vista, además de "inicio" que ya tenías
def servicios(request):
    # lista_servicios: datos de ejemplo en Python — todavía no vienen de MySQL
    lista_servicios = [
        # cada servicio es un diccionario con su nombre y su precio
        {'nombre': 'Tutorías de programación', 'precio': 150},
        # segundo servicio de ejemplo
        {'nombre': 'Diseño de logotipos', 'precio': 300},
        # tercer servicio de ejemplo
        {'nombre': 'Repostería por encargo', 'precio': 120},
    # cierre de la lista
    ]
    # se la pasamos a la plantilla con la clave 'servicios'
    return render(request, 'core/servicios.html', {'servicios': lista_servicios})

# path: función para definir una ruta individual
from django.urls import path
# views: el archivo de vistas de esta misma app
from . import views

# urlpatterns: lista de rutas que esta app entiende
urlpatterns = [
    # '': la página de inicio que ya tenías
    path('', views.inicio, name='inicio'),
    # nueva ruta 'servicios/' → función views.servicios → alias 'servicios'
    path('servicios/', views.servicios, name='servicios'),
# cierre de la lista urlpatterns
]

{# DOCTYPE: indica que es una página HTML5 #}
<!DOCTYPE html>
{# lang="es": el contenido de la página está en español #}
<html lang="es">
{# head: datos de la página que no se ven #}
<head>
  {# charset UTF-8: permite acentos y ñ #}
  <meta charset="UTF-8">
  {# title: el texto de la pestaña del navegador #}
  <title>Servicios</title>
  {# mismo Play CDN de Tailwind que usaste en la Semana 2 #}
  <script src="https://cdn.tailwindcss.com"></script>
{# cierra el head #}
</head>
{# body: max-w-2xl + mx-auto centran el contenido; py-10 px-6 dan espacio arriba/abajo y a los lados #}
<body class="max-w-2xl mx-auto py-10 px-6">
  {# h1: título grande (text-2xl), en negritas (font-bold) y con espacio abajo (mb-6) #}
  <h1 class="text-2xl font-bold mb-6">Servicios</h1>
  {# table w-full: la tabla ocupa todo el ancho del contenedor; border dibuja el contorno gris #}
  <table class="w-full border border-slate-200 rounded-lg overflow-hidden">
    {# thead: la fila de encabezados, con fondo gris claro #}
    <thead class="bg-slate-100">
      {# tr: la única fila del encabezado #}
      <tr>
        {# th: encabezado de la columna del nombre, alineado a la izquierda #}
        <th class="text-left px-4 py-2">Servicio</th>
        {# th: encabezado de la columna del precio #}
        <th class="text-left px-4 py-2">Precio</th>
      {# cierra la fila del encabezado #}
      </tr>
    {# cierra el encabezado #}
    </thead>
    {# tbody: el cuerpo de la tabla, donde van las filas de datos #}
    <tbody>
      {# for: repite la fila de abajo una vez por cada elemento de la lista #}
      {% for servicio in servicios %}
      {# tr: una fila por servicio; border-t dibuja la línea gris de arriba #}
      <tr class="border-t border-slate-200">
        {# servicio.nombre: accede a la clave 'nombre' del diccionario actual #}
        <td class="px-4 py-2">{{ servicio.nombre }}</td>
        {# servicio.precio: accede a la clave 'precio'; el $ es texto fijo antes del número #}
        <td class="px-4 py-2">${{ servicio.precio }}</td>
      {# cierra la fila de este servicio #}
      </tr>
      {# endfor: cierra el bucle, obligatorio en Django (a diferencia de Python) #}
      {% endfor %}
    {# cierra el cuerpo de la tabla #}
    </tbody>
  {# cierra la tabla #}
  </table>
{# cierra el body #}
</body>
{# cierra el documento HTML #}
</html>

# pip freeze lista todo lo instalado en el entorno virtual; > lo guarda en un archivo
pip freeze > requirements.txt

# Convierte la carpeta en repositorio de Git (solo se hace una vez)
git init
# Prepara todos los archivos para el commit; gracias al .gitignore del paso 04, .env y venv/ NO quedan incluidos
git add .
# Guarda una "foto" de los archivos con un mensaje que explica qué hiciste
git commit -m "Primer proyecto Django conectado a MySQL en Aiven"
# Nombra la rama principal "main"
git branch -M main
# Conecta la carpeta con el repo VACÍO que creaste en GitHub; cambia TU_USUARIO y el nombre por los tuyos
git remote add origin https://github.com/TU_USUARIO/u2s3-hernandez-nunez-maria-jose.git
# Sube la rama main a GitHub y la deja vinculada (-u) para que después baste con "git push"
git push -u origin main

<!-- título del repo: cambia por tus nombres reales -->
# U2S3 — [Apellido Paterno] [Apellido Materno] [Nombre(s)]

<!-- sección con los pasos para correr el proyecto en otra computadora -->
## Cómo correrlo localmente
<!-- paso 1: el entorno virtual -->
1. Crear y activar un entorno virtual
<!-- paso 2: instalar los paquetes de requirements.txt -->
2. pip install -r requirements.txt
<!-- paso 3: crear el .env a partir del ejemplo -->
3. Copiar .env.example a .env y completar con credenciales propias de Aiven
<!-- paso 4: crear las tablas en MySQL -->
4. python manage.py migrate
<!-- paso 5: arrancar el servidor -->
5. python manage.py runserver

<!-- sección con la evidencia de la práctica -->
## Evidencia
<!-- dónde están las capturas -->
Ver capturas de `migrate` y de las tablas en Aiven en la carpeta /evidencias.