Skip to content

02-javascript.md

Latest commit

 

History

History
169 lines (117 loc) · 7.72 KB

02-javascript.md

File metadata and controls

169 lines (117 loc) · 7.72 KB
Raw

02: Desarrollo Frontend JavaScript

Escenario

Contoso es una empresa que vende productos para varias actividades al aire libre. El departamento de marketing de Contoso quiere lanzar un sitio web de redes sociales micro para promocionar sus productos a clientes existentes y potenciales.

Como desarrollador JavaScript, vas a construir una aplicación frontend JavaScript usando React comunicándose con la aplicación API backend Python.

Prerrequisitos

Consulta el documento README para la preparación.

Comenzando

Verificar Modo Agente de GitHub Copilot

  1. Haz clic en el ícono de GitHub Copilot en la parte superior de GitHub Codespace o VS Code y abre la ventana de GitHub Copilot.

    Abrir GitHub Copilot Chat

  2. Si se te pide iniciar sesión o registrarte, hazlo. Es gratuito.

  3. Asegúrate de estar usando el Modo Agente de GitHub Copilot.

    Modo Agente de GitHub Copilot

  4. Selecciona el modelo ya sea GPT-4.1 o Claude Sonnet 4.

  5. Asegúrate de haber configurado Servidores MCP.

Preparar Instrucciones Personalizadas

  1. Establece la variable de entorno de $REPOSITORY_ROOT.

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  2. Copia las instrucciones personalizadas.

    # bash/zsh
cp -r $REPOSITORY_ROOT/docs/custom-instructions/javascript/. \
      $REPOSITORY_ROOT/.github/
    # PowerShell
Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/javascript/* `
          -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force

Preparar Proyecto de Aplicación

  1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo Claude Sonnet 4 o GPT-4.1.

  2. Asegúrate de que el servidor MCP context7 esté funcionando.

  3. Usa un prompt como el siguiente para crear un proyecto de aplicación web React.

    Me gustaría crear un andamio para una aplicación web React. Sigue las instrucciones a continuación.

- Asegúrate de que sea la aplicación web, no la aplicación móvil.
- Tu directorio de trabajo es `javascript`.
- Identifica primero todos los pasos que vas a hacer.
- Usa ViteJS como el framework de la aplicación frontend.
- Usa configuraciones predeterminadas al inicializar el proyecto.
- Usa `SimpleSocialMediaApplication` como el nombre del proyecto al inicializar.
- Usa el número de puerto `3000`.
- Solo inicializa el proyecto. NO vayas más allá.

  4. Haz clic en el botón imagen del botón "keep" de GitHub Copilot para tomar los cambios.

Preparar Servidor MCP Figma

  1. Asegúrate de haber configurado Servidores MCP.
  2. Obtén el token de acceso personal (PAT) de Figma.
  3. Abre la Paleta de Comandos presionando F1 o Ctrl+Shift+P en Windows o Cmd+Shift+P en Mac OS, y busca MCP: List Servers.
  4. Elige Framelink Figma MCP y luego haz clic en Start Server.
  5. Ingresa el PAT que obtuviste de Figma.

Generar Componentes UI desde Figma

  1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo Claude Sonnet 4 o GPT-4.1.

  2. Asegúrate de estar ejecutando el servidor MCP Figma.

  3. Copia la plantilla de diseño Figma a tu cuenta.

    Página de plantilla de diseño Figma

  4. Haz clic derecho en cada sección - Home, Search, Post Details, Post Modal y Name Input Modal 👉 Selecciona Copy/Paste as 👉 Selecciona Copy link to selection para obtener el enlace a cada sección. Toma nota de los cinco enlaces.

Ejecutar Aplicación Backend FastAPI

  1. Asegúrate de que la aplicación backend FastAPI esté funcionando.

    Ejecuta la API backend FastAPI, que se encuentra en el directorio `python`.

    NOTA: Puedes usar la aplicación de muestra complete/python en su lugar.

  2. Si usas GitHub Codespaces, asegúrate de que el número de puerto 8000 esté configurado como público en lugar de privado. De lo contrario, obtendrás el error 401 al acceder desde la aplicación frontend.

Construir Aplicación Frontend React

  1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo Claude Sonnet 4 o GPT-4.1.

  2. Asegúrate de que el servidor MCP context7 esté funcionando.

  3. Asegúrate de tener todos los enlaces de sección Figma de 5 obtenidos de la sección anterior.

  4. Agrega product-requirements.md y openapi.yaml a GitHub Copilot.

  5. Usa un prompt como el siguiente para construir la aplicación basada en los requisitos y el documento OpenAPI.

    Me gustaría construir una aplicación web React. Sigue las instrucciones a continuación.

- Tu directorio de trabajo es `javascript`.
- Identifica primero todos los pasos que vas a hacer.
- Hay una aplicación API backend ejecutándose en `http://localhost:8000`.
- Usa `openapi.yaml` que describe todos los endpoints y esquema de datos.
- Usa el número de puerto `3000`.
- Crea todos los componentes UI definidos en este enlace: {{FIGMA_SECTION_LINK}}.
- NO agregues nada no relacionado con los componentes UI.
- NO agregues nada no definido en `openapi.yaml`.
- NO modifiques nada definido en `openapi.yaml`.
- Da indicación visual cuando la API backend no esté disponible o no sea alcanzable por cualquier razón.

  6. Repite cuatro veces más para los otros cuatro enlaces de diseño Figma.

  7. Haz clic en el botón imagen del botón "keep" de GitHub Copilot para tomar los cambios.

Verificar Aplicación Frontend React

  1. Asegúrate de que la aplicación backend FastAPI esté funcionando.

    Ejecuta la API backend FastAPI, que se encuentra en el directorio `python`.

  2. Verifica si está construida correctamente o no.

    Ejecuta la aplicación React y verifica si la aplicación se está ejecutando correctamente.

Si la ejecución de la aplicación falla, analiza los problemas y corrígelos.

  3. Abre un navegador web y navega a http://localhost:3000.

  4. Verifica si tanto las aplicaciones frontend como backend están funcionando correctamente.

  5. Haz clic en el botón [keep] de GitHub Copilot para tomar los cambios.

Bien. Has completado el paso "JavaScript". Vamos al PASO 03: Migración Java desde Python.

Disclaimer: Este documento ha sido localizado por GitHub Copilot. Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un issue.