From 2496569790bd8316098d54b8c3ae3aeb2d1198e8 Mon Sep 17 00:00:00 2001 From: Mireya Cueto Garrido Date: Mon, 13 Apr 2026 11:59:18 +0200 Subject: [PATCH] Update README with project structure and installation steps --- README.md | 167 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 98 insertions(+), 69 deletions(-) diff --git a/README.md b/README.md index 8adfa88..2f10aad 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -# Deck of Cards – Proyecto TFG +# Deck of Cards image + +
@@ -91,14 +93,14 @@ Antes de empezar, necesitas: # 📦 2. Instalación y ejecución del proyecto -Clona el repositorio: +Con una terminal clona el repositorio o descarga el contenido y guárdalo en una carpeta local: ```bash -git clone https://github.com/tu-repo/deck-of-cards.git +git clone https://github.com/AlexisLopez-Dev/deck-of-cards.git cd deck-of-cards ``` -Levanta los contenedores: +Situado en la carpeta adecuada levanta los contenedores del proyecto: ```bash docker compose up --build @@ -138,70 +140,7 @@ A continuación se resumen los endpoints más importantes del backend, organizad --- -# 🔐 4. Configuración del archivo .env - -El backend necesita un archivo `.env` para funcionar correctamente, especialmente para el login con Google. - -📍 **Este archivo debe estar dentro de la carpeta `backend/`**, así: - -``` -deck-of-cards/ -│ -├── backend/ -│ ├── .env ← AQUÍ -│ ├── main.py -│ ├── routers/ -│ └── ... -``` - -Contenido mínimo del `.env`: - -``` -GOOGLE_CLIENT_ID=tu_client_id_de_google -GOOGLE_CLIENT_SECRET=tu_client_secret_de_google -``` - -> [!WARNING] -> No compartas esas claves. - ---- - -# 🔑 5. Cómo crear GOOGLE_CLIENT_ID y GOOGLE_CLIENT_SECRET - -Para activar el login con Google, debes crear credenciales OAuth 2.0. - -### 🟦 Paso 1 — Entra en Google Cloud Console -https://console.cloud.google.com - -### 🟩 Paso 2 — Crea un proyecto -Menú superior → “Seleccionar proyecto” → “Nuevo proyecto”. - -### 🟧 Paso 3 — Configura la pantalla de consentimiento OAuth -En el buscador escribe: **OAuth consent screen** -Selecciona **External** → Rellena los datos → Guardar. - -### 🟨 Paso 4 — Crea las credenciales OAuth -Menú lateral: -**APIs & Services → Credentials → Create Credentials → OAuth Client ID** - -Tipo de aplicación: -✔ **Web application** - -Añade este Redirect URI obligatorio: -http://localhost:8000/api/auth/google/callback - - -### 🟥 Paso 5 — Copia tus claves -Google te mostrará: - -- **Client ID** -- **Client Secret** - -Pégalos en tu `.env` dentro de `backend/`. - ---- - -# 📚 6. Estructura del proyecto +# 📚 4. Estructura del proyecto ``` deck-of-cards/ │ @@ -222,6 +161,96 @@ deck-of-cards/ --- +# 🔐 5. Configuración del archivo .env + +El backend necesita un archivo `.env` para funcionar correctamente, especialmente para el login con Google. + +📍 **Este archivo debe estar dentro de la carpeta `backend/`**, así: + +``` +deck-of-cards/ +│ +├── backend/ +│ ├── .env ← AQUÍ +│ ├── main.py +│ ├── routers/ +│ └── ... +``` + +Contenido mínimo del `.env`: + +``` +GOOGLE_CLIENT_ID=tu_client_id_de_google //id del cliente, debe ser el mismo del proyecto de google cloud. +GOOGLE_CLIENT_SECRET=tu_client_secret_de_google //secreto del cliente, debe de copiarse del proyecto de google cloud cuando se crea. +GOOGLE_REDIRECT_URI=http://localhost:8000/api/auth/google/callback //url de redirección, debe ser la misma que en el proyecto de google cloud. +SECRET_KEY=superclaveultrasecreta123 //para codificación de los tokens (puedes poner cualquier texto o dejar el ejemplo que te doy). +``` + +> [!WARNING] +> No compartas la clave secreta del cliente. + +Un ejemplo de página de donde sacar las tres primeras claves: + +image + +--- + +# 🔑 6. Cómo crear el proyecto con su GOOGLE_CLIENT_ID y GOOGLE_CLIENT_SECRET + +Para activar el login con Google, debes crear credenciales OAuth 2.0. +Para ello sigue estos pasos: + +### 🟦 Paso 1 — Entra en Google Cloud Console +https://console.cloud.google.com + +### 🟩 Paso 2 — Crea un proyecto +Menú superior → “Seleccionar proyecto” → “Nuevo proyecto”. + +### 🟧 Paso 3 — Configura la pantalla de consentimiento OAuth + +image + + +En el buscador escribe: **OAuth consent screen** ó ve a la página que se muestra en la captura superior. + +Selecciona **Información de la página**: + +→ Rellena los datos necesarios (no hace falta poner un dominio si lo tienes en local) → Guardar + + +image + + +### 🟨 Paso 4 — Crea las credenciales OAuth +Menú lateral: +**APIs & Services → Credentials → Create Credentials → OAuth Client ID** + +image + + + +Tipo de aplicación: +✔ **Web application** + +Añade en `Orígenes autorizados de javascript`: +http://localhost:8000 + +Añade este Redirect URI obligatorio: +http://localhost:8000/api/auth/google/callback + +image + + +### 🟥 Paso 5 — Copia tus claves +Google te mostrará: + +- **Client ID** +- **Client Secret** + +Pégalos en tu `.env` dentro de `backend/`. Asegúrate de que las copias correctamente. + +--- + # 🎉 7. Listo para usar Con esto, ya puedes: @@ -236,4 +265,4 @@ Y ... ¡Proyecto listo para ejecutarse en local! -Gracias por llegar hasta aquí :) +Gracias por llegar hasta aquí ;)