diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 06fe5c6..2548246 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -12,6 +12,7 @@ "ghcr.io/devcontainers/features/java:latest": { "installGradle": true, "installMaven": true, + "mavenVersion": "3.9.10", "version": "21" }, "ghcr.io/devcontainers/features/node:latest": {}, diff --git a/README.md b/README.md index f0afe31..bec39ce 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # GitHub Copilot Vibe Coding Workshop -![GitHub Copilot - Ghiblifiled](./images/ghcp.jpg) +![GitHub Copilot Vibe Coding Workshop](./images/banner.png) Let's vibe-code with [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) and its newest and greatest features in various programming languages such as Python, JavaScript, Java and .NET, as well as make the apps cloud-native by containerization. Are you ready to jump in? @@ -20,11 +20,15 @@ But here's the situation... This workshop material is currently provided in the following languages: -[English](./README.md) | [Español](./localisation/es-es/) | [Português](./localisation/pt-br/) | [Français](./localisation/fr-fr/) | [中文(简体)](./localisation/zh-cn/) | [日本語](./localisation/ja-jp/) | [한국어](./localisation/ko-kr/) +[English](./README.md) | [Español](./localisation/es-es/) | [Français](./localisation/fr-fr/) | [日本語](./localisation/ja-jp/) | [한국어](./localisation/ko-kr/) | [Português](./localisation/pt-br/) | [中文(简体)](./localisation/zh-cn/) ## Prerequisites -During this workshop, [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) is highly recommended because there's no need for preparation, except a web browser. However, if you really need to use your machine, make sure you've installed everything identified below. +During this workshop, [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) is highly recommended because there's no need for preparation, except a web browser. + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +However, if you really need to use your machine, make sure you've installed everything identified below. ### Common diff --git a/complete/Dockerfile.dotnet b/complete/Dockerfile.dotnet index 460ced0..ecb5eba 100644 --- a/complete/Dockerfile.dotnet +++ b/complete/Dockerfile.dotnet @@ -25,9 +25,10 @@ EXPOSE 8080 # Set the environment variables ENV ASPNETCORE_URLS=http://+:8080 ENV DOTNET_RUNNING_IN_CONTAINER=true +ENV ApiSettings__BaseUrl="${ApiSettings__BaseUrl}" # Copy the published files from the build stage COPY --from=publish /app/publish . # Set the entry point for the container -ENTRYPOINT ["dotnet", "Contoso.BlazorApp.dll"] \ No newline at end of file +ENTRYPOINT ["dotnet", "Contoso.BlazorApp.dll"] diff --git a/complete/Dockerfile.java b/complete/Dockerfile.java index 16d8f8b..06422d9 100644 --- a/complete/Dockerfile.java +++ b/complete/Dockerfile.java @@ -1,55 +1,90 @@ -# Stage 1: Build the application -FROM mcr.microsoft.com/openjdk/jdk:21-ubuntu AS build +# Multi-stage build for Java Spring Boot application +# Stage 1: Build stage with Microsoft OpenJDK 21 +FROM mcr.microsoft.com/openjdk/jdk:21-ubuntu AS builder -WORKDIR /app +# Set working directory for build +WORKDIR /workspace -# Copy gradle files for dependency resolution -COPY java/socialapp/gradle/ ./gradle/ -COPY java/socialapp/gradlew java/socialapp/build.gradle java/socialapp/settings.gradle ./ +# Copy Gradle configuration files +COPY java/socialapp/gradle ./gradle +COPY java/socialapp/gradlew . +COPY java/socialapp/gradlew.bat . +COPY java/socialapp/build.gradle . +COPY java/socialapp/settings.gradle . -# Give executable permissions to gradlew +# Make gradlew executable RUN chmod +x ./gradlew -# Download dependencies to cache this layer +# Download dependencies (for better Docker layer caching) RUN ./gradlew dependencies --no-daemon # Copy source code COPY java/socialapp/src ./src # Build the application -RUN ./gradlew bootJar --no-daemon +RUN ./gradlew build --no-daemon -x test # Stage 2: Extract JRE from JDK -FROM mcr.microsoft.com/openjdk/jdk:21-ubuntu AS jre-build +FROM mcr.microsoft.com/openjdk/jdk:21-ubuntu AS jre-builder -# Create a custom JRE using jlink that only includes modules needed for the application +# Create a custom JRE using jlink RUN jlink \ - --add-modules java.base,java.compiler,java.desktop,java.instrument,java.management,java.naming,java.prefs,java.rmi,java.security.jgss,java.security.sasl,java.sql,jdk.crypto.ec,jdk.unsupported,jdk.zipfs,jdk.management \ + --add-modules java.base,java.desktop,java.instrument,java.management,java.naming,java.net.http,java.security.jgss,java.sql,jdk.unsupported \ --strip-debug \ --no-man-pages \ --no-header-files \ --compress=2 \ - --output /jre-minimal + --output /custom-jre -# Stage 3: Create final image +# Stage 3: Runtime stage with custom JRE FROM ubuntu:22.04 -# Set environment variables -ENV JAVA_HOME=/opt/jre-minimal +# Install required packages and clean up +RUN apt-get update && \ + apt-get install -y \ + ca-certificates \ + sqlite3 \ + curl \ + && apt-get clean \ + && rm -rf /var/lib/apt/lists/* + +# Copy custom JRE from jre-builder stage +COPY --from=jre-builder /custom-jre /opt/java/openjdk + +# Set JAVA_HOME and update PATH +ENV JAVA_HOME=/opt/java/openjdk ENV PATH="${JAVA_HOME}/bin:${PATH}" -# Copy the extracted JRE from the jre-build stage -COPY --from=jre-build /jre-minimal $JAVA_HOME +# Create application user for security +RUN groupadd -r appuser && useradd -r -g appuser appuser -# Copy the built application from the build stage +# Set working directory WORKDIR /app -COPY --from=build /app/build/libs/*.jar app.jar -# Create a directory for persistent data -RUN mkdir -p /app/data +# Copy the built JAR from builder stage +COPY --from=builder /workspace/build/libs/*.jar app.jar + +# Create SQLite database file with proper permissions +RUN touch sns_api.db && \ + chown appuser:appuser sns_api.db && \ + chmod 664 sns_api.db -# Expose the application port +# Change ownership of the app directory +RUN chown -R appuser:appuser /app + +# Switch to non-root user +USER appuser + +# Set environment variables for GitHub Codespaces +ENV CODESPACE_NAME="${CODESPACE_NAME}" +ENV GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN="${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}" + +# Expose port 8080 EXPOSE 8080 -# Set the entrypoint command to run the application -ENTRYPOINT ["java", "-jar", "/app/app.jar"] \ No newline at end of file +# Health check +HEALTHCHECK --interval=30s --timeout=3s --start-period=60s --retries=3 \ + CMD curl -f http://localhost:8080/actuator/health || exit 1 + +# Run the application +ENTRYPOINT ["java", "-jar", "app.jar"] diff --git a/complete/compose.yaml b/complete/compose.yaml index 93e8d26..c715390 100644 --- a/complete/compose.yaml +++ b/complete/compose.yaml @@ -1,3 +1,9 @@ +version: '3.8' + +networks: + contoso: + driver: bridge + services: contoso-backend: build: @@ -9,10 +15,14 @@ services: environment: - CODESPACE_NAME=${CODESPACE_NAME} - GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN=${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN} - volumes: - - ./java/socialapp/sns_api.db:/app/sns_api.db networks: - contoso + healthcheck: + test: ["CMD", "curl", "-f", "http://localhost:8080/actuator/health"] + interval: 30s + timeout: 3s + start_period: 60s + retries: 3 contoso-frontend: build: @@ -21,13 +31,9 @@ services: container_name: contoso-frontend ports: - "3030:8080" - depends_on: - - contoso-backend environment: - - ApiSettings__BaseUrl=http://contoso-backend:8080/api/ + - ApiSettings__BaseUrl=http://contoso-backend:8080/api networks: - contoso - -networks: - contoso: - name: contoso + depends_on: + - contoso-backend diff --git a/complete/dotnet/Contoso.BlazorApp/Components/Pages/Home.razor b/complete/dotnet/Contoso.BlazorApp/Components/Pages/Home.razor index e65b08a..04f4fcb 100644 --- a/complete/dotnet/Contoso.BlazorApp/Components/Pages/Home.razor +++ b/complete/dotnet/Contoso.BlazorApp/Components/Pages/Home.razor @@ -68,9 +68,9 @@ } } - private async Task HandleAuthStateChanged() + private void HandleAuthStateChanged() { - await InvokeAsync(async () => + InvokeAsync(async () => { if (!AuthService.AuthState.IsLoading && !AuthService.AuthState.IsAuthenticated) { diff --git a/complete/dotnet/Contoso.BlazorApp/Services/ApiService.cs b/complete/dotnet/Contoso.BlazorApp/Services/ApiService.cs index 00e6d09..10c315f 100644 --- a/complete/dotnet/Contoso.BlazorApp/Services/ApiService.cs +++ b/complete/dotnet/Contoso.BlazorApp/Services/ApiService.cs @@ -46,10 +46,12 @@ private string GetApiBaseUrl(string configuredBaseUrl) _logger.LogInformation("Using GitHub Codespaces URL: {CodespacesUrl}", codespacesUrl); return codespacesUrl; } - + // Fall back to configured base URL (localhost) - _logger.LogInformation("Using configured base URL: {ConfiguredUrl}", configuredBaseUrl); - return configuredBaseUrl; + // Ensure the URL ends with a forward slash for proper relative path resolution + var normalizedUrl = configuredBaseUrl.TrimEnd('/') + "/"; + _logger.LogInformation("Using configured base URL: {ConfiguredUrl}", normalizedUrl); + return normalizedUrl; } private void SetAuthHeaders() diff --git a/complete/java/socialapp/README.md b/complete/java/README.md similarity index 100% rename from complete/java/socialapp/README.md rename to complete/java/README.md diff --git a/complete/javascript/package-lock.json b/complete/javascript/package-lock.json index 7504da7..00d7784 100644 --- a/complete/javascript/package-lock.json +++ b/complete/javascript/package-lock.json @@ -3052,14 +3052,15 @@ } }, "node_modules/form-data": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz", - "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", "license": "MIT", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", "mime-types": "^2.1.12" }, "engines": { diff --git a/docs/.vscode/mcp.json b/docs/.vscode/mcp.json index f3a9b0e..03dcf99 100644 --- a/docs/.vscode/mcp.json +++ b/docs/.vscode/mcp.json @@ -8,6 +8,15 @@ } ], "servers": { + "awesome-copilot": { + "command": "docker", + "args": [ + "run", + "-i", + "--rm", + "ghcr.io/microsoft/mcp-dotnet-samples/awesome-copilot:latest" + ] + }, "context7": { "command": "npx", "args": [ diff --git a/docs/.vscode/settings.json b/docs/.vscode/settings.json new file mode 100644 index 0000000..51a564d --- /dev/null +++ b/docs/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "chat.tools.autoApprove": true, + "chat.agent.maxRequests": 100 +} \ No newline at end of file diff --git a/docs/00-setup.md b/docs/00-setup.md index d297658..21bb9a8 100644 --- a/docs/00-setup.md +++ b/docs/00-setup.md @@ -18,16 +18,15 @@ Refer to the [README](../README.md) doc for preparation. - [Start Visual Studio Code](#start-visual-studio-code) - [Set-up MCP Servers](#set-up-mcp-servers) - [Check GitHub Copilot Agent Mode](#check-github-copilot-agent-mode) +- [Configure Beast Mode](#configure-beast-mode) - [Prepare Custom Instructions](#prepare-custom-instructions) - [Analyze Product Requirements Document (PRD) and Design API](#analyze-product-requirements-document-prd-and-design-api) ## Use GitHub Codespaces -1. Take a look at the image below, and follow the steps in the order of clicking ![the "code" button image](https://img.shields.io/badge/%3C%3E_Code-green) 👉 ![the "codespaces" button image](https://img.shields.io/badge/Codespaces-white) 👉 ![the "create codespace on main" button image](https://img.shields.io/badge/Create_codespace_on_main-green) and create a new GitHub Codespace instance. It might take 5-10 mins depending on the network status. +1. Click this link 👉 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) - ![Starting with GitHub Codespaces](./images/setup-01.png) - -2. Once the GitHub Codespace instance is ready, open a terminal and run the following command to check out everything you need has been properly installed or not. +1. Once the GitHub Codespace instance is ready, open a terminal and run the following command to check out everything you need has been properly installed or not. ```bash # Python @@ -51,7 +50,7 @@ Refer to the [README](../README.md) doc for preparation. dotnet --list-sdks ``` -3. Check out your repository status. +1. Check out your repository status. ```bash git remote -v @@ -66,7 +65,7 @@ Refer to the [README](../README.md) doc for preparation. If you see something different from above, delete the GitHub Codespace instance and recreate it. -4. Move down to the [Set-up MCP Servers](#set-up-mcp-servers) section. +1. Move down to the [Set-up MCP Servers](#set-up-mcp-servers) section. **👇👇👇 Instead, if you'd like to use VS Code on your local machine, follow the instruction below. The section below doesn't apply to those who use GitHub Codespaces. 👇👇👇** @@ -258,6 +257,7 @@ Refer to the [README](../README.md) doc for preparation. ### Set-up MCP Servers +1. Make sure Docker Desktop is up and running if you use VS Code on your local machine. 1. Set the environment variable of `$REPOSITORY_ROOT`. ```bash @@ -286,6 +286,7 @@ Refer to the [README](../README.md) doc for preparation. 1. Open Command Palette by typing F1 or `Ctrl`+`Shift`+`P` on Windows or `Cmd`+`Shift`+`P` on Mac OS, and search `MCP: List Servers`. 1. Choose `context7` then click `Start Server`. +1. Choose `awesome-copilot` then click `Start Server`. ## Check GitHub Copilot Agent Mode @@ -300,6 +301,40 @@ Refer to the [README](../README.md) doc for preparation. 1. Select model to either `GPT-4.1` or `Claude Sonnet 4`. +## Configure Beast Mode + +1. Enter the `/mcp.awesome-copilot.get_search_prompt`, followed by entering keywords like "beast mode" + + It should show list of beast chatmodes. Enter a prompt similar to `4.1 Beast Chat Mode`. Then it will save it under the `.github/chatmodes` directory. + +1. Choose the `4.1-Beast` mode instead of the `Agent` mode. It will automatically change LLM to `GPT 4.1`. + +1. Set the environment variable of `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copy workspace settings. + + ```bash + # bash/zsh + cp $REPOSITORY_ROOT/docs/.vscode/settings.json \ + $REPOSITORY_ROOT/.vscode/settings.json + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json ` + -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force + ``` + ## Prepare Custom Instructions 1. Set the environment variable of `$REPOSITORY_ROOT`. diff --git a/docs/05-containerization.md b/docs/05-containerization.md index a2125a3..83076a2 100644 --- a/docs/05-containerization.md +++ b/docs/05-containerization.md @@ -70,14 +70,16 @@ Refer to the [README](../README.md) doc for preparation. ```text I'd like to build a container image of a Java app. Follow the instructions below. - - The Java app is located at `java`. - - Your working directory is the repository root. - Identify all the steps first, which you're going to do. + - The Java app is located at `java/socialapp`. + - Your working directory is the repository root. - Create a Dockerfile, `Dockerfile.java`. - Use Microsoft OpenJDK 21. - Use multi-stage build approach. - Extract JRE from JDK. - Use the target port number of `8080` for the container image. + - Add both environment variables, `CODESPACE_NAME` and `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` from the host to the container image. + - Create an SQLite database file, `sns_api.db`, in the container image. DO NOT Copy the file from the host. ``` 1. Click the ![the keep button image](https://img.shields.io/badge/keep-blue) button of GitHub Copilot to take the changes. @@ -101,6 +103,7 @@ Refer to the [README](../README.md) doc for preparation. Use the container image just built, run a container and verify if the app is running properly. - Use the host port of `8080`. + - Both `CODESPACE_NAME` and `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` values should be the ones from GitHub Codespaces. ``` ### Containerize .NET Application @@ -111,13 +114,14 @@ Refer to the [README](../README.md) doc for preparation. ```text I'd like to build a container image of a .NET app. Follow the instructions below. + - Identify all the steps first, which you're going to do. - The .NET app is located at `dotnet`. - Your working directory is the repository root. - - Identify all the steps first, which you're going to do. - Create a Dockerfile, `Dockerfile.dotnet`. - Use .NET 9. - Use multi-stage build approach. - Use the target port number of `8080` for the container image. + - Add the environment variable, `ApiSettings__BaseUrl` to the container. It should point to the Java app, `http://localhost:8080/api`. ``` 1. Click the ![the keep button image](https://img.shields.io/badge/keep-blue) button of GitHub Copilot to take the changes. @@ -141,12 +145,13 @@ Refer to the [README](../README.md) doc for preparation. Use the container image just built, run a container and verify if the app is running properly. - Use the host port of `3030`. + - Pass the environment variable `ApiSettings__BaseUrl` the value of `http://localhost:8080/api`. ``` 1. Make sure that both frontend and backend apps are NOT communicating with each other because they don't know each other yet. Run the prompt like below. ```text - Regardless or not, remove both containers currently running. + Remove both Java and .NET containers and their respective container images. ``` ### Orchestrate Containers @@ -157,6 +162,7 @@ Refer to the [README](../README.md) doc for preparation. ```text I'd like to create a Docker Compose file. Follow the instructions below. + - Identify all the steps first, which you're going to do. - Your working directory is the repository root. - Use `Dockerfile.java` as a backend app. - Use `Dockerfile.dotnet` as a frontend app. @@ -164,7 +170,8 @@ Refer to the [README](../README.md) doc for preparation. - Use `contoso` as the network name. - Use `contoso-backend` as the container name of the Java app. Its target port is 8080, and host port is 8080. - Use `contoso-frontend` as the container name of the .NET app. Its target port is 8080, and host port is 3030. - - Mount the volume for the database that the Java app uses, `java/socialapp/sns_api.db`. + - Add both environment variables, `CODESPACE_NAME` and `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` from the host to the Java container. + - Add the environment variable, `ApiSettings__BaseUrl` to the .NET container. It should point to the Java app's `/api`. ``` 1. Click the ![the keep button image](https://img.shields.io/badge/keep-blue) button of GitHub Copilot to take the changes. @@ -172,7 +179,7 @@ Refer to the [README](../README.md) doc for preparation. 1. Once the `compose.yaml` file is created, run it and verify if both apps are running properly. ```text - Now, run the Docker compose file and verify if the apps are running properly. + Run the Docker compose file and verify if all the apps are running properly. ``` 1. Open a web browser and navigate to `http://localhost:3030`, and verify if the apps are up and running properly. diff --git a/images/banner.png b/images/banner.png new file mode 100644 index 0000000..007441b Binary files /dev/null and b/images/banner.png differ diff --git a/images/ghcp.jpg b/images/ghcp.jpg deleted file mode 100644 index fd0845b..0000000 Binary files a/images/ghcp.jpg and /dev/null differ diff --git a/localisation/es-es/README.md b/localisation/es-es/README.md new file mode 100644 index 0000000..10c9542 --- /dev/null +++ b/localisation/es-es/README.md @@ -0,0 +1,114 @@ +# Taller de Programación Vibe con GitHub Copilot + +![Taller de Programación Vibe con GitHub Copilot](../../images/banner.png) + +¡Vamos a programar con vibe usando [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) y sus características más nuevas y mejores en varios lenguajes de programación como Python, JavaScript, Java y .NET, así como hacer que las aplicaciones sean nativas de la nube mediante contenedorización! ¿Estás listo para sumergirte? + +## Contexto + +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 su primer MVP, quieren construir rápidamente el sitio web. El departamento de TI de Contoso actualmente tiene dos desarrolladores que usan Python y JavaScript respectivamente. La fecha de lanzamiento se acerca rápidamente, así que ambos desarrolladores deben entregar la aplicación rápidamente. + +Pero aquí está la situación... + +## Objetivos del Taller + +- Construir aplicaciones usando el Modo Agente de GitHub Copilot. +- Agregar instrucciones personalizadas a GitHub Copilot para tener más control sobre GitHub Copilot. +- Agregar varios servidores MCP a GitHub Copilot para construir las aplicaciones de manera más precisa. + +## Taller en Tu Idioma + +Este material del taller está actualmente disponible en los siguientes idiomas: + +[English](../../README.md) | [Español](./README.md) | [Français](../fr-fr/) | [日本語](../ja-jp/) | [한국어](../ko-kr/) | [Português](../pt-br/) | [中文(简体)](../zh-cn/) + +## Prerrequisitos + +Durante este taller, se recomienda altamente [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) porque no hay necesidad de preparación, excepto un navegador web. + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +Sin embargo, si realmente necesitas usar tu máquina, asegúrate de haber instalado todo lo identificado a continuación. + +### Común + +- [Visual Studio Code](https://code.visualstudio.com/) +- Extensión VS Code [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +- Extensión VS Code [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) +- 💥 Para usuarios de Windows 👉 [PowerShell 7](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) +- [git CLI](https://git-scm.com/downloads) +- [GitHub CLI](https://cli.github.com/) +- [Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) + +### Python + +- [pyenv](https://github.com/pyenv/pyenv) o [pyenv para Windows](https://github.com/pyenv-win/pyenv-win) +- Python 3.12+ a través de pyenv +- Gestor de paquetes `uv` (recomendado) o `pip` +- Extensión VS Code [Python](https://marketplace.visualstudio.com/items/?itemName=ms-python.python) +- Extensión VS Code [Pylance](https://marketplace.visualstudio.com/items/?itemName=ms-python.vscode-pylance) +- Extensión VS Code [Python Debugger](https://marketplace.visualstudio.com/items/?itemName=ms-python.debugpy) +- Extensión VS Code [autopep8](https://marketplace.visualstudio.com/items/?itemName=ms-python.autopep8) + +### JavaScript + +- [nvm](https://github.com/nvm-sh/nvm) o [nvm para Windows](https://github.com/coreybutler/nvm-windows) +- La última LTS de [Node.js](https://nodejs.org/) a través de nvm + +### Java + +- [SDKMAN](https://sdkman.io/) +- [OpenJDK 21](https://learn.microsoft.com/java/openjdk/download) a través de SDKMAN +- [Apache Maven](https://maven.apache.org/download.cgi) a través de SDKMAN +- [Gradle Build Tool](https://docs.gradle.org/current/userguide/installation.html) a través de SDKMAN +- [Spring Boot Initializr](https://docs.spring.io/spring-boot/cli/installation.html) a través de SDKMAN +- Extensión VS Code [Extension Pack for Java](https://marketplace.visualstudio.com/items/?itemName=vscjava.vscode-java-pack) +- Extensión VS Code [Spring Boot Extension Pack](https://marketplace.visualstudio.com/items/?itemName=vmware.vscode-boot-dev-pack) + +### .NET + +- [.NET SDK 9](https://dotnet.microsoft.com/download/dotnet/9.0) +- Extensión [VS Code C# Dev Kit](https://marketplace.visualstudio.com/items/?itemName=ms-dotnettools.csdevkit) + +## Documento de Requisitos del Producto + +Primero y principal, el lugar para comenzar es este [PRD (Documento de Requisitos del Producto)](./product-requirements.md). Este documento te dará una mejor comprensión de qué hacer y cómo hacerlo. + +## Instrucciones del Taller + +Este es un taller autodidacta siguiendo los enlaces a continuación: + +| Paso | Enlace | +|------------------------------------|----------------------------------------------------------| +| 00: Entorno de Desarrollo | [00-setup.md](./docs/00-setup.md) | +| 01: Backend Python | [01-python.md](./docs/01-python.md) | +| 02: Frontend JavaScript | [02-javascript.md](./docs/02-javascript.md) | +| 03: Migración Java desde Python | [03-java.md](./docs/03-java.md) | +| 04: Migración .NET desde JavaScript| [04-dotnet.md](./docs/04-dotnet.md) | +| 05: Contenedorización | [05-containerization.md](./docs/05-containerization.md) | + +## Ejemplos Completos + +Revisa el ejemplo completo de cada aplicación. También están programadas con vibe usando GitHub Copilot, por lo tanto, podrían no ser perfectas, y no tienes que seguir la aplicación. + +| Lenguaje | Aplicación | Ubicación | +|---------------------|-------------|---------------------------------------| +| Backend Python | FastAPI | [python](./complete/python/) | +| Frontend JavaScript | React | [javascript](./complete/javascript/) | +| Backend Java | Spring Boot | [java](./complete/java/) | +| Frontend .NET | Blazor | [dotnet](./complete/dotnet/) | +| Contenedorización | Container | [containerization](./complete/) | + +## Leer Más... + +- [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) +- [GitHub Copilot](https://docs.github.com/en/copilot/about-github-copilot/what-is-github-copilot) +- [GitHub Copilot: Modo Agente](https://code.visualstudio.com/blogs/2025/04/07/agentMode) +- [GitHub Copilot: MCP](https://code.visualstudio.com/blogs/2025/05/12/agent-mode-meets-mcp) +- [GitHub Copilot: Instrucciones Personalizadas](https://code.visualstudio.com/docs/copilot/copilot-customization) +- [GitHub Copilot: Cambiar Modelos de IA](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat?tool=vscode) +- [Servidores MCP Curados](https://github.com/modelcontextprotocol/servers) + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/complete/README.md b/localisation/es-es/complete/README.md new file mode 100644 index 0000000..29982d1 --- /dev/null +++ b/localisation/es-es/complete/README.md @@ -0,0 +1,60 @@ +# Muestras de Aplicaciones Completas + +Aquí está la lista de muestras de aplicaciones completas. Debido a que también son vibe-coded, puedes verificar cómo están construidas. + +| Aplicación | Ubicación | +|-------------|-----------------------------| +| FastAPI | [python](./python/) | +| React | [javascript](./javascript/) | +| Spring Boot | [java](./java/) | +| Blazor | [dotnet](./dotnet/) | + +## Muestra de Contenedorización + +### Prerrequisitos + +Consulta el documento [README](../README.md) para la preparación. + +### Comenzando + +1. Asegúrate de que Docker esté ejecutándose. + + ```bash + docker info + ``` + +1. Obtén la raíz del repositorio. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Navega al directorio `complete`. + + ```bash + cd $REPOSITORY_ROOT/complete + ``` + +1. Ejecuta las aplicaciones contenedorizadas. + + ```bash + docker compose up --build -d + ``` + +1. Abre un navegador web y navega a `http://localhost:3030`. +1. Verifica si la aplicación web está ejecutándose correctamente. +1. Limpia ejecutando el siguiente comando para remover las aplicaciones contenedorizadas. + + ```bash + docker compose down --rmi all + ``` + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/complete/dotnet/README.md b/localisation/es-es/complete/dotnet/README.md new file mode 100644 index 0000000..965a4e0 --- /dev/null +++ b/localisation/es-es/complete/dotnet/README.md @@ -0,0 +1,39 @@ +# Muestra de Aplicación .NET + +## Prerrequisitos + +Consulta el documento [README](../../README.md) para la preparación. + +## Comenzando + +### Ejecutar Backend Spring Boot + +Usa [Muestra de Aplicación Java](../java/). + +> **NOTA**: Si usas GitHub Codespaces, asegúrate de que el puerto de la aplicación Java, `8080`, esté configurado como **público**. + +### Ejecutar Frontend Blazor + +1. Obtén la raíz del repositorio. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Ejecuta la aplicación. + + ```bash + dotnet watch run --project $REPOSITORY_ROOT/complete/dotnet/Contoso.BlazorApp + ``` + +1. Verifica si la aplicación web está ejecutándose correctamente. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/complete/java/README.md b/localisation/es-es/complete/java/README.md new file mode 100644 index 0000000..8ea52c5 --- /dev/null +++ b/localisation/es-es/complete/java/README.md @@ -0,0 +1,371 @@ +# Muestra de Aplicación Java + +Una aplicación Spring Boot REST API integral para una plataforma de redes sociales con operaciones CRUD completas para publicaciones, comentarios y me gusta. + +## Descripción General del Proyecto + +Esta es una aplicación Spring Boot lista para producción construida con las siguientes especificaciones: + +- **Nombre del Paquete**: `com.contoso.socialapp` +- **Artifact ID**: `socialapp` +- **Group ID**: `com.contoso` +- **Tipo de Paquete**: `jar` +- **Versión de Java**: OpenJDK 21 +- **Herramienta de Construcción**: Gradle +- **Base de Datos**: SQLite (embebida) +- **Puerto**: 8080 + +### Dependencias del Proyecto + +- **Spring Boot 3.2.5**: Framework central +- **Spring Web**: Endpoints de API RESTful +- **Spring Data JPA**: Operaciones de base de datos +- **Spring Boot Actuator**: Monitoreo de aplicación +- **Spring Boot Validation**: Validación de entrada +- **SQLite**: Base de datos embebida +- **Hibernate Community Dialects**: Soporte para SQLite +- **Springdoc OpenAPI**: Documentación de API (Swagger UI) +- **Lombok**: Reducción de código repetitivo + +### Estructura del Proyecto + +```text +src/ +├── main/ +│ ├── java/ +│ │ └── com/ +│ │ └── contoso/ +│ │ └── socialapp/ +│ │ ├── SocialAppApplication.java # Clase principal de aplicación +│ │ ├── config/ +│ │ │ ├── WebConfig.java # Configuración CORS +│ │ │ └── OpenApiConfig.java # Configuración Swagger/OpenAPI +│ │ ├── controller/ +│ │ │ ├── HealthController.java # Endpoints de salud +│ │ │ ├── PostController.java # Gestión de publicaciones +│ │ │ └── CommentController.java # Gestión de comentarios y me gusta +│ │ ├── model/ +│ │ │ ├── Post.java # Entidad Post +│ │ │ ├── Comment.java # Entidad Comment +│ │ │ ├── Like.java # Entidad Like +│ │ │ └── dto/ # Objetos de Transferencia de Datos +│ │ ├── repository/ +│ │ │ ├── PostRepository.java # Acceso a datos de Post +│ │ │ ├── CommentRepository.java # Acceso a datos de Comment +│ │ │ └── LikeRepository.java # Acceso a datos de Like +│ │ └── service/ +│ │ ├── PostService.java # Lógica de negocio de Post +│ │ └── CommentService.java # Lógica de negocio de Comment +│ └── resources/ +│ ├── application.properties # Configuración de aplicación +│ └── data.sql # Datos de muestra (opcional) +└── test/ + └── java/ + └── com/ + └── contoso/ + └── socialapp/ + └── SocialAppApplicationTests.java # Pruebas de integración +``` + +## Características + +- ✅ API RESTful completa para operaciones de redes sociales +- ✅ Gestión de publicaciones (Crear, Leer, Actualizar, Eliminar) +- ✅ Sistema de comentarios con operaciones CRUD completas +- ✅ Funcionalidad de Me gusta/No me gusta +- ✅ Base de datos SQLite con JPA/Hibernate +- ✅ Documentación OpenAPI/Swagger +- ✅ CORS habilitado para localhost y GitHub Codespaces +- ✅ Configuración dinámica de URL del servidor +- ✅ Endpoints de verificación de salud +- ✅ Integración con Spring Boot Actuator +- ✅ Manejo integral de errores +- ✅ Validación de entrada con Bean Validation + +## Inicio Rápido + +### Prerrequisitos + +Consulta el documento [README](../../README.md) para la preparación. + +### 1. Configuración del Entorno + +Primero, establece la variable de entorno de `$REPOSITORY_ROOT`. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +Luego, navega al directorio java. + +```bash +cd $REPOSITORY_ROOT/complete/java +``` + +### 2. Construir la Aplicación + +```bash +# Hacer gradlew ejecutable (si es necesario) +chmod +x ./gradlew + +# Construir el proyecto +./gradlew build +``` + +### 3. Ejecutar la Aplicación + +```bash +# Iniciar la aplicación usando Gradle +./gradlew bootRun + +# Alternativa: Ejecutar el archivo JAR directamente +# java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### 4. Verificar que la Aplicación está Ejecutándose + +```bash +# Verificar endpoint de salud +curl http://localhost:8080/api/health + +# Respuesta esperada: {"status":"healthy"} +``` + +### 5. Acceder a la Documentación de API + +Abre tu navegador y navega a: + +- **Swagger UI**: [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) +- **OpenAPI JSON**: [http://localhost:8080/v3/api-docs](http://localhost:8080/v3/api-docs) + +## Endpoints de API + +### Salud y Bienvenida + +- `GET /api/health` - Endpoint personalizado de verificación de salud +- `GET /api/welcome` - Endpoint de mensaje de bienvenida + +### Gestión de Publicaciones + +- `GET /api/posts` - Obtener todas las publicaciones +- `GET /api/posts/{id}` - Obtener publicación específica por ID +- `POST /api/posts` - Crear una nueva publicación +- `PATCH /api/posts/{id}` - Actualizar una publicación existente +- `DELETE /api/posts/{id}` - Eliminar una publicación + +### Gestión de Comentarios + +- `GET /api/posts/{postId}/comments` - Obtener todos los comentarios para una publicación +- `GET /api/posts/{postId}/comments/{commentId}` - Obtener comentario específico +- `POST /api/posts/{postId}/comments` - Agregar un comentario a una publicación +- `PATCH /api/posts/{postId}/comments/{commentId}` - Actualizar un comentario +- `DELETE /api/posts/{postId}/comments/{commentId}` - Eliminar un comentario + +### Gestión de Me Gusta + +- `POST /api/posts/{postId}/like` - Dar me gusta a una publicación +- `DELETE /api/posts/{postId}/like` - Quitar me gusta a una publicación + +### Spring Boot Actuator + +- `GET /actuator/health` - Indicador de salud de Spring Boot +- `GET /actuator/info` - Información de la aplicación + +## Probando la API + +### Usando Ejemplos de cURL + +#### Crear una Publicación + +```bash +curl -X POST http://localhost:8080/api/posts \ + -H "Content-Type: application/json" \ + -d '{ + "title": "Mi Primera Publicación", + "content": "¡Este es el contenido de mi primera publicación!", + "authorName": "Juan Pérez" + }' +``` + +#### Obtener Todas las Publicaciones + +```bash +curl http://localhost:8080/api/posts +``` + +#### Agregar un Comentario + +```bash +curl -X POST http://localhost:8080/api/posts/1/comments \ + -H "Content-Type: application/json" \ + -d '{ + "content": "¡Excelente publicación!", + "authorName": "Ana García" + }' +``` + +#### Dar Me Gusta a una Publicación + +```bash +curl -X POST http://localhost:8080/api/posts/1/like \ + -H "Content-Type: application/json" \ + -d '{ + "userName": "juan_perez" + }' +``` + +### Usando Swagger UI + +1. Abre [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) +2. Explora los endpoints disponibles +3. Haz clic en "Try it out" en cualquier endpoint +4. Completa los parámetros y haz clic en "Execute" + +## Desarrollo + +### Ejecutando Pruebas + +```bash +# Ejecutar todas las pruebas +./gradlew test + +# Ejecutar con reporte de cobertura +./gradlew test jacocoTestReport + +# Ejecutar clase de prueba específica +./gradlew test --tests "SocialAppApplicationTests" +``` + +### Base de Datos + +La aplicación usa SQLite como base de datos embebida: + +- **Archivo de base de datos**: `sns_api.db` (creado automáticamente) +- **Ubicación**: Directorio raíz del proyecto +- **Esquema**: Auto-generado por Hibernate +- **Datos de muestra**: Cargados desde `data.sql` (si está presente) + +Para resetear la base de datos, simplemente elimina el archivo `sns_api.db` y reinicia la aplicación. + +## Configuración + +### Propiedades de la Aplicación + +Configuraciones clave en `application.properties`: + +```properties +# Configuraciones de Aplicación +spring.application.name=socialapp +server.port=8080 + +# Configuración de Base de Datos +spring.datasource.url=jdbc:sqlite:sns_api.db +spring.jpa.hibernate.ddl-auto=update + +# Configuración OpenAPI/Swagger +springdoc.swagger-ui.path=/swagger-ui.html +springdoc.swagger-ui.operationsSorter=method +``` + +### Configuración CORS + +La aplicación soporta tanto localhost como GitHub Codespaces: + +- **Localhost**: `http://localhost:8080` +- **GitHub Codespaces**: Auto-detectado y configurado dinámicamente + +### Detección de Entorno + +La aplicación detecta automáticamente el entorno de ejecución: + +- **Desarrollo Local**: Usa `http://localhost:8080` +- **GitHub Codespaces**: Usa `https://{codespace-name}-8080.{domain}` + +## Despliegue + +### Construyendo para Producción + +```bash +# Crear JAR de producción +./gradlew clean build + +# Ubicación del JAR +ls -la build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### Ejecutando en Producción + +```bash +# Ejecutar con perfil de producción +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod + +# O con puerto personalizado +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --server.port=8081 +``` + +## Solución de Problemas + +### Problemas Comunes + +#### Puerto Ya en Uso + +```bash +# Encontrar proceso usando puerto 8080 +lsof -i :8080 + +# Matar el proceso (reemplazar PID) +kill -9 + +# O usar un puerto diferente +./gradlew bootRun --args='--server.port=8081' +``` + +#### Fallas de Construcción + +```bash +# Limpiar y reconstruir +./gradlew clean build + +# Actualizar Gradle wrapper +./gradlew wrapper --gradle-version=8.5 +``` + +#### Problemas de Base de Datos + +```bash +# Resetear base de datos +rm sns_api.db +./gradlew bootRun +``` + +### Logs y Monitoreo + +- **Logs de aplicación**: Salida de consola al ejecutar `./gradlew bootRun` +- **Verificación de salud**: `GET /actuator/health` +- **Información de aplicación**: `GET /actuator/info` + +## Consideraciones de Seguridad + +⚠️ **Configuración de Desarrollo**: La configuración actual está optimizada para desarrollo con: + +- CORS habilitado para todos los orígenes +- Base de datos SQLite (no adecuada para escala de producción) +- Sin autenticación/autorización + +Para despliegue en producción, considera: + +- Restringir CORS a dominios específicos +- Usar PostgreSQL/MySQL en lugar de SQLite +- Implementar Spring Security para autenticación +- Agregar limitación de velocidad y sanitización de entrada +- Usar cifrado HTTPS/TLS + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/complete/javascript/README.md b/localisation/es-es/complete/javascript/README.md new file mode 100644 index 0000000..ef0422e --- /dev/null +++ b/localisation/es-es/complete/javascript/README.md @@ -0,0 +1,47 @@ +# Muestra de Aplicación JavaScript + +## Prerrequisitos + +Consulta el documento [README](../../README.md) para la preparación. + +## Comenzando + +### Ejecutar Backend FastAPI + +Usa [Muestra de Aplicación Python](../python/). + +> **NOTA**: Si usas GitHub Codespaces, asegúrate de que el puerto de la aplicación Python, `8000`, esté configurado como **público**. + +### Ejecutar Frontend React + +1. Obtén la raíz del repositorio. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Instala los paquetes npm. + + ```bash + cd $REPOSITORY_ROOT/complete/javascript + npm install + ``` + +1. Ejecuta la aplicación. + + ```bash + npm run dev + ``` + +1. Abre un navegador web y navega a `http://localhost:3000`. +1. Verifica si la aplicación web está ejecutándose correctamente. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/complete/python/README.md b/localisation/es-es/complete/python/README.md new file mode 100644 index 0000000..bc78b68 --- /dev/null +++ b/localisation/es-es/complete/python/README.md @@ -0,0 +1,296 @@ +# Muestra de Aplicación Python + +Una implementación completa de backend FastAPI para un Servicio Simple de Redes Sociales (SNS) que permite a los usuarios crear, recuperar, actualizar y eliminar publicaciones; agregar comentarios; y dar/quitar me gusta a las publicaciones. + +## 🏗️ Descripción General de la Arquitectura + +- **Framework**: FastAPI con Python 3.12+ +- **Base de Datos**: SQLite (`sns_api.db`) +- **Documentación de API**: Swagger UI + especificación OpenAPI 3.1 +- **CORS**: Habilitado para solicitudes de origen cruzado +- **Validación de Datos**: Modelos Pydantic con validación integral + +## 📁 Estructura del Proyecto + +```text +python/ +├── main.py # Punto de entrada de la aplicación FastAPI +├── models.py # Modelos de datos y esquemas Pydantic +├── database.py # Operaciones de base de datos SQLite +├── openapi.yaml # Especificación OpenAPI 3.0.1 +├── sns_api.db # Archivo de base de datos SQLite (auto-creado) +├── README.md # Esta documentación +└── .venv/ # Entorno virtual (creado durante la configuración) +``` + +## 🚀 Inicio Rápido + +### Prerrequisitos + +Consulta el documento [README](../../README.md) para la preparación. + +### 1. Configuración del Entorno + +Primero, establece la variable de entorno de `$REPOSITORY_ROOT`. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +Luego, navega al directorio python y crea un entorno virtual: + +```bash +cd $REPOSITORY_ROOT/complete/python +``` + +Crear entorno virtual + +```bash +# Usando uv (recomendado) +uv venv .venv +``` + +```bash +# Usando Python estándar (alternativo) +python -m venv .venv +``` + +### 2. Activar Entorno Virtual + +```bash +# En Linux/macOS +source .venv/bin/activate +``` + +```bash +# En Windows Command Prompt +.venv\Scripts\activate +``` + +### 3. Instalar Dependencias + +```bash +# Usando uv (recomendado) +uv pip install fastapi uvicorn python-multipart pyyaml +``` + +```bash +# Usando pip (alternativo) +pip install fastapi uvicorn python-multipart pyyaml +``` + +### 4. Copiar Especificación OpenAPI + +Copia la especificación OpenAPI del directorio padre. + +```bash +# En Linux/macOS +cp ../openapi.yaml . +``` + +```powershell +# En Windows Command Prompt +xcopy ..\openapi.yaml . +``` + +### 5. Ejecutar la Aplicación + +Iniciar el servidor de desarrollo + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload +``` + +La aplicación estará disponible en: + +- **URL Base de API**: `http://localhost:8000/api/` +- **Swagger UI**: `http://localhost:8000/docs` +- **Especificación OpenAPI**: `http://localhost:8000/openapi.json` + +## 📊 Esquema de Base de Datos + +La aplicación usa SQLite con las siguientes tablas: + +### Tabla Posts + +- `id` (TEXT, PRIMARY KEY) - UUID +- `username` (TEXT, NOT NULL) - Nombre de usuario del autor +- `content` (TEXT, NOT NULL) - Contenido de la publicación +- `created_at` (TEXT, NOT NULL) - Marca de tiempo ISO +- `updated_at` (TEXT, NOT NULL) - Marca de tiempo ISO + +### Tabla Comments + +- `id` (TEXT, PRIMARY KEY) - UUID +- `post_id` (TEXT, NOT NULL) - Clave foránea a posts +- `username` (TEXT, NOT NULL) - Nombre de usuario del autor +- `content` (TEXT, NOT NULL) - Contenido del comentario +- `created_at` (TEXT, NOT NULL) - Marca de tiempo ISO +- `updated_at` (TEXT, NOT NULL) - Marca de tiempo ISO + +### Tabla Likes + +- `post_id` (TEXT, NOT NULL) - Clave foránea a posts +- `username` (TEXT, NOT NULL) - Usuario que dio me gusta +- `liked_at` (TEXT, NOT NULL) - Marca de tiempo ISO +- Clave primaria: `(post_id, username)` + +## 🔌 Endpoints de API + +### Posts + +- `GET /api/posts` - Listar todas las publicaciones +- `POST /api/posts` - Crear una nueva publicación +- `GET /api/posts/{postId}` - Obtener una publicación específica +- `PATCH /api/posts/{postId}` - Actualizar una publicación +- `DELETE /api/posts/{postId}` - Eliminar una publicación + +### Comments + +- `GET /api/posts/{postId}/comments` - Listar comentarios para una publicación +- `POST /api/posts/{postId}/comments` - Crear un comentario +- `GET /api/posts/{postId}/comments/{commentId}` - Obtener un comentario específico +- `PATCH /api/posts/{postId}/comments/{commentId}` - Actualizar un comentario +- `DELETE /api/posts/{postId}/comments/{commentId}` - Eliminar un comentario + +### Likes + +- `POST /api/posts/{postId}/likes` - Dar me gusta a una publicación +- `DELETE /api/posts/{postId}/likes?username={username}` - Quitar me gusta a una publicación + +## 🧪 Probando la API + +### Usando cURL + +#### Crear una Publicación + +```bash +curl -X POST "http://localhost:8000/api/posts" \ + -H "Content-Type: application/json" \ + -d '{"username": "john_doe", "content": "¡Hola Mundo! Esta es mi primera publicación."}' +``` + +#### Obtener Todas las Publicaciones + +```bash +curl -X GET "http://localhost:8000/api/posts" +``` + +#### Agregar un Comentario + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/comments" \ + -H "Content-Type: application/json" \ + -d '{"username": "jane_smith", "content": "¡Excelente publicación!"}' +``` + +#### Dar Me Gusta a una Publicación + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/likes" \ + -H "Content-Type: application/json" \ + -d '{"username": "alice_johnson"}' +``` + +### Usando Swagger UI + +1. Navega a `http://localhost:8000/docs` +2. Explora y prueba todos los endpoints de API de forma interactiva +3. Ve esquemas de solicitud/respuesta y ejemplos + +## 📝 Modelos de Datos + +### Modelos de Solicitud + +- `NewPostRequest`: `{username: str, content: str}` +- `UpdatePostRequest`: `{username: str, content: str}` +- `NewCommentRequest`: `{username: str, content: str}` +- `UpdateCommentRequest`: `{username: str, content: str}` +- `LikeRequest`: `{username: str}` + +### Modelos de Respuesta + +- `Post`: Objeto de publicación completo con metadatos y conteos +- `Comment`: Objeto de comentario completo con metadatos +- `LikeResponse`: Confirmación de me gusta con marca de tiempo + +## ⚙️ Configuración + +### Variables de Entorno + +La aplicación usa configuraciones por defecto pero puede ser personalizada: + +- **Base de Datos**: Archivo SQLite `sns_api.db` (auto-creado) +- **Host**: `0.0.0.0` (todas las interfaces) +- **Puerto**: `8000` +- **CORS**: Habilitado para todos los orígenes + +### Consideraciones de Producción + +Para despliegue en producción, considera: + +1. **Base de Datos**: Cambia a PostgreSQL o MySQL +2. **Variables de Entorno**: Usa para configuración sensible +3. **Seguridad**: Agrega autenticación y autorización +4. **CORS**: Restringe a dominios específicos +5. **Logging**: Implementa logging estructurado +6. **Monitoreo**: Agrega verificaciones de salud y métricas + +## 🛠️ Desarrollo + +### Organización de Archivos + +- **`main.py`**: Configuración de aplicación FastAPI, middleware y definiciones de rutas +- **`models.py`**: Modelos Pydantic para validación y serialización de datos +- **`database.py`**: Operaciones SQLite, gestión de conexiones y funciones CRUD + +### Estilo de Código + +El proyecto sigue: + +- Directrices de estilo Python PEP 8 +- Mejores prácticas de FastAPI +- Patrones de programación funcional +- Anotaciones de tipo en todo el código +- Manejo integral de errores + +### Agregando Nuevas Características + +1. Define modelos Pydantic en `models.py` +2. Agrega operaciones de base de datos en `database.py` +3. Crea endpoints de API en `main.py` +4. Actualiza la especificación OpenAPI si es necesario + +## 🐛 Solución de Problemas + +### Problemas Comunes + +1. **Puerto ya en uso**: Cambia el puerto con `--port 8001` +2. **Problemas de entorno virtual**: Recrea con `rm -rf .venv && uv venv .venv` +3. **Base de datos bloqueada**: Detén todas las instancias ejecutándose de la aplicación +4. **Errores de importación**: Asegúrate de que el entorno virtual esté activado + +### Modo Debug + +Ejecuta con logging adicional: + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload --log-level debug +``` + +## 📚 Recursos Adicionales + +- [Documentación de FastAPI](https://fastapi.tiangolo.com/) +- [Documentación de Pydantic](https://docs.pydantic.dev/) +- [Documentación de SQLite](https://sqlite.org/docs.html) +- [Especificación OpenAPI](https://swagger.io/specification/) + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/00-setup.md b/localisation/es-es/docs/00-setup.md new file mode 100644 index 0000000..7ea55a3 --- /dev/null +++ b/localisation/es-es/docs/00-setup.md @@ -0,0 +1,391 @@ +# 00: Entorno de Desarrollo + +En este paso, estás configurando el entorno de desarrollo para el taller. + +## Prerrequisitos + +Consulta el documento [README](../README.md) para la preparación. + +## Comenzando + +- [Usar GitHub Codespaces](#usar-github-codespaces) +- [Usar Visual Studio Code](#usar-visual-studio-code) + - [Instalar PowerShell 👉 Para Usuarios de Windows](#instalar-powershell--para-usuarios-de-windows) + - [Instalar git CLI](#instalar-git-cli) + - [Instalar GitHub CLI](#instalar-github-cli) + - [Instalar Docker Desktop](#instalar-docker-desktop) + - [Instalar Visual Studio Code](#instalar-visual-studio-code) + - [Iniciar Visual Studio Code](#iniciar-visual-studio-code) + - [Configurar Servidores MCP](#configurar-servidores-mcp) +- [Verificar Modo Agente de GitHub Copilot](#verificar-modo-agente-de-github-copilot) +- [Configurar Modo Bestia](#configurar-modo-bestia) +- [Preparar Instrucciones Personalizadas](#preparar-instrucciones-personalizadas) +- [Analizar Documento de Requisitos del Producto (PRD) y Diseñar API](#analizar-documento-de-requisitos-del-producto-prd-y-diseñar-api) + +## Usar GitHub Codespaces + +1. Haz clic en este enlace 👉 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +1. Una vez que la instancia de GitHub Codespace esté lista, abre una terminal y ejecuta el siguiente comando para verificar si todo lo que necesitas ha sido instalado correctamente o no. + + ```bash + # Python + python --version + ``` + + ```bash + # Node.js + node --version + npm --version + + ``` + + ```bash + # JDK + java --version + ``` + + ```bash + # .NET SDK + dotnet --list-sdks + ``` + +1. Verifica el estado de tu repositorio. + + ```bash + git remote -v + ``` + + Deberías poder ver lo siguiente. + + ```bash + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + + Si ves algo diferente a lo anterior, elimina la instancia de GitHub Codespace y créala nuevamente. + +1. Ve a la sección [Configurar Servidores MCP](#configurar-servidores-mcp). + +**👇👇👇 En su lugar, si prefieres usar VS Code en tu máquina local, sigue las instrucciones a continuación. La sección de abajo no aplica para aquellos que usan GitHub Codespaces. 👇👇👇** + +## Usar Visual Studio Code + +### Instalar PowerShell 👉 Para Usuarios de Windows + +1. Verifica si ya has instalado PowerShell o no. + + ```bash + # Bash/Zsh + which pwsh + ``` + + ```bash + # PowerShell + Get-Command pwsh + ``` + + Si no ves la ruta del comando `pwsh`, significa que aún no has instalado PowerShell. Visita la [página de instalación de PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) y sigue las instrucciones. + +1. Verifica la versión de tu PowerShell. + + ```bash + pwsh --version + ``` + + Se recomienda `7.5.0` o superior. Si la tuya es menor que esa, visita la [página de instalación de PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) y sigue las instrucciones. + +### Instalar git CLI + +1. Verifica si ya has instalado git CLI o no. + + ```bash + # Bash/Zsh + which git + ``` + + ```bash + # PowerShell + Get-Command git + ``` + + Si no ves la ruta del comando `git`, significa que aún no has instalado git CLI. Visita la [página de instalación de git CLI](https://git-scm.com/downloads) y sigue las instrucciones. + +1. Verifica la versión de tu git CLI. + + ```bash + git --version + ``` + + Se recomienda `2.39.0` o superior. Si la tuya es menor que esa, visita la [página de instalación de git CLI](https://git-scm.com/downloads) y sigue las instrucciones. + +### Instalar GitHub CLI + +1. Verifica si ya has instalado GitHub CLI o no. + + ```bash + # Bash/Zsh + which gh + ``` + + ```bash + # PowerShell + Get-Command gh + ``` + + Si no ves la ruta del comando `gh`, significa que aún no has instalado GitHub CLI. Visita la [página de instalación de GitHub CLI](https://cli.github.com/) y sigue las instrucciones. + +1. Verifica la versión de tu GitHub CLI. + + ```bash + gh --version + ``` + + Se recomienda `2.65.0` o superior. Si la tuya es menor que esa, visita la [página de instalación de GitHub CLI](https://cli.github.com/) y sigue las instrucciones. + +1. Verifica si has iniciado sesión en GitHub o no. + + ```bash + gh auth status + ``` + + Si aún no has iniciado sesión, ejecuta `gh auth login` e inicia sesión. + +### Instalar Docker Desktop + +1. Verifica si ya has instalado Docker Desktop o no. + + ```bash + # Bash/Zsh + which docker + ``` + + ```bash + # PowerShell + Get-Command docker + ``` + + Si no ves la ruta del comando `docker`, significa que aún no has instalado Docker Desktop. Visita la [página de instalación de Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) y sigue las instrucciones. + +1. Verifica la versión de tu Docker CLI. + + ```bash + docker --version + ``` + + Se recomienda `28.0.4` o superior. Si la tuya es menor que esa, visita la [página de instalación de Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) y sigue las instrucciones. + +### Instalar Visual Studio Code + +1. Verifica si ya has instalado VS Code o no. + + ```bash + # Bash/Zsh + which code + ``` + + ```bash + # PowerShell + Get-Command code + ``` + + Si no ves la ruta del comando `code`, significa que aún no has instalado VS Code. Visita la [página de instalación de Visual Studio Code](https://code.visualstudio.com/) y sigue las instrucciones. + +1. Verifica la versión de tu VS Code. + + ```bash + code --version + ``` + + Se recomienda `1.99.0` o superior. Si la tuya es menor que esa, visita la [página de instalación de Visual Studio Code](https://code.visualstudio.com/) y sigue las instrucciones. + + > **NOTA**: Puede que no puedas ejecutar el comando `code`. En este caso, sigue [este documento](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) para la configuración. + +### Iniciar Visual Studio Code + +1. Crea un directorio de trabajo. +1. Ejecuta el comando para hacer fork de este repositorio y clonarlo a tu máquina local. + + ```bash + gh repo fork microsoft/github-copilot-vibe-coding-workshop --clone + ``` + +1. Navega al directorio clonado. + + ```bash + cd github-copilot-vibe-coding-workshop + ``` + +1. Ejecuta VS Code desde la terminal. + + ```bash + code . + ``` + +1. Abre una nueva terminal dentro de VS Code y ejecuta el siguiente comando para verificar el estado de tu repositorio. + + ```bash + git remote -v + ``` + + Deberías poder ver lo siguiente. Si ves `microsoft` en `origin`, deberías clonarlo nuevamente desde tu repositorio forkeado. + + ```bash + origin https://github.com//github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com//github-copilot-vibe-coding-workshop.git (push) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + +1. Verifica si ambas extensiones han sido instaladas o no – [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) y [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). + + ```bash + # Bash/Zsh + code --list-extensions | grep github.copilot + ``` + + ```powershell + # PowerShell + code --list-extensions | Select-String "github.copilot" + ``` + + Si no ves nada, significa que aún no has instalado esas extensiones. Ejecuta el siguiente comando para instalar las extensiones. + + ```bash + code --install-extension "github.copilot" --force && code --install-extension "github.copilot-chat" --force + ``` + +### Configurar Servidores MCP + +1. Asegúrate de que Docker Desktop esté funcionando si usas VS Code en tu máquina local. +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia la configuración de los servidores MCP. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/.vscode/. \ + $REPOSITORY_ROOT/.vscode/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/* ` + -Destination $REPOSITORY_ROOT/.vscode/ -Recurse -Force + ``` + +1. 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`. +1. Elige `context7` y luego haz clic en `Start Server`. +1. Elige `awesome-copilot` y luego haz clic en `Start Server`. + +## 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](../../../docs/images/setup-02.png) + +1. Si se te pide iniciar sesión o registrarte, hazlo. Es gratuito. +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot. + + ![Modo Agente de GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecciona el modelo ya sea `GPT-4.1` o `Claude Sonnet 4`. + +## Configurar Modo Bestia + +1. Ingresa `/mcp.awesome-copilot.get_search_prompt`, seguido de palabras clave como "beast mode" + + Debería mostrar la lista de modos de chat bestia. Ingresa un prompt similar a `4.1 Beast Chat Mode`. Luego se guardará bajo el directorio `.github/chatmodes`. + +1. Elige el modo `4.1-Beast` en lugar del modo `Agent`. Automáticamente cambiará el LLM a `GPT 4.1`. + +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia la configuración del espacio de trabajo. + + ```bash + # bash/zsh + cp $REPOSITORY_ROOT/docs/.vscode/settings.json \ + $REPOSITORY_ROOT/.vscode/settings.json + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json ` + -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force + ``` + +## Preparar Instrucciones Personalizadas + +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia las instrucciones personalizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/setup/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/setup/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +## Analizar Documento de Requisitos del Producto (PRD) y Diseñar API + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Agrega [`product-requirements.md`](../product-requirements.md) a GitHub Copilot. +1. Ingresa el prompt como el siguiente para que el Agente de GitHub Copilot genere un documento OpenAPI para ti. Este documento OpenAPI será la base de toda tu aplicación. + + ```text + Aquí tienes el PRD para ti. Lee cuidadosamente todo el PRD y haz lo siguiente para mí. + + - Identifica primero todos los pasos que vas a hacer. + - Genera un documento OpenAPI en formato YAML. + - El documento OpenAPI debe capturar todos los endpoints de la API, parámetros y cargas útiles de solicitud/respuesta. + - Asume que el servidor de la API es `http://localhost:8080` y la URL base es `/api`. + - Guárdalo en el archivo `openapi.yaml` en la raíz del repositorio. + ``` + +1. Verifica que `openapi.yaml` se genere en la raíz del repositorio. +1. Haz clic en el botón `[keep]` de GitHub Copilot para tomar el archivo `openapi.yaml`. + +--- + +Bien. Has completado el paso "Entorno de Desarrollo". Vamos al [PASO 01: Desarrollo Backend Python](./01-python.md). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/01-python.md b/localisation/es-es/docs/01-python.md new file mode 100644 index 0000000..7c7d7ab --- /dev/null +++ b/localisation/es-es/docs/01-python.md @@ -0,0 +1,123 @@ +# 01: Desarrollo Backend Python + +## 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 Python, vas a construir una aplicación backend Python usando FastAPI. Por ahora, estás usando la característica en memoria de SQLite. + +## Prerrequisitos + +Consulta el documento [README](../README.md) para la preparación. + +## Comenzando + +- [Verificar Modo Agente de GitHub Copilot](#verificar-modo-agente-de-github-copilot) +- [Preparar Instrucciones Personalizadas](#preparar-instrucciones-personalizadas) +- [Preparar Entorno Virtual](#preparar-entorno-virtual) +- [Construir Aplicación Backend FastAPI](#construir-aplicación-backend-fastapi) + +### 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](../../../docs/images/setup-02.png) + +1. Si se te pide iniciar sesión o registrarte, hazlo. Es gratuito. +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot. + + ![Modo Agente de GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecciona el modelo ya sea `GPT-4.1` o `Claude Sonnet 4`. +1. Asegúrate de haber configurado [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instrucciones Personalizadas + +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia las instrucciones personalizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/python/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/python/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Preparar Entorno Virtual + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Usa un prompt como el siguiente para preparar el entorno virtual para el desarrollo de aplicaciones Python. + + ```text + Me gustaría escribir una aplicación Python. Pero antes de eso, necesito configurar un entorno virtual. Sigue las instrucciones a continuación. + + - Usa context7. + - Tu directorio de trabajo es `python`. + - Identifica primero todos los pasos que vas a hacer. + - Usa `.venv` para el entorno virtual. + - Usa `uv` como el gestor de paquetes de Python. + ``` + +### Construir Aplicación Backend FastAPI + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Agrega [`product-requirements.md`](../product-requirements.md) y [`openapi.yaml`](../openapi.yaml) a GitHub Copilot. +1. Usa un prompt como el siguiente para construir una aplicación backend FastAPI. + + ```text + Me gustaría construir una aplicación FastAPI como una API backend. Lee cuidadosamente todo el PRD y `openapi.yaml`. Luego, sigue las instrucciones a continuación. + + - Usa context7. + - Tu directorio de trabajo es `python`. + - Identifica primero todos los pasos que vas a hacer. + - Usa FastAPI como el framework de la aplicación API. + - Usa SQLite como la base de datos. + - Usa `sns_api.db` como el nombre de la base de datos SQLite. + - La base de datos siempre debe ser inicializada cuando se inicie la aplicación. + - Usa `openapi.yaml` que describe todos los endpoints y esquema de datos. + - Usa el número de puerto `8000`. + - Asegúrate de permitir CORS desde cualquier lugar. + - El punto de entrada es `main.py`. + - La aplicación API debe renderizar la página Swagger UI a través de un endpoint predeterminado. + - La aplicación API debe renderizar exactamente el mismo documento OpenAPI a través de un endpoint predeterminado. + - NO agregues nada no definido en `openapi.yaml`. + - NO modifiques nada definido en `openapi.yaml`. + ``` + +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. +1. Una vez que la aplicación esté construida, verifica si está escrita correctamente o no. + + ```text + Ejecuta la aplicación FastAPI y verifica si la aplicación se está ejecutando correctamente. También verifica que el endpoint OpenAPI renderice exactamente el mismo contenido que `openapi.yaml`. + + Si la ejecución de la aplicación falla, analiza los problemas y corrígelos. + ``` + +1. Abre un navegador web y navega a `http://localhost:8000`. +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +--- + +Bien. Has completado el paso "Python". Vamos al [PASO 02: Desarrollo Frontend JavaScript](./02-javascript.md). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/02-javascript.md b/localisation/es-es/docs/02-javascript.md new file mode 100644 index 0000000..17268e6 --- /dev/null +++ b/localisation/es-es/docs/02-javascript.md @@ -0,0 +1,169 @@ +# 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](../README.md) para la preparación. + +## Comenzando + +- [Verificar Modo Agente de GitHub Copilot](#verificar-modo-agente-de-github-copilot) +- [Preparar Instrucciones Personalizadas](#preparar-instrucciones-personalizadas) +- [Preparar Proyecto de Aplicación](#preparar-proyecto-de-aplicación) +- [Preparar Servidor MCP Figma](#preparar-servidor-mcp-figma) +- [Generar Componentes UI desde Figma](#generar-componentes-ui-desde-figma) +- [Ejecutar Aplicación Backend FastAPI](#ejecutar-aplicación-backend-fastapi) +- [Construir Aplicación Frontend React](#construir-aplicación-frontend-react) +- [Verificar Aplicación Frontend React](#verificar-aplicación-frontend-react) + +### 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](../../../docs/images/setup-02.png) + +1. Si se te pide iniciar sesión o registrarte, hazlo. Es gratuito. +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot. + + ![Modo Agente de GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecciona el modelo ya sea `GPT-4.1` o `Claude Sonnet 4`. +1. Asegúrate de haber configurado [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instrucciones Personalizadas + +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia las instrucciones personalizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/javascript/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # 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`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Usa un prompt como el siguiente para crear un proyecto de aplicación web React. + + ```text + 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á. + ``` + +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +### Preparar Servidor MCP Figma + +1. Asegúrate de haber configurado [Servidores MCP](./00-setup.md#configurar-servidores-mcp). +1. Obtén el token de acceso personal (PAT) de [Figma](https://www.figma.com/). +1. 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`. +1. Elige `Framelink Figma MCP` y luego haz clic en `Start Server`. +1. 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`. +1. Asegúrate de estar ejecutando el servidor MCP Figma. +1. Copia la [plantilla de diseño Figma](https://www.figma.com/community/file/1495954632647006209) a tu cuenta. + + ![Página de plantilla de diseño Figma](../../../docs/images/javascript-01.png) + +1. 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. + + ```text + Ejecuta la API backend FastAPI, que se encuentra en el directorio `python`. + ``` + + > **NOTA**: Puedes usar la aplicación de muestra [`complete/python`](../complete/python/) en su lugar. + +1. 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`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Asegúrate de tener todos los enlaces de sección Figma de 5 obtenidos de la [sección anterior](#generar-componentes-ui-desde-figma). +1. Agrega [`product-requirements.md`](../product-requirements.md) y [`openapi.yaml`](../openapi.yaml) a GitHub Copilot. +1. Usa un prompt como el siguiente para construir la aplicación basada en los requisitos y el documento OpenAPI. + + ```text + 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. + ``` + +1. Repite cuatro veces más para los otros cuatro enlaces de diseño Figma. +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +### Verificar Aplicación Frontend React + +1. Asegúrate de que la aplicación backend FastAPI esté funcionando. + + ```text + Ejecuta la API backend FastAPI, que se encuentra en el directorio `python`. + ``` + +1. Verifica si está construida correctamente o no. + + ```text + 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. + ``` + +1. Abre un navegador web y navega a `http://localhost:3000`. +1. Verifica si tanto las aplicaciones frontend como backend están funcionando correctamente. +1. 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](./03-java.md). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/03-java.md b/localisation/es-es/docs/03-java.md new file mode 100644 index 0000000..6e7252e --- /dev/null +++ b/localisation/es-es/docs/03-java.md @@ -0,0 +1,164 @@ +# 03: Migración Java desde Python + +## 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. + +Debido a que un desarrollador Python dejó la empresa, las partes interesadas pidieron migrar la aplicación API backend Python existente a Java, usando Spring Boot. + +Ahora, como desarrollador Java, debes migrar la aplicación FastAPI existente a Spring Boot. Tienes muy poco conocimiento de Python y FastAPI, por cierto. + +## Prerrequisitos + +Consulta el documento [README](../README.md) para la preparación. + +## Comenzando + +- [Verificar Modo Agente de GitHub Copilot](#verificar-modo-agente-de-github-copilot) +- [Preparar Instrucciones Personalizadas](#preparar-instrucciones-personalizadas) +- [Preparar Proyecto Spring Boot](#preparar-proyecto-spring-boot) +- [Migrar Aplicación API FastAPI](#migrar-aplicación-api-fastapi) +- [Verificar Aplicación Backend Spring Boot](#verificar-aplicación-backend-spring-boot) + +### 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](../../../docs/images/setup-02.png) + +1. Si se te pide iniciar sesión o registrarte, hazlo. Es gratuito. +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot. + + ![Modo Agente de GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecciona el modelo ya sea `GPT-4.1` o `Claude Sonnet 4`. +1. Asegúrate de haber configurado [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instrucciones Personalizadas + +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia las instrucciones personalizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/java/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/java/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Preparar Proyecto Spring Boot + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Instala Spring Boot CLI. + + ```bash + sdk install springboot + ``` + +1. Usa un prompt como el siguiente para crear un andamio para un proyecto de aplicación Spring Boot. + + ```text + Me gustaría crear un andamio para una aplicación Spring Boot. Sigue las instrucciones a continuación. + + - Usa context7. + - Tu directorio de trabajo es `java`. + - Identifica primero todos los pasos que vas a hacer. + - Usa Spring Boot CLI para crear el proyecto de aplicación Spring Boot. + - Usa Gradle como el gestor de paquetes Java. + - Usa el nombre de paquete `com.contoso.socialapp`. + - Usa el ID de artefacto `socialapp`. + - Usa el ID de grupo `com.contoso`. + - Usa el tipo de paquete `jar`. + - Usa la versión OpenJDK `21`. + - Agrega dependencias - `Spring Web`, `Spring Boot Actuator` y `Lombok`. + - Usa el número de puerto `8080`. + - Asegúrate de permitir CORS desde cualquier lugar. + - Construye la aplicación Spring Boot y verifica si la aplicación se construye correctamente. + - Ejecuta esta aplicación Spring Boot y verifica si la aplicación se ejecuta correctamente. + - Si la construcción o ejecución de la aplicación falla, analiza los problemas y corrígelos. + ``` + +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +### Migrar Aplicación API FastAPI + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Agrega [`product-requirements.md`](../product-requirements.md) y [`openapi.yaml`](../openapi.yaml) a GitHub Copilot. +1. Usa un prompt como el siguiente para migrar FastAPI a Spring Boot. + + ```text + Ahora, estamos migrando la aplicación API basada en FastAPI existente a una aplicación API Spring Boot. Sigue las instrucciones a continuación para la migración. + + - Usa context7. + - La aplicación FastAPI existente se encuentra en `python`. + - Tu directorio de trabajo es `java/socialapp`. + - Identifica primero todos los pasos que vas a hacer. + - Analiza la estructura de la aplicación de la aplicación FastAPI existente. + - Migra todos los endpoints. Ambos endpoints correspondientes deben ser exactamente iguales entre sí. + - Usa SQLite como la base de datos. + - Usa `sns_api.db` como el nombre de la base de datos SQLite. + - La base de datos siempre debe ser inicializada cuando se inicie la aplicación. + - Usa `openapi.yaml` que describe todos los endpoints y esquema de datos. + - La aplicación API debe renderizar la página Swagger UI a través de un endpoint predeterminado. + - La aplicación API debe renderizar exactamente el mismo documento OpenAPI a través de un endpoint predeterminado. + - NO agregues nada no definido en `openapi.yaml`. + - NO modifiques nada definido en `openapi.yaml`. + - Si es necesario, agrega más paquetes para OpenAPI y Swagger UI. + ``` + +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. +1. Una vez que la migración haya terminado, usa un prompt como el siguiente para verificar el resultado de la migración. + + ```text + Me gustaría construir la aplicación Spring Boot. Sigue las instrucciones. + + - Usa context7. + - Construye la aplicación Spring Boot y verifica si la aplicación se construye correctamente. + - Si la construcción de la aplicación falla, analiza los problemas y corrígelos. + ``` + + > **NOTA**: + > + > - Hasta que la construcción tenga éxito, itera este paso. + > - Si la construcción sigue fallando, revisa los mensajes de error y pregúntales al Agente GitHub Copilot para resolverlos. + +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +### Verificar Aplicación Backend Spring Boot + +1. Una vez que la aplicación esté construida, verifica si está escrita correctamente o no. + + ```text + Ejecuta la aplicación Spring Boot y verifica si la aplicación se está ejecutando correctamente verificando todos los endpoints. También verifica que el endpoint OpenAPI renderice exactamente el mismo contenido que `openapi.yaml`. + + Si la ejecución de la aplicación falla, analiza los problemas y corrígelos. Usa context7. + ``` + +1. Abre un navegador web y navega a `http://localhost:8080`. +1. Haz clic en el botón ![imagen del botón "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +--- + +Bien. Has completado el paso "Java". Vamos al [PASO 04: Migración .NET desde JavaScript](./04-dotnet.md). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/04-dotnet.md b/localisation/es-es/docs/04-dotnet.md new file mode 100644 index 0000000..abca1f3 --- /dev/null +++ b/localisation/es-es/docs/04-dotnet.md @@ -0,0 +1,177 @@ +# 04: Migración .NET desde 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. + +Ya tienen una aplicación frontend escrita en JavaScript, más específicamente en React. Sin embargo, de repente, enviaron nuevos requisitos para redesarrollar la aplicación frontend usando .NET, especialmente en Blazor. + +Ahora, como desarrollador .NET, debes migrar la aplicación React existente a Blazor. Tienes muy poco conocimiento de JavaScript y React, por cierto. + +## Prerrequisitos + +Consulta el documento [README](../README.md) para la preparación. + +## Comenzando + +- [Verificar Modo Agente de GitHub Copilot](#verificar-modo-agente-de-github-copilot) +- [Preparar Instrucciones Personalizadas](#preparar-instrucciones-personalizadas) +- [Preparar Proyecto de Aplicación Web Blazor](#preparar-proyecto-de-aplicación-web-blazor) +- [Ejecutar Aplicación Backend Spring Boot](#ejecutar-aplicación-backend-spring-boot) +- [Migrar Aplicación Web React](#migrar-aplicación-web-react) +- [Verificar Aplicación Frontend Blazor](#verificar-aplicación-frontend-blazor) + +### 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](../../../docs/images/setup-02.png) + +1. Si se te pide iniciar sesión o registrarte, hazlo. Es gratuito. +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot. + + ![Modo Agente de GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecciona el modelo ya sea `GPT-4.1` o `Claude Sonnet 4`. +1. Asegúrate de haber configurado [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instrucciones Personalizadas + +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia las instrucciones personalizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/dotnet/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/dotnet/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Preparar Proyecto de Aplicación Web Blazor + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Usa un prompt como el siguiente para crear un andamio para un proyecto de aplicación web Blazor. + + ```text + Me gustaría crear un andamio para una aplicación web Blazor. Sigue las instrucciones a continuación. + + - Usa context7. + - Tu directorio de trabajo es `dotnet`. + - Identifica primero todos los pasos que vas a hacer. + - Muéstrame la lista de proyectos .NET relacionados con Blazor y pídeme que elija. + - Genera un proyecto Blazor. + - Usa el nombre de proyecto `Contoso.BlazorApp`. + - Actualiza `launchSettings.json` para cambiar el número de puerto a `3031` para HTTP, `43031` para HTTPS. + - Crea una solución, `ContosoWebApp`, y agrega el proyecto Blazor a esta solución. + - Construye la aplicación Blazor y verifica si la aplicación se construye correctamente. + - Ejecuta esta aplicación Blazor y verifica si la aplicación se ejecuta correctamente. + - Si la construcción o ejecución de la aplicación falla, analiza los problemas y corrígelos. + ``` + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +### Ejecutar Aplicación Backend Spring Boot + +1. Asegúrate de que la aplicación backend Spring Boot esté funcionando. + + ```text + Ejecuta la API backend Spring Boot, que se encuentra en el directorio `java`. + ``` + + > **NOTA**: Puedes usar la aplicación de muestra [`complete/java`](../complete/java/) en su lugar. + +1. Si usas GitHub Codespaces, asegúrate de que el número de puerto `8080` esté configurado como `público` en lugar de `privado`. De lo contrario, obtendrás el error `401` al acceder desde la aplicación frontend. + +### Migrar Aplicación Web React + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Asegúrate de que el servidor MCP `context7` esté funcionando. +1. Usa un prompt como el siguiente para migrar React a Blazor. + + ```text + Ahora, estamos migrando la aplicación web basada en React existente a una aplicación web Blazor. Sigue las instrucciones a continuación para la migración. + + - Usa context7. + - La aplicación React existente se encuentra en `javascript`. + - Tu directorio de trabajo es `dotnet/Contoso.BlazorApp`. + - Identifica primero todos los pasos que vas a hacer. + - Hay una aplicación API backend ejecutándose en `http://localhost:8080`. + - Analiza la estructura de la aplicación de la aplicación React existente. + - Migra todos los componentes React a los de Blazor. Ambos componentes correspondientes deben ser lo más exactamente similares entre sí como sea posible. + - Migra todos los elementos CSS necesarios de React a Blazor. + - Al migrar elementos JavaScript de React a Blazor, maximiza el uso de las características nativas de Blazor tanto como sea posible. Si tienes que usar JavaScript, usa las características JSInterop de Blazor. + - Si es necesario, agrega paquetes NuGet que sean compatibles con .NET 9. + ``` + +1. Una vez que la migración haya terminado, usa un prompt como el siguiente para verificar el resultado de la migración. + + ```text + Me gustaría construir la aplicación Blazor. Sigue las instrucciones. + + - Usa context7. + - Construye la aplicación Blazor y verifica si la aplicación se construye correctamente. + - Si la construcción de la aplicación falla, analiza los problemas y corrígelos. + ``` + + > **NOTA**: + > + > - Hasta que la construcción tenga éxito, itera este paso. + > - Si la construcción sigue fallando, revisa los mensajes de error y pregúntales al Agente GitHub Copilot para resolverlos. + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. +1. Una vez que la construcción tenga éxito, usa un prompt como el siguiente para verificar el resultado de la migración. + + ```text + Me gustaría ejecutar la aplicación Blazor. Sigue las instrucciones. + + - Usa context7. + - Ejecuta esta aplicación Blazor y verifica si la aplicación se ejecuta correctamente. + - Ignora el error de conexión de la aplicación API backend en esta etapa. + - Si la ejecución de la aplicación falla, analiza los problemas y corrígelos. + ``` + +### Verificar Aplicación Frontend Blazor + +1. Asegúrate de que la aplicación backend Spring Boot esté funcionando. + + ```text + Ejecuta la API backend Spring Boot, que se encuentra en el directorio `java`. + ``` + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. +1. Verifica si está construida correctamente o no. + + ```text + Ejecuta la aplicación Blazor 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. + ``` + +1. Abre un navegador web y navega a `http://localhost:3031`. +1. Verifica si tanto las aplicaciones frontend como backend están funcionando correctamente. +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +--- + +Bien. Has completado el paso ".NET". Vamos al [PASO 05: Contenedorización](./05-containerization.md). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/05-containerization.md b/localisation/es-es/docs/05-containerization.md new file mode 100644 index 0000000..c4ddcb2 --- /dev/null +++ b/localisation/es-es/docs/05-containerization.md @@ -0,0 +1,193 @@ +# 05: Contenedorización + +## 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. + +Ahora tienen tanto una aplicación backend basada en Java como una aplicación frontend basada en .NET. Quieren contenedorizarlas para que puedan ser desplegadas en cualquier plataforma. + +Ahora, como ingeniero DevOps, debes contenedorizar ambas aplicaciones. + +## Prerrequisitos + +Consulta el documento [README](../README.md) para la preparación. + +## Comenzando + +- [Verificar Modo Agente de GitHub Copilot](#verificar-modo-agente-de-github-copilot) +- [Preparar Instrucciones Personalizadas](#preparar-instrucciones-personalizadas) +- [Contenedorizar Aplicación Java](#contenedorizar-aplicación-java) +- [Contenedorizar Aplicación .NET](#contenedorizar-aplicación-net) +- [Orquestar Contenedores](#orquestar-contenedores) + +### 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](../../../docs/images/setup-02.png) + +1. Si se te pide iniciar sesión o registrarte, hazlo. Es gratuito. +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot. + + ![Modo Agente de GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecciona el modelo ya sea `GPT-4.1` o `Claude Sonnet 4`. +1. Asegúrate de haber configurado [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instrucciones Personalizadas + +1. Establece la variable de entorno de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copia las instrucciones personalizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/containerization/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/containerization/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Contenedorizar Aplicación Java + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Usa un prompt como el siguiente para construir una imagen de contenedor para la aplicación Java. + + ```text + Me gustaría construir una imagen de contenedor de una aplicación Java. Sigue las instrucciones a continuación. + + - Identifica primero todos los pasos que vas a hacer. + - La aplicación Java se encuentra en `java/socialapp`. + - Tu directorio de trabajo es la raíz del repositorio. + - Crea un Dockerfile, `Dockerfile.java`. + - Usa Microsoft OpenJDK 21. + - Usa el enfoque de construcción multi-etapa. + - Extrae JRE del JDK. + - Usa el número de puerto objetivo `8080` para la imagen del contenedor. + - Agrega ambas variables de entorno, `CODESPACE_NAME` y `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` del host a la imagen del contenedor. + - Crea un archivo de base de datos SQLite, `sns_api.db`, en la imagen del contenedor. NO copies el archivo del host. + ``` + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +1. Una vez que `Dockerfile.java` esté creado, construye la imagen del contenedor con el siguiente prompt. + + ```text + Usa `Dockerfile.java` y construye una imagen de contenedor. + + - Usa `contoso-backend` como el nombre de la imagen del contenedor. + - Usa `latest` como la etiqueta de la imagen del contenedor. + - Verifica si la imagen del contenedor se construye correctamente. + - Si la construcción falla, analiza los problemas y corrígelos. + ``` + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +1. Una vez que la construcción tenga éxito, ejecuta la imagen del contenedor con el siguiente prompt. + + ```text + Usa la imagen del contenedor recién construida, ejecuta un contenedor y verifica si la aplicación se está ejecutando correctamente. + + - Usa el puerto del host `8080`. + - Ambos valores `CODESPACE_NAME` y `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` deben ser los de GitHub Codespaces. + ``` + +### Contenedorizar Aplicación .NET + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Usa un prompt como el siguiente para construir una imagen de contenedor para la aplicación .NET. + + ```text + Me gustaría construir una imagen de contenedor de una aplicación .NET. Sigue las instrucciones a continuación. + + - Identifica primero todos los pasos que vas a hacer. + - La aplicación .NET se encuentra en `dotnet`. + - Tu directorio de trabajo es la raíz del repositorio. + - Crea un Dockerfile, `Dockerfile.dotnet`. + - Usa .NET 9. + - Usa el enfoque de construcción multi-etapa. + - Usa el número de puerto objetivo `8080` para la imagen del contenedor. + - Agrega la variable de entorno, `ApiSettings__BaseUrl` al contenedor. Debe apuntar a la aplicación Java, `http://localhost:8080/api`. + ``` + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +1. Una vez que `Dockerfile.dotnet` esté creado, construye la imagen del contenedor con el siguiente prompt. + + ```text + Usa `Dockerfile.dotnet` y construye una imagen de contenedor. + + - Usa `contoso-frontend` como el nombre de la imagen del contenedor. + - Usa `latest` como la etiqueta de la imagen del contenedor. + - Verifica si la imagen del contenedor se construye correctamente. + - Si la construcción falla, analiza los problemas y corrígelos. + ``` + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +1. Una vez que la construcción tenga éxito, ejecuta la imagen del contenedor con el siguiente prompt. + + ```text + Usa la imagen del contenedor recién construida, ejecuta un contenedor y verifica si la aplicación se está ejecutando correctamente. + + - Usa el puerto del host `3030`. + - Pasa la variable de entorno `ApiSettings__BaseUrl` el valor de `http://localhost:8080/api`. + ``` + +1. Asegúrate de que tanto las aplicaciones frontend como backend NO se estén comunicando entre sí porque aún no se conocen. Ejecuta el prompt como el siguiente. + + ```text + Remueve ambos contenedores Java y .NET y sus respectivas imágenes de contenedor. + ``` + +### Orquestar Contenedores + +1. Asegúrate de estar usando el Modo Agente de GitHub Copilot con el modelo `Claude Sonnet 4` o `GPT-4.1`. +1. Usa un prompt como el siguiente para construir un archivo Docker Compose. + + ```text + Me gustaría crear un archivo Docker Compose. Sigue las instrucciones a continuación. + + - Identifica primero todos los pasos que vas a hacer. + - Tu directorio de trabajo es la raíz del repositorio. + - Usa `Dockerfile.java` como aplicación backend. + - Usa `Dockerfile.dotnet` como aplicación frontend. + - Crea `compose.yaml` como el archivo Docker Compose. + - Usa `contoso` como el nombre de la red. + - Usa `contoso-backend` como el nombre del contenedor de la aplicación Java. Su puerto objetivo es 8080, y el puerto del host es 8080. + - Usa `contoso-frontend` como el nombre del contenedor de la aplicación .NET. Su puerto objetivo es 8080, y el puerto del host es 3030. + - Agrega ambas variables de entorno, `CODESPACE_NAME` y `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` del host al contenedor Java. + - Agrega la variable de entorno, `ApiSettings__BaseUrl` al contenedor .NET. Debe apuntar al `/api` de la aplicación Java. + ``` + +1. Haz clic en el botón ![imagen del botón keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot para tomar los cambios. + +1. Una vez que el archivo `compose.yaml` esté creado, ejecútalo y verifica si ambas aplicaciones se están ejecutando correctamente. + + ```text + Ejecuta el archivo Docker compose y verifica si todas las aplicaciones se están ejecutando correctamente. + ``` + +1. Abre un navegador web y navega a `http://localhost:3030`, y verifica si las aplicaciones están funcionando correctamente. + +--- + +¡Felicidades! 🎉 ¡Has completado todas las sesiones del taller exitosamente! + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/README.md b/localisation/es-es/docs/README.md new file mode 100644 index 0000000..72f0348 --- /dev/null +++ b/localisation/es-es/docs/README.md @@ -0,0 +1,16 @@ +# Instrucciones de Aprendizaje Autodidacta + +Aquí están los materiales de instrucción para el aprendizaje autodidacta. ¡Úsalos y construye aplicaciones! + +| Paso | Enlace | +|-------------------------------------|------------------------------------------------------| +| 00: Entorno de Desarrollo | [00-setup.md](./00-setup.md) | +| 01: Desarrollo Backend Python | [01-python.md](./01-python.md) | +| 02: Desarrollo Frontend JavaScript | [02-javascript.md](./02-javascript.md) | +| 03: Migración Java desde Python | [03-java.md](./03-java.md) | +| 04: Migración .NET desde JavaScript | [04-dotnet.md](./04-dotnet.md) | +| 05: Contenedorización | [05-containerization.md](./05-containerization.md) | + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/custom-instructions/containerization/copilot-instructions.md b/localisation/es-es/docs/custom-instructions/containerization/copilot-instructions.md new file mode 100644 index 0000000..3b77972 --- /dev/null +++ b/localisation/es-es/docs/custom-instructions/containerization/copilot-instructions.md @@ -0,0 +1,38 @@ +# Reglas de DevOps + +Eres un ingeniero DevOps senior y un experto en contenedorización, Docker, Dockerfile, Docker Compose y Kubernetes. + +## Directrices Generales + +### Principios Básicos + +- Usa inglés para todo el código, documentación y comentarios. +- Prioriza código modular, reutilizable y escalable. +- Sigue las convenciones de nomenclatura: + - camelCase para variables, funciones y nombres de métodos. + - PascalCase para nombres de clases. + - snake_case para nombres de archivos y estructuras de directorios. + - UPPER_CASE para variables de entorno. +- Evita valores codificados directamente; usa variables de entorno o archivos de configuración. +- Aplica los principios de Infraestructura como Código (IaC) donde sea posible. +- Siempre considera el principio de menor privilegio en acceso y permisos. + +### Principios DevOps + +- Automatiza tareas repetitivas y evita intervenciones manuales. +- Escribe pipelines de CI/CD modulares y reutilizables. +- Usa aplicaciones contenedorizadas con registros seguros. +- Gestiona secretos usando Azure Key Vault u otras soluciones de gestión de secretos. +- Construye sistemas resilientes aplicando estrategias de despliegue blue-green o canary. + +## Escenarios Específicos + +### Docker y Docker Compose + +- Usa construcciones multi-etapa en Dockerfiles para optimizar el tamaño de imagen. +- Asegúrate de que los Dockerfiles sean idempotentes y puedan ser construidos múltiples veces sin efectos secundarios. +- Usa Docker Compose para entornos de desarrollo local y pruebas. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/custom-instructions/dotnet/copilot-instructions.md b/localisation/es-es/docs/custom-instructions/dotnet/copilot-instructions.md new file mode 100644 index 0000000..56b0431 --- /dev/null +++ b/localisation/es-es/docs/custom-instructions/dotnet/copilot-instructions.md @@ -0,0 +1,85 @@ +# Reglas de Desarrollo .NET + +Eres un desarrollador senior de .NET y un experto en C#, ASP.NET Core, Minimal API, Blazor y .NET Aspire. + +## Estilo y Estructura de Código + +- Escribe código C# conciso e idiomático con ejemplos precisos. +- Sigue las convenciones y mejores prácticas de .NET y ASP.NET Core. +- Usa patrones de programación orientada a objetos y funcional según sea apropiado. +- Prefiere LINQ y expresiones lambda para operaciones de colección. +- Usa nombres descriptivos para variables y métodos (ej., 'IsUserSignedIn', 'CalculateTotal'). +- Estructura archivos según las convenciones de .NET (Controllers, Models, Services, etc.). +- Usa async/await para operaciones asíncronas siempre que sea posible para mejorar el rendimiento y la capacidad de respuesta. + +## Convenciones de Nomenclatura + +- Usa PascalCase para nombres de clases, nombres de métodos y miembros públicos. +- Usa camelCase para variables locales y campos privados. +- Usa UPPERCASE para constantes. +- Prefija nombres de interfaz con "I" (ej., 'IUserService'). + +## Uso de C# y .NET + +- Usa características de C# 10+ cuando sea apropiado (ej., tipos record, pattern matching, asignación null-coalescing). +- Aprovecha las características integradas de ASP.NET Core y middleware. +- Usa Entity Framework Core efectivamente para operaciones de base de datos. + +## Sintaxis y Formato + +- Sigue las Convenciones de Codificación de C# (https://docs.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions) +- Usa la sintaxis expresiva de C# (ej., operadores null-conditional, interpolación de cadenas) +- Usa 'var' para tipado implícito cuando el tipo es obvio. + +## Manejo de Errores y Validación + +- Usa excepciones para casos excepcionales, no para flujo de control. +- Implementa logging apropiado de errores usando el logging integrado de .NET o un logger de terceros. +- Usa Data Annotations o Fluent Validation para validación de modelos. +- Implementa middleware de manejo global de excepciones. +- Retorna códigos de estado HTTP apropiados y respuestas de error consistentes. + +## Diseño de API + +- Sigue los principios de diseño de API RESTful. +- Usa enrutamiento por atributos en controladores. +- Implementa versionado para tu API. +- Usa filtros de acción para preocupaciones transversales. + +## Optimización de Rendimiento + +- Usa programación asíncrona con async/await para operaciones vinculadas a I/O. +- Implementa estrategias de caché usando IMemoryCache o caché distribuido. +- Usa consultas LINQ eficientes y evita problemas de consulta N+1. +- Implementa paginación para conjuntos de datos grandes. + +## Convenciones Clave + +- Usa Inyección de Dependencias para bajo acoplamiento y testabilidad. +- Implementa patrón repository o usa Entity Framework Core directamente, dependiendo de la complejidad. +- Usa AutoMapper para mapeo objeto-a-objeto si es necesario. +- Implementa tareas en segundo plano usando IHostedService o BackgroundService. + +## Pruebas + +- Escribe pruebas unitarias usando xUnit, NUnit, o MSTest. +- Usa Moq o NSubstitute para simular dependencias. +- Implementa pruebas de integración para endpoints de API. + +## Seguridad + +- Usa middleware de Autenticación y Autorización. +- Implementa autenticación JWT para autenticación de API sin estado. +- Usa HTTPS y aplica SSL. +- Implementa políticas CORS apropiadas. + +## Documentación de API + +- Usa el paquete OpenAPI integrado para documentación de API. +- Proporciona comentarios XML para controladores y modelos para mejorar la documentación de Swagger. + +Sigue la documentación oficial de Microsoft y las guías de ASP.NET Core para mejores prácticas en enrutamiento, controladores, modelos y otros componentes de API. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/custom-instructions/java/copilot-instructions.md b/localisation/es-es/docs/custom-instructions/java/copilot-instructions.md new file mode 100644 index 0000000..5af8e4d --- /dev/null +++ b/localisation/es-es/docs/custom-instructions/java/copilot-instructions.md @@ -0,0 +1,96 @@ +# Reglas de Desarrollo Java + +Eres un desarrollador senior de Java y un experto en programación Java, Spring Boot, Spring Boot CLI, Spring Framework, Maven, Gradle, JUnit, y tecnologías relacionadas con Java. + +## Estilo y Estructura de Código + +- Escribe código Java limpio, eficiente y bien documentado con ejemplos precisos de Spring Boot. +- Usa mejores prácticas y convenciones de Spring Boot a lo largo de tu código. +- Implementa patrones de diseño de API RESTful al crear servicios web. +- Usa nombres descriptivos para métodos y variables siguiendo la convención camelCase. +- Estructura aplicaciones Spring Boot: controladores, servicios, repositorios, modelos, configuraciones. + +## Especificidades de Spring Boot + +- Usa Spring Boot starters para configuración rápida de proyecto y gestión de dependencias. +- Implementa el uso apropiado de anotaciones (ej., @SpringBootApplication, @RestController, @Service). +- Utiliza las características de auto-configuración de Spring Boot efectivamente. +- Implementa manejo apropiado de excepciones usando @ControllerAdvice y @ExceptionHandler. + +## Convenciones de Nomenclatura + +- Usa PascalCase para nombres de clases (ej., UserController, OrderService). +- Usa camelCase para nombres de métodos y variables (ej., findUserById, isOrderValid). +- Usa ALL_CAPS para constantes (ej., MAX_RETRY_ATTEMPTS, DEFAULT_PAGE_SIZE). + +## Uso de Java y Spring Boot + +- Usa características de Java 17 o posterior cuando sea aplicable (ej., records, sealed classes, pattern matching). +- Aprovecha las características y mejores prácticas de Spring Boot 3.x. +- Usa Spring Data JPA para operaciones de base de datos cuando sea aplicable. +- Implementa validación apropiada usando Bean Validation (ej., @Valid, validadores personalizados). + +## Configuración y Propiedades + +- Usa application.properties o application.yml para configuración. +- Implementa configuraciones específicas de entorno usando Spring Profiles. +- Usa @ConfigurationProperties para propiedades de configuración type-safe. + +## Inyección de Dependencias e IoC + +- Usa inyección por constructor sobre inyección de campo para mejor testabilidad. +- Aprovecha el contenedor IoC de Spring para gestionar ciclos de vida de beans. + +## Pruebas + +- Escribe pruebas unitarias usando JUnit 5 y Spring Boot Test. +- Usa MockMvc para probar capas web. +- Implementa pruebas de integración usando @SpringBootTest. +- Usa @DataJpaTest para pruebas de capa de repositorio. + +## Rendimiento y Escalabilidad + +- Implementa estrategias de caché usando la abstracción Spring Cache. +- Usa procesamiento asíncrono con @Async para operaciones no bloqueantes. +- Implementa indexación apropiada de base de datos y optimización de consultas. + +## Seguridad + +- Implementa Spring Security para autenticación y autorización. +- Usa codificación apropiada de contraseñas (ej., BCrypt). +- Implementa configuración CORS cuando sea necesario. + +## Logging y Monitoreo + +- Usa SLF4J con Logback para logging. +- Implementa niveles de log apropiados (ERROR, WARN, INFO, DEBUG). +- Usa Spring Boot Actuator para monitoreo de aplicación y métricas. + +## Documentación de API + +- Usa Springdoc OpenAPI (anteriormente Swagger) para documentación de API. + +## Acceso a Datos y ORM + +- Usa Spring Data JPA para operaciones de base de datos. +- Implementa relaciones de entidades apropiadas y cascading. +- Usa migraciones de base de datos con herramientas como Flyway o Liquibase. + +## Construcción y Despliegue + +- Usa Maven o Gradle para gestión de dependencias y procesos de construcción. +- Gradle es preferido para proyectos nuevos debido a su flexibilidad y rendimiento. +- Implementa perfiles apropiados para diferentes entornos (dev, test, prod). +- Usa Docker para contenedorización si es aplicable. + +## Sigue mejores prácticas para: + +- Diseño de API RESTful (uso apropiado de métodos HTTP, códigos de estado, etc.). +- Arquitectura de microservicios (si es aplicable). +- Procesamiento asíncrono usando @Async de Spring o programación reactiva con Spring WebFlux. + +Adhiérete a los principios SOLID y mantén alta cohesión y bajo acoplamiento en el diseño de tu aplicación Spring Boot. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/custom-instructions/javascript/copilot-instructions.md b/localisation/es-es/docs/custom-instructions/javascript/copilot-instructions.md new file mode 100644 index 0000000..49ea5e4 --- /dev/null +++ b/localisation/es-es/docs/custom-instructions/javascript/copilot-instructions.md @@ -0,0 +1,50 @@ +# Reglas de Desarrollo JavaScript + +Eres un Desarrollador Front-End Senior y un Experto en ReactJS, NextJS, ViteJS, JavaScript, TypeScript, HTML, CSS y frameworks modernos de UI/UX (ej., TailwindCSS, Shadcn, Radix). + +Eres reflexivo, das respuestas matizadas, y eres brillante en el razonamiento. Proporcionas cuidadosamente respuestas precisas, fácticas y reflexivas, y eres un genio en el razonamiento. + +## Principios Clave + +- Sigue los requisitos del usuario cuidadosamente y al pie de la letra. +- Primero piensa paso a paso - describe tu plan para lo que vas a construir en pseudocódigo, escrito con gran detalle. +- Confirma, ¡luego escribe código! +- Siempre escribe código correcto, mejores prácticas, principio DRY (Don't Repeat Yourself), libre de errores, completamente funcional y operativo, también debería estar alineado con las reglas listadas abajo en las Directrices de Implementación de Código. +- Enfócate en código fácil y legible, por encima de ser performante. +- Implementa completamente toda la funcionalidad solicitada. +- NO dejes TODO's, marcadores de posición o piezas faltantes. +- ¡Asegúrate de que el código esté completo! Verifica minuciosamente que esté finalizado. +- Incluye todas las importaciones requeridas, y asegura el nombramiento apropiado de componentes clave. +- Sé conciso. Minimiza cualquier otra prosa. +- Si crees que podría no haber una respuesta correcta, dilo. +- Si no sabes la respuesta, dilo, en lugar de adivinar. + +## Entorno de Codificación + +El usuario hace preguntas sobre los siguientes lenguajes de codificación: + +- ReactJS +- NextJS +- ViteJS +- JavaScript +- TypeScript +- TailwindCSS +- HTML +- CSS + +## Directrices de Implementación de Código + +Sigue estas reglas cuando escribas código: + +- TypeScript es preferido sobre JavaScript, a menos que el usuario específicamente solicite JavaScript. +- Elige NextJS o ViteJS para el proyecto, dependiendo de los requisitos. +- Usa retornos tempranos siempre que sea posible para hacer el código más legible. +- Siempre usa clases de Tailwind para dar estilo a elementos HTML; evita usar CSS o etiquetas. +- Usa "class:" en lugar del operador ternario en etiquetas de clase siempre que sea posible. +- Usa nombres descriptivos para variables y funciones/const. Además, las funciones de eventos deberían ser nombradas con un prefijo "handle", como "handleClick" para onClick y "handleKeyDown" para onKeyDown. +- Implementa características de accesibilidad en elementos. Por ejemplo, una etiqueta debería tener tabindex="0", aria-label, on:click, y on:keydown, y atributos similares. +- Usa consts en lugar de funciones, por ejemplo, "const toggle = () =>". También, define un tipo si es posible. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/custom-instructions/python/copilot-instructions.md b/localisation/es-es/docs/custom-instructions/python/copilot-instructions.md new file mode 100644 index 0000000..2726f76 --- /dev/null +++ b/localisation/es-es/docs/custom-instructions/python/copilot-instructions.md @@ -0,0 +1,74 @@ +# Reglas de Desarrollo Python + +Eres un desarrollador senior de Python y un experto en Python, FastAPI, SQLite y desarrollo de API escalables. + +## Principios Clave + +- Escribe respuestas concisas y técnicas con ejemplos precisos de Python. +- Usa programación funcional y declarativa; evita las clases donde sea posible. +- Prefiere la iteración y modularización sobre la duplicación de código. +- Usa nombres de variables descriptivos con verbos auxiliares (ej., is_active, has_permission). +- Usa letras minúsculas con guiones bajos para directorios y archivos (ej., routers/user_routes.py). +- Favorece las exportaciones nombradas para rutas y funciones utilitarias. +- Usa el patrón Receive an Object, Return an Object (RORO). + +## Python/FastAPI + +- Usa def para funciones puras y async def para operaciones asíncronas. +- Usa anotaciones de tipo para todas las firmas de función. Prefiere modelos Pydantic sobre diccionarios sin procesar para validación de entrada. +- Estructura de archivo: router exportado, sub-rutas, utilidades, contenido estático, tipos (modelos, esquemas). +- Evita llaves innecesarias en declaraciones condicionales. +- Para declaraciones de una línea en condicionales, omite las llaves. +- Usa sintaxis concisa de una línea para declaraciones condicionales simples (ej., if condition: do_something()). + +## Manejo de Errores y Validación + +- Prioriza el manejo de errores y casos extremos: + - Maneja errores y casos extremos al principio de las funciones. + - Usa retornos tempranos para condiciones de error para evitar declaraciones if profundamente anidadas. + - Coloca el camino feliz al final de la función para mejorar la legibilidad. + - Evita declaraciones else innecesarias; usa el patrón if-return en su lugar. + - Usa cláusulas de guardia para manejar precondiciones y estados inválidos temprano. + - Implementa logging de errores apropiado y mensajes de error amigables para el usuario. + - Usa tipos de error personalizados o fábricas de error para manejo consistente de errores. + +## Dependencias + +- FastAPI +- Pydantic v2 +- Librerías de base de datos asíncronas como asyncpg o aiomysql +- SQLAlchemy 2.0 (si usas características ORM) + +## Directrices Específicas de FastAPI + +- Usa componentes funcionales (funciones simples) y modelos Pydantic para validación de entrada y esquemas de respuesta. +- Usa definiciones de ruta declarativas con anotaciones claras de tipo de retorno. +- Usa def para operaciones síncronas y async def para asíncronas. +- Minimiza @app.on_event("startup") y @app.on_event("shutdown"); prefiere manejadores de contexto lifespan para gestionar eventos de inicio y cierre. +- Usa middleware para logging, monitoreo de errores y optimización de rendimiento. +- Optimiza para rendimiento usando funciones async para tareas vinculadas a I/O, estrategias de caché y carga perezosa. +- Usa HTTPException para errores esperados y modélalos como respuestas HTTP específicas. +- Usa middleware para manejar errores inesperados, logging y monitoreo de errores. +- Usa BaseModel de Pydantic para validación de entrada/salida consistente y esquemas de respuesta. + +## Optimización de Rendimiento + +- Minimiza operaciones de I/O bloqueantes; usa operaciones asíncronas para todas las llamadas a base de datos y solicitudes de API externas. +- Implementa caché para datos estáticos y frecuentemente accedidos usando herramientas como Redis o almacenes en memoria. +- Optimiza la serialización y deserialización de datos con Pydantic. +- Usa técnicas de carga perezosa para conjuntos de datos grandes y respuestas API sustanciales. + +## Convenciones Clave + +1. Confía en el sistema de inyección de dependencias de FastAPI para gestionar estado y recursos compartidos. +2. Prioriza las métricas de rendimiento de API (tiempo de respuesta, latencia, throughput). +3. Limita las operaciones bloqueantes en rutas: + - Favorece flujos asíncronos y no bloqueantes. + - Usa funciones async dedicadas para operaciones de base de datos y API externas. + - Estructura rutas y dependencias claramente para optimizar legibilidad y mantenibilidad. + +Consulta la documentación de FastAPI para Modelos de Datos, Operaciones de Ruta y Middleware para mejores prácticas. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/docs/custom-instructions/setup/copilot-instructions.md b/localisation/es-es/docs/custom-instructions/setup/copilot-instructions.md new file mode 100644 index 0000000..f004271 --- /dev/null +++ b/localisation/es-es/docs/custom-instructions/setup/copilot-instructions.md @@ -0,0 +1,9 @@ +Eres un experto como Analista de Negocios. Eres muy capaz de interpretar los requisitos comerciales a detalles técnicos. + +Cuando trabajas con OpenAPI, siempre se refiere a la versión de especificación 3.0.1. + +Cuando creas un documento OpenAPI, siempre debes considerar la reutilización del esquema de datos. NO dupliques estructuras de datos similares. + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/dotnet/README.md b/localisation/es-es/dotnet/README.md new file mode 100644 index 0000000..451ec28 --- /dev/null +++ b/localisation/es-es/dotnet/README.md @@ -0,0 +1,9 @@ +# Comenzando con .NET + +Aquí está el punto de partida para el desarrollo de tu aplicación .NET. + +Si quieres ver el ejemplo completo, consulta este directorio, [/complete/dotnet](../complete/dotnet/). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/java/README.md b/localisation/es-es/java/README.md new file mode 100644 index 0000000..e3683f8 --- /dev/null +++ b/localisation/es-es/java/README.md @@ -0,0 +1,9 @@ +# Comenzando con Java + +Aquí está el punto de partida para el desarrollo de tu aplicación Java. + +Si quieres ver el ejemplo completo, consulta este directorio, [/complete/java](../complete/java/). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/javascript/README.md b/localisation/es-es/javascript/README.md new file mode 100644 index 0000000..9adb311 --- /dev/null +++ b/localisation/es-es/javascript/README.md @@ -0,0 +1,9 @@ +# Comenzando con JavaScript + +Aquí está el punto de partida para el desarrollo de tu aplicación JavaScript. + +Si quieres ver el ejemplo completo, consulta este directorio, [/complete/javascript](../complete/javascript/). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/product-requirements.md b/localisation/es-es/product-requirements.md new file mode 100644 index 0000000..a4879a3 --- /dev/null +++ b/localisation/es-es/product-requirements.md @@ -0,0 +1,152 @@ +# Documento de Requisitos del Producto (PRD) + +## Título del Producto + +Aplicación Simple de Redes Sociales + +## Versión del Documento + +1.0.0 + +## Autor + +Propietario del Producto / Líder Técnico en Contoso + +## Última Actualización + +2025-05-30 + +--- + +## 1. Resumen + +El objetivo de este proyecto es construir un Servicio de Redes Sociales (SNS) básico pero funcional que permita a los usuarios crear, recuperar, actualizar y eliminar publicaciones; agregar comentarios; y dar/quitar me gusta a las publicaciones. El enfoque API-first asegura que pueda ser usado como backend para frontends web o móviles. + +## 2. Contexto + +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 su primer MVP, el departamento de marketing quiere construir rápidamente el sitio web. + +## 3. Objetivos y Metas + +* Proporcionar operaciones CRUD para contenido generado por usuarios (publicaciones). +* Habilitar interacción social a través de comentarios y me gusta. +* Mantener simplicidad para casos de uso educativos y MVP. +* Asegurar diseño de API RESTful y manejo adecuado de errores. + +## 4. Características Clave + +### 4.1 Gestión de Publicaciones + +* **Listar Publicaciones** + + * **GET** `/api/posts` + * Historia de Usuario: Como usuario, quiero ver todas las publicaciones recientes para poder navegar lo que otros están compartiendo. + +* **Crear Publicación** + + * **POST** `/api/posts` + * Requerido: `username`, `content` + * Historia de Usuario: Como usuario, quiero crear una nueva publicación para poder compartir algo con otros. + +* **Obtener Publicación Individual** + + * **GET** `/api/posts/{postId}` + * Historia de Usuario: Como usuario, quiero leer una publicación específica en detalle. + +* **Actualizar Publicación** + + * **PATCH** `/api/posts/{postId}` + * Requerido: `username`, `content` + * Historia de Usuario: Como usuario, quiero actualizar mi publicación si cometí un error o tengo algo que agregar. + +* **Eliminar Publicación** + + * **DELETE** `/api/posts/{postId}` + * Historia de Usuario: Como usuario, quiero eliminar mi publicación si ya no quiero que sea compartida. + +### 4.2 Gestión de Comentarios + +* **Listar Comentarios de una Publicación** + + * **GET** `/api/posts/{postId}/comments` + * Historia de Usuario: Como usuario, quiero leer todos los comentarios en una publicación. + +* **Crear Comentario** + + * **POST** `/api/posts/{postId}/comments` + * Requerido: `username`, `content` + * Historia de Usuario: Como usuario, quiero comentar en una publicación para compartir mis pensamientos. + +* **Obtener Comentario Específico** + + * **GET** `/api/posts/{postId}/comments/{commentId}` + * Historia de Usuario: Como usuario, quiero ver un comentario específico en detalle. + +* **Actualizar Comentario** + + * **PATCH** `/api/posts/{postId}/comments/{commentId}` + * Requerido: `username`, `content` + * Historia de Usuario: Como usuario, quiero corregir o revisar mi comentario. + +* **Eliminar Comentario** + + * **DELETE** `/api/posts/{postId}/comments/{commentId}` + * Historia de Usuario: Como usuario, quiero eliminar mi comentario si es necesario. + +### 4.3 Sistema de Me Gusta + +* **Dar Me Gusta a una Publicación** + + * **POST** `/api/posts/{postId}/likes` + * Requerido: `username` + * Historia de Usuario: Como usuario, quiero dar me gusta a una publicación para mostrar aprecio. + +* **Quitar Me Gusta a una Publicación** + + * **DELETE** `/api/posts/{postId}/likes` + * Historia de Usuario: Como usuario, quiero quitar mi me gusta si cambio de opinión. + +## 5. Roles de Usuario y Permisos + +* **Usuarios Anónimos** + * Pueden leer publicaciones y comentarios. + +* **Usuarios Autenticados (vía campo username)** + * Pueden crear, actualizar, eliminar sus propias publicaciones y comentarios. + * Pueden dar/quitar me gusta a publicaciones. + +## 6. Contratos de API + +* Definir el documento OpenAPI con la especificación v3.0.1 al menos. +* Usa códigos de estado HTTP estándar. + * `200 OK`, `201 Created`, `204 No Content`, `400 Bad Request`, `404 Not Found`, `500 Internal Server Error` +* Content-Type: `application/json` + +## 7. Requisitos No Funcionales + +* **Documentación**: La API debe estar completamente documentada usando Swagger UI. +* **Seguridad**: Validación de entrada y validación básica de solicitudes, incluso si la autenticación completa no está implementada. + +## 8. Suposiciones y Dependencias + +* Usar base de datos en memoria para este producto. +* No se incluye soporte para carga de archivos o medios. +* No hay flujos de registro de usuario o login/autenticación. +* No se requiere código de pruebas. + +## 9. Métricas de Éxito + +* Todos los endpoints de la API son alcanzables y responden como está documentado. +* Capaz de publicar, comentar, dar me gusta y eliminar recursos de extremo a extremo. +* Documentación clara de Swagger generada desde OpenAPI. + +## 10. Fuera del Alcance + +* Autenticación de usuario (OAuth, JWT, etc.) +* Actualizaciones en tiempo real o notificaciones +* Herramientas de moderación o reportes +* Cargas multimedia (imágenes, video) + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/es-es/python/README.md b/localisation/es-es/python/README.md new file mode 100644 index 0000000..b636ed0 --- /dev/null +++ b/localisation/es-es/python/README.md @@ -0,0 +1,9 @@ +# Comenzando con Python + +Aquí está el punto de partida para el desarrollo de tu aplicación Python. + +Si quieres ver el ejemplo completo, consulta este directorio, [/complete/python](../complete/python/). + +--- + +**Disclaimer**: Este documento ha sido localizado por [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Por lo tanto, puede contener errores. Si encuentras alguna traducción que sea inapropiada o errónea, por favor crea un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/README.md b/localisation/fr-fr/README.md new file mode 100644 index 0000000..850725c --- /dev/null +++ b/localisation/fr-fr/README.md @@ -0,0 +1,114 @@ +# Atelier de Codage Vibe GitHub Copilot + +![Atelier de Codage Vibe GitHub Copilot](../../images/banner.png) + +Vibrons-codons avec [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) et ses fonctionnalités les plus récentes et les plus avancées dans divers langages de programmation tels que Python, JavaScript, Java et .NET, ainsi que pour rendre les applications cloud-natives par conteneurisation. Êtes-vous prêt à vous lancer ? + +## Contexte + +Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Le département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels. Pour leur premier MVP, ils veulent construire rapidement le site web. Le département informatique de Contoso a actuellement deux développeurs utilisant respectivement Python et JavaScript. La date de lancement approche rapidement, alors les deux développeurs doivent livrer l'application rapidement. + +Mais voici la situation... + +## Objectifs de l'Atelier + +- Construire des applications en utilisant le mode Agent de GitHub Copilot. +- Ajouter des instructions personnalisées à GitHub Copilot pour avoir plus de contrôle sur GitHub Copilot. +- Ajouter divers serveurs MCP à GitHub Copilot pour construire les applications plus précisément. + +## Atelier dans Votre Langue + +Ce matériel d'atelier est actuellement fourni dans les langues suivantes : + +[English](../../README.md) | [Español](../es-es/) | [Français](./README.md) | [日本語](../ja-jp/) | [한국어](../ko-kr/) | [Português](../pt-br/) | [中文(简体)](../zh-cn/) + +## Prérequis + +Pendant cet atelier, [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) est fortement recommandé car il n'y a pas besoin de préparation, sauf un navigateur web. + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +Cependant, si vous devez vraiment utiliser votre machine, assurez-vous d'avoir installé tout ce qui est identifié ci-dessous. + +### Commun + +- [Visual Studio Code](https://code.visualstudio.com/) +- Extension VS Code [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +- Extension VS Code [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) +- 💥 Pour les utilisateurs Windows 👉 [PowerShell 7](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) +- [git CLI](https://git-scm.com/downloads) +- [GitHub CLI](https://cli.github.com/) +- [Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) + +### Python + +- [pyenv](https://github.com/pyenv/pyenv) ou [pyenv pour Windows](https://github.com/pyenv-win/pyenv-win) +- Python 3.12+ via pyenv +- Gestionnaire de paquets `uv` (recommandé) ou `pip` +- Extension VS Code [Python](https://marketplace.visualstudio.com/items/?itemName=ms-python.python) +- Extension VS Code [Pylance](https://marketplace.visualstudio.com/items/?itemName=ms-python.vscode-pylance) +- Extension VS Code [Python Debugger](https://marketplace.visualstudio.com/items/?itemName=ms-python.debugpy) +- Extension VS Code [autopep8](https://marketplace.visualstudio.com/items/?itemName=ms-python.autopep8) + +### JavaScript + +- [nvm](https://github.com/nvm-sh/nvm) ou [nvm pour Windows](https://github.com/coreybutler/nvm-windows) +- La dernière LTS de [Node.js](https://nodejs.org/) via nvm + +### Java + +- [SDKMAN](https://sdkman.io/) +- [OpenJDK 21](https://learn.microsoft.com/java/openjdk/download) via SDKMAN +- [Apache Maven](https://maven.apache.org/download.cgi) via SDKMAN +- [Gradle Build Tool](https://docs.gradle.org/current/userguide/installation.html) via SDKMAN +- [Spring Boot Initializr](https://docs.spring.io/spring-boot/cli/installation.html) via SDKMAN +- Extension VS Code [Extension Pack for Java](https://marketplace.visualstudio.com/items/?itemName=vscjava.vscode-java-pack) +- Extension VS Code [Spring Boot Extension Pack](https://marketplace.visualstudio.com/items/?itemName=vmware.vscode-boot-dev-pack) + +### .NET + +- [.NET SDK 9](https://dotnet.microsoft.com/download/dotnet/9.0) +- Extension VS Code [C# Dev Kit](https://marketplace.visualstudio.com/items/?itemName=ms-dotnettools.csdevkit) + +## Document d'Exigences Produit + +Tout d'abord, l'endroit où vous devez commencer est ce [PRD (Document d'Exigences Produit)](./product-requirements.md). Ce document vous donnera une meilleure compréhension de ce qu'il faut faire et comment le faire. + +## Instructions de l'Atelier + +Ceci est un atelier à rythme libre en suivant les liens ci-dessous : + +| Étape | Lien | +|----------------------------------------|---------------------------------------------------------| +| 00: Environnement de Développement | [00-setup.md](./docs/00-setup.md) | +| 01: Backend Python | [01-python.md](./docs/01-python.md) | +| 02: Frontend JavaScript | [02-javascript.md](./docs/02-javascript.md) | +| 03: Migration Java depuis Python | [03-java.md](./docs/03-java.md) | +| 04: Migration .NET depuis JavaScript | [04-dotnet.md](./docs/04-dotnet.md) | +| 05: Conteneurisation | [05-containerization.md](./docs/05-containerization.md)| + +## Échantillons Complets + +Consultez l'exemple complet de chaque application. Ils sont également vibe-codés avec GitHub Copilot, par conséquent, ils pourraient ne pas être parfaits, et vous n'avez pas à suivre l'application. + +| Langage | Application | Emplacement | +|----------------------|-------------|--------------------------------------| +| Backend Python | FastAPI | [python](./complete/python/) | +| Frontend JavaScript | React | [javascript](./complete/javascript/) | +| Backend Java | Spring Boot | [java](./complete/java/) | +| Frontend .NET | Blazor | [dotnet](./complete/dotnet/) | +| Conteneurisation | Container | [containerization](./complete/) | + +## En Savoir Plus... + +- [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) +- [GitHub Copilot](https://docs.github.com/en/copilot/about-github-copilot/what-is-github-copilot) +- [GitHub Copilot: Mode Agent](https://code.visualstudio.com/blogs/2025/04/07/agentMode) +- [GitHub Copilot: MCP](https://code.visualstudio.com/blogs/2025/05/12/agent-mode-meets-mcp) +- [GitHub Copilot: Instructions Personnalisées](https://code.visualstudio.com/docs/copilot/copilot-customization) +- [GitHub Copilot: Changer les Modèles IA](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat?tool=vscode) +- [Serveurs MCP Sélectionnés](https://github.com/modelcontextprotocol/servers) + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/complete/README.md b/localisation/fr-fr/complete/README.md new file mode 100644 index 0000000..2e872e6 --- /dev/null +++ b/localisation/fr-fr/complete/README.md @@ -0,0 +1,60 @@ +# Échantillons d'Applications Complètes + +Voici la liste des échantillons d'applications complètes. Parce qu'elles sont également vibe-codées, vous pouvez voir comment elles sont construites. + +| Application | Emplacement | +|-------------|-----------------------------| +| FastAPI | [python](./python/) | +| React | [javascript](./javascript/) | +| Spring Boot | [java](./java/) | +| Blazor | [dotnet](./dotnet/) | + +## Échantillon de Conteneurisation + +### Prérequis + +Référez-vous au document [README](../../README.md) pour la préparation. + +### Démarrage + +1. Assurez-vous que Docker fonctionne. + + ```bash + docker info + ``` + +1. Obtenez la racine du référentiel. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Naviguez vers le répertoire `complete`. + + ```bash + cd $REPOSITORY_ROOT/complete + ``` + +1. Exécutez les applications conteneurisées. + + ```bash + docker compose up --build -d + ``` + +1. Ouvrez un navigateur web et naviguez vers `http://localhost:3030`. +1. Vérifiez si l'application web fonctionne correctement. +1. Nettoyez en exécutant la commande suivante pour supprimer les applications conteneurisées. + + ```bash + docker compose down --rmi all + ``` + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/complete/dotnet/README.md b/localisation/fr-fr/complete/dotnet/README.md new file mode 100644 index 0000000..06e1d31 --- /dev/null +++ b/localisation/fr-fr/complete/dotnet/README.md @@ -0,0 +1,39 @@ +# Échantillon d'Application .NET + +## Prérequis + +Référez-vous au document [README](../../../README.md) pour la préparation. + +## Démarrage + +### Exécuter le Backend Spring Boot + +Utilisez [l'Échantillon d'Application Java](../java/). + +> **NOTE** : Si vous utilisez GitHub Codespaces, assurez-vous que le port de l'application Java, `8080`, est défini sur **public**. + +### Exécuter le Frontend Blazor + +1. Obtenez la racine du référentiel. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Exécutez l'application. + + ```bash + dotnet watch run --project $REPOSITORY_ROOT/complete/dotnet/Contoso.BlazorApp + ``` + +1. Vérifiez si l'application web fonctionne correctement. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/complete/java/README.md b/localisation/fr-fr/complete/java/README.md new file mode 100644 index 0000000..2972b51 --- /dev/null +++ b/localisation/fr-fr/complete/java/README.md @@ -0,0 +1,371 @@ +# Échantillon d'Application Java + +Une application API REST Spring Boot complète pour une plateforme de médias sociaux avec des opérations CRUD complètes pour les publications, commentaires et likes. + +## Aperçu du Projet + +Il s'agit d'une application Spring Boot prête pour la production construite avec les spécifications suivantes : + +- **Nom du Package** : `com.contoso.socialapp` +- **ID d'Artefact** : `socialapp` +- **ID de Groupe** : `com.contoso` +- **Type de Package** : `jar` +- **Version Java** : OpenJDK 21 +- **Outil de Build** : Gradle +- **Base de données** : SQLite (embarquée) +- **Port** : 8080 + +### Dépendances du Projet + +- **Spring Boot 3.2.5** : Framework principal +- **Spring Web** : Points de terminaison API RESTful +- **Spring Data JPA** : Opérations de base de données +- **Spring Boot Actuator** : Surveillance d'application +- **Spring Boot Validation** : Validation d'entrée +- **SQLite** : Base de données embarquée +- **Hibernate Community Dialects** : Support SQLite +- **Springdoc OpenAPI** : Documentation API (Swagger UI) +- **Lombok** : Réduction du code standard + +### Structure du Projet + +```text +src/ +├── main/ +│ ├── java/ +│ │ └── com/ +│ │ └── contoso/ +│ │ └── socialapp/ +│ │ ├── SocialAppApplication.java # Classe principale de l'application +│ │ ├── config/ +│ │ │ ├── WebConfig.java # Configuration CORS +│ │ │ └── OpenApiConfig.java # Configuration Swagger/OpenAPI +│ │ ├── controller/ +│ │ │ ├── HealthController.java # Points de terminaison de santé +│ │ │ ├── PostController.java # Gestion des publications +│ │ │ └── CommentController.java # Gestion des commentaires et likes +│ │ ├── model/ +│ │ │ ├── Post.java # Entité Publication +│ │ │ ├── Comment.java # Entité Commentaire +│ │ │ ├── Like.java # Entité Like +│ │ │ └── dto/ # Objets de Transfert de Données +│ │ ├── repository/ +│ │ │ ├── PostRepository.java # Accès aux données de publication +│ │ │ ├── CommentRepository.java # Accès aux données de commentaire +│ │ │ └── LikeRepository.java # Accès aux données de like +│ │ └── service/ +│ │ ├── PostService.java # Logique métier des publications +│ │ └── CommentService.java # Logique métier des commentaires +│ └── resources/ +│ ├── application.properties # Configuration de l'application +│ └── data.sql # Données d'exemple (optionnel) +└── test/ + └── java/ + └── com/ + └── contoso/ + └── socialapp/ + └── SocialAppApplicationTests.java # Tests d'intégration +``` + +## Fonctionnalités + +- ✅ API RESTful complète pour les opérations de médias sociaux +- ✅ Gestion des publications (Créer, Lire, Mettre à jour, Supprimer) +- ✅ Système de commentaires avec opérations CRUD complètes +- ✅ Fonctionnalité Like/Ne plus aimer +- ✅ Base de données SQLite avec JPA/Hibernate +- ✅ Documentation OpenAPI/Swagger +- ✅ CORS activé pour localhost et GitHub Codespaces +- ✅ Configuration d'URL de serveur dynamique +- ✅ Points de terminaison de vérification de santé +- ✅ Intégration Spring Boot Actuator +- ✅ Gestion complète des erreurs +- ✅ Validation d'entrée avec Bean Validation + +## Démarrage Rapide + +### Prérequis + +Référez-vous au document [README](../../../README.md) pour la préparation. + +### 1. Configuration de l'Environnement + +D'abord, définissez la variable d'environnement `$REPOSITORY_ROOT`. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +Ensuite, naviguez vers le répertoire java. + +```bash +cd $REPOSITORY_ROOT/complete/java +``` + +### 2. Construire l'Application + +```bash +# Rendre gradlew exécutable (si nécessaire) +chmod +x ./gradlew + +# Construire le projet +./gradlew build +``` + +### 3. Exécuter l'Application + +```bash +# Démarrer l'application en utilisant Gradle +./gradlew bootRun + +# Alternative : Exécuter le fichier JAR directement +# java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### 4. Vérifier que l'Application Fonctionne + +```bash +# Vérifier le point de terminaison de santé +curl http://localhost:8080/api/health + +# Réponse attendue : {"status":"healthy"} +``` + +### 5. Accéder à la Documentation API + +Ouvrez votre navigateur et naviguez vers : + +- **Swagger UI** : [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) +- **JSON OpenAPI** : [http://localhost:8080/v3/api-docs](http://localhost:8080/v3/api-docs) + +## Points de Terminaison API + +### Santé et Bienvenue + +- `GET /api/health` - Point de terminaison de vérification de santé personnalisé +- `GET /api/welcome` - Point de terminaison de message de bienvenue + +### Gestion des Publications + +- `GET /api/posts` - Obtenir toutes les publications +- `GET /api/posts/{id}` - Obtenir une publication spécifique par ID +- `POST /api/posts` - Créer une nouvelle publication +- `PATCH /api/posts/{id}` - Mettre à jour une publication existante +- `DELETE /api/posts/{id}` - Supprimer une publication + +### Gestion des Commentaires + +- `GET /api/posts/{postId}/comments` - Obtenir tous les commentaires d'une publication +- `GET /api/posts/{postId}/comments/{commentId}` - Obtenir un commentaire spécifique +- `POST /api/posts/{postId}/comments` - Ajouter un commentaire à une publication +- `PATCH /api/posts/{postId}/comments/{commentId}` - Mettre à jour un commentaire +- `DELETE /api/posts/{postId}/comments/{commentId}` - Supprimer un commentaire + +### Gestion des Likes + +- `POST /api/posts/{postId}/like` - Aimer une publication +- `DELETE /api/posts/{postId}/like` - Ne plus aimer une publication + +### Spring Boot Actuator + +- `GET /actuator/health` - Indicateur de santé Spring Boot +- `GET /actuator/info` - Information de l'application + +## Tester l'API + +### Exemples d'Utilisation de cURL + +#### Créer une Publication + +```bash +curl -X POST http://localhost:8080/api/posts \ + -H "Content-Type: application/json" \ + -d '{ + "title": "Ma Première Publication", + "content": "Ceci est le contenu de ma première publication !", + "authorName": "Jean Dupont" + }' +``` + +#### Obtenir Toutes les Publications + +```bash +curl http://localhost:8080/api/posts +``` + +#### Ajouter un Commentaire + +```bash +curl -X POST http://localhost:8080/api/posts/1/comments \ + -H "Content-Type: application/json" \ + -d '{ + "content": "Super publication !", + "authorName": "Marie Martin" + }' +``` + +#### Aimer une Publication + +```bash +curl -X POST http://localhost:8080/api/posts/1/like \ + -H "Content-Type: application/json" \ + -d '{ + "userName": "jean_dupont" + }' +``` + +### Utilisation de Swagger UI + +1. Ouvrez [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) +2. Explorez les points de terminaison disponibles +3. Cliquez sur "Try it out" sur n'importe quel point de terminaison +4. Remplissez les paramètres et cliquez sur "Execute" + +## Développement + +### Exécuter les Tests + +```bash +# Exécuter tous les tests +./gradlew test + +# Exécuter avec rapport de couverture +./gradlew test jacocoTestReport + +# Exécuter une classe de test spécifique +./gradlew test --tests "SocialAppApplicationTests" +``` + +### Base de Données + +L'application utilise SQLite comme base de données embarquée : + +- **Fichier de base de données** : `sns_api.db` (créé automatiquement) +- **Emplacement** : Répertoire racine du projet +- **Schéma** : Auto-généré par Hibernate +- **Données d'exemple** : Chargées depuis `data.sql` (si présent) + +Pour réinitialiser la base de données, supprimez simplement le fichier `sns_api.db` et redémarrez l'application. + +## Configuration + +### Propriétés de l'Application + +Paramètres de configuration clés dans `application.properties` : + +```properties +# Paramètres de l'Application +spring.application.name=socialapp +server.port=8080 + +# Configuration de la Base de Données +spring.datasource.url=jdbc:sqlite:sns_api.db +spring.jpa.hibernate.ddl-auto=update + +# Configuration OpenAPI/Swagger +springdoc.swagger-ui.path=/swagger-ui.html +springdoc.swagger-ui.operationsSorter=method +``` + +### Configuration CORS + +L'application supporte à la fois localhost et GitHub Codespaces : + +- **Localhost** : `http://localhost:8080` +- **GitHub Codespaces** : Auto-détecté et configuré dynamiquement + +### Détection d'Environnement + +L'application détecte automatiquement l'environnement d'exécution : + +- **Développement Local** : Utilise `http://localhost:8080` +- **GitHub Codespaces** : Utilise `https://{codespace-name}-8080.{domain}` + +## Déploiement + +### Construction pour la Production + +```bash +# Créer un JAR de production +./gradlew clean build + +# Emplacement du JAR +ls -la build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### Exécution en Production + +```bash +# Exécuter avec le profil de production +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod + +# Ou avec un port personnalisé +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --server.port=8081 +``` + +## Dépannage + +### Problèmes Courants + +#### Port Déjà Utilisé + +```bash +# Trouver le processus utilisant le port 8080 +lsof -i :8080 + +# Tuer le processus (remplacer PID) +kill -9 + +# Ou utiliser un port différent +./gradlew bootRun --args='--server.port=8081' +``` + +#### Échecs de Construction + +```bash +# Nettoyer et reconstruire +./gradlew clean build + +# Mettre à jour le wrapper Gradle +./gradlew wrapper --gradle-version=8.5 +``` + +#### Problèmes de Base de Données + +```bash +# Réinitialiser la base de données +rm sns_api.db +./gradlew bootRun +``` + +### Journaux et Surveillance + +- **Journaux d'application** : Sortie console lors de l'exécution de `./gradlew bootRun` +- **Vérification de santé** : `GET /actuator/health` +- **Information de l'application** : `GET /actuator/info` + +## Considérations de Sécurité + +⚠️ **Configuration de Développement** : La configuration actuelle est optimisée pour le développement avec : + +- CORS activé pour toutes les origines +- Base de données SQLite (non adaptée à l'échelle de production) +- Aucune authentification/autorisation + +Pour un déploiement en production, considérez : + +- Restreindre CORS à des domaines spécifiques +- Utiliser PostgreSQL/MySQL au lieu de SQLite +- Implémenter Spring Security pour l'authentification +- Ajouter la limitation de débit et la désinfection d'entrée +- Utiliser le chiffrement HTTPS/TLS + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/complete/javascript/README.md b/localisation/fr-fr/complete/javascript/README.md new file mode 100644 index 0000000..a3ce80d --- /dev/null +++ b/localisation/fr-fr/complete/javascript/README.md @@ -0,0 +1,47 @@ +# Échantillon d'Application JavaScript + +## Prérequis + +Référez-vous au document [README](../../../README.md) pour la préparation. + +## Démarrage + +### Exécuter le Backend FastAPI + +Utilisez [l'Échantillon d'Application Python](../python/). + +> **NOTE** : Si vous utilisez GitHub Codespaces, assurez-vous que le port de l'application Python, `8000`, est défini sur **public**. + +### Exécuter le Frontend React + +1. Obtenez la racine du référentiel. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Installez les paquets npm. + + ```bash + cd $REPOSITORY_ROOT/complete/javascript + npm install + ``` + +1. Exécutez l'application. + + ```bash + npm run dev + ``` + +1. Ouvrez un navigateur web et naviguez vers `http://localhost:3000`. +1. Vérifiez si l'application web fonctionne correctement. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/complete/python/README.md b/localisation/fr-fr/complete/python/README.md new file mode 100644 index 0000000..f142fb9 --- /dev/null +++ b/localisation/fr-fr/complete/python/README.md @@ -0,0 +1,296 @@ +# Échantillon d'Application Python + +Une implémentation backend FastAPI complète pour un Service de Réseau Social Simple (SNS) qui permet aux utilisateurs de créer, récupérer, mettre à jour et supprimer des publications ; d'ajouter des commentaires ; et d'aimer/ne plus aimer les publications. + +## 🏗️ Aperçu de l'Architecture + +- **Framework** : FastAPI avec Python 3.12+ +- **Base de données** : SQLite (`sns_api.db`) +- **Documentation API** : Swagger UI + spécification OpenAPI 3.1 +- **CORS** : Activé pour les requêtes cross-origin +- **Validation des données** : Modèles Pydantic avec validation complète + +## 📁 Structure du Projet + +```text +python/ +├── main.py # Point d'entrée de l'application FastAPI +├── models.py # Modèles de données et schémas Pydantic +├── database.py # Opérations de base de données SQLite +├── openapi.yaml # Spécification OpenAPI 3.0.1 +├── sns_api.db # Fichier de base de données SQLite (créé automatiquement) +├── README.md # Cette documentation +└── .venv/ # Environnement virtuel (créé pendant la configuration) +``` + +## 🚀 Démarrage Rapide + +### Prérequis + +Référez-vous au document [README](../../../README.md) pour la préparation. + +### 1. Configuration de l'Environnement + +D'abord, définissez la variable d'environnement `$REPOSITORY_ROOT`. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +Ensuite, naviguez vers le répertoire python et créez un environnement virtuel : + +```bash +cd $REPOSITORY_ROOT/complete/python +``` + +Créer un environnement virtuel + +```bash +# Utilisation d'uv (recommandé) +uv venv .venv +``` + +```bash +# Utilisation de Python standard (alternative) +python -m venv .venv +``` + +### 2. Activer l'Environnement Virtuel + +```bash +# Sur Linux/macOS +source .venv/bin/activate +``` + +```bash +# Sur Windows Command Prompt +.venv\Scripts\activate +``` + +### 3. Installer les Dépendances + +```bash +# Utilisation d'uv (recommandé) +uv pip install fastapi uvicorn python-multipart pyyaml +``` + +```bash +# Utilisation de pip (alternative) +pip install fastapi uvicorn python-multipart pyyaml +``` + +### 4. Copier la Spécification OpenAPI + +Copiez la spécification OpenAPI depuis le répertoire parent. + +```bash +# Sur Linux/macOS +cp ../openapi.yaml . +``` + +```powershell +# Sur Windows Command Prompt +xcopy ..\openapi.yaml . +``` + +### 5. Exécuter l'Application + +Démarrer le serveur de développement + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload +``` + +L'application sera disponible à : + +- **URL de Base API** : `http://localhost:8000/api/` +- **Swagger UI** : `http://localhost:8000/docs` +- **Spécification OpenAPI** : `http://localhost:8000/openapi.json` + +## 📊 Schéma de Base de Données + +L'application utilise SQLite avec les tables suivantes : + +### Table Posts + +- `id` (TEXT, PRIMARY KEY) - UUID +- `username` (TEXT, NOT NULL) - Nom d'utilisateur de l'auteur +- `content` (TEXT, NOT NULL) - Contenu de la publication +- `created_at` (TEXT, NOT NULL) - Horodatage ISO +- `updated_at` (TEXT, NOT NULL) - Horodatage ISO + +### Table Comments + +- `id` (TEXT, PRIMARY KEY) - UUID +- `post_id` (TEXT, NOT NULL) - Clé étrangère vers posts +- `username` (TEXT, NOT NULL) - Nom d'utilisateur de l'auteur +- `content` (TEXT, NOT NULL) - Contenu du commentaire +- `created_at` (TEXT, NOT NULL) - Horodatage ISO +- `updated_at` (TEXT, NOT NULL) - Horodatage ISO + +### Table Likes + +- `post_id` (TEXT, NOT NULL) - Clé étrangère vers posts +- `username` (TEXT, NOT NULL) - Utilisateur qui a aimé +- `liked_at` (TEXT, NOT NULL) - Horodatage ISO +- Clé primaire : `(post_id, username)` + +## 🔌 Points de Terminaison API + +### Publications + +- `GET /api/posts` - Lister toutes les publications +- `POST /api/posts` - Créer une nouvelle publication +- `GET /api/posts/{postId}` - Obtenir une publication spécifique +- `PATCH /api/posts/{postId}` - Mettre à jour une publication +- `DELETE /api/posts/{postId}` - Supprimer une publication + +### Commentaires + +- `GET /api/posts/{postId}/comments` - Lister les commentaires d'une publication +- `POST /api/posts/{postId}/comments` - Créer un commentaire +- `GET /api/posts/{postId}/comments/{commentId}` - Obtenir un commentaire spécifique +- `PATCH /api/posts/{postId}/comments/{commentId}` - Mettre à jour un commentaire +- `DELETE /api/posts/{postId}/comments/{commentId}` - Supprimer un commentaire + +### Likes + +- `POST /api/posts/{postId}/likes` - Aimer une publication +- `DELETE /api/posts/{postId}/likes?username={username}` - Ne plus aimer une publication + +## 🧪 Tester l'API + +### Utilisation de cURL + +#### Créer une Publication + +```bash +curl -X POST "http://localhost:8000/api/posts" \ + -H "Content-Type: application/json" \ + -d '{"username": "john_doe", "content": "Bonjour le monde ! Ceci est ma première publication."}' +``` + +#### Obtenir Toutes les Publications + +```bash +curl -X GET "http://localhost:8000/api/posts" +``` + +#### Ajouter un Commentaire + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/comments" \ + -H "Content-Type: application/json" \ + -d '{"username": "jane_smith", "content": "Super publication !"}' +``` + +#### Aimer une Publication + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/likes" \ + -H "Content-Type: application/json" \ + -d '{"username": "alice_johnson"}' +``` + +### Utilisation de Swagger UI + +1. Naviguez vers `http://localhost:8000/docs` +2. Explorez et testez tous les points de terminaison API de manière interactive +3. Consultez les schémas et exemples de requête/réponse + +## 📝 Modèles de Données + +### Modèles de Requête + +- `NewPostRequest` : `{username: str, content: str}` +- `UpdatePostRequest` : `{username: str, content: str}` +- `NewCommentRequest` : `{username: str, content: str}` +- `UpdateCommentRequest` : `{username: str, content: str}` +- `LikeRequest` : `{username: str}` + +### Modèles de Réponse + +- `Post` : Objet publication complet avec métadonnées et compteurs +- `Comment` : Objet commentaire complet avec métadonnées +- `LikeResponse` : Confirmation de like avec horodatage + +## ⚙️ Configuration + +### Variables d'Environnement + +L'application utilise des paramètres par défaut mais peut être personnalisée : + +- **Base de données** : Fichier SQLite `sns_api.db` (créé automatiquement) +- **Hôte** : `0.0.0.0` (toutes les interfaces) +- **Port** : `8000` +- **CORS** : Activé pour toutes les origines + +### Considérations de Production + +Pour un déploiement en production, considérez : + +1. **Base de données** : Passer à PostgreSQL ou MySQL +2. **Variables d'environnement** : Utiliser pour la configuration sensible +3. **Sécurité** : Ajouter l'authentification et l'autorisation +4. **CORS** : Restreindre à des domaines spécifiques +5. **Journalisation** : Implémenter la journalisation structurée +6. **Surveillance** : Ajouter des vérifications de santé et des métriques + +## 🛠️ Développement + +### Organisation des Fichiers + +- **`main.py`** : Configuration de l'application FastAPI, middleware et définitions de routes +- **`models.py`** : Modèles Pydantic pour la validation et sérialisation des données +- **`database.py`** : Opérations SQLite, gestion des connexions et fonctions CRUD + +### Style de Code + +Le projet suit : + +- Les directives de style Python PEP 8 +- Les meilleures pratiques FastAPI +- Les modèles de programmation fonctionnelle +- Les annotations de type partout +- La gestion complète des erreurs + +### Ajouter de Nouvelles Fonctionnalités + +1. Définir les modèles Pydantic dans `models.py` +2. Ajouter les opérations de base de données dans `database.py` +3. Créer les points de terminaison API dans `main.py` +4. Mettre à jour la spécification OpenAPI si nécessaire + +## 🐛 Dépannage + +### Problèmes Courants + +1. **Port déjà utilisé** : Changer le port avec `--port 8001` +2. **Problèmes d'environnement virtuel** : Recréer avec `rm -rf .venv && uv venv .venv` +3. **Base de données verrouillée** : Arrêter toutes les instances en cours d'exécution de l'application +4. **Erreurs d'importation** : S'assurer que l'environnement virtuel est activé + +### Mode Debug + +Exécuter avec journalisation supplémentaire : + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload --log-level debug +``` + +## 📚 Ressources Supplémentaires + +- [Documentation FastAPI](https://fastapi.tiangolo.com/) +- [Documentation Pydantic](https://docs.pydantic.dev/) +- [Documentation SQLite](https://sqlite.org/docs.html) +- [Spécification OpenAPI](https://swagger.io/specification/) + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/00-setup.md b/localisation/fr-fr/docs/00-setup.md new file mode 100644 index 0000000..848cd34 --- /dev/null +++ b/localisation/fr-fr/docs/00-setup.md @@ -0,0 +1,391 @@ +# 00: Environnement de Développement + +Dans cette étape, vous configurez l'environnement de développement pour l'atelier. + +## Prérequis + +Consultez le document [README](../README.md) pour la préparation. + +## Commencer + +- [Utiliser GitHub Codespaces](#utiliser-github-codespaces) +- [Utiliser Visual Studio Code](#utiliser-visual-studio-code) + - [Installer PowerShell 👉 Pour les Utilisateurs Windows](#installer-powershell--pour-les-utilisateurs-windows) + - [Installer git CLI](#installer-git-cli) + - [Installer GitHub CLI](#installer-github-cli) + - [Installer Docker Desktop](#installer-docker-desktop) + - [Installer Visual Studio Code](#installer-visual-studio-code) + - [Démarrer Visual Studio Code](#démarrer-visual-studio-code) + - [Configurer les Serveurs MCP](#configurer-les-serveurs-mcp) +- [Vérifier le Mode Agent GitHub Copilot](#vérifier-le-mode-agent-github-copilot) +- [Configurer le Mode Bête](#configurer-le-mode-bête) +- [Préparer les Instructions Personnalisées](#préparer-les-instructions-personnalisées) +- [Analyser le Document d'Exigences Produit (PRD) et Concevoir l'API](#analyser-le-document-dexigences-produit-prd-et-concevoir-lapi) + +## Utiliser GitHub Codespaces + +1. Cliquez sur ce lien 👉 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +1. Une fois que l'instance GitHub Codespace est prête, ouvrez un terminal et exécutez la commande suivante pour vérifier si tout ce dont vous avez besoin a été installé correctement ou non. + + ```bash + # Python + python --version + ``` + + ```bash + # Node.js + node --version + npm --version + + ``` + + ```bash + # JDK + java --version + ``` + + ```bash + # .NET SDK + dotnet --list-sdks + ``` + +1. Vérifiez le statut de votre dépôt. + + ```bash + git remote -v + ``` + + Vous devriez pouvoir voir ce qui suit. + + ```bash + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + + Si vous voyez quelque chose de différent de ce qui précède, supprimez l'instance GitHub Codespace et recréez-la. + +1. Descendez à la section [Configurer les Serveurs MCP](#configurer-les-serveurs-mcp). + +**👇👇👇 Au lieu de cela, si vous souhaitez utiliser VS Code sur votre machine locale, suivez les instructions ci-dessous. La section ci-dessous ne s'applique pas à ceux qui utilisent GitHub Codespaces. 👇👇👇** + +## Utiliser Visual Studio Code + +### Installer PowerShell 👉 Pour les Utilisateurs Windows + +1. Vérifiez si vous avez déjà installé PowerShell ou non. + + ```bash + # Bash/Zsh + which pwsh + ``` + + ```bash + # PowerShell + Get-Command pwsh + ``` + + Si vous ne voyez pas le chemin de commande de `pwsh`, cela signifie que vous n'avez pas encore installé PowerShell. Visitez la [page d'installation PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) et suivez les instructions. + +1. Vérifiez la version de votre PowerShell. + + ```bash + pwsh --version + ``` + + `7.5.0` ou supérieur est recommandé. Si la vôtre est inférieure à cela, visitez la [page d'installation PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) et suivez les instructions. + +### Installer git CLI + +1. Vérifiez si vous avez déjà installé git CLI ou non. + + ```bash + # Bash/Zsh + which git + ``` + + ```bash + # PowerShell + Get-Command git + ``` + + Si vous ne voyez pas le chemin de commande de `git`, cela signifie que vous n'avez pas encore installé le git CLI. Visitez la [page d'installation git CLI](https://git-scm.com/downloads) et suivez les instructions. + +1. Vérifiez la version de votre git CLI. + + ```bash + git --version + ``` + + `2.39.0` ou supérieur est recommandé. Si la vôtre est inférieure à cela, visitez la [page d'installation git CLI](https://git-scm.com/downloads) et suivez les instructions. + +### Installer GitHub CLI + +1. Vérifiez si vous avez déjà installé GitHub CLI ou non. + + ```bash + # Bash/Zsh + which gh + ``` + + ```bash + # PowerShell + Get-Command gh + ``` + + Si vous ne voyez pas le chemin de commande de `gh`, cela signifie que vous n'avez pas encore installé le GitHub CLI. Visitez la [page d'installation GitHub CLI](https://cli.github.com/) et suivez les instructions. + +1. Vérifiez la version de votre GitHub CLI. + + ```bash + gh --version + ``` + + `2.65.0` ou supérieur est recommandé. Si la vôtre est inférieure à cela, visitez la [page d'installation GitHub CLI](https://cli.github.com/) et suivez les instructions. + +1. Vérifiez si vous vous êtes connecté à GitHub ou non. + + ```bash + gh auth status + ``` + + Si vous ne vous êtes pas encore connecté, exécutez `gh auth login` et connectez-vous. + +### Installer Docker Desktop + +1. Vérifiez si vous avez déjà installé Docker Desktop ou non. + + ```bash + # Bash/Zsh + which docker + ``` + + ```bash + # PowerShell + Get-Command docker + ``` + + Si vous ne voyez pas le chemin de commande de `docker`, cela signifie que vous n'avez pas encore installé Docker Desktop. Visitez la [page d'installation Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) et suivez les instructions. + +1. Vérifiez la version de votre Docker CLI. + + ```bash + docker --version + ``` + + `28.0.4` ou supérieur est recommandé. Si la vôtre est inférieure à cela, visitez la [page d'installation Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) et suivez les instructions. + +### Installer Visual Studio Code + +1. Vérifiez si vous avez déjà installé VS Code ou non. + + ```bash + # Bash/Zsh + which code + ``` + + ```bash + # PowerShell + Get-Command code + ``` + + Si vous ne voyez pas le chemin de commande de `code`, cela signifie que vous n'avez pas encore installé VS Code. Visitez la [page d'installation Visual Studio Code](https://code.visualstudio.com/) et suivez les instructions. + +1. Vérifiez la version de votre VS Code. + + ```bash + code --version + ``` + + `1.99.0` ou supérieur est recommandé. Si la vôtre est inférieure à cela, visitez la [page d'installation Visual Studio Code](https://code.visualstudio.com/) et suivez les instructions. + + > **NOTE**: Vous pourriez ne pas être capable d'exécuter la commande `code`. Dans ce cas, suivez [cette documentation](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) pour la configuration. + +### Démarrer Visual Studio Code + +1. Créez un répertoire de travail. +1. Exécutez la commande pour forker ce dépôt et le cloner sur votre machine locale. + + ```bash + gh repo fork microsoft/github-copilot-vibe-coding-workshop --clone + ``` + +1. Naviguez dans le répertoire cloné. + + ```bash + cd github-copilot-vibe-coding-workshop + ``` + +1. Exécutez VS Code depuis le terminal. + + ```bash + code . + ``` + +1. Ouvrez un nouveau terminal dans VS Code et exécutez la commande suivante pour vérifier le statut de votre dépôt. + + ```bash + git remote -v + ``` + + Vous devriez pouvoir voir ce qui suit. Si vous voyez `microsoft` dans `origin`, vous devriez le cloner à nouveau depuis votre dépôt forké. + + ```bash + origin https://github.com//github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com//github-copilot-vibe-coding-workshop.git (push) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + +1. Vérifiez si les deux extensions ont été installées ou non – [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) et [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). + + ```bash + # Bash/Zsh + code --list-extensions | grep github.copilot + ``` + + ```powershell + # PowerShell + code --list-extensions | Select-String "github.copilot" + ``` + + Si vous ne voyez rien, cela signifie que vous n'avez pas encore installé ces extensions. Exécutez la commande suivante pour installer les extensions. + + ```bash + code --install-extension "github.copilot" --force && code --install-extension "github.copilot-chat" --force + ``` + +### Configurer les Serveurs MCP + +1. Assurez-vous que Docker Desktop est en cours d'exécution si vous utilisez VS Code sur votre machine locale. +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les paramètres du serveur MCP. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/.vscode/. \ + $REPOSITORY_ROOT/.vscode/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/* ` + -Destination $REPOSITORY_ROOT/.vscode/ -Recurse -Force + ``` + +1. Ouvrez la Palette de Commandes en tapant F1 ou `Ctrl`+`Shift`+`P` sur Windows ou `Cmd`+`Shift`+`P` sur Mac OS, et recherchez `MCP: List Servers`. +1. Choisissez `context7` puis cliquez sur `Start Server`. +1. Choisissez `awesome-copilot` puis cliquez sur `Start Server`. + +## Vérifier le Mode Agent GitHub Copilot + +1. Cliquez sur l'icône GitHub Copilot en haut de GitHub Codespace ou VS Code et ouvrez la fenêtre GitHub Copilot. + + ![Ouvrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Si on vous demande de vous connecter ou de vous inscrire, faites-le. C'est gratuit. +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot. + + ![Mode Agent GitHub Copilot](../../../docs/images/setup-03.png) + +1. Sélectionnez le modèle soit `GPT-4.1` soit `Claude Sonnet 4`. + +## Configurer le Mode Bête + +1. Entrez `/mcp.awesome-copilot.get_search_prompt`, suivi de mots-clés comme "beast mode" + + Cela devrait afficher la liste des modes de chat bête. Entrez un prompt similaire à `4.1 Beast Chat Mode`. Ensuite, il sera sauvegardé sous le répertoire `.github/chatmodes`. + +1. Choisissez le mode `4.1-Beast` au lieu du mode `Agent`. Il changera automatiquement le LLM vers `GPT 4.1`. + +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les paramètres de l'espace de travail. + + ```bash + # bash/zsh + cp $REPOSITORY_ROOT/docs/.vscode/settings.json \ + $REPOSITORY_ROOT/.vscode/settings.json + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json ` + -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force + ``` + +## Préparer les Instructions Personnalisées + +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les instructions personnalisées. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/setup/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/setup/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +## Analyser le Document d'Exigences Produit (PRD) et Concevoir l'API + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Ajoutez [`product-requirements.md`](../product-requirements.md) à GitHub Copilot. +1. Entrez l'invite comme suit pour que l'Agent GitHub Copilot génère un document OpenAPI pour vous. Ce document OpenAPI sera la base de toute votre application. + + ```text + Voici le PRD pour vous. Lisez attentivement l'ensemble du PRD et faites ce qui suit pour moi. + + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Générez un document OpenAPI au format YAML. + - Le document OpenAPI doit capturer tous les points de terminaison API, paramètres et charges utiles de requête/réponse. + - Supposez que le serveur API est `http://localhost:8080` et l'URL de base est `/api`. + - Enregistrez-le dans le fichier `openapi.yaml` à la racine du dépôt. + ``` + +1. Vérifiez que le fichier `openapi.yaml` est généré à la racine du dépôt. +1. Cliquez sur le bouton `[keep]` de GitHub Copilot pour prendre le fichier `openapi.yaml`. + +--- + +OK. Vous avez terminé l'étape "Environnement de Développement". Passons à [ÉTAPE 01: Développement Backend Python](./01-python.md). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/01-python.md b/localisation/fr-fr/docs/01-python.md new file mode 100644 index 0000000..ba7898c --- /dev/null +++ b/localisation/fr-fr/docs/01-python.md @@ -0,0 +1,123 @@ +# 01: Développement Backend Python + +## Scénario + +Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Le département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels. + +En tant que développeur Python, vous allez construire une application backend Python en utilisant FastAPI. Pour l'instant, vous utilisez la fonctionnalité en mémoire de SQLite. + +## Prérequis + +Consultez le document [README](../README.md) pour la préparation. + +## Commencer + +- [Vérifier le Mode Agent GitHub Copilot](#vérifier-le-mode-agent-github-copilot) +- [Préparer les Instructions Personnalisées](#préparer-les-instructions-personnalisées) +- [Préparer l'Environnement Virtuel](#préparer-lenvironnement-virtuel) +- [Construire l'Application Backend FastAPI](#construire-lapplication-backend-fastapi) + +### Vérifier le Mode Agent GitHub Copilot + +1. Cliquez sur l'icône GitHub Copilot en haut de GitHub Codespace ou VS Code et ouvrez la fenêtre GitHub Copilot. + + ![Ouvrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Si on vous demande de vous connecter ou de vous inscrire, faites-le. C'est gratuit. +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot. + + ![Mode Agent GitHub Copilot](../../../docs/images/setup-03.png) + +1. Sélectionnez le modèle soit `GPT-4.1` soit `Claude Sonnet 4`. +1. Assurez-vous que vous avez configuré les [Serveurs MCP](./00-setup.md#configurer-les-serveurs-mcp). + +### Préparer les Instructions Personnalisées + +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les instructions personnalisées. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/python/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/python/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Préparer l'Environnement Virtuel + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Utilisez une invite comme ci-dessous pour préparer l'environnement virtuel pour le développement d'applications Python. + + ```text + J'aimerais écrire une application Python. Mais avant cela, j'ai besoin de configurer un environnement virtuel. Suivez les instructions ci-dessous. + + - Utilisez context7. + - Votre répertoire de travail est `python`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Utilisez `.venv` pour l'environnement virtuel. + - Utilisez `uv` comme gestionnaire de paquets Python. + ``` + +### Construire l'Application Backend FastAPI + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Ajoutez [`product-requirements.md`](../product-requirements.md) et [`openapi.yaml`](../openapi.yaml) à GitHub Copilot. +1. Utilisez une invite comme ci-dessous pour construire une application backend FastAPI. + + ```text + J'aimerais construire une application FastAPI comme API backend. Lisez attentivement l'ensemble du PRD et `openapi.yaml`. Ensuite, suivez les instructions ci-dessous. + + - Utilisez context7. + - Votre répertoire de travail est `python`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Utilisez FastAPI comme framework d'application API. + - Utilisez SQLite comme base de données. + - Utilisez `sns_api.db` comme nom de la base de données SQLite. + - La base de données doit toujours être initialisée à chaque démarrage de l'application. + - Utilisez `openapi.yaml` qui décrit tous les points de terminaison et le schéma de données. + - Utilisez le numéro de port `8000`. + - Assurez-vous d'autoriser CORS depuis partout. + - Le point d'entrée est `main.py`. + - L'application API doit rendre la page Swagger UI via un point de terminaison par défaut. + - L'application API doit rendre exactement le même document OpenAPI via un point de terminaison par défaut. + - N'ajoutez RIEN qui ne soit pas défini dans `openapi.yaml`. + - NE modifiez RIEN de ce qui est défini dans `openapi.yaml`. + ``` + +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. +1. Une fois l'application construite, vérifiez si elle est écrite correctement ou non. + + ```text + Exécutez l'application FastAPI et vérifiez si l'application fonctionne correctement. Vérifiez également que le point de terminaison OpenAPI rend exactement le même contenu que `openapi.yaml`. + + Si l'exécution de l'application échoue, analysez les problèmes et corrigez-les. + ``` + +1. Ouvrez un navigateur web et naviguez vers `http://localhost:8000`. +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +--- + +OK. Vous avez terminé l'étape "Python". Passons à [ÉTAPE 02: Développement Frontend JavaScript](./02-javascript.md). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/02-javascript.md b/localisation/fr-fr/docs/02-javascript.md new file mode 100644 index 0000000..e3f40d1 --- /dev/null +++ b/localisation/fr-fr/docs/02-javascript.md @@ -0,0 +1,169 @@ +# 02: Développement Frontend JavaScript + +## Scénario + +Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Le département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels. + +En tant que développeur JavaScript, vous allez construire une application frontend JavaScript en utilisant React qui communique avec l'application API backend Python. + +## Prérequis + +Consultez le document [README](../README.md) pour la préparation. + +## Commencer + +- [Vérifier le Mode Agent GitHub Copilot](#vérifier-le-mode-agent-github-copilot) +- [Préparer les Instructions Personnalisées](#préparer-les-instructions-personnalisées) +- [Préparer le Projet d'Application](#préparer-le-projet-dapplication) +- [Préparer le Serveur MCP Figma](#préparer-le-serveur-mcp-figma) +- [Générer les Composants UI depuis Figma](#générer-les-composants-ui-depuis-figma) +- [Exécuter l'Application Backend FastAPI](#exécuter-lapplication-backend-fastapi) +- [Construire l'Application Frontend React](#construire-lapplication-frontend-react) +- [Vérifier l'Application Frontend React](#vérifier-lapplication-frontend-react) + +### Vérifier le Mode Agent GitHub Copilot + +1. Cliquez sur l'icône GitHub Copilot en haut de GitHub Codespace ou VS Code et ouvrez la fenêtre GitHub Copilot. + + ![Ouvrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Si on vous demande de vous connecter ou de vous inscrire, faites-le. C'est gratuit. +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot. + + ![Mode Agent GitHub Copilot](../../../docs/images/setup-03.png) + +1. Sélectionnez le modèle soit `GPT-4.1` soit `Claude Sonnet 4`. +1. Assurez-vous que vous avez configuré les [Serveurs MCP](./00-setup.md#configurer-les-serveurs-mcp). + +### Préparer les Instructions Personnalisées + +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les instructions personnalisées. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/javascript/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/javascript/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Préparer le Projet d'Application + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Utilisez une invite comme ci-dessous pour échafauder un projet d'application web React. + + ```text + J'aimerais échafauder une application web React. Suivez les instructions ci-dessous. + + - Assurez-vous que c'est l'application web, pas l'application mobile. + - Votre répertoire de travail est `javascript`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Utilisez ViteJS comme framework d'application frontend. + - Utilisez les paramètres par défaut lors de l'initialisation du projet. + - Utilisez `SimpleSocialMediaApplication` comme nom du projet lors de l'initialisation. + - Utilisez le numéro de port `3000`. + - Initialisez seulement le projet. N'allez PAS plus loin. + ``` + +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +### Préparer le Serveur MCP Figma + +1. Assurez-vous que vous avez configuré les [Serveurs MCP](./00-setup.md#configurer-les-serveurs-mcp). +1. Obtenez le jeton d'accès personnel (PAT) depuis [Figma](https://www.figma.com/). +1. Ouvrez la Palette de Commandes en tapant F1 ou `Ctrl`+`Shift`+`P` sur Windows ou `Cmd`+`Shift`+`P` sur Mac OS, et recherchez `MCP: List Servers`. +1. Choisissez `Framelink Figma MCP` puis cliquez sur `Start Server`. +1. Entrez le PAT que vous avez obtenu de Figma. + +### Générer les Composants UI depuis Figma + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que vous exécutez le serveur MCP Figma. +1. Copiez le [modèle de conception Figma](https://www.figma.com/community/file/1495954632647006209) vers votre compte. + + ![Page de modèle de conception Figma](../../../docs/images/javascript-01.png) + +1. Faites un clic droit sur chaque section - `Home`, `Search`, `Post Details`, `Post Modal` et `Name Input Modal` 👉 Sélectionnez `Copy/Paste as` 👉 Sélectionnez `Copy link to selection` pour obtenir le lien vers chaque section. Notez les cinq liens. + +### Exécuter l'Application Backend FastAPI + +1. Assurez-vous que l'application backend FastAPI est lancée et en cours d'exécution. + + ```text + Exécutez l'API backend FastAPI, qui se trouve dans le répertoire `python`. + ``` + + > **NOTE**: Vous pouvez utiliser l'application d'exemple [`complete/python`](../complete/python/) à la place. + +1. Si vous utilisez GitHub Codespaces, assurez-vous que le numéro de port `8000` est défini sur `public` au lieu de `private`. Sinon, vous obtiendrez l'erreur `401` lors de l'accès depuis l'application frontend. + +### Construire l'Application Frontend React + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Assurez-vous que vous avez tous les liens de section Figma des 5 récupérés de la [section précédente](#generer-les-composants-ui-depuis-figma). +1. Ajoutez [`product-requirements.md`](../product-requirements.md) et [`openapi.yaml`](../openapi.yaml) à GitHub Copilot. +1. Utilisez une invite comme ci-dessous pour construire l'application basée sur les exigences et le document OpenAPI. + + ```text + J'aimerais construire une application web React. Suivez les instructions ci-dessous. + + - Votre répertoire de travail est `javascript`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Il y a une application API backend qui fonctionne sur `http://localhost:8000`. + - Utilisez `openapi.yaml` qui décrit tous les points de terminaison et le schéma de données. + - Utilisez le numéro de port `3000`. + - Créez tous les composants UI définis dans ce lien : {{FIGMA_SECTION_LINK}}. + - N'ajoutez RIEN qui ne soit pas lié aux composants UI. + - N'ajoutez RIEN qui ne soit pas défini dans `openapi.yaml`. + - NE modifiez RIEN de ce qui est défini dans `openapi.yaml`. + - Donnez une indication visuelle quand l'API backend est indisponible ou inaccessible pour quelque raison que ce soit. + ``` + +1. Répétez quatre fois de plus pour les quatre autres liens de conception Figma. +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +### Vérifier l'Application Frontend React + +1. Assurez-vous que l'application backend FastAPI est lancée et en cours d'exécution. + + ```text + Exécutez l'API backend FastAPI, qui se trouve dans le répertoire `python`. + ``` + +1. Vérifiez si elle est construite correctement ou non. + + ```text + Exécutez l'application React et vérifiez si l'application fonctionne correctement. + + Si l'exécution de l'application échoue, analysez les problèmes et corrigez-les. + ``` + +1. Ouvrez un navigateur web et naviguez vers `http://localhost:3000`. +1. Vérifiez si les applications frontend et backend fonctionnent correctement. +1. Cliquez sur le bouton `[keep]` de GitHub Copilot pour prendre les modifications. + +--- + +OK. Vous avez terminé l'étape "JavaScript". Passons à [ÉTAPE 03: Migration Java depuis Python](./03-java.md). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/03-java.md b/localisation/fr-fr/docs/03-java.md new file mode 100644 index 0000000..a0e4f24 --- /dev/null +++ b/localisation/fr-fr/docs/03-java.md @@ -0,0 +1,164 @@ +# 03: Migration Java depuis Python + +## Scénario + +Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Le département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels. + +Parce qu'un développeur Python a quitté l'entreprise, les parties prenantes ont demandé de migrer l'application API backend Python existante vers Java, en utilisant Spring Boot. + +Maintenant, en tant que développeur Java, vous devez migrer l'application FastAPI existante vers Spring Boot. Vous avez très peu de connaissances de Python et FastAPI, au fait. + +## Prérequis + +Consultez le document [README](../README.md) pour la préparation. + +## Commencer + +- [Vérifier le Mode Agent GitHub Copilot](#vérifier-le-mode-agent-github-copilot) +- [Préparer les Instructions Personnalisées](#préparer-les-instructions-personnalisées) +- [Préparer le Projet Spring Boot](#préparer-le-projet-spring-boot) +- [Migrer l'Application API FastAPI](#migrer-lapplication-api-fastapi) +- [Vérifier l'Application Backend Spring Boot](#vérifier-lapplication-backend-spring-boot) + +### Vérifier le Mode Agent GitHub Copilot + +1. Cliquez sur l'icône GitHub Copilot en haut de GitHub Codespace ou VS Code et ouvrez la fenêtre GitHub Copilot. + + ![Ouvrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Si on vous demande de vous connecter ou de vous inscrire, faites-le. C'est gratuit. +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot. + + ![Mode Agent GitHub Copilot](../../../docs/images/setup-03.png) + +1. Sélectionnez le modèle soit `GPT-4.1` soit `Claude Sonnet 4`. +1. Assurez-vous que vous avez configuré les [Serveurs MCP](./00-setup.md#configurer-les-serveurs-mcp). + +### Préparer les Instructions Personnalisées + +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les instructions personnalisées. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/java/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/java/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Préparer le Projet Spring Boot + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Installez Spring Boot CLI. + + ```bash + sdk install springboot + ``` + +1. Utilisez une invite comme ci-dessous pour échafauder un projet d'application Spring Boot. + + ```text + J'aimerais échafauder une application Spring Boot. Suivez les instructions ci-dessous. + + - Utilisez context7. + - Votre répertoire de travail est `java`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Utilisez Spring Boot CLI pour créer le projet d'application Spring Boot. + - Utilisez Gradle comme gestionnaire de paquets Java. + - Utilisez le nom de paquet `com.contoso.socialapp`. + - Utilisez l'ID d'artefact `socialapp`. + - Utilisez l'ID de groupe `com.contoso`. + - Utilisez le type de paquet `jar`. + - Utilisez la version OpenJDK `21`. + - Ajoutez les dépendances - `Spring Web`, `Spring Boot Actuator` et `Lombok`. + - Utilisez le numéro de port `8080`. + - Assurez-vous d'autoriser CORS depuis partout. + - Construisez l'application Spring Boot et vérifiez si l'application est construite correctement. + - Exécutez cette application Spring Boot et vérifiez si l'application fonctionne correctement. + - Si la construction ou l'exécution de l'application échoue, analysez les problèmes et corrigez-les. + ``` + +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +### Migrer l'Application API FastAPI + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Ajoutez [`product-requirements.md`](../product-requirements.md) et [`openapi.yaml`](../openapi.yaml) à GitHub Copilot. +1. Utilisez une invite comme ci-dessous pour migrer FastAPI vers Spring Boot. + + ```text + Maintenant, nous migrons l'application API basée sur FastAPI existante vers une application API Spring Boot. Suivez les instructions ci-dessous pour la migration. + + - Utilisez context7. + - L'application FastAPI existante se trouve dans `python`. + - Votre répertoire de travail est `java/socialapp`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Analysez la structure de l'application FastAPI existante. + - Migrez tous les points de terminaison. Les deux points de terminaison correspondants doivent être exactement identiques l'un à l'autre. + - Utilisez SQLite comme base de données. + - Utilisez `sns_api.db` comme nom de la base de données SQLite. + - La base de données doit toujours être initialisée à chaque démarrage de l'application. + - Utilisez `openapi.yaml` qui décrit tous les points de terminaison et le schéma de données. + - L'application API doit rendre la page Swagger UI via un point de terminaison par défaut. + - L'application API doit rendre exactement le même document OpenAPI via un point de terminaison par défaut. + - N'ajoutez RIEN qui ne soit pas défini dans `openapi.yaml`. + - NE modifiez RIEN de ce qui est défini dans `openapi.yaml`. + - Si nécessaire, ajoutez plus de paquets pour OpenAPI et Swagger UI. + ``` + +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. +1. Une fois la migration terminée, utilisez une invite comme ci-dessous pour vérifier le résultat de la migration. + + ```text + J'aimerais construire l'application Spring Boot. Suivez les instructions. + + - Utilisez context7. + - Construisez l'application Spring Boot et vérifiez si l'application est construite correctement. + - Si la construction de l'application échoue, analysez les problèmes et corrigez-les. + ``` + + > **NOTE**: + > + > - Jusqu'à ce que la construction réussisse, itérez cette étape. + > - Si la construction continue d'échouer, vérifiez les messages d'erreur et demandez-leur à l'Agent GitHub Copilot de les déchiffrer. + +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +### Vérifier l'Application Backend Spring Boot + +1. Une fois l'application construite, vérifiez si elle est écrite correctement ou non. + + ```text + Exécutez l'application Spring Boot et vérifiez si l'application fonctionne correctement en vérifiant tous les points de terminaison. Vérifiez également que le point de terminaison OpenAPI rend exactement le même contenu que `openapi.yaml`. + + Si l'exécution de l'application échoue, analysez les problèmes et corrigez-les. Utilisez context7. + ``` + +1. Ouvrez un navigateur web et naviguez vers `http://localhost:8080`. +1. Cliquez sur le bouton ![l'image du bouton "keep"](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +--- + +OK. Vous avez terminé l'étape "Java". Passons à [ÉTAPE 04: Migration .NET depuis JavaScript](./04-dotnet.md). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/04-dotnet.md b/localisation/fr-fr/docs/04-dotnet.md new file mode 100644 index 0000000..564edfd --- /dev/null +++ b/localisation/fr-fr/docs/04-dotnet.md @@ -0,0 +1,177 @@ +# 04: Migration .NET depuis JavaScript + +## Scénario + +Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Le département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels. + +Ils ont déjà une application frontend écrite en JavaScript, plus spécifiquement en React. Cependant, tout d'un coup, ils ont envoyé de nouvelles exigences pour redévelopper l'application frontend en utilisant .NET, spécialement en Blazor. + +Maintenant, en tant que développeur .NET, vous devez migrer l'application React existante vers Blazor. Vous avez très peu de connaissances de JavaScript et React, au fait. + +## Prérequis + +Consultez le document [README](../README.md) pour la préparation. + +## Commencer + +- [Vérifier le Mode Agent GitHub Copilot](#vérifier-le-mode-agent-github-copilot) +- [Préparer les Instructions Personnalisées](#préparer-les-instructions-personnalisées) +- [Préparer le Projet d'Application Web Blazor](#préparer-le-projet-dapplication-web-blazor) +- [Exécuter l'Application Backend Spring Boot](#exécuter-lapplication-backend-spring-boot) +- [Migrer l'Application Web React](#migrer-lapplication-web-react) +- [Vérifier l'Application Frontend Blazor](#vérifier-lapplication-frontend-blazor) + +### Vérifier le Mode Agent GitHub Copilot + +1. Cliquez sur l'icône GitHub Copilot en haut de GitHub Codespace ou VS Code et ouvrez la fenêtre GitHub Copilot. + + ![Ouvrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Si on vous demande de vous connecter ou de vous inscrire, faites-le. C'est gratuit. +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot. + + ![Mode Agent GitHub Copilot](../../../docs/images/setup-03.png) + +1. Sélectionnez le modèle soit `GPT-4.1` soit `Claude Sonnet 4`. +1. Assurez-vous que vous avez configuré les [Serveurs MCP](./00-setup.md#configurer-les-serveurs-mcp). + +### Préparer les Instructions Personnalisées + +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les instructions personnalisées. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/dotnet/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/dotnet/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Préparer le Projet d'Application Web Blazor + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Utilisez une invite comme ci-dessous pour échafauder un projet d'application web Blazor. + + ```text + J'aimerais échafauder une application web Blazor. Suivez les instructions ci-dessous. + + - Utilisez context7. + - Votre répertoire de travail est `dotnet`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Montrez-moi la liste des projets .NET liés à Blazor et demandez-moi de choisir. + - Générez un projet Blazor. + - Utilisez le nom de projet `Contoso.BlazorApp`. + - Mettez à jour `launchSettings.json` pour changer le numéro de port à `3031` pour HTTP, `43031` pour HTTPS. + - Créez une solution, `ContosoWebApp`, et ajoutez le projet Blazor dans cette solution. + - Construisez l'application Blazor et vérifiez si l'application est construite correctement. + - Exécutez cette application Blazor et vérifiez si l'application fonctionne correctement. + - Si la construction ou l'exécution de l'application échoue, analysez les problèmes et corrigez-les. + ``` + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +### Exécuter l'Application Backend Spring Boot + +1. Assurez-vous que l'application backend Spring Boot est lancée et en cours d'exécution. + + ```text + Exécutez l'API backend Spring Boot, qui se trouve dans le répertoire `java`. + ``` + + > **NOTE**: Vous pouvez utiliser l'application d'exemple [`complete/java`](../complete/java/) à la place. + +1. Si vous utilisez GitHub Codespaces, assurez-vous que le numéro de port `8080` est défini sur `public` au lieu de `private`. Sinon, vous obtiendrez l'erreur `401` lors de l'accès depuis l'application frontend. + +### Migrer l'Application Web React + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Assurez-vous que le serveur MCP `context7` est en cours d'exécution. +1. Utilisez une invite comme ci-dessous pour migrer React vers Blazor. + + ```text + Maintenant, nous migrons l'application web basée sur React existante vers une application web Blazor. Suivez les instructions ci-dessous pour la migration. + + - Utilisez context7. + - L'application React existante se trouve dans `javascript`. + - Votre répertoire de travail est `dotnet/Contoso.BlazorApp`. + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Il y a une application API backend qui fonctionne sur `http://localhost:8080`. + - Analysez la structure de l'application React existante. + - Migrez tous les composants React vers Blazor. Les deux composants correspondants doivent être aussi exactement proches l'un de l'autre que possible. + - Migrez tous les éléments CSS nécessaires de React vers Blazor. + - Lors de la migration des éléments JavaScript de React vers Blazor, maximisez l'utilisation des fonctionnalités natives de Blazor autant que possible. Si vous devez utiliser JavaScript, utilisez les fonctionnalités JSInterop de Blazor. + - Si nécessaire, ajoutez des packages NuGet compatibles avec .NET 9. + ``` + +1. Une fois la migration terminée, utilisez une invite comme ci-dessous pour vérifier le résultat de la migration. + + ```text + J'aimerais construire l'application Blazor. Suivez les instructions. + + - Utilisez context7. + - Construisez l'application Blazor et vérifiez si l'application est construite correctement. + - Si la construction de l'application échoue, analysez les problèmes et corrigez-les. + ``` + + > **NOTE**: + > + > - Jusqu'à ce que la construction réussisse, itérez cette étape. + > - Si la construction continue d'échouer, vérifiez les messages d'erreur et demandez-leur à l'Agent GitHub Copilot de les déchiffrer. + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. +1. Une fois la construction réussie, utilisez une invite comme ci-dessous pour vérifier le résultat de la migration. + + ```text + J'aimerais exécuter l'application Blazor. Suivez les instructions. + + - Utilisez context7. + - Exécutez cette application Blazor et vérifiez si l'application fonctionne correctement. + - Ignorez l'erreur de connexion de l'application API backend à ce stade. + - Si l'exécution de l'application échoue, analysez les problèmes et corrigez-les. + ``` + +### Vérifier l'Application Frontend Blazor + +1. Assurez-vous que l'application backend Spring Boot est lancée et en cours d'exécution. + + ```text + Exécutez l'API backend Spring Boot, qui se trouve dans le répertoire `java`. + ``` + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. +1. Vérifiez si elle est construite correctement ou non. + + ```text + Exécutez l'application Blazor et vérifiez si l'application fonctionne correctement. + + Si l'exécution de l'application échoue, analysez les problèmes et corrigez-les. + ``` + +1. Ouvrez un navigateur web et naviguez vers `http://localhost:3031`. +1. Vérifiez si les applications frontend et backend fonctionnent correctement. +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +--- + +OK. Vous avez terminé l'étape ".NET". Passons à [ÉTAPE 05: Conteneurisation](./05-containerization.md). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/05-containerization.md b/localisation/fr-fr/docs/05-containerization.md new file mode 100644 index 0000000..f2a21f4 --- /dev/null +++ b/localisation/fr-fr/docs/05-containerization.md @@ -0,0 +1,193 @@ +# 05: Conteneurisation + +## Scénario + +Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Le département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels. + +Ils ont maintenant à la fois une application backend basée sur Java et une application frontend basée sur .NET. Ils veulent les conteneuriser pour qu'elles puissent être déployées sur n'importe quelle plateforme. + +Maintenant, en tant qu'ingénieur DevOps, vous devez conteneuriser les deux applications. + +## Prérequis + +Consultez le document [README](../README.md) pour la préparation. + +## Commencer + +- [Vérifier le Mode Agent GitHub Copilot](#vérifier-le-mode-agent-github-copilot) +- [Préparer les Instructions Personnalisées](#préparer-les-instructions-personnalisées) +- [Conteneuriser l'Application Java](#conteneuriser-lapplication-java) +- [Conteneuriser l'Application .NET](#conteneuriser-lapplication-net) +- [Orchestrer les Conteneurs](#orchestrer-les-conteneurs) + +### Vérifier le Mode Agent GitHub Copilot + +1. Cliquez sur l'icône GitHub Copilot en haut de GitHub Codespace ou VS Code et ouvrez la fenêtre GitHub Copilot. + + ![Ouvrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Si on vous demande de vous connecter ou de vous inscrire, faites-le. C'est gratuit. +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot. + + ![Mode Agent GitHub Copilot](../../../docs/images/setup-03.png) + +1. Sélectionnez le modèle soit `GPT-4.1` soit `Claude Sonnet 4`. +1. Assurez-vous que vous avez configuré les [Serveurs MCP](./00-setup.md#configurer-les-serveurs-mcp). + +### Préparer les Instructions Personnalisées + +1. Définissez la variable d'environnement de `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copiez les instructions personnalisées. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/containerization/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/containerization/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Conteneuriser l'Application Java + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Utilisez une invite comme ci-dessous pour construire une image conteneur pour l'application Java. + + ```text + J'aimerais construire une image conteneur d'une application Java. Suivez les instructions ci-dessous. + + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - L'application Java se trouve dans `java/socialapp`. + - Votre répertoire de travail est la racine du dépôt. + - Créez un Dockerfile, `Dockerfile.java`. + - Utilisez Microsoft OpenJDK 21. + - Utilisez l'approche de construction multi-étapes. + - Extrayez JRE de JDK. + - Utilisez le numéro de port cible `8080` pour l'image conteneur. + - Ajoutez les deux variables d'environnement, `CODESPACE_NAME` et `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` de l'hôte à l'image conteneur. + - Créez un fichier de base de données SQLite, `sns_api.db`, dans l'image conteneur. NE copiez PAS le fichier de l'hôte. + ``` + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +1. Une fois `Dockerfile.java` créé, construisez l'image conteneur avec l'invite suivante. + + ```text + Utilisez `Dockerfile.java` et construisez une image conteneur. + + - Utilisez `contoso-backend` comme nom d'image conteneur. + - Utilisez `latest` comme tag d'image conteneur. + - Vérifiez si l'image conteneur est construite correctement. + - Si la construction échoue, analysez les problèmes et corrigez-les. + ``` + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +1. Une fois la construction réussie, exécutez l'image conteneur avec l'invite suivante. + + ```text + Utilisez l'image conteneur qui vient d'être construite, exécutez un conteneur et vérifiez si l'application fonctionne correctement. + + - Utilisez le port hôte `8080`. + - Les deux valeurs `CODESPACE_NAME` et `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` doivent être celles de GitHub Codespaces. + ``` + +### Conteneuriser l'Application .NET + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Utilisez une invite comme ci-dessous pour construire une image conteneur pour l'application .NET. + + ```text + J'aimerais construire une image conteneur d'une application .NET. Suivez les instructions ci-dessous. + + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - L'application .NET se trouve dans `dotnet`. + - Votre répertoire de travail est la racine du dépôt. + - Créez un Dockerfile, `Dockerfile.dotnet`. + - Utilisez .NET 9. + - Utilisez l'approche de construction multi-étapes. + - Utilisez le numéro de port cible `8080` pour l'image conteneur. + - Ajoutez la variable d'environnement, `ApiSettings__BaseUrl` au conteneur. Elle doit pointer vers l'application Java, `http://localhost:8080/api`. + ``` + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +1. Une fois `Dockerfile.dotnet` créé, construisez l'image conteneur avec l'invite suivante. + + ```text + Utilisez `Dockerfile.dotnet` et construisez une image conteneur. + + - Utilisez `contoso-frontend` comme nom d'image conteneur. + - Utilisez `latest` comme tag d'image conteneur. + - Vérifiez si l'image conteneur est construite correctement. + - Si la construction échoue, analysez les problèmes et corrigez-les. + ``` + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +1. Une fois la construction réussie, exécutez l'image conteneur avec l'invite suivante. + + ```text + Utilisez l'image conteneur qui vient d'être construite, exécutez un conteneur et vérifiez si l'application fonctionne correctement. + + - Utilisez le port hôte `3030`. + - Passez la variable d'environnement `ApiSettings__BaseUrl` la valeur de `http://localhost:8080/api`. + ``` + +1. Assurez-vous que les applications frontend et backend ne communiquent PAS entre elles car elles ne se connaissent pas encore. Exécutez l'invite comme ci-dessous. + + ```text + Supprimez les deux conteneurs Java et .NET et leurs images conteneur respectives. + ``` + +### Orchestrer les Conteneurs + +1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle `Claude Sonnet 4` ou `GPT-4.1`. +1. Utilisez une invite comme ci-dessous pour construire un fichier Docker Compose. + + ```text + J'aimerais créer un fichier Docker Compose. Suivez les instructions ci-dessous. + + - Identifiez d'abord toutes les étapes que vous allez effectuer. + - Votre répertoire de travail est la racine du dépôt. + - Utilisez `Dockerfile.java` comme application backend. + - Utilisez `Dockerfile.dotnet` comme application frontend. + - Créez `compose.yaml` comme fichier Docker Compose. + - Utilisez `contoso` comme nom de réseau. + - Utilisez `contoso-backend` comme nom de conteneur de l'application Java. Son port cible est 8080, et le port hôte est 8080. + - Utilisez `contoso-frontend` comme nom de conteneur de l'application .NET. Son port cible est 8080, et le port hôte est 3030. + - Ajoutez les deux variables d'environnement, `CODESPACE_NAME` et `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` de l'hôte au conteneur Java. + - Ajoutez la variable d'environnement, `ApiSettings__BaseUrl` au conteneur .NET. Elle doit pointer vers le `/api` de l'application Java. + ``` + +1. Cliquez sur le bouton ![l'image du bouton keep](https://img.shields.io/badge/keep-blue) de GitHub Copilot pour prendre les modifications. + +1. Une fois le fichier `compose.yaml` créé, exécutez-le et vérifiez si les deux applications fonctionnent correctement. + + ```text + Exécutez le fichier Docker compose et vérifiez si toutes les applications fonctionnent correctement. + ``` + +1. Ouvrez un navigateur web et naviguez vers `http://localhost:3030`, et vérifiez si les applications sont en marche et fonctionnent correctement. + +--- + +Félicitations ! 🎉 Vous avez terminé toutes les sessions d'atelier avec succès ! + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/README.md b/localisation/fr-fr/docs/README.md new file mode 100644 index 0000000..8ebd510 --- /dev/null +++ b/localisation/fr-fr/docs/README.md @@ -0,0 +1,16 @@ +# Instructions d'Apprentissage Auto-Rythmé + +Voici les matériaux d'instructions d'apprentissage auto-rythmé. Utilisez-les et construisez des applications ! + +| Étape | Lien | +|-------------------------------------|----------------------------------------------------| +| 00: Environnement de Développement | [00-setup.md](./00-setup.md) | +| 01: Développement Backend Python | [01-python.md](./01-python.md) | +| 02: Développement Frontend JavaScript | [02-javascript.md](./02-javascript.md) | +| 03: Migration Java depuis Python | [03-java.md](./03-java.md) | +| 04: Migration .NET depuis JavaScript | [04-dotnet.md](./04-dotnet.md) | +| 05: Conteneurisation | [05-containerization.md](./05-containerization.md) | + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/custom-instructions/containerization/copilot-instructions.md b/localisation/fr-fr/docs/custom-instructions/containerization/copilot-instructions.md new file mode 100644 index 0000000..dc88a14 --- /dev/null +++ b/localisation/fr-fr/docs/custom-instructions/containerization/copilot-instructions.md @@ -0,0 +1,38 @@ +# Règles DevOps + +Vous êtes un ingénieur DevOps senior et un expert en conteneurisation, Docker, Dockerfile, Docker Compose et Kubernetes. + +## Directives Générales + +### Principes de Base + +- Utilisez l'anglais pour tout le code, la documentation et les commentaires. +- Priorisez un code modulaire, réutilisable et évolutif. +- Suivez les conventions de nommage : + - camelCase pour les variables, fonctions et noms de méthodes. + - PascalCase pour les noms de classes. + - snake_case pour les noms de fichiers et structures de répertoires. + - UPPER_CASE pour les variables d'environnement. +- Évitez les valeurs codées en dur ; utilisez des variables d'environnement ou des fichiers de configuration. +- Appliquez les principes d'Infrastructure-as-Code (IaC) quand possible. +- Considérez toujours le principe du moindre privilège dans les accès et permissions. + +### Principes DevOps + +- Automatisez les tâches répétitives et évitez les interventions manuelles. +- Écrivez des pipelines CI/CD modulaires et réutilisables. +- Utilisez des applications conteneurisées avec des registres sécurisés. +- Gérez les secrets en utilisant Azure Key Vault ou d'autres solutions de gestion de secrets. +- Construisez des systèmes résilients en appliquant des stratégies de déploiement blue-green ou canary. + +## Scénarios Spécifiques + +### Docker et Docker Compose + +- Utilisez des constructions multi-étapes dans les Dockerfiles pour optimiser la taille d'image. +- Assurez-vous que les Dockerfiles sont idempotents et peuvent être construits plusieurs fois sans effets de bord. +- Utilisez Docker Compose pour les environnements de développement local et de test. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/custom-instructions/dotnet/copilot-instructions.md b/localisation/fr-fr/docs/custom-instructions/dotnet/copilot-instructions.md new file mode 100644 index 0000000..1b9c8d1 --- /dev/null +++ b/localisation/fr-fr/docs/custom-instructions/dotnet/copilot-instructions.md @@ -0,0 +1,85 @@ +# Règles de Développement .NET + +Vous êtes un développeur .NET senior et un expert en C#, ASP.NET Core, Minimal API, Blazor et .NET Aspire. + +## Style et Structure de Code + +- Écrivez du code C# concis et idiomatique avec des exemples précis. +- Suivez les conventions et meilleures pratiques de .NET et ASP.NET Core. +- Utilisez les patterns de programmation orientée objet et fonctionnelle selon le cas. +- Préférez LINQ et les expressions lambda pour les opérations de collection. +- Utilisez des noms de variables et méthodes descriptifs (ex. 'IsUserSignedIn', 'CalculateTotal'). +- Structurez les fichiers selon les conventions .NET (Controllers, Models, Services, etc.). +- Utilisez async/await pour les opérations asynchrones partout où possible pour améliorer les performances et la réactivité. + +## Conventions de Nommage + +- Utilisez PascalCase pour les noms de classes, méthodes et membres publics. +- Utilisez camelCase pour les variables locales et champs privés. +- Utilisez UPPERCASE pour les constantes. +- Préfixez les noms d'interface avec "I" (ex. 'IUserService'). + +## Utilisation de C# et .NET + +- Utilisez les fonctionnalités C# 10+ quand approprié (ex. types record, pattern matching, assignation null-coalescing). +- Tirez parti des fonctionnalités et middleware intégrés d'ASP.NET Core. +- Utilisez Entity Framework Core efficacement pour les opérations de base de données. + +## Syntaxe et Formatage + +- Suivez les Conventions de Codage C# (https://docs.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions) +- Utilisez la syntaxe expressive de C# (ex. opérateurs conditionnels null, interpolation de chaînes) +- Utilisez 'var' pour le typage implicite quand le type est évident. + +## Gestion d'Erreurs et Validation + +- Utilisez les exceptions pour les cas exceptionnels, pas pour le flux de contrôle. +- Implémentez une journalisation d'erreurs appropriée en utilisant la journalisation .NET intégrée ou un logger tiers. +- Utilisez Data Annotations ou Fluent Validation pour la validation de modèle. +- Implémentez un middleware global de gestion d'exceptions. +- Retournez des codes de statut HTTP appropriés et des réponses d'erreur cohérentes. + +## Conception d'API + +- Suivez les principes de conception d'API RESTful. +- Utilisez le routage par attributs dans les contrôleurs. +- Implémentez la versioning pour votre API. +- Utilisez des filtres d'action pour les préoccupations transversales. + +## Optimisation des Performances + +- Utilisez la programmation asynchrone avec async/await pour les opérations liées aux E/S. +- Implémentez des stratégies de mise en cache en utilisant IMemoryCache ou la mise en cache distribuée. +- Utilisez des requêtes LINQ efficaces et évitez les problèmes de requête N+1. +- Implémentez la pagination pour les grands ensembles de données. + +## Conventions Clés + +- Utilisez l'Injection de Dépendances pour un couplage lâche et la testabilité. +- Implémentez le pattern repository ou utilisez Entity Framework Core directement, selon la complexité. +- Utilisez AutoMapper pour le mapping objet-vers-objet si nécessaire. +- Implémentez les tâches en arrière-plan en utilisant IHostedService ou BackgroundService. + +## Tests + +- Écrivez des tests unitaires en utilisant xUnit, NUnit, ou MSTest. +- Utilisez Moq ou NSubstitute pour simuler les dépendances. +- Implémentez des tests d'intégration pour les points de terminaison d'API. + +## Sécurité + +- Utilisez le middleware d'Authentification et d'Autorisation. +- Implémentez l'authentification JWT pour l'authentification d'API sans état. +- Utilisez HTTPS et forcez SSL. +- Implémentez des politiques CORS appropriées. + +## Documentation API + +- Utilisez le package OpenAPI intégré pour la documentation d'API. +- Fournissez des commentaires XML pour les contrôleurs et modèles pour améliorer la documentation Swagger. + +Suivez la documentation officielle Microsoft et les guides ASP.NET Core pour les meilleures pratiques en routage, contrôleurs, modèles et autres composants d'API. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/custom-instructions/java/copilot-instructions.md b/localisation/fr-fr/docs/custom-instructions/java/copilot-instructions.md new file mode 100644 index 0000000..837b332 --- /dev/null +++ b/localisation/fr-fr/docs/custom-instructions/java/copilot-instructions.md @@ -0,0 +1,96 @@ +# Règles de Développement Java + +Vous êtes un développeur Java senior et un expert en programmation Java, Spring Boot, Spring Boot CLI, Spring Framework, Maven, Gradle, JUnit, et technologies Java associées. + +## Style et Structure de Code + +- Écrivez du code Java propre, efficace et bien documenté avec des exemples Spring Boot précis. +- Utilisez les meilleures pratiques et conventions de Spring Boot dans tout votre code. +- Implémentez les patterns de conception d'API RESTful lors de la création de services web. +- Utilisez des noms de méthodes et de variables descriptifs suivant la convention camelCase. +- Structurez les applications Spring Boot : contrôleurs, services, dépôts, modèles, configurations. + +## Spécificités Spring Boot + +- Utilisez les starters Spring Boot pour une configuration rapide de projet et gestion des dépendances. +- Implémentez une utilisation appropriée des annotations (ex. @SpringBootApplication, @RestController, @Service). +- Utilisez efficacement les fonctionnalités d'auto-configuration de Spring Boot. +- Implémentez une gestion d'exceptions appropriée en utilisant @ControllerAdvice et @ExceptionHandler. + +## Conventions de Nommage + +- Utilisez PascalCase pour les noms de classes (ex. UserController, OrderService). +- Utilisez camelCase pour les noms de méthodes et variables (ex. findUserById, isOrderValid). +- Utilisez ALL_CAPS pour les constantes (ex. MAX_RETRY_ATTEMPTS, DEFAULT_PAGE_SIZE). + +## Utilisation de Java et Spring Boot + +- Utilisez les fonctionnalités Java 17 ou ultérieures quand applicable (ex. records, sealed classes, pattern matching). +- Tirez parti des fonctionnalités et meilleures pratiques de Spring Boot 3.x. +- Utilisez Spring Data JPA pour les opérations de base de données quand applicable. +- Implémentez une validation appropriée en utilisant Bean Validation (ex. @Valid, validateurs personnalisés). + +## Configuration et Propriétés + +- Utilisez application.properties ou application.yml pour la configuration. +- Implémentez des configurations spécifiques à l'environnement en utilisant les Profils Spring. +- Utilisez @ConfigurationProperties pour des propriétés de configuration type-safe. + +## Injection de Dépendances et IoC + +- Utilisez l'injection par constructeur plutôt que l'injection par champ pour une meilleure testabilité. +- Tirez parti du conteneur IoC de Spring pour gérer les cycles de vie des beans. + +## Tests + +- Écrivez des tests unitaires en utilisant JUnit 5 et Spring Boot Test. +- Utilisez MockMvc pour tester les couches web. +- Implémentez des tests d'intégration en utilisant @SpringBootTest. +- Utilisez @DataJpaTest pour les tests de couche de dépôt. + +## Performance et Évolutivité + +- Implémentez des stratégies de mise en cache en utilisant l'abstraction Spring Cache. +- Utilisez le traitement asynchrone avec @Async pour les opérations non bloquantes. +- Implémentez une indexation de base de données appropriée et l'optimisation des requêtes. + +## Sécurité + +- Implémentez Spring Security pour l'authentification et l'autorisation. +- Utilisez un encodage de mot de passe approprié (ex. BCrypt). +- Implémentez la configuration CORS quand nécessaire. + +## Journalisation et Monitoring + +- Utilisez SLF4J avec Logback pour la journalisation. +- Implémentez des niveaux de log appropriés (ERROR, WARN, INFO, DEBUG). +- Utilisez Spring Boot Actuator pour le monitoring d'application et les métriques. + +## Documentation API + +- Utilisez Springdoc OpenAPI (anciennement Swagger) pour la documentation API. + +## Accès aux Données et ORM + +- Utilisez Spring Data JPA pour les opérations de base de données. +- Implémentez des relations d'entités appropriées et la cascade. +- Utilisez les migrations de base de données avec des outils comme Flyway ou Liquibase. + +## Construction et Déploiement + +- Utilisez soit Maven soit Gradle pour la gestion des dépendances et les processus de construction. +- Gradle est préféré pour les nouveaux projets en raison de sa flexibilité et performance. +- Implémentez des profils appropriés pour différents environnements (dev, test, prod). +- Utilisez Docker pour la conteneurisation si applicable. + +## Suivez les meilleures pratiques pour : + +- La conception d'API RESTful (utilisation appropriée des méthodes HTTP, codes de statut, etc.). +- L'architecture microservices (si applicable). +- Le traitement asynchrone en utilisant @Async de Spring ou la programmation réactive avec Spring WebFlux. + +Adhérez aux principes SOLID et maintenez une forte cohésion et un faible couplage dans la conception de votre application Spring Boot. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/custom-instructions/javascript/copilot-instructions.md b/localisation/fr-fr/docs/custom-instructions/javascript/copilot-instructions.md new file mode 100644 index 0000000..29d4870 --- /dev/null +++ b/localisation/fr-fr/docs/custom-instructions/javascript/copilot-instructions.md @@ -0,0 +1,50 @@ +# Règles de Développement JavaScript + +Vous êtes un Développeur Front-End Senior et un Expert en ReactJS, NextJS, ViteJS, JavaScript, TypeScript, HTML, CSS et frameworks UI/UX modernes (ex. TailwindCSS, Shadcn, Radix). + +Vous êtes réfléchi, donnez des réponses nuancées, et êtes brillant en raisonnement. Vous fournissez avec soin des réponses précises, factuelles et réfléchies, et êtes un génie en raisonnement. + +## Principes Clés + +- Suivez les exigences de l'utilisateur avec attention et à la lettre. +- Pensez d'abord étape par étape - décrivez votre plan pour ce que vous allez construire en pseudocode, écrit en grand détail. +- Confirmez, puis écrivez le code ! +- Écrivez toujours un code correct, suivant les meilleures pratiques, le principe DRY (Don't Repeat Yourself), sans bugs, entièrement fonctionnel et qui marche, également aligné aux règles listées ci-dessous dans les Directives d'Implémentation de Code. +- Concentrez-vous sur un code facile et lisible, plutôt que performant. +- Implémentez entièrement toutes les fonctionnalités demandées. +- Ne laissez AUCUN todo, placeholder ou pièce manquante. +- Assurez-vous que le code est complet ! Vérifiez soigneusement qu'il est finalisé. +- Incluez tous les imports requis, et assurez-vous d'un nommage approprié des composants clés. +- Soyez concis et minimisez toute autre prose. +- Si vous pensez qu'il pourrait ne pas y avoir de réponse correcte, dites-le. +- Si vous ne connaissez pas la réponse, dites-le, au lieu de deviner. + +## Environnement de Codage + +L'utilisateur pose des questions sur les langages de codage suivants : + +- ReactJS +- NextJS +- ViteJS +- JavaScript +- TypeScript +- TailwindCSS +- HTML +- CSS + +## Directives d'Implémentation de Code + +Suivez ces règles quand vous écrivez du code : + +- TypeScript est préféré à JavaScript, sauf si l'utilisateur demande spécifiquement JavaScript. +- Choisissez soit NextJS soit ViteJS pour le projet, selon les exigences. +- Utilisez des retours précoces chaque fois que possible pour rendre le code plus lisible. +- Utilisez toujours les classes Tailwind pour styliser les éléments HTML ; évitez d'utiliser CSS ou les balises. +- Utilisez "class:" au lieu de l'opérateur ternaire dans les balises de classe chaque fois que possible. +- Utilisez des noms de variables et de fonctions/const descriptifs. Aussi, les fonctions d'événement doivent être nommées avec un préfixe "handle", comme "handleClick" pour onClick et "handleKeyDown" pour onKeyDown. +- Implémentez des fonctionnalités d'accessibilité sur les éléments. Par exemple, une balise devrait avoir un tabindex="0", aria-label, on:click, et on:keydown, et des attributs similaires. +- Utilisez des consts au lieu de fonctions, par exemple, "const toggle = () =>". Aussi, définissez un type si possible. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/custom-instructions/python/copilot-instructions.md b/localisation/fr-fr/docs/custom-instructions/python/copilot-instructions.md new file mode 100644 index 0000000..05294b1 --- /dev/null +++ b/localisation/fr-fr/docs/custom-instructions/python/copilot-instructions.md @@ -0,0 +1,74 @@ +# Règles de Développement Python + +Vous êtes un développeur Python senior et un expert en Python, FastAPI, SQLite et développement d'API évolutives. + +## Principes Clés + +- Écrivez des réponses concises et techniques avec des exemples Python précis. +- Utilisez la programmation fonctionnelle et déclarative ; évitez les classes autant que possible. +- Préférez l'itération et la modularisation plutôt que la duplication de code. +- Utilisez des noms de variables descriptifs avec des verbes auxiliaires (ex. is_active, has_permission). +- Utilisez des minuscules avec des underscores pour les répertoires et fichiers (ex. routers/user_routes.py). +- Favorisez les exports nommés pour les routes et fonctions utilitaires. +- Utilisez le pattern Receive an Object, Return an Object (RORO). + +## Python/FastAPI + +- Utilisez def pour les fonctions pures et async def pour les opérations asynchrones. +- Utilisez des annotations de type pour toutes les signatures de fonctions. Préférez les modèles Pydantic aux dictionnaires bruts pour la validation d'entrée. +- Structure de fichier : routeur exporté, sous-routes, utilitaires, contenu statique, types (modèles, schémas). +- Évitez les accolades inutiles dans les déclarations conditionnelles. +- Pour les déclarations sur une seule ligne dans les conditionnelles, omettez les accolades. +- Utilisez une syntaxe concise d'une ligne pour les déclarations conditionnelles simples (ex. if condition: do_something()). + +## Gestion d'Erreurs et Validation + +- Priorisez la gestion d'erreurs et les cas limites : + - Gérez les erreurs et cas limites au début des fonctions. + - Utilisez des retours précoces pour les conditions d'erreur afin d'éviter les déclarations if profondément imbriquées. + - Placez le chemin heureux en dernier dans la fonction pour améliorer la lisibilité. + - Évitez les déclarations else inutiles ; utilisez le pattern if-return à la place. + - Utilisez des clauses de garde pour gérer les préconditions et états invalides tôt. + - Implémentez une journalisation d'erreurs appropriée et des messages d'erreur conviviaux. + - Utilisez des types d'erreurs personnalisés ou des fabriques d'erreurs pour une gestion cohérente des erreurs. + +## Dépendances + +- FastAPI +- Pydantic v2 +- Bibliothèques de base de données asynchrones comme asyncpg ou aiomysql +- SQLAlchemy 2.0 (si vous utilisez les fonctionnalités ORM) + +## Directives Spécifiques à FastAPI + +- Utilisez des composants fonctionnels (fonctions simples) et des modèles Pydantic pour la validation d'entrée et les schémas de réponse. +- Utilisez des définitions de routes déclaratives avec des annotations de type de retour claires. +- Utilisez def pour les opérations synchrones et async def pour les asynchrones. +- Minimisez @app.on_event("startup") et @app.on_event("shutdown") ; préférez les gestionnaires de contexte lifespan pour gérer les événements de démarrage et d'arrêt. +- Utilisez le middleware pour la journalisation, le monitoring d'erreurs et l'optimisation des performances. +- Optimisez les performances en utilisant des fonctions async pour les tâches liées aux E/S, stratégies de mise en cache et chargement paresseux. +- Utilisez HTTPException pour les erreurs attendues et modélisez-les comme des réponses HTTP spécifiques. +- Utilisez le middleware pour gérer les erreurs inattendues, la journalisation et le monitoring d'erreurs. +- Utilisez BaseModel de Pydantic pour une validation d'entrée/sortie cohérente et des schémas de réponse. + +## Optimisation des Performances + +- Minimisez les opérations d'E/S bloquantes ; utilisez des opérations asynchrones pour tous les appels de base de données et requêtes d'API externes. +- Implémentez la mise en cache pour les données statiques et fréquemment consultées en utilisant des outils comme Redis ou des magasins en mémoire. +- Optimisez la sérialisation et désérialisation des données avec Pydantic. +- Utilisez des techniques de chargement paresseux pour les grands ensembles de données et les réponses d'API substantielles. + +## Conventions Clés + +1. Comptez sur le système d'injection de dépendances de FastAPI pour gérer l'état et les ressources partagées. +2. Priorisez les métriques de performance d'API (temps de réponse, latence, débit). +3. Limitez les opérations bloquantes dans les routes : + - Favorisez les flux asynchrones et non bloquants. + - Utilisez des fonctions async dédiées pour les opérations de base de données et d'API externes. + - Structurez les routes et dépendances clairement pour optimiser la lisibilité et la maintenabilité. + +Référez-vous à la documentation FastAPI pour les Modèles de Données, Opérations de Chemin et Middleware pour les meilleures pratiques. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/docs/custom-instructions/setup/copilot-instructions.md b/localisation/fr-fr/docs/custom-instructions/setup/copilot-instructions.md new file mode 100644 index 0000000..d99ed31 --- /dev/null +++ b/localisation/fr-fr/docs/custom-instructions/setup/copilot-instructions.md @@ -0,0 +1,9 @@ +Vous êtes un expert en tant qu'Analyste Métier. Vous êtes très capable d'interpréter les exigences métier en détails techniques. + +Lorsque vous traitez avec OpenAPI, cela fait toujours référence à la version spec 3.0.1. + +Lorsque vous créez un document OpenAPI, vous devez toujours considérer la réutilisabilité du schéma de données. NE dupliquez PAS une structure de données similaire. + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/dotnet/README.md b/localisation/fr-fr/dotnet/README.md new file mode 100644 index 0000000..30f73f9 --- /dev/null +++ b/localisation/fr-fr/dotnet/README.md @@ -0,0 +1,9 @@ +# Démarrer avec .NET + +Voici le point de départ pour le développement de votre application .NET. + +Si vous voulez voir l'exemple complet, consultez ce répertoire, [/complete/dotnet](../complete/dotnet/). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/java/README.md b/localisation/fr-fr/java/README.md new file mode 100644 index 0000000..74dad9c --- /dev/null +++ b/localisation/fr-fr/java/README.md @@ -0,0 +1,9 @@ +# Démarrer avec Java + +Voici le point de départ pour le développement de votre application Java. + +Si vous voulez voir l'exemple complet, consultez ce répertoire, [/complete/java](../complete/java/). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/javascript/README.md b/localisation/fr-fr/javascript/README.md new file mode 100644 index 0000000..a10830c --- /dev/null +++ b/localisation/fr-fr/javascript/README.md @@ -0,0 +1,9 @@ +# Démarrer avec JavaScript + +Voici le point de départ pour le développement de votre application JavaScript. + +Si vous voulez voir l'exemple complet, consultez ce répertoire, [/complete/javascript](../complete/javascript/). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/product-requirements.md b/localisation/fr-fr/product-requirements.md new file mode 100644 index 0000000..7efc328 --- /dev/null +++ b/localisation/fr-fr/product-requirements.md @@ -0,0 +1,152 @@ +# Document d'Exigences Produit (DEP) + +## Titre du Produit + +Application de Médias Sociaux Simple + +## Version du Document + +1.0.0 + +## Auteur + +Propriétaire de Produit / Tech Lead chez Contoso + +## Dernière Mise à Jour + +2025-05-30 + +--- + +## 1. Aperçu + +L'objectif de ce projet est de construire un Service de Réseau Social (SNS) basique mais fonctionnel qui permet aux utilisateurs de créer, récupérer, mettre à jour et supprimer des publications ; d'ajouter des commentaires ; et d'aimer/ne plus aimer les publications. L'approche API-first garantit qu'elle peut être utilisée comme backend pour des frontends web ou mobiles. + +## 2. Contexte + +Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Un département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels. Pour leur premier MVP, le département marketing veut construire rapidement le site web. + +## 3. Objectifs et Buts + +* Fournir des opérations CRUD pour le contenu généré par les utilisateurs (publications). +* Permettre l'interaction sociale via les commentaires et les likes. +* Maintenir la simplicité pour les cas d'usage éducatifs et MVP. +* Assurer une conception d'API RESTful et une gestion d'erreur appropriée. + +## 4. Fonctionnalités Clés + +### 4.1 Gestion des Publications + +* **Lister les Publications** + + * **GET** `/api/posts` + * Histoire Utilisateur : En tant qu'utilisateur, je veux voir toutes les publications récentes afin de pouvoir parcourir ce que les autres partagent. + +* **Créer une Publication** + + * **POST** `/api/posts` + * Requis : `username`, `content` + * Histoire Utilisateur : En tant qu'utilisateur, je veux créer une nouvelle publication afin de partager quelque chose avec les autres. + +* **Obtenir une Publication Unique** + + * **GET** `/api/posts/{postId}` + * Histoire Utilisateur : En tant qu'utilisateur, je veux lire une publication spécifique en détail. + +* **Mettre à Jour une Publication** + + * **PATCH** `/api/posts/{postId}` + * Requis : `username`, `content` + * Histoire Utilisateur : En tant qu'utilisateur, je veux mettre à jour ma publication si j'ai fait une erreur ou ai quelque chose à ajouter. + +* **Supprimer une Publication** + + * **DELETE** `/api/posts/{postId}` + * Histoire Utilisateur : En tant qu'utilisateur, je veux supprimer ma publication si je ne veux plus qu'elle soit partagée. + +### 4.2 Gestion des Commentaires + +* **Lister les Commentaires d'une Publication** + + * **GET** `/api/posts/{postId}/comments` + * Histoire Utilisateur : En tant qu'utilisateur, je veux lire tous les commentaires sur une publication. + +* **Créer un Commentaire** + + * **POST** `/api/posts/{postId}/comments` + * Requis : `username`, `content` + * Histoire Utilisateur : En tant qu'utilisateur, je veux commenter une publication pour partager mes pensées. + +* **Obtenir un Commentaire Spécifique** + + * **GET** `/api/posts/{postId}/comments/{commentId}` + * Histoire Utilisateur : En tant qu'utilisateur, je veux voir un commentaire spécifique en détail. + +* **Mettre à Jour un Commentaire** + + * **PATCH** `/api/posts/{postId}/comments/{commentId}` + * Requis : `username`, `content` + * Histoire Utilisateur : En tant qu'utilisateur, je veux corriger ou réviser mon commentaire. + +* **Supprimer un Commentaire** + + * **DELETE** `/api/posts/{postId}/comments/{commentId}` + * Histoire Utilisateur : En tant qu'utilisateur, je veux supprimer mon commentaire si nécessaire. + +### 4.3 Système de Like + +* **Aimer une Publication** + + * **POST** `/api/posts/{postId}/likes` + * Requis : `username` + * Histoire Utilisateur : En tant qu'utilisateur, je veux aimer une publication pour montrer mon appréciation. + +* **Ne Plus Aimer une Publication** + + * **DELETE** `/api/posts/{postId}/likes` + * Histoire Utilisateur : En tant qu'utilisateur, je veux retirer mon like si je change d'avis. + +## 5. Rôles Utilisateur et Permissions + +* **Utilisateurs Anonymes** + * Peuvent lire les publications et commentaires. + +* **Utilisateurs Authentifiés (via le champ username)** + * Peuvent créer, mettre à jour, supprimer leurs propres publications et commentaires. + * Peuvent aimer/ne plus aimer les publications. + +## 6. Contrats API + +* Définir le document OpenAPI avec la spécification v3.0.1 au minimum. +* Utilise les codes d'état HTTP standard. + * `200 OK`, `201 Created`, `204 No Content`, `400 Bad Request`, `404 Not Found`, `500 Internal Server Error` +* Content-Type : `application/json` + +## 7. Exigences Non-Fonctionnelles + +* **Documentation** : L'API doit être entièrement documentée en utilisant Swagger UI. +* **Sécurité** : Validation des entrées et validation de requête basique, même si l'authentification complète n'est pas implémentée. + +## 8. Suppositions et Dépendances + +* Utiliser une base de données en mémoire pour ce produit. +* Aucun support de téléchargement de fichiers ou de médias n'est inclus. +* Aucun flux d'inscription utilisateur ou de connexion/authentification. +* Aucun code de test n'est requis. + +## 9. Métriques de Succès + +* Tous les endpoints API sont accessibles et répondent comme documenté. +* Capable de publier, commenter, aimer et supprimer des ressources de bout en bout. +* Documentation Swagger claire générée à partir d'OpenAPI. + +## 10. Hors Périmètre + +* Authentification utilisateur (OAuth, JWT, etc.) +* Mises à jour en temps réel ou notifications +* Outils de modération ou de signalement +* Téléchargements multimédia (images, vidéo) + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/fr-fr/python/README.md b/localisation/fr-fr/python/README.md new file mode 100644 index 0000000..2064ff7 --- /dev/null +++ b/localisation/fr-fr/python/README.md @@ -0,0 +1,9 @@ +# Démarrer avec Python + +Voici le point de départ pour le développement de votre application Python. + +Si vous voulez voir l'exemple complet, consultez ce répertoire, [/complete/python](../complete/python/). + +--- + +**Avertissement**: Ce document a été localisé par [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/ja-jp/README.md b/localisation/ja-jp/README.md index 2f7edfb..9a66112 100644 --- a/localisation/ja-jp/README.md +++ b/localisation/ja-jp/README.md @@ -1,6 +1,6 @@ # GitHub Copilot Vibe コーディングワークショップ -![GitHub Copilot - Ghiblifiled](../../images/ghcp.jpg) +![GitHub Copilot Vibe コーディングワークショップ](../../images/banner.png) Python、JavaScript、Java、.NETなど様々なプログラミング言語で[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)と最新かつ最高の機能を使ってバイブコーディングを行い、コンテナ化によってアプリをクラウドネイティブにしましょう。飛び込む準備はできていますか？ @@ -20,11 +20,15 @@ Contosoは様々なアウトドア活動用製品を販売する会社です。C このワークショップ教材は現在、以下の言語で提供されています： -[English](../../README.md) | [Español](../es-es/) | [Português](../pt-br/) | [Français](../fr-fr/) | [中文(简体)](../zh-cn/) | [日本語](./README.md) | [한국어](../ko-kr/) +[English](../../README.md) | [Español](../es-es/) | [Français](../fr-fr/) | [日本語](./README.md) | [한국어](../ko-kr/) | [Português](../pt-br/) | [中文(简体)](../zh-cn/) ## 前提条件 -このワークショップでは、Webブラウザ以外に準備が不要なため、[GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)を強く推奨します。ただし、どうしても自分のマシンを使用する必要がある場合は、以下で特定されたすべてのものがインストールされていることを確認してください。 +このワークショップでは、Webブラウザ以外に準備が不要なため、[GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)を強く推奨します。 + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +ただし、どうしても自分のマシンを使用する必要がある場合は、以下で特定されたすべてのものがインストールされていることを確認してください。 ### 共通 @@ -103,4 +107,8 @@ Contosoは様々なアウトドア活動用製品を販売する会社です。C - [GitHub Copilot: MCP](https://code.visualstudio.com/blogs/2025/05/12/agent-mode-meets-mcp) - [GitHub Copilot: Custom Instructions](https://code.visualstudio.com/docs/copilot/copilot-customization) - [GitHub Copilot: Changing AI Models](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat?tool=vscode) -- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) \ No newline at end of file +- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/complete/README.md b/localisation/ja-jp/complete/README.md index 1d15a86..857baa0 100644 --- a/localisation/ja-jp/complete/README.md +++ b/localisation/ja-jp/complete/README.md @@ -53,4 +53,8 @@ ```bash docker compose down --rmi all - ``` \ No newline at end of file + ``` + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/complete/dotnet/README.md b/localisation/ja-jp/complete/dotnet/README.md index 7c5f1ee..fb37065 100644 --- a/localisation/ja-jp/complete/dotnet/README.md +++ b/localisation/ja-jp/complete/dotnet/README.md @@ -32,4 +32,8 @@ dotnet watch run --project $REPOSITORY_ROOT/complete/dotnet/Contoso.BlazorApp ``` -1. Webアプリケーションが正常に動作しているかを確認します。 \ No newline at end of file +1. Webアプリケーションが正常に動作しているかを確認します。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/complete/java/socialapp/README.md b/localisation/ja-jp/complete/java/README.md similarity index 96% rename from localisation/ja-jp/complete/java/socialapp/README.md rename to localisation/ja-jp/complete/java/README.md index 98c183e..6c1b401 100644 --- a/localisation/ja-jp/complete/java/socialapp/README.md +++ b/localisation/ja-jp/complete/java/README.md @@ -364,4 +364,8 @@ rm sns_api.db - SQLiteの代わりにPostgreSQL/MySQLを使用 - 認証のためにSpring Securityを実装 - レート制限と入力サニタイゼーションを追加 -- HTTPS/TLS暗号化を使用 \ No newline at end of file +- HTTPS/TLS暗号化を使用 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/complete/javascript/README.md b/localisation/ja-jp/complete/javascript/README.md index ec17eab..b0b19b5 100644 --- a/localisation/ja-jp/complete/javascript/README.md +++ b/localisation/ja-jp/complete/javascript/README.md @@ -40,4 +40,8 @@ ``` 1. Webブラウザを開き、`http://localhost:3000`にアクセスします。 -1. Webアプリケーションが正常に動作しているかを確認します。 \ No newline at end of file +1. Webアプリケーションが正常に動作しているかを確認します。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/complete/python/README.md b/localisation/ja-jp/complete/python/README.md index 23cdd0b..f8617f9 100644 --- a/localisation/ja-jp/complete/python/README.md +++ b/localisation/ja-jp/complete/python/README.md @@ -121,4 +121,8 @@ uvicorn main:app --host 0.0.0.0 --port 8000 --reload 1. `http://localhost:8000/docs` に移動 2. すべてのAPIエンドポイントをインタラクティブに探索してテスト -3. リクエスト/レスポンススキーマと例を表示 \ No newline at end of file +3. リクエスト/レスポンススキーマと例を表示 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/00-setup.md b/localisation/ja-jp/docs/00-setup.md index bfbac31..317fd61 100644 --- a/localisation/ja-jp/docs/00-setup.md +++ b/localisation/ja-jp/docs/00-setup.md @@ -18,16 +18,15 @@ - [Visual Studio Code を起動](#visual-studio-code-を起動) - [MCP サーバーを設定](#mcp-サーバーを設定) - [GitHub Copilot エージェントモードを確認](#github-copilot-エージェントモードを確認) +- [ビーストモードを設定](#ビーストモードを設定) - [カスタム指示を準備](#カスタム指示を準備) - [製品要求仕様書（PRD）を分析してAPIを設計](#製品要求仕様書prdを分析してapiを設計) ## GitHub Codespaces を使用 -1. 下の画像を確認し、![「code」ボタンの画像](https://img.shields.io/badge/%3C%3E_Code-green) 👉 ![「codespaces」ボタンの画像](https://img.shields.io/badge/Codespaces-white) 👉 ![「create codespace on main」ボタンの画像](https://img.shields.io/badge/Create_codespace_on_main-green) の順序でクリックして、新しいGitHub Codespaceインスタンスを作成します。ネットワーク状況によって5-10分かかる可能性があります。 +1. このリンクをクリックしてください 👉 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) - ![GitHub Codespaces で開始](../../../docs/images/setup-01.png) - -2. GitHub Codespaceインスタンスの準備ができたら、ターミナルを開いて以下のコマンドを実行し、必要なものがすべて適切にインストールされているかどうかを確認します。 +1. GitHub Codespaceインスタンスの準備ができたら、ターミナルを開いて以下のコマンドを実行し、必要なものがすべて適切にインストールされているかどうかを確認します。 ```bash # Python @@ -51,7 +50,7 @@ dotnet --list-sdks ``` -3. リポジトリの状態を確認します。 +1. リポジトリの状態を確認します。 ```bash git remote -v @@ -66,7 +65,7 @@ 上記と異なるものが表示される場合は、GitHub Codespaceインスタンスを削除して再作成してください。 -4. [MCP サーバーを設定](#mcp-サーバーを設定)セクションに移動します。 +1. [MCP サーバーを設定](#mcp-サーバーを設定)セクションに移動します。 **👇👇👇 代わりに、ローカルマシンでVS Codeを使用したい場合は、以下の指示に従ってください。以下のセクションは、GitHub Codespaces を使用する人には適用されません。 👇👇👇** @@ -258,6 +257,7 @@ ### MCP サーバーを設定 +1. ローカルマシンでVS Codeを使用している場合は、Docker Desktopが起動していることを確認してください。 1. `$REPOSITORY_ROOT` 環境変数を設定します。 ```bash @@ -286,6 +286,7 @@ 1. F1 キーまたは Windows では `Ctrl`+`Shift`+`P`、Mac OS では `Cmd`+`Shift`+`P` を入力してコマンドパレットを開き、`MCP: List Servers` を検索します。 1. `context7` を選択して `Start Server` をクリックします。 +1. `awesome-copilot` を選択して `Start Server` をクリックします。 ## GitHub Copilot エージェントモードを確認 @@ -300,6 +301,40 @@ 1. モデルを `GPT-4.1` または `Claude Sonnet 4` のいずれかに選択します。 +## ビーストモードを設定 + +1. `/mcp.awesome-copilot.get_search_prompt` を入力し、続いて "beast mode" のようなキーワードを入力します + + ビーストチャットモードのリストが表示されます。`4.1 Beast Chat Mode` のようなプロンプトを入力します。すると、`.github/chatmodes` ディレクトリに保存されます。 + +1. `Agent` モードの代わりに `4.1-Beast` モードを選択します。自動的にLLMが `GPT 4.1` に変更されます。 + +1. `$REPOSITORY_ROOT` 環境変数を設定します。 + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. ワークスペース設定をコピーします。 + + ```bash + # bash/zsh + cp $REPOSITORY_ROOT/docs/.vscode/settings.json \ + $REPOSITORY_ROOT/.vscode/settings.json + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json ` + -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force + ``` + ## カスタム指示を準備 1. `$REPOSITORY_ROOT` 環境変数を設定します。 @@ -349,4 +384,8 @@ --- -よくできました。「開発環境」ステップを完了しました。[STEP 01: Python バックエンド開発](./01-python.md)に移りましょう。 \ No newline at end of file +よくできました。「開発環境」ステップを完了しました。[STEP 01: Python バックエンド開発](./01-python.md)に移りましょう。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/01-python.md b/localisation/ja-jp/docs/01-python.md index b6e0e48..0c9252d 100644 --- a/localisation/ja-jp/docs/01-python.md +++ b/localisation/ja-jp/docs/01-python.md @@ -116,4 +116,8 @@ Python開発者として、FastAPIを使用してPythonバックエンドアプ --- -よくできました。「Python」ステップを完了しました。[STEP 02: JavaScript フロントエンド開発](./02-javascript.md)に移りましょう。 \ No newline at end of file +よくできました。「Python」ステップを完了しました。[STEP 02: JavaScript フロントエンド開発](./02-javascript.md)に移りましょう。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/02-javascript.md b/localisation/ja-jp/docs/02-javascript.md index 1504515..5d25112 100644 --- a/localisation/ja-jp/docs/02-javascript.md +++ b/localisation/ja-jp/docs/02-javascript.md @@ -162,4 +162,8 @@ JavaScript開発者として、Python バックエンドAPIアプリと通信す --- -よくできました。「JavaScript」ステップを完了しました。[STEP 03: Python から Java への移行](./03-java.md)に移りましょう。 \ No newline at end of file +よくできました。「JavaScript」ステップを完了しました。[STEP 03: Python から Java への移行](./03-java.md)に移りましょう。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/03-java.md b/localisation/ja-jp/docs/03-java.md index d93b42c..1448cd2 100644 --- a/localisation/ja-jp/docs/03-java.md +++ b/localisation/ja-jp/docs/03-java.md @@ -157,4 +157,8 @@ Java開発者として、既存のFastAPIアプリをSpring Bootに移行する --- -よくできました。「Java」ステップを完了しました。[STEP 04: JavaScript から .NET への移行](./04-dotnet.md)に移りましょう。 \ No newline at end of file +よくできました。「Java」ステップを完了しました。[STEP 04: JavaScript から .NET への移行](./04-dotnet.md)に移りましょう。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/04-dotnet.md b/localisation/ja-jp/docs/04-dotnet.md index 0be8f51..3b93be0 100644 --- a/localisation/ja-jp/docs/04-dotnet.md +++ b/localisation/ja-jp/docs/04-dotnet.md @@ -170,4 +170,8 @@ Contosoは様々なアウトドア活動用製品を販売する会社です。C --- -よくできました。「.NET」ステップを完了しました。[STEP 05: コンテナ化](./05-containerization.md)に移りましょう。 \ No newline at end of file +よくできました。「.NET」ステップを完了しました。[STEP 05: コンテナ化](./05-containerization.md)に移りましょう。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/05-containerization.md b/localisation/ja-jp/docs/05-containerization.md index 30b65ed..139a3c4 100644 --- a/localisation/ja-jp/docs/05-containerization.md +++ b/localisation/ja-jp/docs/05-containerization.md @@ -70,14 +70,16 @@ DevOpsエンジニアとして、両方のアプリをコンテナ化する必 ```text Javaアプリのコンテナイメージを構築したいと思います。以下の指示に従ってください。 - - Javaアプリは `java` にあります。 - - 作業ディレクトリはリポジトリルートです。 - まず実行するすべてのステップを特定してください。 + - Javaアプリは `java/socialapp` にあります。 + - 作業ディレクトリはリポジトリルートです。 - Dockerfile `Dockerfile.java` を作成してください。 - Microsoft OpenJDK 21を使用してください。 - マルチステージビルドアプローチを使用してください。 - JDKからJREを抽出してください。 - コンテナイメージのターゲットポート番号として `8080` を使用してください。 + - ホストからコンテナイメージに環境変数 `CODESPACE_NAME` と `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` の両方を追加してください。 + - コンテナイメージにSQLiteデータベースファイル `sns_api.db` を作成してください。ホストからファイルをコピーしないでください。 ``` 1. GitHub Copilot の ![keepボタンの画像](https://img.shields.io/badge/keep-blue) ボタンをクリックして変更を適用します。 @@ -101,6 +103,7 @@ DevOpsエンジニアとして、両方のアプリをコンテナ化する必 構築したばかりのコンテナイメージを使用して、コンテナを実行し、アプリが適切に実行されているかどうかを確認してください。 - ホストポートとして `8080` を使用してください。 + - `CODESPACE_NAME` と `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` の両方の値は GitHub Codespaces のものである必要があります。 ``` ### .NET アプリケーションをコンテナ化 @@ -111,13 +114,14 @@ DevOpsエンジニアとして、両方のアプリをコンテナ化する必 ```text .NETアプリのコンテナイメージを構築したいと思います。以下の指示に従ってください。 + - まず実行するすべてのステップを特定してください。 - .NETアプリは `dotnet` にあります。 - 作業ディレクトリはリポジトリルートです。 - - まず実行するすべてのステップを特定してください。 - Dockerfile `Dockerfile.dotnet` を作成してください。 - .NET 9を使用してください。 - マルチステージビルドアプローチを使用してください。 - コンテナイメージのターゲットポート番号として `8080` を使用してください。 + - コンテナに環境変数 `ApiSettings__BaseUrl` を追加してください。これはJavaアプリの `http://localhost:8080/api` を指すようにしてください。 ``` 1. GitHub Copilot の ![keepボタンの画像](https://img.shields.io/badge/keep-blue) ボタンをクリックして変更を適用します。 @@ -141,12 +145,13 @@ DevOpsエンジニアとして、両方のアプリをコンテナ化する必 構築したばかりのコンテナイメージを使用して、コンテナを実行し、アプリが適切に実行されているかどうかを確認してください。 - ホストポートとして `3030` を使用してください。 + - 環境変数 `ApiSettings__BaseUrl` に `http://localhost:8080/api` の値を渡してください。 ``` 1. フロントエンドとバックエンドの両方のアプリが、まだ互いを知らないため通信していないことを確認します。以下のようなプロンプトを実行します。 ```text - いずれにせよ、現在実行中の両方のコンテナを削除してください。 + JavaとNETの両方のコンテナとそれぞれのコンテナイメージを削除してください。 ``` ### コンテナをオーケストレート @@ -157,6 +162,7 @@ DevOpsエンジニアとして、両方のアプリをコンテナ化する必 ```text Docker Composeファイルを作成したいと思います。以下の指示に従ってください。 + - まず実行するすべてのステップを特定してください。 - 作業ディレクトリはリポジトリルートです。 - バックエンドアプリとして `Dockerfile.java` を使用してください。 - フロントエンドアプリとして `Dockerfile.dotnet` を使用してください。 @@ -164,7 +170,8 @@ DevOpsエンジニアとして、両方のアプリをコンテナ化する必 - ネットワーク名として `contoso` を使用してください。 - Javaアプリのコンテナ名として `contoso-backend` を使用してください。ターゲットポートは8080、ホストポートは8080です。 - .NETアプリのコンテナ名として `contoso-frontend` を使用してください。ターゲットポートは8080、ホストポートは3030です。 - - Javaアプリが使用するデータベース `java/socialapp/sns_api.db` のボリュームをマウントしてください。 + - ホストからJavaコンテナに環境変数 `CODESPACE_NAME` と `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` の両方を追加してください。 + - .NETコンテナに環境変数 `ApiSettings__BaseUrl` を追加してください。これはJavaアプリの `/api` を指すようにしてください。 ``` 1. GitHub Copilot の ![keepボタンの画像](https://img.shields.io/badge/keep-blue) ボタンをクリックして変更を適用します。 @@ -172,11 +179,15 @@ DevOpsエンジニアとして、両方のアプリをコンテナ化する必 1. `compose.yaml` ファイルが作成されたら、それを実行して両方のアプリが適切に実行されているかどうかを確認します。 ```text - Docker composeファイルを実行して、アプリが適切に実行されているかどうかを確認してください。 + Docker composeファイルを実行して、すべてのアプリが適切に実行されているかどうかを確認してください。 ``` 1. ウェブブラウザを開いて `http://localhost:3030` に移動し、アプリが適切に起動して実行されているかどうかを確認します。 --- -おめでとうございます！🎉 すべてのワークショップセッションを正常に完了しました！ \ No newline at end of file +おめでとうございます！🎉 すべてのワークショップセッションを正常に完了しました！ + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/README.md b/localisation/ja-jp/docs/README.md index 74a8662..71000fd 100644 --- a/localisation/ja-jp/docs/README.md +++ b/localisation/ja-jp/docs/README.md @@ -9,4 +9,8 @@ | 02: JavaScript フロントエンド開発 | [02-javascript.md](./02-javascript.md) | | 03: Python から Java への移行 | [03-java.md](./03-java.md) | | 04: JavaScript から .NET への移行 | [04-dotnet.md](./04-dotnet.md) | -| 05: コンテナ化 | [05-containerization.md](./05-containerization.md) | \ No newline at end of file +| 05: コンテナ化 | [05-containerization.md](./05-containerization.md) | + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/custom-instructions/containerization/copilot-instructions.md b/localisation/ja-jp/docs/custom-instructions/containerization/copilot-instructions.md index a9c9f92..44a1bad 100644 --- a/localisation/ja-jp/docs/custom-instructions/containerization/copilot-instructions.md +++ b/localisation/ja-jp/docs/custom-instructions/containerization/copilot-instructions.md @@ -31,4 +31,8 @@ - イメージサイズを最適化するためにDockerfileでマルチステージビルドを使用する。 - Dockerfileが冪等であり、副作用なしに複数回ビルドできることを保証する。 -- ローカル開発とテスト環境にはDocker Composeを使用する。 \ No newline at end of file +- ローカル開発とテスト環境にはDocker Composeを使用する。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/custom-instructions/dotnet/copilot-instructions.md b/localisation/ja-jp/docs/custom-instructions/dotnet/copilot-instructions.md index 28e0091..af44985 100644 --- a/localisation/ja-jp/docs/custom-instructions/dotnet/copilot-instructions.md +++ b/localisation/ja-jp/docs/custom-instructions/dotnet/copilot-instructions.md @@ -78,4 +78,8 @@ - APIドキュメントには組み込みのOpenAPIパッケージを使用する。 - Swaggerドキュメントを強化するため、コントローラーとモデルにXMLコメントを提供する。 -ルーティング、コントローラー、モデル、およびその他のAPIコンポーネントのベストプラクティスについては、公式MicrosoftドキュメントとASP.NET Coreガイドに従ってください。 \ No newline at end of file +ルーティング、コントローラー、モデル、およびその他のAPIコンポーネントのベストプラクティスについては、公式MicrosoftドキュメントとASP.NET Coreガイドに従ってください。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/custom-instructions/java/copilot-instructions.md b/localisation/ja-jp/docs/custom-instructions/java/copilot-instructions.md index ccbea70..d3bf10c 100644 --- a/localisation/ja-jp/docs/custom-instructions/java/copilot-instructions.md +++ b/localisation/ja-jp/docs/custom-instructions/java/copilot-instructions.md @@ -89,4 +89,8 @@ - マイクロサービスアーキテクチャ（適用可能な場合）。 - SpringのWebFluxを使用したSpringの@Asyncまたはリアクティブプログラミングを使用した非同期処理。 -Spring Bootアプリケーション設計でSOLID原則を遵守し、高い凝集性と低い結合度を維持してください。 \ No newline at end of file +Spring Bootアプリケーション設計でSOLID原則を遵守し、高い凝集性と低い結合度を維持してください。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/custom-instructions/javascript/copilot-instructions.md b/localisation/ja-jp/docs/custom-instructions/javascript/copilot-instructions.md index 7eeb021..9324333 100644 --- a/localisation/ja-jp/docs/custom-instructions/javascript/copilot-instructions.md +++ b/localisation/ja-jp/docs/custom-instructions/javascript/copilot-instructions.md @@ -43,4 +43,8 @@ - 可能な限りクラスタグでは三項演算子の代わりに「class:」を使用する。 - 説明的な変数と関数/const名を使用する。また、イベント関数は「handle」プレフィックスで命名し、onClickには「handleClick」、onKeyDownには「handleKeyDown」のようにする。 - 要素にアクセシビリティ機能を実装する。例えば、aタグにはtabindex="0"、aria-label、on:click、on:keydownおよび類似の属性を持つべきである。 -- 関数の代わりにconstを使用する。例：「const toggle = () =>」。また、可能であれば型を定義する。 \ No newline at end of file +- 関数の代わりにconstを使用する。例：「const toggle = () =>」。また、可能であれば型を定義する。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/custom-instructions/python/copilot-instructions.md b/localisation/ja-jp/docs/custom-instructions/python/copilot-instructions.md index 825ad1d..e669d59 100644 --- a/localisation/ja-jp/docs/custom-instructions/python/copilot-instructions.md +++ b/localisation/ja-jp/docs/custom-instructions/python/copilot-instructions.md @@ -67,4 +67,8 @@ - データベースと外部API操作には専用の非同期関数を使用する。 - 読みやすさと保守性を最適化するため、ルートと依存関係を明確に構造化する。 -ベストプラクティスについては、データモデル、パス操作、ミドルウェアに関するFastAPIドキュメントを参照してください。 \ No newline at end of file +ベストプラクティスについては、データモデル、パス操作、ミドルウェアに関するFastAPIドキュメントを参照してください。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/docs/custom-instructions/setup/copilot-instructions.md b/localisation/ja-jp/docs/custom-instructions/setup/copilot-instructions.md index cd74cd4..1568ece 100644 --- a/localisation/ja-jp/docs/custom-instructions/setup/copilot-instructions.md +++ b/localisation/ja-jp/docs/custom-instructions/setup/copilot-instructions.md @@ -2,4 +2,8 @@ OpenAPIを扱う際は、常にバージョン3.0.1の仕様を参照してください。 -OpenAPI文書を作成する際は、常にデータスキーマの再利用性を考慮する必要があります。類似のデータ構造を重複させないでください。 \ No newline at end of file +OpenAPI文書を作成する際は、常にデータスキーマの再利用性を考慮する必要があります。類似のデータ構造を重複させないでください。 + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/dotnet/README.md b/localisation/ja-jp/dotnet/README.md index ebac1a4..8f1fd54 100644 --- a/localisation/ja-jp/dotnet/README.md +++ b/localisation/ja-jp/dotnet/README.md @@ -2,4 +2,8 @@ こちらは.NETアプリ開発の出発点です。 -完全な例を見たい場合は、このディレクトリを確認してください。[/complete/dotnet](../complete/dotnet/) \ No newline at end of file +完全な例を見たい場合は、このディレクトリを確認してください。[/complete/dotnet](../complete/dotnet/) + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/java/README.md b/localisation/ja-jp/java/README.md index ffbc3e2..d63a295 100644 --- a/localisation/ja-jp/java/README.md +++ b/localisation/ja-jp/java/README.md @@ -2,4 +2,8 @@ こちらはJavaアプリ開発の出発点です。 -完全な例を見たい場合は、このディレクトリを確認してください。[/complete/java](../complete/java/) \ No newline at end of file +完全な例を見たい場合は、このディレクトリを確認してください。[/complete/java](../complete/java/) + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/javascript/README.md b/localisation/ja-jp/javascript/README.md index 48cd487..815deb8 100644 --- a/localisation/ja-jp/javascript/README.md +++ b/localisation/ja-jp/javascript/README.md @@ -2,4 +2,8 @@ こちらはJavaScriptアプリ開発の出発点です。 -完全な例を見たい場合は、このディレクトリを確認してください。[/complete/javascript](../complete/javascript/) \ No newline at end of file +完全な例を見たい場合は、このディレクトリを確認してください。[/complete/javascript](../complete/javascript/) + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/product-requirements.md b/localisation/ja-jp/product-requirements.md index bd57bef..c51a1ae 100644 --- a/localisation/ja-jp/product-requirements.md +++ b/localisation/ja-jp/product-requirements.md @@ -145,4 +145,8 @@ Contosoは様々なアウトドア活動用製品を販売する会社です。C * ユーザー認証（OAuth、JWTなど） * リアルタイム更新や通知 * モデレーションツールやレポート機能 -* マルチメディアアップロード（画像、動画） \ No newline at end of file +* マルチメディアアップロード（画像、動画） + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ja-jp/python/README.md b/localisation/ja-jp/python/README.md index bbbcb3c..41ae5a0 100644 --- a/localisation/ja-jp/python/README.md +++ b/localisation/ja-jp/python/README.md @@ -2,4 +2,8 @@ こちらはPythonアプリ開発の出発点です。 -完全な例を見たい場合は、このディレクトリを確認してください。[/complete/python](../complete/python/) \ No newline at end of file +完全な例を見たい場合は、このディレクトリを確認してください。[/complete/python](../complete/python/) + +--- + +**免責事項**: この文書は[GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)によってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、[issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)を作成してください。 diff --git a/localisation/ko-kr/README.md b/localisation/ko-kr/README.md index 2d9602b..c524ff7 100644 --- a/localisation/ko-kr/README.md +++ b/localisation/ko-kr/README.md @@ -1,6 +1,6 @@ # GitHub Copilot Vibe 코딩 워크샵 -![GitHub Copilot - Ghiblifiled](../../images/ghcp.jpg) +![GitHub Copilot Vibe 코딩 워크샵](../../images/banner.png) Python, JavaScript, Java, .NET 등 다양한 프로그래밍 언어에서 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)과 최신 기능들로 바이브 코딩을 하고, 컨테이너화를 통해 앱을 클라우드 네이티브로 만들어 보세요. 뛰어들 준비가 되셨나요? @@ -20,11 +20,15 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 이 워크샵 자료는 현재 다음 언어로 제공됩니다: -[English](../../README.md) | [Español](../es-es/) | [Português](../pt-br/) | [Français](../fr-fr/) | [中文(简体)](../zh-cn/) | [日本語](../ja-jp/) | [한국어](./README.md) +[English](../../README.md) | [Español](../es-es/) | [Français](../fr-fr/) | [日本語](../ja-jp/) | [한국어](./README.md) | [Português](../pt-br/) | [中文(简体)](../zh-cn/) ## 전제 조건 -이 워크샵에서는 웹 브라우저 외에 별도의 준비가 필요 없기 때문에 [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)를 적극 권장합니다. 하지만 정말로 본인의 머신을 사용해야 한다면, 아래에서 확인된 모든 것들을 설치했는지 확인하세요. +이 워크샵에서는 웹 브라우저 외에 별도의 준비가 필요 없기 때문에 [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)를 적극 권장합니다. + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +하지만 정말로 본인의 머신을 사용해야 한다면, 아래에서 확인된 모든 것들을 설치했는지 확인하세요. ### 공통 @@ -103,4 +107,8 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto - [GitHub Copilot: MCP](https://code.visualstudio.com/blogs/2025/05/12/agent-mode-meets-mcp) - [GitHub Copilot: Custom Instructions](https://code.visualstudio.com/docs/copilot/copilot-customization) - [GitHub Copilot: Changing AI Models](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat?tool=vscode) -- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) \ No newline at end of file +- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/complete/README.md b/localisation/ko-kr/complete/README.md index 5eef52f..fea866e 100644 --- a/localisation/ko-kr/complete/README.md +++ b/localisation/ko-kr/complete/README.md @@ -53,4 +53,8 @@ ```bash docker compose down --rmi all - ``` \ No newline at end of file + ``` + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/complete/dotnet/README.md b/localisation/ko-kr/complete/dotnet/README.md index 25d7ba7..315e4f1 100644 --- a/localisation/ko-kr/complete/dotnet/README.md +++ b/localisation/ko-kr/complete/dotnet/README.md @@ -32,4 +32,8 @@ dotnet watch run --project $REPOSITORY_ROOT/complete/dotnet/Contoso.BlazorApp ``` -1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. \ No newline at end of file +1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/complete/java/socialapp/README.md b/localisation/ko-kr/complete/java/README.md similarity index 96% rename from localisation/ko-kr/complete/java/socialapp/README.md rename to localisation/ko-kr/complete/java/README.md index 77e0f3d..541022d 100644 --- a/localisation/ko-kr/complete/java/socialapp/README.md +++ b/localisation/ko-kr/complete/java/README.md @@ -364,4 +364,8 @@ rm sns_api.db - SQLite 대신 PostgreSQL/MySQL 사용 - 인증을 위한 Spring Security 구현 - 속도 제한 및 입력 정화 추가 -- HTTPS/TLS 암호화 사용 \ No newline at end of file +- HTTPS/TLS 암호화 사용 + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/complete/javascript/README.md b/localisation/ko-kr/complete/javascript/README.md index 910f4c1..9e9b355 100644 --- a/localisation/ko-kr/complete/javascript/README.md +++ b/localisation/ko-kr/complete/javascript/README.md @@ -40,4 +40,8 @@ ``` 1. 웹 브라우저를 열고 `http://localhost:3000`으로 이동하세요. -1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. \ No newline at end of file +1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/complete/python/README.md b/localisation/ko-kr/complete/python/README.md index 1616ff8..d03306c 100644 --- a/localisation/ko-kr/complete/python/README.md +++ b/localisation/ko-kr/complete/python/README.md @@ -289,4 +289,8 @@ uvicorn main:app --host 0.0.0.0 --port 8000 --reload --log-level debug - [FastAPI Documentation](https://fastapi.tiangolo.com/) - [Pydantic Documentation](https://docs.pydantic.dev/) - [SQLite Documentation](https://sqlite.org/docs.html) -- [OpenAPI Specification](https://swagger.io/specification/) \ No newline at end of file +- [OpenAPI Specification](https://swagger.io/specification/) + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/00-setup.md b/localisation/ko-kr/docs/00-setup.md index 416508a..c429659 100644 --- a/localisation/ko-kr/docs/00-setup.md +++ b/localisation/ko-kr/docs/00-setup.md @@ -18,16 +18,15 @@ - [Visual Studio Code 시작](#visual-studio-code-시작) - [MCP 서버 설정](#mcp-서버-설정) - [GitHub Copilot 에이전트 모드 확인](#github-copilot-에이전트-모드-확인) +- [비스트 모드 구성](#비스트-모드-구성) - [커스텀 지시사항 준비](#커스텀-지시사항-준비) - [제품 요구사항 문서(PRD) 분석 및 API 설계](#제품-요구사항-문서prd-분석-및-api-설계) ## GitHub Codespaces 사용 -1. 아래 이미지를 보고 다음 순서로 클릭하여 따라하세요: ![the "code" button image](https://img.shields.io/badge/%3C%3E_Code-green) 👉 ![the "codespaces" button image](https://img.shields.io/badge/Codespaces-white) 👉 ![the "create codespace on main" button image](https://img.shields.io/badge/Create_codespace_on_main-green)을 클릭하여 새로운 GitHub Codespace 인스턴스를 생성하세요. 네트워크 상태에 따라 5-10분 정도 걸릴 수 있습니다. +1. 이 링크를 클릭하세요 👉 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) - ![Starting with GitHub Codespaces](../../../docs/images/setup-01.png) - -2. GitHub Codespace 인스턴스가 준비되면, 터미널을 열고 다음 명령을 실행하여 필요한 모든 것이 제대로 설치되었는지 확인하세요. +1. GitHub Codespace 인스턴스가 준비되면, 터미널을 열고 다음 명령을 실행하여 필요한 모든 것이 제대로 설치되었는지 확인하세요. ```bash # Python @@ -51,7 +50,7 @@ dotnet --list-sdks ``` -3. 저장소 상태를 확인하세요. +1. 저장소 상태를 확인하세요. ```bash git remote -v @@ -66,7 +65,7 @@ 위와 다른 것이 보이면 GitHub Codespace 인스턴스를 삭제하고 다시 생성하세요. -4. [MCP 서버 설정](#mcp-서버-설정) 섹션으로 이동하세요. +1. [MCP 서버 설정](#mcp-서버-설정) 섹션으로 이동하세요. **👇👇👇 대신 로컬 머신에서 VS Code를 사용하고 싶다면 아래 지침을 따르세요. 아래 섹션은 GitHub Codespaces를 사용하는 사람들에게는 적용되지 않습니다. 👇👇👇** @@ -258,6 +257,7 @@ ### MCP 서버 설정 +1. 로컬 머신에서 VS Code를 사용하는 경우 Docker Desktop이 실행 중인지 확인하세요. 1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. ```bash @@ -286,6 +286,7 @@ 1. F1을 입력하거나 Windows에서 `Ctrl`+`Shift`+`P`, Mac OS에서 `Cmd`+`Shift`+`P`를 눌러 명령 팔레트를 열고 `MCP: List Servers`를 검색하세요. 1. `context7`을 선택한 다음 `Start Server`를 클릭하세요. +1. `awesome-copilot`을 선택한 다음 `Start Server`를 클릭하세요. ## GitHub Copilot 에이전트 모드 확인 @@ -300,6 +301,40 @@ 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. +## 비스트 모드 구성 + +1. `/mcp.awesome-copilot.get_search_prompt`를 입력한 후 "beast mode"와 같은 키워드를 입력하세요 + + 비스트 채팅 모드 목록이 표시됩니다. `4.1 Beast Chat Mode`와 유사한 프롬프트를 입력하세요. 그러면 `.github/chatmodes` 디렉토리에 저장됩니다. + +1. `Agent` 모드 대신 `4.1-Beast` 모드를 선택하세요. 자동으로 LLM이 `GPT 4.1`로 변경됩니다. + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 워크스페이스 설정을 복사하세요. + + ```bash + # bash/zsh + cp $REPOSITORY_ROOT/docs/.vscode/settings.json \ + $REPOSITORY_ROOT/.vscode/settings.json + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json ` + -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force + ``` + ## 커스텀 지시사항 준비 1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. @@ -349,4 +384,8 @@ --- -좋습니다. "개발 환경" 단계를 완료했습니다. [STEP 01: Python 백엔드 개발](./01-python.md)로 이동하겠습니다. \ No newline at end of file +좋습니다. "개발 환경" 단계를 완료했습니다. [STEP 01: Python 백엔드 개발](./01-python.md)로 이동하겠습니다. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/01-python.md b/localisation/ko-kr/docs/01-python.md index 1e80e0c..77580d1 100644 --- a/localisation/ko-kr/docs/01-python.md +++ b/localisation/ko-kr/docs/01-python.md @@ -116,4 +116,8 @@ Python 개발자로서, FastAPI를 사용하여 Python 백엔드 앱을 구축 --- -좋습니다. "Python" 단계를 완료했습니다. [STEP 02: JavaScript 프론트엔드 개발](./02-javascript.md)로 이동하겠습니다. \ No newline at end of file +좋습니다. "Python" 단계를 완료했습니다. [STEP 02: JavaScript 프론트엔드 개발](./02-javascript.md)로 이동하겠습니다. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/02-javascript.md b/localisation/ko-kr/docs/02-javascript.md index 133e022..1269f86 100644 --- a/localisation/ko-kr/docs/02-javascript.md +++ b/localisation/ko-kr/docs/02-javascript.md @@ -162,4 +162,8 @@ JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 --- -좋습니다. "JavaScript" 단계를 완료했습니다. [STEP 03: Python에서 Java로 마이그레이션](./03-java.md)로 이동하겠습니다. \ No newline at end of file +좋습니다. "JavaScript" 단계를 완료했습니다. [STEP 03: Python에서 Java로 마이그레이션](./03-java.md)로 이동하겠습니다. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/03-java.md b/localisation/ko-kr/docs/03-java.md index ef03748..219d6ca 100644 --- a/localisation/ko-kr/docs/03-java.md +++ b/localisation/ko-kr/docs/03-java.md @@ -157,4 +157,8 @@ Python 개발자가 회사를 떠났기 때문에, 이해관계자들은 기존 --- -좋습니다. "Java" 단계를 완료했습니다. [STEP 04: JavaScript에서 .NET으로 마이그레이션](./04-dotnet.md)로 이동하겠습니다. \ No newline at end of file +좋습니다. "Java" 단계를 완료했습니다. [STEP 04: JavaScript에서 .NET으로 마이그레이션](./04-dotnet.md)로 이동하겠습니다. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/04-dotnet.md b/localisation/ko-kr/docs/04-dotnet.md index dda7209..4e59266 100644 --- a/localisation/ko-kr/docs/04-dotnet.md +++ b/localisation/ko-kr/docs/04-dotnet.md @@ -170,4 +170,8 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto --- -좋습니다. ".NET" 단계를 완료했습니다. [STEP 05: 컨테이너화](./05-containerization.md)로 이동하겠습니다. \ No newline at end of file +좋습니다. ".NET" 단계를 완료했습니다. [STEP 05: 컨테이너화](./05-containerization.md)로 이동하겠습니다. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/05-containerization.md b/localisation/ko-kr/docs/05-containerization.md index d872429..cd34b9e 100644 --- a/localisation/ko-kr/docs/05-containerization.md +++ b/localisation/ko-kr/docs/05-containerization.md @@ -70,14 +70,16 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto ```text Java 앱의 컨테이너 이미지를 빌드하고 싶습니다. 아래 지침을 따르세요. - - Java 앱은 `java`에 위치합니다. - - 작업 디렉토리는 저장소 루트입니다. - 먼저 수행할 모든 단계를 식별하세요. + - Java 앱은 `java/socialapp`에 위치합니다. + - 작업 디렉토리는 저장소 루트입니다. - `Dockerfile.java` Dockerfile을 생성하세요. - Microsoft OpenJDK 21을 사용하세요. - 멀티 스테이지 빌드 방식을 사용하세요. - JDK에서 JRE를 추출하세요. - 컨테이너 이미지의 대상 포트 번호로 `8080`을 사용하세요. + - 호스트에서 컨테이너 이미지로 환경 변수 `CODESPACE_NAME`과 `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` 모두를 추가하세요. + - 컨테이너 이미지에 SQLite 데이터베이스 파일 `sns_api.db`를 생성하세요. 호스트에서 파일을 복사하지 마세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -101,6 +103,7 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 방금 빌드한 컨테이너 이미지를 사용하여 컨테이너를 실행하고 앱이 제대로 실행되는지 확인하세요. - 호스트 포트로 `8080`을 사용하세요. + - `CODESPACE_NAME`과 `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` 값 모두 GitHub Codespaces의 값이어야 합니다. ``` ### .NET 애플리케이션 컨테이너화 @@ -111,13 +114,14 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto ```text .NET 앱의 컨테이너 이미지를 빌드하고 싶습니다. 아래 지침을 따르세요. + - 먼저 수행할 모든 단계를 식별하세요. - .NET 앱은 `dotnet`에 위치합니다. - 작업 디렉토리는 저장소 루트입니다. - - 먼저 수행할 모든 단계를 식별하세요. - `Dockerfile.dotnet` Dockerfile을 생성하세요. - .NET 9를 사용하세요. - 멀티 스테이지 빌드 방식을 사용하세요. - 컨테이너 이미지의 대상 포트 번호로 `8080`을 사용하세요. + - 컨테이너에 환경 변수 `ApiSettings__BaseUrl`을 추가하세요. 이는 Java 앱 `http://localhost:8080/api`를 가리켜야 합니다. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -141,12 +145,13 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 방금 빌드한 컨테이너 이미지를 사용하여 컨테이너를 실행하고 앱이 제대로 실행되는지 확인하세요. - 호스트 포트로 `3030`을 사용하세요. + - 환경 변수 `ApiSettings__BaseUrl`에 `http://localhost:8080/api` 값을 전달하세요. ``` 1. 프론트엔드와 백엔드 앱이 서로를 알지 못하므로 아직 통신하지 않는지 확인하세요. 아래와 같은 프롬프트를 실행하세요. ```text - 상관없이 현재 실행 중인 두 컨테이너를 모두 제거하세요. + Java와 .NET 컨테이너 모두와 각각의 컨테이너 이미지를 제거하세요. ``` ### 컨테이너 오케스트레이션 @@ -157,6 +162,7 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto ```text Docker Compose 파일을 생성하고 싶습니다. 아래 지침을 따르세요. + - 먼저 수행할 모든 단계를 식별하세요. - 작업 디렉토리는 저장소 루트입니다. - 백엔드 앱으로 `Dockerfile.java`를 사용하세요. - 프론트엔드 앱으로 `Dockerfile.dotnet`을 사용하세요. @@ -164,7 +170,8 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto - 네트워크 이름으로 `contoso`를 사용하세요. - Java 앱의 컨테이너 이름으로 `contoso-backend`를 사용하세요. 대상 포트는 8080이고 호스트 포트는 8080입니다. - .NET 앱의 컨테이너 이름으로 `contoso-frontend`를 사용하세요. 대상 포트는 8080이고 호스트 포트는 3030입니다. - - Java 앱이 사용하는 데이터베이스 `java/socialapp/sns_api.db`의 볼륨을 마운트하세요. + - 호스트에서 Java 컨테이너로 환경 변수 `CODESPACE_NAME`과 `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` 모두를 추가하세요. + - .NET 컨테이너에 환경 변수 `ApiSettings__BaseUrl`을 추가하세요. 이는 Java 앱의 `/api`를 가리켜야 합니다. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -172,11 +179,15 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. `compose.yaml` 파일이 생성되면, 실행하고 두 앱이 모두 제대로 실행되는지 확인하세요. ```text - 이제 Docker compose 파일을 실행하고 앱들이 제대로 실행되는지 확인하세요. + Docker compose 파일을 실행하고 모든 앱들이 제대로 실행되는지 확인하세요. ``` 1. 웹 브라우저를 열고 `http://localhost:3030`으로 이동하여, 앱이 제대로 실행되고 있는지 확인하세요. --- -축하합니다! 🎉 모든 워크샵 세션을 성공적으로 완료했습니다! \ No newline at end of file +축하합니다! 🎉 모든 워크샵 세션을 성공적으로 완료했습니다! + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/README.md b/localisation/ko-kr/docs/README.md index 5feb2e3..20a4bb6 100644 --- a/localisation/ko-kr/docs/README.md +++ b/localisation/ko-kr/docs/README.md @@ -9,4 +9,8 @@ | 02: JavaScript 프론트엔드 개발 | [02-javascript.md](./02-javascript.md) | | 03: Python에서 Java로 마이그레이션 | [03-java.md](./03-java.md) | | 04: JavaScript에서 .NET으로 마이그레이션 | [04-dotnet.md](./04-dotnet.md) | -| 05: 컨테이너화 | [05-containerization.md](./05-containerization.md) | \ No newline at end of file +| 05: 컨테이너화 | [05-containerization.md](./05-containerization.md) | + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/custom-instructions/containerization/copilot-instructions.md b/localisation/ko-kr/docs/custom-instructions/containerization/copilot-instructions.md index 279ed93..fc61d9a 100644 --- a/localisation/ko-kr/docs/custom-instructions/containerization/copilot-instructions.md +++ b/localisation/ko-kr/docs/custom-instructions/containerization/copilot-instructions.md @@ -31,4 +31,8 @@ - 이미지 크기를 최적화하기 위해 Dockerfile에서 멀티 스테이지 빌드를 사용하세요. - Dockerfile이 멱등성을 가지며 부작용 없이 여러 번 빌드될 수 있도록 보장하세요. -- 로컬 개발 및 테스트 환경에서는 Docker Compose를 사용하세요. \ No newline at end of file +- 로컬 개발 및 테스트 환경에서는 Docker Compose를 사용하세요. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/custom-instructions/dotnet/copilot-instructions.md b/localisation/ko-kr/docs/custom-instructions/dotnet/copilot-instructions.md index d1d2fa9..5fd6e6e 100644 --- a/localisation/ko-kr/docs/custom-instructions/dotnet/copilot-instructions.md +++ b/localisation/ko-kr/docs/custom-instructions/dotnet/copilot-instructions.md @@ -17,4 +17,8 @@ - 클래스명, 메서드명, public 멤버에는 PascalCase를 사용하세요. - 로컬 변수와 private 필드에는 camelCase를 사용하세요. - 상수에는 UPPERCASE를 사용하세요. -- 인터페이스명에는 "I"를 접두사로 붙이세요 (예: 'IUserService'). \ No newline at end of file +- 인터페이스명에는 "I"를 접두사로 붙이세요 (예: 'IUserService'). + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/custom-instructions/java/copilot-instructions.md b/localisation/ko-kr/docs/custom-instructions/java/copilot-instructions.md index 1700053..b62f567 100644 --- a/localisation/ko-kr/docs/custom-instructions/java/copilot-instructions.md +++ b/localisation/ko-kr/docs/custom-instructions/java/copilot-instructions.md @@ -15,4 +15,8 @@ - 빠른 프로젝트 설정과 종속성 관리를 위해 Spring Boot starter를 사용하세요. - 어노테이션의 적절한 사용을 구현하세요 (예: @SpringBootApplication, @RestController, @Service). - Spring Boot의 자동 구성 기능을 효과적으로 활용하세요. -- @ControllerAdvice와 @ExceptionHandler를 사용하여 적절한 예외 처리를 구현하세요. \ No newline at end of file +- @ControllerAdvice와 @ExceptionHandler를 사용하여 적절한 예외 처리를 구현하세요. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/custom-instructions/javascript/copilot-instructions.md b/localisation/ko-kr/docs/custom-instructions/javascript/copilot-instructions.md index b76b827..6fbc9bd 100644 --- a/localisation/ko-kr/docs/custom-instructions/javascript/copilot-instructions.md +++ b/localisation/ko-kr/docs/custom-instructions/javascript/copilot-instructions.md @@ -17,4 +17,8 @@ - 필요한 모든 imports를 포함하고 주요 컴포넌트의 적절한 명명을 보장하세요. - 간결하게 다른 산문을 최소화하세요. - 올바른 답이 없을 수 있다고 생각하면 그렇게 말하세요. -- 답을 모르면 추측하는 대신 모른다고 말하세요. \ No newline at end of file +- 답을 모르면 추측하는 대신 모른다고 말하세요. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/custom-instructions/python/copilot-instructions.md b/localisation/ko-kr/docs/custom-instructions/python/copilot-instructions.md index fe3e649..e6ca731 100644 --- a/localisation/ko-kr/docs/custom-instructions/python/copilot-instructions.md +++ b/localisation/ko-kr/docs/custom-instructions/python/copilot-instructions.md @@ -67,4 +67,8 @@ - 데이터베이스와 외부 API 작업에 전용 비동기 함수를 사용하세요. - 가독성과 유지보수성을 최적화하기 위해 라우트와 종속성을 명확하게 구조화하세요. -모범 사례를 위해 데이터 모델, 경로 작업, 미들웨어에 대한 FastAPI 문서를 참조하세요. \ No newline at end of file +모범 사례를 위해 데이터 모델, 경로 작업, 미들웨어에 대한 FastAPI 문서를 참조하세요. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/docs/custom-instructions/setup/copilot-instructions.md b/localisation/ko-kr/docs/custom-instructions/setup/copilot-instructions.md index b2779f9..e097416 100644 --- a/localisation/ko-kr/docs/custom-instructions/setup/copilot-instructions.md +++ b/localisation/ko-kr/docs/custom-instructions/setup/copilot-instructions.md @@ -2,4 +2,8 @@ OpenAPI를 다룰 때는 항상 3.0.1 사양 버전을 참조하고 있습니다. -OpenAPI 문서를 생성할 때는 항상 데이터 스키마의 재사용성을 고려해야 합니다. 유사한 데이터 구조를 중복하지 마세요. \ No newline at end of file +OpenAPI 문서를 생성할 때는 항상 데이터 스키마의 재사용성을 고려해야 합니다. 유사한 데이터 구조를 중복하지 마세요. + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/dotnet/README.md b/localisation/ko-kr/dotnet/README.md index b7f7d63..ba7bcd3 100644 --- a/localisation/ko-kr/dotnet/README.md +++ b/localisation/ko-kr/dotnet/README.md @@ -2,4 +2,8 @@ .NET 앱 개발을 위한 시작점입니다. -완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/dotnet](../complete/dotnet/). \ No newline at end of file +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/dotnet](../complete/dotnet/). + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/java/README.md b/localisation/ko-kr/java/README.md index 9260b60..ec7cf25 100644 --- a/localisation/ko-kr/java/README.md +++ b/localisation/ko-kr/java/README.md @@ -2,4 +2,8 @@ Java 앱 개발을 위한 시작점입니다. -완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/java](../complete/java/). \ No newline at end of file +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/java](../complete/java/). + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/javascript/README.md b/localisation/ko-kr/javascript/README.md index f08579c..0ca333f 100644 --- a/localisation/ko-kr/javascript/README.md +++ b/localisation/ko-kr/javascript/README.md @@ -2,4 +2,8 @@ JavaScript 앱 개발을 위한 시작점입니다. -완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/javascript](../complete/javascript/). \ No newline at end of file +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/javascript](../complete/javascript/). + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/product-requirements.md b/localisation/ko-kr/product-requirements.md index e5ec077..1032e2e 100644 --- a/localisation/ko-kr/product-requirements.md +++ b/localisation/ko-kr/product-requirements.md @@ -145,4 +145,8 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto * 사용자 인증 (OAuth, JWT 등) * 실시간 업데이트 또는 알림 * 조정 도구 또는 신고 기능 -* 멀티미디어 업로드 (이미지, 비디오) \ No newline at end of file +* 멀티미디어 업로드 (이미지, 비디오) + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/ko-kr/python/README.md b/localisation/ko-kr/python/README.md index 01747b4..4483bc6 100644 --- a/localisation/ko-kr/python/README.md +++ b/localisation/ko-kr/python/README.md @@ -2,4 +2,8 @@ Python 앱 개발을 위한 시작점입니다. -완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/python](../complete/python/). \ No newline at end of file +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/python](../complete/python/). + +--- + +**면책조항**: 이 문서는 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)에 의해 현지화되었습니다. 따라서 실수가 포함될 수 있습니다. 부적절하거나 잘못된 번역을 발견하면 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)를 생성해 주세요. diff --git a/localisation/pt-br/README.md b/localisation/pt-br/README.md new file mode 100644 index 0000000..18dd225 --- /dev/null +++ b/localisation/pt-br/README.md @@ -0,0 +1,114 @@ +# Workshop de Codificação GitHub Copilot Vibe + +![Workshop de Codificação GitHub Copilot Vibe](../../images/banner.png) + +Vamos codar com vibe usando o [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) e seus recursos mais novos e incríveis em várias linguagens de programação como Python, JavaScript, Java e .NET, além de tornar os aplicativos nativos da nuvem através da containerização. Você está pronto para mergulhar? + +## Contexto + +A Contoso é uma empresa que vende produtos para várias atividades ao ar livre. O departamento de marketing da Contoso gostaria de lançar um site de micro mídia social para promover seus produtos para clientes existentes e potenciais. Como seu primeiro MVP, eles querem construir rapidamente o site. O departamento de TI da Contoso atualmente tem dois desenvolvedores usando Python e JavaScript, respectivamente. A data de lançamento está se aproximando rapidamente, então ambos os desenvolvedores devem entregar a aplicação rapidamente. + +Mas aqui está a situação... + +## Objetivos do Workshop + +- Construir aplicações usando o Modo Agente do GitHub Copilot. +- Adicionar instruções customizadas ao GitHub Copilot para que você tenha mais controle sobre o GitHub Copilot. +- Adicionar vários servidores MCP ao GitHub Copilot para que você construa as aplicações com mais precisão. + +## Workshop no Seu Idioma + +Este material do workshop está atualmente disponível nos seguintes idiomas: + +[English](../../README.md) | [Español](../es-es/) | [Français](../fr-fr/) | [日本語](../ja-jp/) | [한국어](../ko-kr/) | [Português](./README.md) | [中文(简体)](../zh-cn/) + +## Pré-requisitos + +Durante este workshop, [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) é altamente recomendado porque não há necessidade de preparação, exceto um navegador web. + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +No entanto, se você realmente precisar usar sua máquina, certifique-se de ter instalado tudo identificado abaixo. + +### Comum + +- [Visual Studio Code](https://code.visualstudio.com/) +- Extensão [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) do VS Code +- Extensão [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) do VS Code +- 💥 Para usuários Windows 👉 [PowerShell 7](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) +- [git CLI](https://git-scm.com/downloads) +- [GitHub CLI](https://cli.github.com/) +- [Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) + +### Python + +- [pyenv](https://github.com/pyenv/pyenv) ou [pyenv for Windows](https://github.com/pyenv-win/pyenv-win) +- Python 3.12+ através do pyenv +- Gerenciador de pacotes `uv` (recomendado) ou `pip` +- Extensão [Python](https://marketplace.visualstudio.com/items/?itemName=ms-python.python) do VS Code +- Extensão [Pylance](https://marketplace.visualstudio.com/items/?itemName=ms-python.vscode-pylance) do VS Code +- Extensão [Python Debugger](https://marketplace.visualstudio.com/items/?itemName=ms-python.debugpy) do VS Code +- Extensão [autopep8](https://marketplace.visualstudio.com/items/?itemName=ms-python.autopep8) do VS Code + +### JavaScript + +- [nvm](https://github.com/nvm-sh/nvm) ou [nvm for Windows](https://github.com/coreybutler/nvm-windows) +- A versão LTS mais recente do [Node.js](https://nodejs.org/) através do nvm + +### Java + +- [SDKMAN](https://sdkman.io/) +- [OpenJDK 21](https://learn.microsoft.com/java/openjdk/download) através do SDKMAN +- [Apache Maven](https://maven.apache.org/download.cgi) através do SDKMAN +- [Gradle Build Tool](https://docs.gradle.org/current/userguide/installation.html) através do SDKMAN +- [Spring Boot Initializr](https://docs.spring.io/spring-boot/cli/installation.html) através do SDKMAN +- Extensão [Extension Pack for Java](https://marketplace.visualstudio.com/items/?itemName=vscjava.vscode-java-pack) do VS Code +- Extensão [Spring Boot Extension Pack](https://marketplace.visualstudio.com/items/?itemName=vmware.vscode-boot-dev-pack) do VS Code + +### .NET + +- [.NET SDK 9](https://dotnet.microsoft.com/download/dotnet/9.0) +- Extensão [VS Code C# Dev Kit](https://marketplace.visualstudio.com/items/?itemName=ms-dotnettools.csdevkit) + +## Documento de Requisitos do Produto + +Em primeiro lugar, o lugar para você começar é este [PRD (Documento de Requisitos do Produto)](./product-requirements.md). Este documento lhe dará uma melhor compreensão do que fazer e como fazer. + +## Instruções do Workshop + +Este é um workshop autoguiado seguindo os links abaixo: + +| Etapa | Link | +|------------------------------------------|---------------------------------------------------------| +| 00: Ambiente de Desenvolvimento | [00-setup.md](./docs/00-setup.md) | +| 01: Backend Python | [01-python.md](./docs/01-python.md) | +| 02: Frontend JavaScript | [02-javascript.md](./docs/02-javascript.md) | +| 03: Migração Java do Python | [03-java.md](./docs/03-java.md) | +| 04: Migração .NET do JavaScript | [04-dotnet.md](./docs/04-dotnet.md) | +| 05: Containerização | [05-containerization.md](./docs/05-containerization.md) | + +## Exemplos Completos + +Confira o exemplo completo de cada aplicação. Eles também foram codificados com vibe usando o GitHub Copilot, portanto, podem não ser perfeitos, e você não precisa seguir o app. + +| Linguagem | Aplicação | Localização | +|---------------------|-------------|--------------------------------------| +| Backend Python | FastAPI | [python](./complete/python/) | +| Frontend JavaScript | React | [javascript](./complete/javascript/) | +| Backend Java | Spring Boot | [java](./complete/java/) | +| Frontend .NET | Blazor | [dotnet](./complete/dotnet/) | +| Containerização | Container | [containerization](./complete/) | + +## Leia Mais... + +- [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) +- [GitHub Copilot](https://docs.github.com/en/copilot/about-github-copilot/what-is-github-copilot) +- [GitHub Copilot: Agent Mode](https://code.visualstudio.com/blogs/2025/04/07/agentMode) +- [GitHub Copilot: MCP](https://code.visualstudio.com/blogs/2025/05/12/agent-mode-meets-mcp) +- [GitHub Copilot: Custom Instructions](https://code.visualstudio.com/docs/copilot/copilot-customization) +- [GitHub Copilot: Changing AI Models](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat?tool=vscode) +- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/complete/README.md b/localisation/pt-br/complete/README.md new file mode 100644 index 0000000..b6c7b7f --- /dev/null +++ b/localisation/pt-br/complete/README.md @@ -0,0 +1,60 @@ +# Exemplos de Aplicações Completas + +Aqui está a lista de exemplos de aplicações completas. Como elas também foram codificadas com vibe, você pode verificar como foram construídas. + +| Aplicação | Localização | +|-------------|-----------------------------| +| FastAPI | [python](./python/) | +| React | [javascript](./javascript/) | +| Spring Boot | [java](./java/) | +| Blazor | [dotnet](./dotnet/) | + +## Exemplo de Containerização + +### Pré-requisitos + +Consulte a documentação [README](../README.md) para preparação. + +### Primeiros Passos + +1. Certifique-se de que o Docker está rodando. + + ```bash + docker info + ``` + +1. Obtenha a raiz do repositório. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Navegue para o diretório `complete`. + + ```bash + cd $REPOSITORY_ROOT/complete + ``` + +1. Execute as aplicações containerizadas. + + ```bash + docker compose up --build -d + ``` + +1. Abra um navegador web e navegue para `http://localhost:3030`. +1. Verifique se a aplicação web está funcionando adequadamente. +1. Limpe executando o seguinte comando para remover as aplicações containerizadas. + + ```bash + docker compose down --rmi all + ``` + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/complete/dotnet/README.md b/localisation/pt-br/complete/dotnet/README.md new file mode 100644 index 0000000..8266dbe --- /dev/null +++ b/localisation/pt-br/complete/dotnet/README.md @@ -0,0 +1,39 @@ +# Exemplo de Aplicação .NET + +## Pré-requisitos + +Consulte a documentação [README](../../README.md) para preparação. + +## Primeiros Passos + +### Executar Backend Spring Boot + +Use [Exemplo de Aplicação Java](../java/). + +> **NOTA**: Se você usar GitHub Codespaces, certifique-se de que a porta da aplicação Java, `8080`, está definida como **pública**. + +### Executar Frontend Blazor + +1. Obtenha a raiz do repositório. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Execute a aplicação. + + ```bash + dotnet watch run --project $REPOSITORY_ROOT/complete/dotnet/Contoso.BlazorApp + ``` + +1. Verifique se a aplicação web está funcionando adequadamente. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/complete/java/README.md b/localisation/pt-br/complete/java/README.md new file mode 100644 index 0000000..e654c94 --- /dev/null +++ b/localisation/pt-br/complete/java/README.md @@ -0,0 +1,371 @@ +# Aplicação Java de Exemplo + +Uma aplicação REST API Spring Boot abrangente para uma plataforma de mídia social com operações CRUD completas para posts, comentários e curtidas. + +## Visão Geral do Projeto + +Esta é uma aplicação Spring Boot pronta para produção construída com as seguintes especificações: + +- **Nome do Pacote**: `com.contoso.socialapp` +- **ID do Artefato**: `socialapp` +- **ID do Grupo**: `com.contoso` +- **Tipo de Pacote**: `jar` +- **Versão Java**: OpenJDK 21 +- **Ferramenta de Build**: Gradle +- **Banco de Dados**: SQLite (embarcado) +- **Porta**: 8080 + +### Dependências do Projeto + +- **Spring Boot 3.2.5**: Framework principal +- **Spring Web**: Endpoints da RESTful API +- **Spring Data JPA**: Operações de banco de dados +- **Spring Boot Actuator**: Monitoramento da aplicação +- **Spring Boot Validation**: Validação de entrada +- **SQLite**: Banco de dados embarcado +- **Hibernate Community Dialects**: Suporte ao SQLite +- **Springdoc OpenAPI**: Documentação da API (Swagger UI) +- **Lombok**: Redução de código boilerplate + +### Estrutura do Projeto + +```text +src/ +├── main/ +│ ├── java/ +│ │ └── com/ +│ │ └── contoso/ +│ │ └── socialapp/ +│ │ ├── SocialAppApplication.java # Classe principal da aplicação +│ │ ├── config/ +│ │ │ ├── WebConfig.java # Configuração CORS +│ │ │ └── OpenApiConfig.java # Configuração Swagger/OpenAPI +│ │ ├── controller/ +│ │ │ ├── HealthController.java # Endpoints de saúde +│ │ │ ├── PostController.java # Gerenciamento de posts +│ │ │ └── CommentController.java # Gerenciamento de comentários e curtidas +│ │ ├── model/ +│ │ │ ├── Post.java # Entidade Post +│ │ │ ├── Comment.java # Entidade Comment +│ │ │ ├── Like.java # Entidade Like +│ │ │ └── dto/ # Objetos de Transferência de Dados +│ │ ├── repository/ +│ │ │ ├── PostRepository.java # Acesso a dados de posts +│ │ │ ├── CommentRepository.java # Acesso a dados de comentários +│ │ │ └── LikeRepository.java # Acesso a dados de curtidas +│ │ └── service/ +│ │ ├── PostService.java # Lógica de negócio de posts +│ │ └── CommentService.java # Lógica de negócio de comentários +│ └── resources/ +│ ├── application.properties # Configuração da aplicação +│ └── data.sql # Dados de exemplo (opcional) +└── test/ + └── java/ + └── com/ + └── contoso/ + └── socialapp/ + └── SocialAppApplicationTests.java # Testes de integração +``` + +## Funcionalidades + +- ✅ API RESTful completa para operações de mídia social +- ✅ Gerenciamento de posts (Criar, Ler, Atualizar, Excluir) +- ✅ Sistema de comentários com operações CRUD completas +- ✅ Funcionalidade de curtir/descurtir +- ✅ Banco de dados SQLite com JPA/Hibernate +- ✅ Documentação OpenAPI/Swagger +- ✅ CORS habilitado para localhost e GitHub Codespaces +- ✅ Configuração dinâmica de URL do servidor +- ✅ Endpoints de verificação de saúde +- ✅ Integração com Spring Boot Actuator +- ✅ Tratamento abrangente de erros +- ✅ Validação de entrada com Bean Validation + +## Início Rápido + +### Pré-requisitos + +Consulte a documentação [README](../../README.md) para preparação. + +### 1. Configuração do Ambiente + +Primeiro, defina a variável de ambiente `$REPOSITORY_ROOT`. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +Em seguida, navegue até o diretório java. + +```bash +cd $REPOSITORY_ROOT/complete/java +``` + +### 2. Construir a Aplicação + +```bash +# Tornar gradlew executável (se necessário) +chmod +x ./gradlew + +# Construir o projeto +./gradlew build +``` + +### 3. Executar a Aplicação + +```bash +# Iniciar a aplicação usando Gradle +./gradlew bootRun + +# Alternativa: Executar o arquivo JAR diretamente +# java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### 4. Verificar se a Aplicação está Executando + +```bash +# Verificar endpoint de saúde +curl http://localhost:8080/api/health + +# Resposta esperada: {"status":"healthy"} +``` + +### 5. Acessar Documentação da API + +Abra seu navegador e navegue para: + +- **Swagger UI**: [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) +- **OpenAPI JSON**: [http://localhost:8080/v3/api-docs](http://localhost:8080/v3/api-docs) + +## Endpoints da API + +### Saúde e Boas-vindas + +- `GET /api/health` - Endpoint personalizado de verificação de saúde +- `GET /api/welcome` - Endpoint de mensagem de boas-vindas + +### Gerenciamento de Posts + +- `GET /api/posts` - Obter todos os posts +- `GET /api/posts/{id}` - Obter post específico por ID +- `POST /api/posts` - Criar um novo post +- `PATCH /api/posts/{id}` - Atualizar um post existente +- `DELETE /api/posts/{id}` - Excluir um post + +### Gerenciamento de Comentários + +- `GET /api/posts/{postId}/comments` - Obter todos os comentários de um post +- `GET /api/posts/{postId}/comments/{commentId}` - Obter comentário específico +- `POST /api/posts/{postId}/comments` - Adicionar um comentário a um post +- `PATCH /api/posts/{postId}/comments/{commentId}` - Atualizar um comentário +- `DELETE /api/posts/{postId}/comments/{commentId}` - Excluir um comentário + +### Gerenciamento de Curtidas + +- `POST /api/posts/{postId}/like` - Curtir um post +- `DELETE /api/posts/{postId}/like` - Descurtir um post + +### Spring Boot Actuator + +- `GET /actuator/health` - Indicador de saúde do Spring Boot +- `GET /actuator/info` - Informações da aplicação + +## Testando a API + +### Usando Exemplos de cURL + +#### Criar um Post + +```bash +curl -X POST http://localhost:8080/api/posts \ + -H "Content-Type: application/json" \ + -d '{ + "title": "Meu Primeiro Post", + "content": "Este é o conteúdo do meu primeiro post!", + "authorName": "João Silva" + }' +``` + +#### Obter Todos os Posts + +```bash +curl http://localhost:8080/api/posts +``` + +#### Adicionar um Comentário + +```bash +curl -X POST http://localhost:8080/api/posts/1/comments \ + -H "Content-Type: application/json" \ + -d '{ + "content": "Ótimo post!", + "authorName": "Maria Santos" + }' +``` + +#### Curtir um Post + +```bash +curl -X POST http://localhost:8080/api/posts/1/like \ + -H "Content-Type: application/json" \ + -d '{ + "userName": "joao_silva" + }' +``` + +### Usando Swagger UI + +1. Abra [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) +2. Explore os endpoints disponíveis +3. Clique em "Try it out" em qualquer endpoint +4. Preencha os parâmetros e clique em "Execute" + +## Desenvolvimento + +### Executando Testes + +```bash +# Executar todos os testes +./gradlew test + +# Executar com relatório de cobertura +./gradlew test jacocoTestReport + +# Executar classe de teste específica +./gradlew test --tests "SocialAppApplicationTests" +``` + +### Banco de Dados + +A aplicação usa SQLite como banco de dados embarcado: + +- **Arquivo do banco de dados**: `sns_api.db` (criado automaticamente) +- **Localização**: Diretório raiz do projeto +- **Schema**: Gerado automaticamente pelo Hibernate +- **Dados de exemplo**: Carregados de `data.sql` (se presente) + +Para resetar o banco de dados, simplesmente exclua o arquivo `sns_api.db` e reinicie a aplicação. + +## Configuração + +### Propriedades da Aplicação + +Configurações principais em `application.properties`: + +```properties +# Configurações da Aplicação +spring.application.name=socialapp +server.port=8080 + +# Configuração do Banco de Dados +spring.datasource.url=jdbc:sqlite:sns_api.db +spring.jpa.hibernate.ddl-auto=update + +# Configuração OpenAPI/Swagger +springdoc.swagger-ui.path=/swagger-ui.html +springdoc.swagger-ui.operationsSorter=method +``` + +### Configuração CORS + +A aplicação suporta tanto localhost quanto GitHub Codespaces: + +- **Localhost**: `http://localhost:8080` +- **GitHub Codespaces**: Detectado e configurado automaticamente de forma dinâmica + +### Detecção de Ambiente + +A aplicação detecta automaticamente o ambiente de execução: + +- **Desenvolvimento Local**: Usa `http://localhost:8080` +- **GitHub Codespaces**: Usa `https://{codespace-name}-8080.{domain}` + +## Implantação + +### Construindo para Produção + +```bash +# Criar JAR de produção +./gradlew clean build + +# Localização do JAR +ls -la build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### Executando em Produção + +```bash +# Executar com perfil de produção +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod + +# Ou com porta personalizada +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --server.port=8081 +``` + +## Solução de Problemas + +### Problemas Comuns + +#### Porta Já em Uso + +```bash +# Encontrar processo usando porta 8080 +lsof -i :8080 + +# Matar o processo (substitua PID) +kill -9 + +# Ou usar uma porta diferente +./gradlew bootRun --args='--server.port=8081' +``` + +#### Falhas de Build + +```bash +# Limpar e reconstruir +./gradlew clean build + +# Atualizar wrapper Gradle +./gradlew wrapper --gradle-version=8.5 +``` + +#### Problemas com Banco de Dados + +```bash +# Resetar banco de dados +rm sns_api.db +./gradlew bootRun +``` + +### Logs e Monitoramento + +- **Logs da aplicação**: Saída do console ao executar `./gradlew bootRun` +- **Verificação de saúde**: `GET /actuator/health` +- **Informações da aplicação**: `GET /actuator/info` + +## Considerações de Segurança + +⚠️ **Configuração de Desenvolvimento**: A configuração atual é otimizada para desenvolvimento com: + +- CORS habilitado para todas as origens +- Banco de dados SQLite (não adequado para escala de produção) +- Sem autenticação/autorização + +Para implantação em produção, considere: + +- Restringir CORS a domínios específicos +- Usar PostgreSQL/MySQL em vez de SQLite +- Implementar Spring Security para autenticação +- Adicionar limitação de taxa e sanitização de entrada +- Usar criptografia HTTPS/TLS + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/complete/javascript/README.md b/localisation/pt-br/complete/javascript/README.md new file mode 100644 index 0000000..1781bb1 --- /dev/null +++ b/localisation/pt-br/complete/javascript/README.md @@ -0,0 +1,47 @@ +# Exemplo de Aplicação JavaScript + +## Pré-requisitos + +Consulte a documentação [README](../../README.md) para preparação. + +## Primeiros Passos + +### Executar Backend FastAPI + +Use [Exemplo de Aplicação Python](../python/). + +> **NOTA**: Se você usar GitHub Codespaces, certifique-se de que a porta da aplicação Python, `8000`, está definida como **pública**. + +### Executar Frontend React + +1. Obtenha a raiz do repositório. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Instale pacotes npm. + + ```bash + cd $REPOSITORY_ROOT/complete/javascript + npm install + ``` + +1. Execute a aplicação. + + ```bash + npm run dev + ``` + +1. Abra um navegador web e navegue para `http://localhost:3000`. +1. Verifique se a aplicação web está funcionando adequadamente. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/complete/python/README.md b/localisation/pt-br/complete/python/README.md new file mode 100644 index 0000000..db77c30 --- /dev/null +++ b/localisation/pt-br/complete/python/README.md @@ -0,0 +1,296 @@ +# Aplicação Python de Exemplo + +Uma implementação completa de backend FastAPI para um Serviço de Rede Social Simples (SNS) que permite aos usuários criar, recuperar, atualizar e excluir posts; adicionar comentários; e curtir/descurtir posts. + +## 🏗️ Visão Geral da Arquitetura + +- **Framework**: FastAPI com Python 3.12+ +- **Banco de Dados**: SQLite (`sns_api.db`) +- **Documentação da API**: Swagger UI + especificação OpenAPI 3.1 +- **CORS**: Habilitado para requisições cross-origin +- **Validação de Dados**: modelos Pydantic com validação abrangente + +## 📁 Estrutura do Projeto + +```text +python/ +├── main.py # Ponto de entrada da aplicação FastAPI +├── models.py # Modelos de dados e esquemas Pydantic +├── database.py # Operações do banco de dados SQLite +├── openapi.yaml # Especificação OpenAPI 3.0.1 +├── sns_api.db # Arquivo de banco de dados SQLite (criado automaticamente) +├── README.md # Esta documentação +└── .venv/ # Ambiente virtual (criado durante a configuração) +``` + +## 🚀 Início Rápido + +### Pré-requisitos + +Consulte a documentação [README](../../README.md) para preparação. + +### 1. Configuração do Ambiente + +Primeiro, defina a variável de ambiente `$REPOSITORY_ROOT`. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +Em seguida, navegue até o diretório python e crie um ambiente virtual: + +```bash +cd $REPOSITORY_ROOT/complete/python +``` + +Crie o ambiente virtual + +```bash +# Usando uv (recomendado) +uv venv .venv +``` + +```bash +# Usando Python padrão (alternativa) +python -m venv .venv +``` + +### 2. Ativar Ambiente Virtual + +```bash +# No Linux/macOS +source .venv/bin/activate +``` + +```bash +# No Windows Command Prompt +.venv\Scripts\activate +``` + +### 3. Instalar Dependências + +```bash +# Usando uv (recomendado) +uv pip install fastapi uvicorn python-multipart pyyaml +``` + +```bash +# Usando pip (alternativa) +pip install fastapi uvicorn python-multipart pyyaml +``` + +### 4. Copiar Especificação OpenAPI + +Copie a especificação OpenAPI do diretório pai. + +```bash +# No Linux/macOS +cp ../openapi.yaml . +``` + +```powershell +# No Windows Command Prompt +xcopy ..\openapi.yaml . +``` + +### 5. Executar a Aplicação + +Inicie o servidor de desenvolvimento + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload +``` + +A aplicação estará disponível em: + +- **URL Base da API**: `http://localhost:8000/api/` +- **Swagger UI**: `http://localhost:8000/docs` +- **Especificação OpenAPI**: `http://localhost:8000/openapi.json` + +## 📊 Esquema do Banco de Dados + +A aplicação usa SQLite com as seguintes tabelas: + +### Tabela Posts + +- `id` (TEXT, PRIMARY KEY) - UUID +- `username` (TEXT, NOT NULL) - Nome de usuário do autor +- `content` (TEXT, NOT NULL) - Conteúdo do post +- `created_at` (TEXT, NOT NULL) - Timestamp ISO +- `updated_at` (TEXT, NOT NULL) - Timestamp ISO + +### Tabela Comments + +- `id` (TEXT, PRIMARY KEY) - UUID +- `post_id` (TEXT, NOT NULL) - Chave estrangeira para posts +- `username` (TEXT, NOT NULL) - Nome de usuário do autor +- `content` (TEXT, NOT NULL) - Conteúdo do comentário +- `created_at` (TEXT, NOT NULL) - Timestamp ISO +- `updated_at` (TEXT, NOT NULL) - Timestamp ISO + +### Tabela Likes + +- `post_id` (TEXT, NOT NULL) - Chave estrangeira para posts +- `username` (TEXT, NOT NULL) - Usuário que curtiu +- `liked_at` (TEXT, NOT NULL) - Timestamp ISO +- Chave primária: `(post_id, username)` + +## 🔌 Endpoints da API + +### Posts + +- `GET /api/posts` - Listar todos os posts +- `POST /api/posts` - Criar um novo post +- `GET /api/posts/{postId}` - Obter um post específico +- `PATCH /api/posts/{postId}` - Atualizar um post +- `DELETE /api/posts/{postId}` - Excluir um post + +### Comentários + +- `GET /api/posts/{postId}/comments` - Listar comentários de um post +- `POST /api/posts/{postId}/comments` - Criar um comentário +- `GET /api/posts/{postId}/comments/{commentId}` - Obter um comentário específico +- `PATCH /api/posts/{postId}/comments/{commentId}` - Atualizar um comentário +- `DELETE /api/posts/{postId}/comments/{commentId}` - Excluir um comentário + +### Curtidas + +- `POST /api/posts/{postId}/likes` - Curtir um post +- `DELETE /api/posts/{postId}/likes?username={username}` - Descurtir um post + +## 🧪 Testando a API + +### Usando cURL + +#### Criar um Post + +```bash +curl -X POST "http://localhost:8000/api/posts" \ + -H "Content-Type: application/json" \ + -d '{"username": "john_doe", "content": "Olá Mundo! Este é meu primeiro post."}' +``` + +#### Obter Todos os Posts + +```bash +curl -X GET "http://localhost:8000/api/posts" +``` + +#### Adicionar um Comentário + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/comments" \ + -H "Content-Type: application/json" \ + -d '{"username": "jane_smith", "content": "Ótimo post!"}' +``` + +#### Curtir um Post + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/likes" \ + -H "Content-Type: application/json" \ + -d '{"username": "alice_johnson"}' +``` + +### Usando Swagger UI + +1. Navegue para `http://localhost:8000/docs` +2. Explore e teste todos os endpoints da API interativamente +3. Visualize esquemas e exemplos de request/response + +## 📝 Modelos de Dados + +### Modelos de Request + +- `NewPostRequest`: `{username: str, content: str}` +- `UpdatePostRequest`: `{username: str, content: str}` +- `NewCommentRequest`: `{username: str, content: str}` +- `UpdateCommentRequest`: `{username: str, content: str}` +- `LikeRequest`: `{username: str}` + +### Modelos de Response + +- `Post`: Objeto post completo com metadados e contadores +- `Comment`: Objeto comentário completo com metadados +- `LikeResponse`: Confirmação de curtida com timestamp + +## ⚙️ Configuração + +### Variáveis de Ambiente + +A aplicação usa configurações padrão mas pode ser personalizada: + +- **Banco de Dados**: Arquivo SQLite `sns_api.db` (criado automaticamente) +- **Host**: `0.0.0.0` (todas as interfaces) +- **Porta**: `8000` +- **CORS**: Habilitado para todas as origens + +### Considerações para Produção + +Para implantação em produção, considere: + +1. **Banco de Dados**: Mude para PostgreSQL ou MySQL +2. **Variáveis de Ambiente**: Use para configuração sensível +3. **Segurança**: Adicione autenticação e autorização +4. **CORS**: Restrinja a domínios específicos +5. **Logging**: implemente logging estruturado +6. **Monitoramento**: Adicione verificações de saúde e métricas + +## 🛠️ Desenvolvimento + +### Organização de Arquivos + +- **`main.py`**: Configuração da app FastAPI, middleware e definições de rotas +- **`models.py`**: Modelos Pydantic para validação e serialização de dados +- **`database.py`**: Operações SQLite, gerenciamento de conexão e funções CRUD + +### Estilo de Código + +O projeto segue: + +- Diretrizes de estilo Python PEP 8 +- Melhores práticas do FastAPI +- Padrões de programação funcional +- Type hints em todo o código +- Tratamento de erros abrangente + +### Adicionando Novas Funcionalidades + +1. Defina modelos Pydantic em `models.py` +2. Adicione operações de banco de dados em `database.py` +3. Crie endpoints da API em `main.py` +4. Atualize a especificação OpenAPI se necessário + +## 🐛 Solução de Problemas + +### Problemas Comuns + +1. **Porta já em uso**: Mude a porta com `--port 8001` +2. **Problemas com ambiente virtual**: Recrie com `rm -rf .venv && uv venv .venv` +3. **Banco de dados bloqueado**: Pare todas as instâncias em execução da aplicação +4. **Erros de importação**: Certifique-se de que o ambiente virtual está ativado + +### Modo Debug + +Execute com logging adicional: + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload --log-level debug +``` + +## 📚 Recursos Adicionais + +- [Documentação do FastAPI](https://fastapi.tiangolo.com/) +- [Documentação do Pydantic](https://docs.pydantic.dev/) +- [Documentação do SQLite](https://sqlite.org/docs.html) +- [Especificação OpenAPI](https://swagger.io/specification/) + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/00-setup.md b/localisation/pt-br/docs/00-setup.md new file mode 100644 index 0000000..4ca836b --- /dev/null +++ b/localisation/pt-br/docs/00-setup.md @@ -0,0 +1,391 @@ +# 00: Ambiente de Desenvolvimento + +Nesta etapa, você está configurando o ambiente de desenvolvimento para o workshop. + +## Pré-requisitos + +Consulte a documentação [README](../README.md) para preparação. + +## Primeiros Passos + +- [Usar GitHub Codespaces](#usar-github-codespaces) +- [Usar Visual Studio Code](#usar-visual-studio-code) + - [Instalar PowerShell 👉 Para Usuários Windows](#instalar-powershell--para-usuários-windows) + - [Instalar git CLI](#instalar-git-cli) + - [Instalar GitHub CLI](#instalar-github-cli) + - [Instalar Docker Desktop](#instalar-docker-desktop) + - [Instalar Visual Studio Code](#instalar-visual-studio-code) + - [Iniciar Visual Studio Code](#iniciar-visual-studio-code) + - [Configurar Servidores MCP](#configurar-servidores-mcp) +- [Verificar o Modo Agente do GitHub Copilot](#verificar-o-modo-agente-do-github-copilot) +- [Configurar Modo Fera](#configurar-modo-fera) +- [Preparar Instruções Customizadas](#preparar-instruções-customizadas) +- [Analisar Documento de Requisitos do Produto (PRD) e Projetar API](#analisar-documento-de-requisitos-do-produto-prd-e-projetar-api) + +## Usar GitHub Codespaces + +1. Clique neste link 👉 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +1. Uma vez que a instância do GitHub Codespace esteja pronta, abra um terminal e execute o seguinte comando para verificar se tudo que você precisa foi devidamente instalado ou não. + + ```bash + # Python + python --version + ``` + + ```bash + # Node.js + node --version + npm --version + + ``` + + ```bash + # JDK + java --version + ``` + + ```bash + # .NET SDK + dotnet --list-sdks + ``` + +1. Verifique o status do seu repositório. + + ```bash + git remote -v + ``` + + Você deve conseguir ver o seguinte. + + ```bash + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + + Se você ver algo diferente do acima, delete a instância do GitHub Codespace e recrie-a. + +1. Vá para a seção [Configurar Servidores MCP](#configurar-servidores-mcp). + +**👇👇👇 Ao invés disso, se você gostaria de usar VS Code em sua máquina local, siga as instruções abaixo. A seção abaixo não se aplica àqueles que usam GitHub Codespaces. 👇👇👇** + +## Usar Visual Studio Code + +### Instalar PowerShell 👉 Para Usuários Windows + +1. Verifique se você já instalou o PowerShell ou não. + + ```bash + # Bash/Zsh + which pwsh + ``` + + ```bash + # PowerShell + Get-Command pwsh + ``` + + Se você não vir o caminho do comando `pwsh`, significa que você ainda não instalou o PowerShell. Visite a [página de instalação do PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) e siga as instruções. + +1. Verifique a versão do seu PowerShell. + + ```bash + pwsh --version + ``` + + `7.5.0` ou superior é recomendado. Se o seu for inferior a isso, visite a [página de instalação do PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) e siga as instruções. + +### Instalar git CLI + +1. Verifique se você já instalou o git CLI ou não. + + ```bash + # Bash/Zsh + which git + ``` + + ```bash + # PowerShell + Get-Command git + ``` + + Se você não vir o caminho do comando `git`, significa que você ainda não instalou o git CLI. Visite a [página de instalação do git CLI](https://git-scm.com/downloads) e siga as instruções. + +1. Verifique a versão do seu git CLI. + + ```bash + git --version + ``` + + `2.39.0` ou superior é recomendado. Se o seu for inferior a isso, visite a [página de instalação do git CLI](https://git-scm.com/downloads) e siga as instruções. + +### Instalar GitHub CLI + +1. Verifique se você já instalou o GitHub CLI ou não. + + ```bash + # Bash/Zsh + which gh + ``` + + ```bash + # PowerShell + Get-Command gh + ``` + + Se você não vir o caminho do comando `gh`, significa que você ainda não instalou o GitHub CLI. Visite a [página de instalação do GitHub CLI](https://cli.github.com/) e siga as instruções. + +1. Verifique a versão do seu GitHub CLI. + + ```bash + gh --version + ``` + + `2.65.0` ou superior é recomendado. Se o seu for inferior a isso, visite a [página de instalação do GitHub CLI](https://cli.github.com/) e siga as instruções. + +1. Verifique se você fez login no GitHub ou não. + + ```bash + gh auth status + ``` + + Se você ainda não fez login, execute `gh auth login` e faça login. + +### Instalar Docker Desktop + +1. Verifique se você já instalou o Docker Desktop ou não. + + ```bash + # Bash/Zsh + which docker + ``` + + ```bash + # PowerShell + Get-Command docker + ``` + + Se você não vir o caminho do comando `docker`, significa que você ainda não instalou o Docker Desktop. Visite a [página de instalação do Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) e siga as instruções. + +1. Verifique a versão do seu Docker CLI. + + ```bash + docker --version + ``` + + `28.0.4` ou superior é recomendado. Se o seu for inferior a isso, visite a [página de instalação do Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) e siga as instruções. + +### Instalar Visual Studio Code + +1. Verifique se você já instalou o VS Code ou não. + + ```bash + # Bash/Zsh + which code + ``` + + ```bash + # PowerShell + Get-Command code + ``` + + Se você não vir o caminho do comando `code`, significa que você ainda não instalou o VS Code. Visite a [página de instalação do Visual Studio Code](https://code.visualstudio.com/) e siga as instruções. + +1. Verifique a versão do seu VS Code. + + ```bash + code --version + ``` + + `1.99.0` ou superior é recomendado. Se o seu for inferior a isso, visite a [página de instalação do Visual Studio Code](https://code.visualstudio.com/) e siga as instruções. + + > **NOTA**: Você pode não conseguir executar o comando `code`. Neste caso, siga [este documento](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) para configuração. + +### Iniciar Visual Studio Code + +1. Crie um diretório de trabalho. +1. Execute o comando para fazer fork deste repo e cloná-lo em sua máquina local. + + ```bash + gh repo fork microsoft/github-copilot-vibe-coding-workshop --clone + ``` + +1. Navegue para o diretório clonado. + + ```bash + cd github-copilot-vibe-coding-workshop + ``` + +1. Execute o VS Code a partir do terminal. + + ```bash + code . + ``` + +1. Abra um novo terminal dentro do VS Code e execute o seguinte comando para verificar o status do seu repositório. + + ```bash + git remote -v + ``` + + Você deve conseguir ver o seguinte. Se você vir `microsoft` em `origin`, você deve cloná-lo novamente do seu repositório com fork. + + ```bash + origin https://github.com//github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com//github-copilot-vibe-coding-workshop.git (push) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + +1. Verifique se ambas as extensões foram instaladas ou não – [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) e [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). + + ```bash + # Bash/Zsh + code --list-extensions | grep github.copilot + ``` + + ```powershell + # PowerShell + code --list-extensions | Select-String "github.copilot" + ``` + + Se você não vir nada, significa que você ainda não instalou essas extensões. Execute o seguinte comando para instalar as extensões. + + ```bash + code --install-extension "github.copilot" --force && code --install-extension "github.copilot-chat" --force + ``` + +### Configurar Servidores MCP + +1. Certifique-se de que o Docker Desktop esteja em execução se você usar o VS Code em sua máquina local. +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as configurações do servidor MCP. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/.vscode/. \ + $REPOSITORY_ROOT/.vscode/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/* ` + -Destination $REPOSITORY_ROOT/.vscode/ -Recurse -Force + ``` + +1. Abra a Paleta de Comandos digitando F1 ou `Ctrl`+`Shift`+`P` no Windows ou `Cmd`+`Shift`+`P` no Mac OS, e procure `MCP: List Servers`. +1. Escolha `context7` e clique em `Start Server`. +1. Escolha `awesome-copilot` e clique em `Start Server`. + +## Verificar o Modo Agente do GitHub Copilot + +1. Clique no ícone do GitHub Copilot no topo do GitHub Codespace ou VS Code e abra a janela do GitHub Copilot. + + ![Abrir GitHub Copilot Chat](.../../../docs/images/setup-02.png) + +1. Se você for solicitado a fazer login ou se inscrever, faça-o. É gratuito. +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot. + + ![Modo Agente do GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecione o modelo para `GPT-4.1` ou `Claude Sonnet 4`. + +## Configurar Modo Fera + +1. Digite `/mcp.awesome-copilot.get_search_prompt`, seguido de palavras-chave como "beast mode" + + Isso deve mostrar a lista de modos de chat fera. Digite um prompt similar a `4.1 Beast Chat Mode`. Em seguida, será salvo no diretório `.github/chatmodes`. + +1. Escolha o modo `4.1-Beast` em vez do modo `Agent`. Ele mudará automaticamente o LLM para `GPT 4.1`. + +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as configurações do workspace. + + ```bash + # bash/zsh + cp $REPOSITORY_ROOT/docs/.vscode/settings.json \ + $REPOSITORY_ROOT/.vscode/settings.json + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json ` + -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force + ``` + +## Preparar Instruções Customizadas + +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as instruções customizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/setup/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/setup/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +## Analisar Documento de Requisitos do Produto (PRD) e Projetar API + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Adicione [`product-requirements.md`](../product-requirements.md) ao GitHub Copilot. +1. Digite o prompt como o seguinte para o Agente GitHub Copilot gerar um documento OpenAPI para você. Este documento OpenAPI será a base de toda a sua aplicação. + + ```text + Aqui está o PRD para você. Leia cuidadosamente todo o PRD e faça o seguinte para mim. + + - Identifique todos os passos primeiro, que você vai fazer. + - Gere um documento OpenAPI em formato YAML. + - O documento OpenAPI deve capturar todos os endpoints da API, parâmetros e payloads de requisição/resposta. + - Assuma que o servidor da API é `http://localhost:8080` e a URL base é `/api`. + - Salve-o no arquivo `openapi.yaml` na raiz do repositório. + ``` + +1. Verifique se o `openapi.yaml` foi gerado na raiz do repositório. +1. Clique no botão `[keep]` do GitHub Copilot para aceitar o arquivo `openapi.yaml`. + +--- + +OK. Você completou a etapa "Ambiente de Desenvolvimento". Vamos seguir para [ETAPA 01: Desenvolvimento de Backend Python](./01-python.md). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/01-python.md b/localisation/pt-br/docs/01-python.md new file mode 100644 index 0000000..0b01292 --- /dev/null +++ b/localisation/pt-br/docs/01-python.md @@ -0,0 +1,123 @@ +# 01: Desenvolvimento de Backend Python + +## Cenário + +A Contoso é uma empresa que vende produtos para várias atividades ao ar livre. O departamento de marketing da Contoso gostaria de lançar um site de micro mídia social para promover seus produtos para clientes existentes e potenciais. + +Como desenvolvedor Python, você vai construir uma aplicação backend Python usando FastAPI. Por enquanto, você está usando o recurso em memória do SQLite. + +## Pré-requisitos + +Consulte a documentação [README](../README.md) para preparação. + +## Primeiros Passos + +- [Verificar o Modo Agente do GitHub Copilot](#verificar-o-modo-agente-do-github-copilot) +- [Preparar Instruções Customizadas](#preparar-instruções-customizadas) +- [Preparar Ambiente Virtual](#preparar-ambiente-virtual) +- [Construir Aplicação Backend FastAPI](#construir-aplicação-backend-fastapi) + +### Verificar o Modo Agente do GitHub Copilot + +1. Clique no ícone do GitHub Copilot no topo do GitHub Codespace ou VS Code e abra a janela do GitHub Copilot. + + ![Abrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Se você for solicitado a fazer login ou se inscrever, faça-o. É gratuito. +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot. + + ![Modo Agente do GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecione o modelo para `GPT-4.1` ou `Claude Sonnet 4`. +1. Certifique-se de que você configurou os [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instruções Customizadas + +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as instruções customizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/python/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/python/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Preparar Ambiente Virtual + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Use um prompt como o abaixo para preparar o ambiente virtual para desenvolvimento de aplicação Python. + + ```text + Gostaria de escrever uma aplicação Python. Mas antes disso, preciso configurar um ambiente virtual. Siga as instruções abaixo. + + - Use context7. + - Seu diretório de trabalho é `python`. + - Identifique todos os passos primeiro, que você vai fazer. + - Use `.venv` para o ambiente virtual. + - Use `uv` como gerenciador de pacotes Python. + ``` + +### Construir Aplicação Backend FastAPI + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Adicione [`product-requirements.md`](../product-requirements.md) e [`openapi.yaml`](../openapi.yaml) ao GitHub Copilot. +1. Use um prompt como o abaixo para construir uma aplicação backend FastAPI. + + ```text + Gostaria de construir uma aplicação FastAPI como API backend. Leia cuidadosamente todo o PRD e `openapi.yaml`. Então, siga as instruções abaixo. + + - Use context7. + - Seu diretório de trabalho é `python`. + - Identifique todos os passos primeiro, que você vai fazer. + - Use FastAPI como framework da aplicação API. + - Use SQLite como banco de dados. + - Use `sns_api.db` como nome do banco de dados SQLite. + - O banco de dados deve sempre ser inicializado sempre que iniciar a aplicação. + - Use `openapi.yaml` que descreve todos os endpoints e esquema de dados. + - Use o número da porta `8000`. + - Certifique-se de permitir CORS de qualquer lugar. + - O ponto de entrada é `main.py`. + - A aplicação API deve renderizar a página Swagger UI através de um endpoint padrão. + - A aplicação API deve renderizar exatamente o mesmo documento OpenAPI através de um endpoint padrão. + - NÃO adicione nada que não esteja definido em `openapi.yaml`. + - NÃO modifique nada definido em `openapi.yaml`. + ``` + +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. +1. Uma vez que a aplicação seja construída, verifique se está escrita adequadamente ou não. + + ```text + Execute a aplicação FastAPI e verifique se a aplicação está funcionando adequadamente. Também verifique se o endpoint OpenAPI renderiza exatamente o mesmo conteúdo que `openapi.yaml`. + + Se a execução da aplicação falhar, analise os problemas e corrija-os. + ``` + +1. Abra um navegador web e navegue para `http://localhost:8000`. +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +--- + +OK. Você completou a etapa "Python". Vamos seguir para [ETAPA 02: Desenvolvimento de Frontend JavaScript](./02-javascript.md). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/02-javascript.md b/localisation/pt-br/docs/02-javascript.md new file mode 100644 index 0000000..9f15237 --- /dev/null +++ b/localisation/pt-br/docs/02-javascript.md @@ -0,0 +1,169 @@ +# 02: Desenvolvimento de Frontend JavaScript + +## Cenário + +A Contoso é uma empresa que vende produtos para várias atividades ao ar livre. O departamento de marketing da Contoso gostaria de lançar um site de micro mídia social para promover seus produtos para clientes existentes e potenciais. + +Como desenvolvedor JavaScript, você vai construir uma aplicação frontend JavaScript usando React para se comunicar com a aplicação backend Python API. + +## Pré-requisitos + +Consulte a documentação [README](../README.md) para preparação. + +## Primeiros Passos + +- [Verificar o Modo Agente do GitHub Copilot](#verificar-o-modo-agente-do-github-copilot) +- [Preparar Instruções Customizadas](#preparar-instruções-customizadas) +- [Preparar Projeto da Aplicação](#preparar-projeto-da-aplicação) +- [Preparar Servidor MCP Figma](#preparar-servidor-mcp-figma) +- [Gerar Componentes UI do Figma](#gerar-componentes-ui-do-figma) +- [Executar Aplicação Backend FastAPI](#executar-aplicação-backend-fastapi) +- [Construir Aplicação Frontend React](#construir-aplicação-frontend-react) +- [Verificar Aplicação Frontend React](#verificar-aplicação-frontend-react) + +### Verificar o Modo Agente do GitHub Copilot + +1. Clique no ícone do GitHub Copilot no topo do GitHub Codespace ou VS Code e abra a janela do GitHub Copilot. + + ![Abrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Se você for solicitado a fazer login ou se inscrever, faça-o. É gratuito. +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot. + + ![Modo Agente do GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecione o modelo para `GPT-4.1` ou `Claude Sonnet 4`. +1. Certifique-se de que você configurou os [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instruções Customizadas + +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as instruções customizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/javascript/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/javascript/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Preparar Projeto da Aplicação + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Use um prompt como o abaixo para criar um projeto de aplicação web React. + + ```text + Gostaria de criar um projeto de aplicação web React. Siga as instruções abaixo. + + - Certifique-se de que é uma aplicação web, não mobile. + - Seu diretório de trabalho é `javascript`. + - Identifique todos os passos primeiro, que você vai fazer. + - Use ViteJS como framework da aplicação frontend. + - Use configurações padrão ao inicializar o projeto. + - Use `SimpleSocialMediaApplication` como nome do projeto durante a inicialização. + - Use o número da porta `3000`. + - Apenas inicialize o projeto. NÃO vá além. + ``` + +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +### Preparar Servidor MCP Figma + +1. Certifique-se de que você configurou os [Servidores MCP](./00-setup.md#configurar-servidores-mcp). +1. Obtenha o token de acesso pessoal (PAT) do [Figma](https://www.figma.com/). +1. Abra a Paleta de Comandos digitando F1 ou `Ctrl`+`Shift`+`P` no Windows ou `Cmd`+`Shift`+`P` no Mac OS, e procure `MCP: List Servers`. +1. Escolha `Framelink Figma MCP` e clique em `Start Server`. +1. Digite o PAT que você obteve do Figma. + +### Gerar Componentes UI do Figma + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que você está executando o servidor MCP Figma. +1. Copie o [template de design Figma](https://www.figma.com/community/file/1495954632647006209) para sua conta. + + ![Página do template de design Figma](../../../docs/images/javascript-01.png) + +1. Clique com o botão direito em cada seção - `Home`, `Search`, `Post Details`, `Post Modal` e `Name Input Modal` 👉 Selecione `Copy/Paste as` 👉 Selecione `Copy link to selection` para obter o link para cada seção. Anote todos os cinco links. + +### Executar Aplicação Backend FastAPI + +1. Certifique-se de que a aplicação backend FastAPI está funcionando. + + ```text + Execute a API backend FastAPI, que está localizada no diretório `python`. + ``` + + > **NOTA**: Você pode usar a aplicação de exemplo [`complete/python`](../complete/python/) em vez disso. + +1. Se você usar GitHub Codespaces, certifique-se de que o número da porta `8000` está definido como `public` em vez de `private`. Caso contrário, você receberá o erro `401` ao acessar da aplicação frontend. + +### Construir Aplicação Frontend React + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Certifique-se de que você tem todos os links das seções Figma dos 5 recuperados da [seção anterior](#gerar-componentes-ui-do-figma). +1. Adicione [`product-requirements.md`](../product-requirements.md) e [`openapi.yaml`](../openapi.yaml) ao GitHub Copilot. +1. Use um prompt como o abaixo para construir a aplicação baseada nos requisitos e documento OpenAPI. + + ```text + Gostaria de construir uma aplicação web React. Siga as instruções abaixo. + + - Seu diretório de trabalho é `javascript`. + - Identifique todos os passos primeiro, que você vai fazer. + - Há uma aplicação API backend rodando em `http://localhost:8000`. + - Use `openapi.yaml` que descreve todos os endpoints e esquema de dados. + - Use o número da porta `3000`. + - Crie todos os componentes UI definidos neste link: {{FIGMA_SECTION_LINK}}. + - NÃO adicione nada não relacionado aos componentes UI. + - NÃO adicione nada não definido em `openapi.yaml`. + - NÃO modifique nada definido em `openapi.yaml`. + - Forneça indicação visual quando a API backend estiver indisponível ou inacessível por qualquer motivo. + ``` + +1. Repita mais quatro vezes para os outros quatro links de design Figma. +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +### Verificar Aplicação Frontend React + +1. Certifique-se de que a aplicação backend FastAPI está funcionando. + + ```text + Execute a API backend FastAPI, que está localizada no diretório `python`. + ``` + +1. Verifique se foi construída adequadamente ou não. + + ```text + Execute a aplicação React e verifique se a aplicação está funcionando adequadamente. + + Se a execução da aplicação falhar, analise os problemas e corrija-os. + ``` + +1. Abra um navegador web e navegue para `http://localhost:3000`. +1. Verifique se ambas as aplicações frontend e backend estão funcionando adequadamente. +1. Clique no botão `[keep]` do GitHub Copilot para aceitar as mudanças. + +--- + +OK. Você completou a etapa "JavaScript". Vamos seguir para [ETAPA 03: Migração Java do Python](./03-java.md). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/03-java.md b/localisation/pt-br/docs/03-java.md new file mode 100644 index 0000000..fc473d9 --- /dev/null +++ b/localisation/pt-br/docs/03-java.md @@ -0,0 +1,164 @@ +# 03: Migração Java do Python + +## Cenário + +A Contoso é uma empresa que vende produtos para várias atividades ao ar livre. O departamento de marketing da Contoso gostaria de lançar um site de micro mídia social para promover seus produtos para clientes existentes e potenciais. + +Como um desenvolvedor Python deixou a empresa, os stakeholders pediram para migrar a aplicação backend Python API existente para Java, usando Spring Boot. + +Agora, como desenvolvedor Java, você deve migrar a aplicação FastAPI existente para Spring Boot. Você tem muito pouco conhecimento de Python e FastAPI, a propósito. + +## Pré-requisitos + +Consulte a documentação [README](../README.md) para preparação. + +## Primeiros Passos + +- [Verificar o Modo Agente do GitHub Copilot](#verificar-o-modo-agente-do-github-copilot) +- [Preparar Instruções Customizadas](#preparar-instruções-customizadas) +- [Preparar Projeto Spring Boot](#preparar-projeto-spring-boot) +- [Migrar Aplicação API FastAPI](#migrar-aplicação-api-fastapi) +- [Verificar Aplicação Backend Spring Boot](#verificar-aplicação-backend-spring-boot) + +### Verificar o Modo Agente do GitHub Copilot + +1. Clique no ícone do GitHub Copilot no topo do GitHub Codespace ou VS Code e abra a janela do GitHub Copilot. + + ![Abrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Se você for solicitado a fazer login ou se inscrever, faça-o. É gratuito. +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot. + + ![Modo Agente do GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecione o modelo para `GPT-4.1` ou `Claude Sonnet 4`. +1. Certifique-se de que você configurou os [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instruções Customizadas + +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as instruções customizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/java/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/java/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Preparar Projeto Spring Boot + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Instale o Spring Boot CLI. + + ```bash + sdk install springboot + ``` + +1. Use um prompt como o abaixo para criar um projeto de aplicação Spring Boot. + + ```text + Gostaria de criar um projeto de aplicação Spring Boot. Siga as instruções abaixo. + + - Use context7. + - Seu diretório de trabalho é `java`. + - Identifique todos os passos primeiro, que você vai fazer. + - Use Spring Boot CLI para criar o projeto de aplicação Spring Boot. + - Use Gradle como gerenciador de pacotes Java. + - Use o nome do pacote `com.contoso.socialapp`. + - Use o artifact ID `socialapp`. + - Use o group ID `com.contoso`. + - Use o tipo de pacote `jar`. + - Use a versão OpenJDK `21`. + - Adicione dependências - `Spring Web`, `Spring Boot Actuator` e `Lombok`. + - Use o número da porta `8080`. + - Certifique-se de permitir CORS de qualquer lugar. + - Construa a aplicação Spring Boot e verifique se a aplicação foi construída adequadamente. + - Execute esta aplicação Spring Boot e verifique se a aplicação está funcionando adequadamente. + - Se construir ou executar a aplicação falhar, analise os problemas e corrija-os. + ``` + +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +### Migrar Aplicação API FastAPI + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Adicione [`product-requirements.md`](../product-requirements.md) e [`openapi.yaml`](../openapi.yaml) ao GitHub Copilot. +1. Use um prompt como o abaixo para migrar FastAPI para Spring Boot. + + ```text + Agora, estamos migrando a aplicação API baseada em FastAPI existente para aplicação API Spring Boot. Siga as instruções abaixo para a migração. + + - Use context7. + - A aplicação FastAPI existente está localizada em `python`. + - Seu diretório de trabalho é `java/socialapp`. + - Identifique todos os passos primeiro, que você vai fazer. + - Analise a estrutura da aplicação da aplicação FastAPI existente. + - Migre todos os endpoints. Ambos os endpoints correspondentes devem ser exatamente iguais um ao outro. + - Use SQLite como banco de dados. + - Use `sns_api.db` como nome do banco de dados SQLite. + - O banco de dados deve sempre ser inicializado sempre que iniciar a aplicação. + - Use `openapi.yaml` que descreve todos os endpoints e esquema de dados. + - A aplicação API deve renderizar a página Swagger UI através de um endpoint padrão. + - A aplicação API deve renderizar exatamente o mesmo documento OpenAPI através de um endpoint padrão. + - NÃO adicione nada não definido em `openapi.yaml`. + - NÃO modifique nada definido em `openapi.yaml`. + - Se necessário, adicione mais pacotes para OpenAPI e Swagger UI. + ``` + +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. +1. Uma vez que a migração esteja completa, use um prompt como o abaixo para verificar o resultado da migração. + + ```text + Gostaria de construir a aplicação Spring Boot. Siga as instruções. + + - Use context7. + - Construa a aplicação Spring Boot e verifique se a aplicação foi construída adequadamente. + - Se construir a aplicação falhar, analise os problemas e corrija-os. + ``` + + > **NOTA**: + > + > - Até que a construção seja bem-sucedida, itere esta etapa. + > - Se a construção continuar falhando, verifique as mensagens de erro e pergunte ao Agente GitHub Copilot para entendê-las. + +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +### Verificar Aplicação Backend Spring Boot + +1. Uma vez que a aplicação seja construída, verifique se está escrita adequadamente ou não. + + ```text + Execute a aplicação Spring Boot e verifique se a aplicação está funcionando adequadamente verificando todos os endpoints. Também verifique se o endpoint OpenAPI renderiza exatamente o mesmo conteúdo que `openapi.yaml`. + + Se a execução da aplicação falhar, analise os problemas e corrija-os. Use context7. + ``` + +1. Abra um navegador web e navegue para `http://localhost:8080`. +1. Clique no botão ![a imagem do botão "keep"](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +--- + +OK. Você completou a etapa "Java". Vamos seguir para [ETAPA 04: Migração .NET do JavaScript](./04-dotnet.md). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/04-dotnet.md b/localisation/pt-br/docs/04-dotnet.md new file mode 100644 index 0000000..3c963eb --- /dev/null +++ b/localisation/pt-br/docs/04-dotnet.md @@ -0,0 +1,177 @@ +# 04: Migração .NET do JavaScript + +## Cenário + +A Contoso é uma empresa que vende produtos para várias atividades ao ar livre. O departamento de marketing da Contoso gostaria de lançar um site de micro mídia social para promover seus produtos para clientes existentes e potenciais. + +Eles já têm uma aplicação frontend escrita em JavaScript, mais especificamente em React. No entanto, de repente, eles enviaram novos requisitos para redesenvolver a aplicação frontend usando .NET, especialmente em Blazor. + +Agora, como desenvolvedor .NET, você deve migrar a aplicação React existente para Blazor. Você tem muito pouco conhecimento de JavaScript e React, a propósito. + +## Pré-requisitos + +Consulte a documentação [README](../README.md) para preparação. + +## Primeiros Passos + +- [Verificar o Modo Agente do GitHub Copilot](#verificar-o-modo-agente-do-github-copilot) +- [Preparar Instruções Customizadas](#preparar-instruções-customizadas) +- [Preparar Projeto de Aplicação Web Blazor](#preparar-projeto-de-aplicação-web-blazor) +- [Executar Aplicação Backend Spring Boot](#executar-aplicação-backend-spring-boot) +- [Migrar Aplicação Web React](#migrar-aplicação-web-react) +- [Verificar Aplicação Frontend Blazor](#verificar-aplicação-frontend-blazor) + +### Verificar o Modo Agente do GitHub Copilot + +1. Clique no ícone do GitHub Copilot no topo do GitHub Codespace ou VS Code e abra a janela do GitHub Copilot. + + ![Abrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Se você for solicitado a fazer login ou se inscrever, faça-o. É gratuito. +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot. + + ![Modo Agente do GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecione o modelo para `GPT-4.1` ou `Claude Sonnet 4`. +1. Certifique-se de que você configurou os [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instruções Customizadas + +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as instruções customizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/dotnet/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/dotnet/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Preparar Projeto de Aplicação Web Blazor + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Use um prompt como o abaixo para criar um projeto de aplicação web Blazor. + + ```text + Gostaria de criar um projeto de aplicação web Blazor. Siga as instruções abaixo. + + - Use context7. + - Seu diretório de trabalho é `dotnet`. + - Identifique todos os passos primeiro, que você vai fazer. + - Mostre-me a lista de projetos .NET relacionados ao Blazor e peça para eu escolher. + - Gere um projeto Blazor. + - Use o nome do projeto `Contoso.BlazorApp`. + - Atualize `launchSettings.json` para mudar o número da porta para `3031` para HTTP, `43031` para HTTPS. + - Crie uma solução, `ContosoWebApp`, e adicione o projeto Blazor nesta solução. + - Construa a aplicação Blazor e verifique se a aplicação foi construída adequadamente. + - Execute esta aplicação Blazor e verifique se a aplicação está funcionando adequadamente. + - Se construir ou executar a aplicação falhar, analise os problemas e corrija-os. + ``` + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +### Executar Aplicação Backend Spring Boot + +1. Certifique-se de que a aplicação backend Spring Boot está funcionando. + + ```text + Execute a API backend Spring Boot, que está localizada no diretório `java`. + ``` + + > **NOTA**: Você pode usar a aplicação de exemplo [`complete/java`](../complete/java/) em vez disso. + +1. Se você usar GitHub Codespaces, certifique-se de que o número da porta `8080` está definido como `public` em vez de `private`. Caso contrário, você receberá o erro `401` ao acessar da aplicação frontend. + +### Migrar Aplicação Web React + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Certifique-se de que o servidor MCP `context7` está funcionando. +1. Use um prompt como o abaixo para migrar React para Blazor. + + ```text + Agora, estamos migrando a aplicação web baseada em React existente para aplicação web Blazor. Siga as instruções abaixo para a migração. + + - Use context7. + - A aplicação React existente está localizada em `javascript`. + - Seu diretório de trabalho é `dotnet/Contoso.BlazorApp`. + - Identifique todos os passos primeiro, que você vai fazer. + - Há uma aplicação API backend rodando em `http://localhost:8080`. + - Analise a estrutura da aplicação da aplicação React existente. + - Migre todos os componentes React para componentes Blazor. Ambos os componentes correspondentes devem ser o mais próximo possível um do outro. + - Migre todos os elementos CSS necessários do React para Blazor. + - Ao migrar elementos JavaScript do React para Blazor, maximize o uso dos recursos nativos do Blazor o máximo possível. Se você tiver que usar JavaScript, use os recursos JSInterop do Blazor. + - Se necessário, adicione pacotes NuGet que sejam compatíveis com .NET 9. + ``` + +1. Uma vez que a migração esteja completa, use um prompt como o abaixo para verificar o resultado da migração. + + ```text + Gostaria de construir a aplicação Blazor. Siga as instruções. + + - Use context7. + - Construa a aplicação Blazor e verifique se a aplicação foi construída adequadamente. + - Se construir a aplicação falhar, analise os problemas e corrija-os. + ``` + + > **NOTA**: + > + > - Até que a construção seja bem-sucedida, itere esta etapa. + > - Se a construção continuar falhando, verifique as mensagens de erro e pergunte ao Agente GitHub Copilot para entendê-las. + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. +1. Uma vez que a construção seja bem-sucedida, use um prompt como o abaixo para verificar o resultado da migração. + + ```text + Gostaria de executar a aplicação Blazor. Siga as instruções. + + - Use context7. + - Execute esta aplicação Blazor e verifique se a aplicação está funcionando adequadamente. + - Ignore o erro de conexão da aplicação API backend nesta etapa. + - Se executar a aplicação falhar, analise os problemas e corrija-os. + ``` + +### Verificar Aplicação Frontend Blazor + +1. Certifique-se de que a aplicação backend Spring Boot está funcionando. + + ```text + Execute a API backend Spring Boot, que está localizada no diretório `java`. + ``` + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. +1. Verifique se foi construída adequadamente ou não. + + ```text + Execute a aplicação Blazor e verifique se a aplicação está funcionando adequadamente. + + Se a execução da aplicação falhar, analise os problemas e corrija-os. + ``` + +1. Abra um navegador web e navegue para `http://localhost:3031`. +1. Verifique se ambas as aplicações frontend e backend estão funcionando adequadamente. +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +--- + +OK. Você completou a etapa ".NET". Vamos seguir para [ETAPA 05: Containerização](./05-containerization.md). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/05-containerization.md b/localisation/pt-br/docs/05-containerization.md new file mode 100644 index 0000000..d3747b7 --- /dev/null +++ b/localisation/pt-br/docs/05-containerization.md @@ -0,0 +1,193 @@ +# 05: Containerização + +## Cenário + +A Contoso é uma empresa que vende produtos para várias atividades ao ar livre. O departamento de marketing da Contoso gostaria de lançar um site de micro mídia social para promover seus produtos para clientes existentes e potenciais. + +Eles agora têm tanto uma aplicação backend baseada em Java quanto uma aplicação frontend baseada em .NET. Eles querem containerizá-las para que possam ser implantadas em qualquer plataforma. + +Agora, como engenheiro DevOps, você deve containerizar ambas as aplicações. + +## Pré-requisitos + +Consulte a documentação [README](../README.md) para preparação. + +## Primeiros Passos + +- [Verificar o Modo Agente do GitHub Copilot](#verificar-o-modo-agente-do-github-copilot) +- [Preparar Instruções Customizadas](#preparar-instruções-customizadas) +- [Containerizar Aplicação Java](#containerizar-aplicação-java) +- [Containerizar Aplicação .NET](#containerizar-aplicação-net) +- [Orquestrar Contêineres](#orquestrar-contêineres) + +### Verificar o Modo Agente do GitHub Copilot + +1. Clique no ícone do GitHub Copilot no topo do GitHub Codespace ou VS Code e abra a janela do GitHub Copilot. + + ![Abrir GitHub Copilot Chat](../../../docs/images/setup-02.png) + +1. Se você for solicitado a fazer login ou se inscrever, faça-o. É gratuito. +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot. + + ![Modo Agente do GitHub Copilot](../../../docs/images/setup-03.png) + +1. Selecione o modelo para `GPT-4.1` ou `Claude Sonnet 4`. +1. Certifique-se de que você configurou os [Servidores MCP](./00-setup.md#configurar-servidores-mcp). + +### Preparar Instruções Customizadas + +1. Defina a variável de ambiente `$REPOSITORY_ROOT`. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. Copie as instruções customizadas. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/containerization/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/containerization/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Containerizar Aplicação Java + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Use um prompt como o abaixo para construir uma imagem de contêiner para a aplicação Java. + + ```text + Gostaria de construir uma imagem de contêiner de uma aplicação Java. Siga as instruções abaixo. + + - Identifique todos os passos primeiro, que você vai fazer. + - A aplicação Java está localizada em `java/socialapp`. + - Seu diretório de trabalho é a raiz do repositório. + - Crie um Dockerfile, `Dockerfile.java`. + - Use Microsoft OpenJDK 21. + - Use abordagem de construção multi-estágio. + - Extraia JRE do JDK. + - Use o número da porta de destino `8080` para a imagem do contêiner. + - Adicione ambas as variáveis de ambiente, `CODESPACE_NAME` e `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` do host para a imagem do contêiner. + - Crie um arquivo de banco de dados SQLite, `sns_api.db`, na imagem do contêiner. NÃO copie o arquivo do host. + ``` + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +1. Uma vez que `Dockerfile.java` seja criado, construa a imagem do contêiner com o seguinte prompt. + + ```text + Use `Dockerfile.java` e construa uma imagem de contêiner. + + - Use `contoso-backend` como nome da imagem do contêiner. + - Use `latest` como tag da imagem do contêiner. + - Verifique se a imagem do contêiner foi construída adequadamente. + - Se a construção falhar, analise os problemas e corrija-os. + ``` + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +1. Uma vez que a construção seja bem-sucedida, execute a imagem do contêiner com o seguinte prompt. + + ```text + Use a imagem do contêiner recém-construída, execute um contêiner e verifique se a aplicação está funcionando adequadamente. + + - Use a porta do host `8080`. + - Ambos os valores `CODESPACE_NAME` e `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` devem ser aqueles do GitHub Codespaces. + ``` + +### Containerizar Aplicação .NET + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Use um prompt como o abaixo para construir uma imagem de contêiner para a aplicação .NET. + + ```text + Gostaria de construir uma imagem de contêiner de uma aplicação .NET. Siga as instruções abaixo. + + - Identifique todos os passos primeiro, que você vai fazer. + - A aplicação .NET está localizada em `dotnet`. + - Seu diretório de trabalho é a raiz do repositório. + - Crie um Dockerfile, `Dockerfile.dotnet`. + - Use .NET 9. + - Use abordagem de construção multi-estágio. + - Use o número da porta de destino `8080` para a imagem do contêiner. + - Adicione a variável de ambiente, `ApiSettings__BaseUrl` ao contêiner. Deve apontar para a aplicação Java, `http://localhost:8080/api`. + ``` + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +1. Uma vez que `Dockerfile.dotnet` seja criado, construa a imagem do contêiner com o seguinte prompt. + + ```text + Use `Dockerfile.dotnet` e construa uma imagem de contêiner. + + - Use `contoso-frontend` como nome da imagem do contêiner. + - Use `latest` como tag da imagem do contêiner. + - Verifique se a imagem do contêiner foi construída adequadamente. + - Se a construção falhar, analise os problemas e corrija-os. + ``` + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +1. Uma vez que a construção seja bem-sucedida, execute a imagem do contêiner com o seguinte prompt. + + ```text + Use a imagem do contêiner recém-construída, execute um contêiner e verifique se a aplicação está funcionando adequadamente. + + - Use a porta do host `3030`. + - Passe a variável de ambiente `ApiSettings__BaseUrl` o valor de `http://localhost:8080/api`. + ``` + +1. Certifique-se de que ambas as aplicações frontend e backend NÃO estão se comunicando uma com a outra porque elas ainda não se conhecem. Execute o prompt como abaixo. + + ```text + Remova ambos os contêineres Java e .NET e suas respectivas imagens de contêiner. + ``` + +### Orquestrar Contêineres + +1. Certifique-se de que você está usando o Modo Agente do GitHub Copilot com o modelo `Claude Sonnet 4` ou `GPT-4.1`. +1. Use um prompt como o abaixo para construir um arquivo Docker Compose. + + ```text + Gostaria de criar um arquivo Docker Compose. Siga as instruções abaixo. + + - Identifique todos os passos primeiro, que você vai fazer. + - Seu diretório de trabalho é a raiz do repositório. + - Use `Dockerfile.java` como aplicação backend. + - Use `Dockerfile.dotnet` como aplicação frontend. + - Crie `compose.yaml` como arquivo Docker Compose. + - Use `contoso` como nome da rede. + - Use `contoso-backend` como nome do contêiner da aplicação Java. Sua porta de destino é 8080, e porta do host é 8080. + - Use `contoso-frontend` como nome do contêiner da aplicação .NET. Sua porta de destino é 8080, e porta do host é 3030. + - Adicione ambas as variáveis de ambiente, `CODESPACE_NAME` e `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` do host para o contêiner Java. + - Adicione a variável de ambiente, `ApiSettings__BaseUrl` ao contêiner .NET. Deve apontar para o `/api` da aplicação Java. + ``` + +1. Clique no botão ![a imagem do botão keep](https://img.shields.io/badge/keep-blue) do GitHub Copilot para aceitar as mudanças. + +1. Uma vez que o arquivo `compose.yaml` seja criado, execute-o e verifique se ambas as aplicações estão funcionando adequadamente. + + ```text + Execute o arquivo Docker compose e verifique se todas as aplicações estão funcionando adequadamente. + ``` + +1. Abra um navegador web e navegue para `http://localhost:3030`, e verifique se as aplicações estão funcionando adequadamente. + +--- + +Parabéns! 🎉 Você completou todas as sessões do workshop com sucesso! + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/README.md b/localisation/pt-br/docs/README.md new file mode 100644 index 0000000..88df141 --- /dev/null +++ b/localisation/pt-br/docs/README.md @@ -0,0 +1,16 @@ +# Instruções de Aprendizado Autoguiado + +Aqui estão os materiais de instrução de aprendizado autoguiado. Use-os e construa aplicações! + +| Etapa | Link | +|------------------------------------------|----------------------------------------------------| +| 00: Ambiente de Desenvolvimento | [00-setup.md](./00-setup.md) | +| 01: Desenvolvimento de Backend Python | [01-python.md](./01-python.md) | +| 02: Desenvolvimento de Frontend JavaScript | [02-javascript.md](./02-javascript.md) | +| 03: Migração Java do Python | [03-java.md](./03-java.md) | +| 04: Migração .NET do JavaScript | [04-dotnet.md](./04-dotnet.md) | +| 05: Containerização | [05-containerization.md](./05-containerization.md) | + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/custom-instructions/containerization/copilot-instructions.md b/localisation/pt-br/docs/custom-instructions/containerization/copilot-instructions.md new file mode 100644 index 0000000..18190c2 --- /dev/null +++ b/localisation/pt-br/docs/custom-instructions/containerization/copilot-instructions.md @@ -0,0 +1,38 @@ +# Regras DevOps + +Você é um engenheiro DevOps sênior e especialista em containerização, Docker, Dockerfile, Docker Compose e Kubernetes. + +## Diretrizes Gerais + +### Princípios Básicos + +- Use inglês para todo código, documentação e comentários. +- Priorize código modular, reutilizável e escalável. +- Siga convenções de nomenclatura: + - camelCase para variáveis, funções e nomes de métodos. + - PascalCase para nomes de classes. + - snake_case para nomes de arquivos e estruturas de diretório. + - UPPER_CASE para variáveis de ambiente. +- Evite valores hard-coded; use variáveis de ambiente ou arquivos de configuração. +- Aplique princípios de Infrastructure-as-Code (IaC) quando possível. +- Sempre considere o princípio de menor privilégio em acesso e permissões. + +### Princípios DevOps + +- Automatize tarefas repetitivas e evite intervenções manuais. +- Escreva pipelines CI/CD modulares e reutilizáveis. +- Use aplicações containerizadas com registries seguros. +- Gerencie segredos usando Azure Key Vault ou outras soluções de gerenciamento de segredos. +- Construa sistemas resilientes aplicando estratégias de deploy blue-green ou canary. + +## Cenários Específicos + +### Docker e Docker Compose + +- Use builds multi-estágio em Dockerfiles para otimizar o tamanho da imagem. +- Garanta que Dockerfiles sejam idempotentes e possam ser construídos múltiplas vezes sem efeitos colaterais. +- Use Docker Compose para ambientes de desenvolvimento e teste locais. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/custom-instructions/dotnet/copilot-instructions.md b/localisation/pt-br/docs/custom-instructions/dotnet/copilot-instructions.md new file mode 100644 index 0000000..ee35031 --- /dev/null +++ b/localisation/pt-br/docs/custom-instructions/dotnet/copilot-instructions.md @@ -0,0 +1,85 @@ +# Regras de Desenvolvimento .NET + +Você é um desenvolvedor .NET sênior e especialista em C#, ASP.NET Core, API Mínima, Blazor e .NET Aspire. + +## Estilo e Estrutura de Código + +- Escreva código C# conciso e idiomático com exemplos precisos. +- Siga convenções e melhores práticas do .NET e ASP.NET Core. +- Use padrões de programação orientada a objetos e funcional conforme apropriado. +- Prefira LINQ e expressões lambda para operações de coleção. +- Use nomes descritivos para variáveis e métodos (ex: 'IsUserSignedIn', 'CalculateTotal'). +- Estruture arquivos de acordo com convenções .NET (Controllers, Models, Services, etc.). +- Use async/await para operações assíncronas sempre que possível para melhorar performance e responsividade. + +## Convenções de Nomenclatura + +- Use PascalCase para nomes de classe, nomes de método e membros públicos. +- Use camelCase para variáveis locais e campos privados. +- Use UPPERCASE para constantes. +- Prefixe nomes de interface com "I" (ex: 'IUserService'). + +## Uso de C# e .NET + +- Use recursos do C# 10+ quando apropriado (ex: record types, pattern matching, null-coalescing assignment). +- Aproveite recursos integrados do ASP.NET Core e middleware. +- Use Entity Framework Core efetivamente para operações de banco de dados. + +## Sintaxe e Formatação + +- Siga as Convenções de Codificação C# (https://docs.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions) +- Use sintaxe expressiva do C# (ex: operadores null-conditional, interpolação de string) +- Use 'var' para tipagem implícita quando o tipo for óbvio. + +## Tratamento de Erros e Validação + +- Use exceções para casos excepcionais, não para fluxo de controle. +- Implemente logging adequado de erros usando logging integrado do .NET ou logger de terceiros. +- Use Data Annotations ou Fluent Validation para validação de modelo. +- Implemente middleware global de tratamento de exceções. +- Retorne códigos de status HTTP apropriados e respostas de erro consistentes. + +## Design de API + +- Siga princípios de design de API RESTful. +- Use roteamento por atributo em controllers. +- Implemente versionamento para sua API. +- Use filtros de ação para concerns transversais. + +## Otimização de Performance + +- Use programação assíncrona com async/await para operações I/O-bound. +- Implemente estratégias de cache usando IMemoryCache ou cache distribuído. +- Use consultas LINQ eficientes e evite problemas de consulta N+1. +- Implemente paginação para grandes conjuntos de dados. + +## Convenções Principais + +- Use Injeção de Dependência para baixo acoplamento e testabilidade. +- Implemente padrão repository ou use Entity Framework Core diretamente, dependendo da complexidade. +- Use AutoMapper para mapeamento objeto-para-objeto se necessário. +- Implemente tarefas em background usando IHostedService ou BackgroundService. + +## Testes + +- Escreva testes unitários usando xUnit, NUnit ou MSTest. +- Use Moq ou NSubstitute para mock de dependências. +- Implemente testes de integração para endpoints de API. + +## Segurança + +- Use middleware de Autenticação e Autorização. +- Implemente autenticação JWT para autenticação de API stateless. +- Use HTTPS e force SSL. +- Implemente políticas CORS adequadas. + +## Documentação de API + +- Use pacote OpenAPI integrado para documentação de API. +- Forneça comentários XML para controllers e models para melhorar documentação Swagger. + +Siga a documentação oficial da Microsoft e guias do ASP.NET Core para melhores práticas em roteamento, controllers, models e outros componentes de API. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/custom-instructions/java/copilot-instructions.md b/localisation/pt-br/docs/custom-instructions/java/copilot-instructions.md new file mode 100644 index 0000000..1250f44 --- /dev/null +++ b/localisation/pt-br/docs/custom-instructions/java/copilot-instructions.md @@ -0,0 +1,96 @@ +# Regras de Desenvolvimento Java + +Você é um desenvolvedor Java sênior e especialista em programação Java, Spring Boot, Spring Boot CLI, Spring Framework, Maven, Gradle, JUnit e tecnologias Java relacionadas. + +## Estilo e Estrutura de Código + +- Escreva código Java limpo, eficiente e bem documentado com exemplos precisos de Spring Boot. +- Use melhores práticas e convenções do Spring Boot em todo o seu código. +- Implemente padrões de design de API RESTful ao criar serviços web. +- Use nomes descritivos para métodos e variáveis seguindo a convenção camelCase. +- Estruture aplicações Spring Boot: controllers, services, repositories, models, configurations. + +## Especificidades do Spring Boot + +- Use Spring Boot starters para configuração rápida de projeto e gerenciamento de dependências. +- Implemente uso adequado de anotações (ex: @SpringBootApplication, @RestController, @Service). +- Utilize recursos de auto-configuração do Spring Boot efetivamente. +- Implemente tratamento adequado de exceções usando @ControllerAdvice e @ExceptionHandler. + +## Convenções de Nomenclatura + +- Use PascalCase para nomes de classe (ex: UserController, OrderService). +- Use camelCase para nomes de método e variável (ex: findUserById, isOrderValid). +- Use ALL_CAPS para constantes (ex: MAX_RETRY_ATTEMPTS, DEFAULT_PAGE_SIZE). + +## Uso de Java e Spring Boot + +- Use recursos do Java 17 ou posterior quando aplicável (ex: records, sealed classes, pattern matching). +- Aproveite recursos e melhores práticas do Spring Boot 3.x. +- Use Spring Data JPA para operações de banco de dados quando aplicável. +- Implemente validação adequada usando Bean Validation (ex: @Valid, validadores customizados). + +## Configuração e Propriedades + +- Use application.properties ou application.yml para configuração. +- Implemente configurações específicas por ambiente usando Spring Profiles. +- Use @ConfigurationProperties para propriedades de configuração type-safe. + +## Injeção de Dependência e IoC + +- Use injeção por construtor em vez de injeção por campo para melhor testabilidade. +- Aproveite o container IoC do Spring para gerenciar ciclos de vida de beans. + +## Testes + +- Escreva testes unitários usando JUnit 5 e Spring Boot Test. +- Use MockMvc para testar camadas web. +- Implemente testes de integração usando @SpringBootTest. +- Use @DataJpaTest para testes da camada de repositório. + +## Performance e Escalabilidade + +- Implemente estratégias de cache usando abstração Spring Cache. +- Use processamento assíncrono com @Async para operações não-bloqueantes. +- Implemente indexação adequada de banco de dados e otimização de consultas. + +## Segurança + +- Implemente Spring Security para autenticação e autorização. +- Use codificação adequada de senha (ex: BCrypt). +- Implemente configuração CORS quando necessário. + +## Logging e Monitoramento + +- Use SLF4J com Logback para logging. +- Implemente níveis adequados de log (ERROR, WARN, INFO, DEBUG). +- Use Spring Boot Actuator para monitoramento de aplicação e métricas. + +## Documentação de API + +- Use Springdoc OpenAPI (anteriormente Swagger) para documentação de API. + +## Acesso a Dados e ORM + +- Use Spring Data JPA para operações de banco de dados. +- Implemente relacionamentos adequados de entidade e cascading. +- Use migrações de banco de dados com ferramentas como Flyway ou Liquibase. + +## Build e Deploy + +- Use Maven ou Gradle para gerenciamento de dependências e processos de build. +- Gradle é preferido para novos projetos devido à sua flexibilidade e performance. +- Implemente profiles adequados para diferentes ambientes (dev, test, prod). +- Use Docker para containerização se aplicável. + +## Siga melhores práticas para: + +- Design de API RESTful (uso adequado de métodos HTTP, códigos de status, etc.). +- Arquitetura de microsserviços (se aplicável). +- Processamento assíncrono usando @Async do Spring ou programação reativa com Spring WebFlux. + +Adira aos princípios SOLID e mantenha alta coesão e baixo acoplamento no design da sua aplicação Spring Boot. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/custom-instructions/javascript/copilot-instructions.md b/localisation/pt-br/docs/custom-instructions/javascript/copilot-instructions.md new file mode 100644 index 0000000..ae8f2bc --- /dev/null +++ b/localisation/pt-br/docs/custom-instructions/javascript/copilot-instructions.md @@ -0,0 +1,50 @@ +# Regras de Desenvolvimento JavaScript + +Você é um Desenvolvedor Front-End Sênior e Especialista em ReactJS, NextJS, ViteJS, JavaScript, TypeScript, HTML, CSS e frameworks modernos de UI/UX (ex: TailwindCSS, Shadcn, Radix). + +Você é reflexivo, dá respostas matizadas e é brilhante em raciocínio. Você fornece cuidadosamente respostas precisas, factuais e reflexivas, e é um gênio em raciocínio. + +## Princípios Fundamentais + +- Siga os requisitos do usuário cuidadosamente e à risca. +- Primeiro pense passo a passo - descreva seu plano para o que construir em pseudocódigo, escrito em grande detalhe. +- Confirme, então escreva código! +- Sempre escreva código correto, de melhores práticas, princípio DRY (Don't Repeat Yourself), livre de bugs, totalmente funcional e funcionando, também deve estar alinhado às regras listadas abaixo nas Diretrizes de Implementação de Código. +- Foque em código fácil e legível, em vez de ser performante. +- Implemente totalmente toda a funcionalidade solicitada. +- Não deixe TODOs, placeholders ou peças faltando. +- Garanta que o código está completo! Verifique minuciosamente se está finalizado. +- Inclua todas as importações necessárias e garanta nomenclatura adequada dos componentes chave. +- Seja conciso. Minimize qualquer outra prosa. +- Se você acha que pode não haver uma resposta correta, diga isso. +- Se você não souber a resposta, diga isso, em vez de adivinhar. + +## Ambiente de Codificação + +O usuário faz perguntas sobre as seguintes linguagens de codificação: + +- ReactJS +- NextJS +- ViteJS +- JavaScript +- TypeScript +- TailwindCSS +- HTML +- CSS + +## Diretrizes de Implementação de Código + +Siga essas regras quando escrever código: + +- TypeScript é preferido em vez de JavaScript, a menos que o usuário especificamente solicite JavaScript. +- Escolha NextJS ou ViteJS para o projeto, dependendo dos requisitos. +- Use retornos antecipados sempre que possível para tornar o código mais legível. +- Sempre use classes Tailwind para estilizar elementos HTML; evite usar CSS ou tags. +- Use "class:" em vez do operador ternário em tags de classe sempre que possível. +- Use nomes descritivos para variáveis e funções/const. Além disso, funções de evento devem ser nomeadas com prefixo "handle", como "handleClick" para onClick e "handleKeyDown" para onKeyDown. +- Implemente recursos de acessibilidade em elementos. Por exemplo, uma tag deve ter tabindex="0", aria-label, on:click, e on:keydown, e atributos similares. +- Use consts em vez de functions, por exemplo, "const toggle = () =>". Além disso, defina um tipo se possível. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/custom-instructions/python/copilot-instructions.md b/localisation/pt-br/docs/custom-instructions/python/copilot-instructions.md new file mode 100644 index 0000000..3774bda --- /dev/null +++ b/localisation/pt-br/docs/custom-instructions/python/copilot-instructions.md @@ -0,0 +1,74 @@ +# Regras de Desenvolvimento Python + +Você é um desenvolvedor Python sênior e especialista em Python, FastAPI, SQLite e desenvolvimento de API escalável. + +## Princípios Fundamentais + +- Escreva respostas técnicas concisas com exemplos precisos de Python. +- Use programação funcional e declarativa; evite classes quando possível. +- Prefira iteração e modularização em vez de duplicação de código. +- Use nomes de variáveis descritivos com verbos auxiliares (ex: is_active, has_permission). +- Use minúsculas com sublinhados para diretórios e arquivos (ex: routers/user_routes.py). +- Favoreça exportações nomeadas para rotas e funções utilitárias. +- Use o padrão Receive an Object, Return an Object (RORO). + +## Python/FastAPI + +- Use def para funções puras e async def para operações assíncronas. +- Use type hints para todas as assinaturas de função. Prefira modelos Pydantic em vez de dicionários brutos para validação de entrada. +- Estrutura de arquivo: roteador exportado, sub-rotas, utilitários, conteúdo estático, tipos (modelos, esquemas). +- Evite chaves desnecessárias em declarações condicionais. +- Para declarações de linha única em condicionais, omita chaves. +- Use sintaxe concisa de uma linha para declarações condicionais simples (ex: if condition: do_something()). + +## Tratamento de Erros e Validação + +- Priorize tratamento de erros e casos extremos: + - Trate erros e casos extremos no início das funções. + - Use retornos antecipados para condições de erro para evitar declarações if profundamente aninhadas. + - Coloque o caminho feliz por último na função para melhor legibilidade. + - Evite declarações else desnecessárias; use o padrão if-return em vez disso. + - Use cláusulas de guarda para tratar pré-condições e estados inválidos cedo. + - Implemente logging adequado de erros e mensagens de erro amigáveis ao usuário. + - Use tipos de erro customizados ou fábricas de erro para tratamento consistente de erros. + +## Dependências + +- FastAPI +- Pydantic v2 +- Bibliotecas de banco de dados assíncronas como asyncpg ou aiomysql +- SQLAlchemy 2.0 (se usando recursos ORM) + +## Diretrizes Específicas do FastAPI + +- Use componentes funcionais (funções simples) e modelos Pydantic para validação de entrada e esquemas de resposta. +- Use definições de rota declarativas com anotações claras de tipo de retorno. +- Use def para operações síncronas e async def para assíncronas. +- Minimize @app.on_event("startup") e @app.on_event("shutdown"); prefira gerenciadores de contexto lifespan para gerenciar eventos de inicialização e desligamento. +- Use middleware para logging, monitoramento de erros e otimização de performance. +- Otimize para performance usando funções async para tarefas I/O-bound, estratégias de cache e carregamento preguiçoso. +- Use HTTPException para erros esperados e modele-os como respostas HTTP específicas. +- Use middleware para tratar erros inesperados, logging e monitoramento de erros. +- Use BaseModel do Pydantic para validação de entrada/saída consistente e esquemas de resposta. + +## Otimização de Performance + +- Minimize operações I/O bloqueantes; use operações assíncronas para todas as chamadas de banco de dados e requisições de API externa. +- Implemente cache para dados estáticos e frequentemente acessados usando ferramentas como Redis ou stores em memória. +- Otimize serialização e desserialização de dados com Pydantic. +- Use técnicas de carregamento preguiçoso para grandes conjuntos de dados e respostas substanciais de API. + +## Convenções Principais + +1. Confie no sistema de injeção de dependência do FastAPI para gerenciar estado e recursos compartilhados. +2. Priorize métricas de performance da API (tempo de resposta, latência, throughput). +3. Limite operações bloqueantes em rotas: + - Favoreça fluxos assíncronos e não-bloqueantes. + - Use funções async dedicadas para operações de banco de dados e API externa. + - Estruture rotas e dependências claramente para otimizar legibilidade e manutenibilidade. + +Consulte a documentação do FastAPI para Modelos de Dados, Operações de Caminho e Middleware para melhores práticas. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/docs/custom-instructions/setup/copilot-instructions.md b/localisation/pt-br/docs/custom-instructions/setup/copilot-instructions.md new file mode 100644 index 0000000..415b0c9 --- /dev/null +++ b/localisation/pt-br/docs/custom-instructions/setup/copilot-instructions.md @@ -0,0 +1,9 @@ +Você é um especialista como Analista de Negócios. Você é muito capaz de interpretar os requisitos de negócio para detalhes técnicos. + +Quando você está lidando com OpenAPI, sempre está se referindo à versão de especificação 3.0.1. + +Quando você cria um documento OpenAPI, você deve sempre considerar a reutilização do esquema de dados. NÃO duplique estrutura de dados similar. + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/dotnet/README.md b/localisation/pt-br/dotnet/README.md new file mode 100644 index 0000000..554823a --- /dev/null +++ b/localisation/pt-br/dotnet/README.md @@ -0,0 +1,9 @@ +# Começando com .NET + +Aqui está o ponto de partida para o desenvolvimento da sua aplicação .NET. + +Se você quiser ver o exemplo completo, confira este diretório, [/complete/dotnet](../complete/dotnet/). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/java/README.md b/localisation/pt-br/java/README.md new file mode 100644 index 0000000..97bc679 --- /dev/null +++ b/localisation/pt-br/java/README.md @@ -0,0 +1,9 @@ +# Começando com Java + +Aqui está o ponto de partida para o desenvolvimento da sua aplicação Java. + +Se você quiser ver o exemplo completo, confira este diretório, [/complete/java](../complete/java/). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/javascript/README.md b/localisation/pt-br/javascript/README.md new file mode 100644 index 0000000..b337b2c --- /dev/null +++ b/localisation/pt-br/javascript/README.md @@ -0,0 +1,9 @@ +# Começando com JavaScript + +Aqui está o ponto de partida para o desenvolvimento da sua aplicação JavaScript. + +Se você quiser ver o exemplo completo, confira este diretório, [/complete/javascript](../complete/javascript/). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/product-requirements.md b/localisation/pt-br/product-requirements.md new file mode 100644 index 0000000..1c22f34 --- /dev/null +++ b/localisation/pt-br/product-requirements.md @@ -0,0 +1,152 @@ +# Documento de Requisitos do Produto (PRD) + +## Título do Produto + +Aplicação de Mídia Social Simples + +## Versão do Documento + +1.0.0 + +## Autor + +Product Owner / Tech Lead na Contoso + +## Última Atualização + +2025-05-30 + +--- + +## 1. Visão Geral + +O objetivo deste projeto é construir um Serviço de Rede Social (SNS) básico, mas funcional, que permita aos usuários criar, recuperar, atualizar e excluir postagens; adicionar comentários; e curtir/descurtir postagens. A abordagem API-first garante que pode ser usado como backend para frontends web ou móveis. + +## 2. Contexto + +A Contoso é uma empresa que vende produtos para várias atividades ao ar livre. O departamento de marketing da Contoso gostaria de lançar um site de micro mídia social para promover seus produtos para clientes existentes e potenciais. Como seu primeiro MVP, o departamento de marketing quer construir rapidamente o site. + +## 3. Objetivos e Metas + +* Fornecer operações CRUD para conteúdo gerado pelo usuário (postagens). +* Permitir interação social através de comentários e curtidas. +* Manter simplicidade para casos de uso educacionais e MVP. +* Garantir design de API RESTful e tratamento adequado de erros. + +## 4. Funcionalidades Principais + +### 4.1 Gerenciamento de Postagens + +* **Listar Postagens** + + * **GET** `/api/posts` + * História do Usuário: Como usuário, quero ver todas as postagens recentes para poder navegar pelo que outros estão compartilhando. + +* **Criar Postagem** + + * **POST** `/api/posts` + * Obrigatório: `username`, `content` + * História do Usuário: Como usuário, quero criar uma nova postagem para poder compartilhar algo com outros. + +* **Obter Postagem Específica** + + * **GET** `/api/posts/{postId}` + * História do Usuário: Como usuário, quero ler uma postagem específica em detalhes. + +* **Atualizar Postagem** + + * **PATCH** `/api/posts/{postId}` + * Obrigatório: `username`, `content` + * História do Usuário: Como usuário, quero atualizar minha postagem se cometi um erro ou tenho algo a acrescentar. + +* **Deletar Postagem** + + * **DELETE** `/api/posts/{postId}` + * História do Usuário: Como usuário, quero deletar minha postagem se não quero mais que seja compartilhada. + +### 4.2 Gerenciamento de Comentários + +* **Listar Comentários de uma Postagem** + + * **GET** `/api/posts/{postId}/comments` + * História do Usuário: Como usuário, quero ler todos os comentários de uma postagem. + +* **Criar Comentário** + + * **POST** `/api/posts/{postId}/comments` + * Obrigatório: `username`, `content` + * História do Usuário: Como usuário, quero comentar em uma postagem para compartilhar meus pensamentos. + +* **Obter Comentário Específico** + + * **GET** `/api/posts/{postId}/comments/{commentId}` + * História do Usuário: Como usuário, quero ver um comentário específico em detalhes. + +* **Atualizar Comentário** + + * **PATCH** `/api/posts/{postId}/comments/{commentId}` + * Obrigatório: `username`, `content` + * História do Usuário: Como usuário, quero corrigir ou revisar meu comentário. + +* **Deletar Comentário** + + * **DELETE** `/api/posts/{postId}/comments/{commentId}` + * História do Usuário: Como usuário, quero deletar meu comentário se necessário. + +### 4.3 Sistema de Curtidas + +* **Curtir uma Postagem** + + * **POST** `/api/posts/{postId}/likes` + * Obrigatório: `username` + * História do Usuário: Como usuário, quero curtir uma postagem para mostrar apreço. + +* **Descurtir uma Postagem** + + * **DELETE** `/api/posts/{postId}/likes` + * História do Usuário: Como usuário, quero remover minha curtida se mudar de ideia. + +## 5. Funções de Usuário e Permissões + +* **Usuários Anônimos** + * Podem ler postagens e comentários. + +* **Usuários Autenticados (via campo username)** + * Podem criar, atualizar, deletar suas próprias postagens e comentários. + * Podem curtir/descurtir postagens. + +## 6. Contratos de API + +* Definir o documento OpenAPI com especificação v3.0.1 no mínimo. +* Usa códigos de status HTTP padrão. + * `200 OK`, `201 Created`, `204 No Content`, `400 Bad Request`, `404 Not Found`, `500 Internal Server Error` +* Content-Type: `application/json` + +## 7. Requisitos Não-Funcionais + +* **Documentação**: A API deve ser totalmente documentada usando Swagger UI. +* **Segurança**: Validação de entrada e validação básica de requisições, mesmo que autenticação completa não seja implementada. + +## 8. Suposições e Dependências + +* Usar banco de dados em memória para este produto. +* Nenhum suporte para upload de arquivos ou mídia está incluído. +* Nenhum registro de usuário ou fluxos de login/autenticação. +* Nenhum código de teste é necessário. + +## 9. Métricas de Sucesso + +* Todos os endpoints da API são acessíveis e respondem conforme documentado. +* Capaz de postar, comentar, curtir e deletar recursos de ponta a ponta. +* Documentação Swagger clara gerada a partir do OpenAPI. + +## 10. Fora do Escopo + +* Autenticação de usuário (OAuth, JWT, etc.) +* Atualizações em tempo real ou notificações +* Ferramentas de moderação ou relatórios +* Uploads multimídia (imagens, vídeo) + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/pt-br/python/README.md b/localisation/pt-br/python/README.md new file mode 100644 index 0000000..0da17e3 --- /dev/null +++ b/localisation/pt-br/python/README.md @@ -0,0 +1,9 @@ +# Começando com Python + +Aqui está o ponto de partida para o desenvolvimento da sua aplicação Python. + +Se você quiser ver o exemplo completo, confira este diretório, [/complete/python](../complete/python/). + +--- + +**Aviso**: Este documento foi localizado pelo [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot). Portanto, pode conter erros. Se você encontrar alguma tradução inadequada ou incorreta, por favor crie um [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new). diff --git a/localisation/zh-cn/README.md b/localisation/zh-cn/README.md index dc7a9df..21e5d15 100644 --- a/localisation/zh-cn/README.md +++ b/localisation/zh-cn/README.md @@ -1,6 +1,6 @@ # GitHub Copilot Vibe 编程工作坊 -![GitHub Copilot - Ghiblifiled](../../images/ghcp.jpg) +![GitHub Copilot Vibe 编程工作坊](../../images/banner.png) 让我们使用 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 及其在 Python、JavaScript、Java 和 .NET 等各种编程语言中的最新最强大功能进行氛围编程，并通过容器化让应用程序变得云原生。你准备好开始了吗？ @@ -20,11 +20,15 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 此工作坊材料目前提供以下语言版本： -[English](../../README.md) | [Español](../es-es/) | [Português](../pt-br/) | [Français](../fr-fr/) | [中文(简体)](./README.md) | [日本語](../ja-jp/) | [한국어](../ko-kr/) +[English](../../README.md) | [Español](../es-es/) | [Français](../fr-fr/) | [日本語](../ja-jp/) | [한국어](../ko-kr/) | [Português](../pt-br/) | [中文(简体)](./README.md) ## 先决条件 -在此工作坊期间，强烈推荐使用 [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)，因为除了网络浏览器外无需任何准备。但是，如果您确实需要使用自己的机器，请确保您已安装以下所有内容。 +在此工作坊期间，强烈推荐使用 [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)，因为除了网络浏览器外无需任何准备。 + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) + +但是，如果您确实需要使用自己的机器，请确保您已安装以下所有内容。 ### 通用 @@ -103,4 +107,8 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 - [GitHub Copilot: MCP](https://code.visualstudio.com/blogs/2025/05/12/agent-mode-meets-mcp) - [GitHub Copilot: Custom Instructions](https://code.visualstudio.com/docs/copilot/copilot-customization) - [GitHub Copilot: Changing AI Models](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat?tool=vscode) -- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) \ No newline at end of file +- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/complete/README.md b/localisation/zh-cn/complete/README.md index 31afc03..e72a096 100644 --- a/localisation/zh-cn/complete/README.md +++ b/localisation/zh-cn/complete/README.md @@ -53,4 +53,8 @@ ```bash docker compose down --rmi all - ``` \ No newline at end of file + ``` + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/complete/dotnet/README.md b/localisation/zh-cn/complete/dotnet/README.md index bd6ffff..b2559f6 100644 --- a/localisation/zh-cn/complete/dotnet/README.md +++ b/localisation/zh-cn/complete/dotnet/README.md @@ -32,4 +32,8 @@ dotnet watch run --project $REPOSITORY_ROOT/complete/dotnet/Contoso.BlazorApp ``` -1. 验证 Web 应用程序是否正常运行。 \ No newline at end of file +1. 验证 Web 应用程序是否正常运行。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/complete/java/socialapp/README.md b/localisation/zh-cn/complete/java/README.md similarity index 96% rename from localisation/zh-cn/complete/java/socialapp/README.md rename to localisation/zh-cn/complete/java/README.md index 7bcf1b6..b2a4874 100644 --- a/localisation/zh-cn/complete/java/socialapp/README.md +++ b/localisation/zh-cn/complete/java/README.md @@ -364,4 +364,8 @@ rm sns_api.db - 使用 PostgreSQL/MySQL 而不是 SQLite - 实现 Spring Security 进行身份验证 - 添加速率限制和输入清理 -- 使用 HTTPS/TLS 加密 \ No newline at end of file +- 使用 HTTPS/TLS 加密 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/complete/javascript/README.md b/localisation/zh-cn/complete/javascript/README.md index 2731a90..900afc6 100644 --- a/localisation/zh-cn/complete/javascript/README.md +++ b/localisation/zh-cn/complete/javascript/README.md @@ -40,4 +40,8 @@ ``` 1. 打开网络浏览器并导航到 `http://localhost:3000`。 -1. 验证 Web 应用程序是否正常运行。 \ No newline at end of file +1. 验证 Web 应用程序是否正常运行。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/complete/python/README.md b/localisation/zh-cn/complete/python/README.md index 08ed1bf..f719147 100644 --- a/localisation/zh-cn/complete/python/README.md +++ b/localisation/zh-cn/complete/python/README.md @@ -289,4 +289,8 @@ uvicorn main:app --host 0.0.0.0 --port 8000 --reload --log-level debug - [FastAPI 文档](https://fastapi.tiangolo.com/) - [Pydantic 文档](https://docs.pydantic.dev/) - [SQLite 文档](https://sqlite.org/docs.html) -- [OpenAPI 规范](https://swagger.io/specification/) \ No newline at end of file +- [OpenAPI 规范](https://swagger.io/specification/) + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/00-setup.md b/localisation/zh-cn/docs/00-setup.md index 1468230..f1588c0 100644 --- a/localisation/zh-cn/docs/00-setup.md +++ b/localisation/zh-cn/docs/00-setup.md @@ -18,16 +18,15 @@ - [启动 Visual Studio Code](#启动-visual-studio-code) - [设置 MCP 服务器](#设置-mcp-服务器) - [检查 GitHub Copilot 代理模式](#检查-github-copilot-代理模式) +- [配置野兽模式](#配置野兽模式) - [准备自定义指令](#准备自定义指令) - [分析产品需求文档 (PRD) 和设计 API](#分析产品需求文档-prd-和设计-api) ## 使用 GitHub Codespaces -1. 查看下图，按照点击顺序跟随以下步骤：![代码按钮图片](https://img.shields.io/badge/%3C%3E_Code-green) 👉 ![codespaces按钮图片](https://img.shields.io/badge/Codespaces-white) 👉 ![在main上创建codespace按钮图片](https://img.shields.io/badge/Create_codespace_on_main-green)，创建一个新的 GitHub Codespace 实例。根据网络状态，这可能需要 5-10 分钟。 +1. 点击此链接 👉 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/github-copilot-vibe-coding-workshop) - ![开始使用 GitHub Codespaces](../../../docs/images/setup-01.png) - -2. GitHub Codespace 实例准备就绪后，打开终端并运行以下命令检查所需的所有内容是否已正确安装。 +1. GitHub Codespace 实例准备就绪后，打开终端并运行以下命令检查所需的所有内容是否已正确安装。 ```bash # Python @@ -51,7 +50,7 @@ dotnet --list-sdks ``` -3. 检查您的存储库状态。 +1. 检查您的存储库状态。 ```bash git remote -v @@ -66,7 +65,7 @@ 如果您看到与上述不同的内容，请删除 GitHub Codespace 实例并重新创建。 -4. 移至 [设置 MCP 服务器](#设置-mcp-服务器) 部分。 +1. 移至 [设置 MCP 服务器](#设置-mcp-服务器) 部分。 **👇👇👇 相反，如果您想在本地机器上使用 VS Code，请按照下面的说明操作。下面的部分不适用于使用 GitHub Codespaces 的用户。👇👇👇** @@ -258,6 +257,7 @@ ### 设置 MCP 服务器 +1. 如果您在本地机器上使用 VS Code，请确保 Docker Desktop 正在运行。 1. 设置 `$REPOSITORY_ROOT` 环境变量。 ```bash @@ -286,6 +286,7 @@ 1. 通过按 F1 或在 Windows 上按 `Ctrl`+`Shift`+`P` 或在 Mac OS 上按 `Cmd`+`Shift`+`P` 打开命令面板，然后搜索 `MCP: List Servers`。 1. 选择 `context7` 然后点击 `Start Server`。 +1. 选择 `awesome-copilot` 然后点击 `Start Server`。 ## 检查 GitHub Copilot 代理模式 @@ -300,6 +301,40 @@ 1. 选择模型为 `GPT-4.1` 或 `Claude Sonnet 4`。 +## 配置野兽模式 + +1. 输入 `/mcp.awesome-copilot.get_search_prompt`，然后输入类似 "beast mode" 的关键词 + + 它应该显示野兽聊天模式列表。输入类似 `4.1 Beast Chat Mode` 的提示。然后它将保存在 `.github/chatmodes` 目录下。 + +1. 选择 `4.1-Beast` 模式而不是 `Agent` 模式。它将自动将 LLM 更改为 `GPT 4.1`。 + +1. 设置 `$REPOSITORY_ROOT` 环境变量。 + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 复制工作区设置。 + + ```bash + # bash/zsh + cp $REPOSITORY_ROOT/docs/.vscode/settings.json \ + $REPOSITORY_ROOT/.vscode/settings.json + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json ` + -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force + ``` + ## 准备自定义指令 1. 设置 `$REPOSITORY_ROOT` 环境变量。 @@ -349,4 +384,8 @@ --- -好的。您已经完成了"开发环境"步骤。让我们继续 [步骤 01：Python 后端开发](./01-python.md)。 \ No newline at end of file +好的。您已经完成了"开发环境"步骤。让我们继续 [步骤 01：Python 后端开发](./01-python.md)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/01-python.md b/localisation/zh-cn/docs/01-python.md index 8b3432a..26c4ba3 100644 --- a/localisation/zh-cn/docs/01-python.md +++ b/localisation/zh-cn/docs/01-python.md @@ -116,4 +116,8 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 --- -好的。您已完成"Python"步骤。让我们进入 [步骤 02: JavaScript 前端开发](./02-javascript.md)。 \ No newline at end of file +好的。您已完成"Python"步骤。让我们进入 [步骤 02: JavaScript 前端开发](./02-javascript.md)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/02-javascript.md b/localisation/zh-cn/docs/02-javascript.md index ae5dab6..0e18fca 100644 --- a/localisation/zh-cn/docs/02-javascript.md +++ b/localisation/zh-cn/docs/02-javascript.md @@ -162,4 +162,8 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 --- -好的。您已经完成了"JavaScript"步骤。让我们继续 [步骤 03：从 Python 迁移到 Java](./03-java.md)。 \ No newline at end of file +好的。您已经完成了"JavaScript"步骤。让我们继续 [步骤 03：从 Python 迁移到 Java](./03-java.md)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/03-java.md b/localisation/zh-cn/docs/03-java.md index 829b8e3..4fbc81f 100644 --- a/localisation/zh-cn/docs/03-java.md +++ b/localisation/zh-cn/docs/03-java.md @@ -157,4 +157,8 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 --- -好的。您已经完成了"Java"步骤。让我们继续 [步骤 04：从 JavaScript 迁移到 .NET](./04-dotnet.md)。 \ No newline at end of file +好的。您已经完成了"Java"步骤。让我们继续 [步骤 04：从 JavaScript 迁移到 .NET](./04-dotnet.md)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/04-dotnet.md b/localisation/zh-cn/docs/04-dotnet.md index 5466713..f8d7f08 100644 --- a/localisation/zh-cn/docs/04-dotnet.md +++ b/localisation/zh-cn/docs/04-dotnet.md @@ -170,4 +170,8 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 --- -好的。您已经完成了".NET"步骤。让我们继续 [步骤 05：容器化](./05-containerization.md)。 \ No newline at end of file +好的。您已经完成了".NET"步骤。让我们继续 [步骤 05：容器化](./05-containerization.md)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/05-containerization.md b/localisation/zh-cn/docs/05-containerization.md index fd777a0..8b94c93 100644 --- a/localisation/zh-cn/docs/05-containerization.md +++ b/localisation/zh-cn/docs/05-containerization.md @@ -70,14 +70,16 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 ```text 我想为 Java 应用构建容器镜像。请按照以下说明操作。 - - Java 应用位于 `java`。 - - 您的工作目录是存储库根目录。 - 首先确定您要执行的所有步骤。 + - Java 应用位于 `java/socialapp`。 + - 您的工作目录是存储库根目录。 - 创建一个 Dockerfile，`Dockerfile.java`。 - 使用 Microsoft OpenJDK 21。 - 使用多阶段构建方法。 - 从 JDK 提取 JRE。 - 为容器镜像使用目标端口号 `8080`。 + - 从主机向容器镜像添加环境变量 `CODESPACE_NAME` 和 `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN`。 + - 在容器镜像中创建 SQLite 数据库文件 `sns_api.db`。不要从主机复制文件。 ``` 1. 点击 GitHub Copilot 的 ![保留按钮图片](https://img.shields.io/badge/keep-blue) 按钮接受更改。 @@ -101,6 +103,7 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 使用刚刚构建的容器镜像，运行容器并验证应用是否正常运行。 - 使用主机端口 `8080`。 + - `CODESPACE_NAME` 和 `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN` 的值都应该是来自 GitHub Codespaces 的值。 ``` ### 容器化 .NET 应用程序 @@ -111,13 +114,14 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 ```text 我想为 .NET 应用构建容器镜像。请按照以下说明操作。 + - 首先确定您要执行的所有步骤。 - .NET 应用位于 `dotnet`。 - 您的工作目录是存储库根目录。 - - 首先确定您要执行的所有步骤。 - 创建一个 Dockerfile，`Dockerfile.dotnet`。 - 使用 .NET 9。 - 使用多阶段构建方法。 - 为容器镜像使用目标端口号 `8080`。 + - 向容器添加环境变量 `ApiSettings__BaseUrl`。它应该指向 Java 应用程序 `http://localhost:8080/api`。 ``` 1. 点击 GitHub Copilot 的 ![保留按钮图片](https://img.shields.io/badge/keep-blue) 按钮接受更改。 @@ -141,12 +145,13 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 使用刚刚构建的容器镜像，运行容器并验证应用是否正常运行。 - 使用主机端口 `3030`。 + - 传递环境变量 `ApiSettings__BaseUrl` 值 `http://localhost:8080/api`。 ``` 1. 确保前端和后端应用暂时无法相互通信，因为它们还不知道彼此。运行如下提示。 ```text - 无论如何，删除当前运行的两个容器。 + 删除 Java 和 .NET 容器以及它们各自的容器镜像。 ``` ### 编排容器 @@ -157,6 +162,7 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 ```text 我想创建一个 Docker Compose 文件。请按照以下说明操作。 + - 首先确定您要执行的所有步骤。 - 您的工作目录是存储库根目录。 - 使用 `Dockerfile.java` 作为后端应用。 - 使用 `Dockerfile.dotnet` 作为前端应用。 @@ -164,7 +170,8 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 - 使用 `contoso` 作为网络名称。 - 使用 `contoso-backend` 作为 Java 应用的容器名称。其目标端口是 8080，主机端口是 8080。 - 使用 `contoso-frontend` 作为 .NET 应用的容器名称。其目标端口是 8080，主机端口是 3030。 - - 为 Java 应用使用的数据库挂载卷，`java/socialapp/sns_api.db`。 + - 从主机向 Java 容器添加环境变量 `CODESPACE_NAME` 和 `GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN`。 + - 向 .NET 容器添加环境变量 `ApiSettings__BaseUrl`。它应该指向 Java 应用的 `/api`。 ``` 1. 点击 GitHub Copilot 的 ![保留按钮图片](https://img.shields.io/badge/keep-blue) 按钮接受更改。 @@ -172,11 +179,15 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 1. 创建 `compose.yaml` 文件后，运行它并验证两个应用是否正常运行。 ```text - 现在，运行 Docker compose 文件并验证应用是否正常运行。 + 运行 Docker compose 文件并验证所有应用是否正常运行。 ``` 1. 打开 Web 浏览器并导航到 `http://localhost:3030`，验证应用是否正常运行。 --- -好的。您已经完成了"容器化"步骤。恭喜您完成了整个工作坊！ \ No newline at end of file +好的。您已经完成了"容器化"步骤。恭喜您完成了整个工作坊！ + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/README.md b/localisation/zh-cn/docs/README.md index d3b314f..d409363 100644 --- a/localisation/zh-cn/docs/README.md +++ b/localisation/zh-cn/docs/README.md @@ -9,4 +9,8 @@ | 02: JavaScript 前端开发 | [02-javascript.md](./02-javascript.md) | | 03: 从 Python 迁移到 Java | [03-java.md](./03-java.md) | | 04: 从 JavaScript 迁移到 .NET | [04-dotnet.md](./04-dotnet.md) | -| 05: 容器化 | [05-containerization.md](./05-containerization.md) | \ No newline at end of file +| 05: 容器化 | [05-containerization.md](./05-containerization.md) | + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/custom-instructions/containerization/copilot-instructions.md b/localisation/zh-cn/docs/custom-instructions/containerization/copilot-instructions.md index d5d4436..3bfcf35 100644 --- a/localisation/zh-cn/docs/custom-instructions/containerization/copilot-instructions.md +++ b/localisation/zh-cn/docs/custom-instructions/containerization/copilot-instructions.md @@ -31,4 +31,8 @@ - 在 Dockerfile 中使用多阶段构建来优化镜像大小。 - 确保 Dockerfile 是幂等的，可以多次构建而不产生副作用。 -- 使用 Docker Compose 进行本地开发和测试环境。 \ No newline at end of file +- 使用 Docker Compose 进行本地开发和测试环境。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/custom-instructions/dotnet/copilot-instructions.md b/localisation/zh-cn/docs/custom-instructions/dotnet/copilot-instructions.md index e38bd31..1ce1906 100644 --- a/localisation/zh-cn/docs/custom-instructions/dotnet/copilot-instructions.md +++ b/localisation/zh-cn/docs/custom-instructions/dotnet/copilot-instructions.md @@ -78,4 +78,8 @@ - 使用内置的 OpenAPI 包进行 API 文档。 - 为控制器和模型提供 XML 注释以增强 Swagger 文档。 -请遵循官方 Microsoft 文档和 ASP.NET Core 指南，了解路由、控制器、模型和其他 API 组件的最佳实践。 \ No newline at end of file +请遵循官方 Microsoft 文档和 ASP.NET Core 指南，了解路由、控制器、模型和其他 API 组件的最佳实践。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/custom-instructions/java/copilot-instructions.md b/localisation/zh-cn/docs/custom-instructions/java/copilot-instructions.md index 3808304..3498263 100644 --- a/localisation/zh-cn/docs/custom-instructions/java/copilot-instructions.md +++ b/localisation/zh-cn/docs/custom-instructions/java/copilot-instructions.md @@ -89,4 +89,8 @@ - 微服务架构（如果适用）。 - 使用 Spring 的 @Async 或 Spring WebFlux 的响应式编程进行异步处理。 -在您的 Spring Boot 应用程序设计中遵循 SOLID 原则并保持高内聚和低耦合。 \ No newline at end of file +在您的 Spring Boot 应用程序设计中遵循 SOLID 原则并保持高内聚和低耦合。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/custom-instructions/javascript/copilot-instructions.md b/localisation/zh-cn/docs/custom-instructions/javascript/copilot-instructions.md index c9c931c..0fc37b2 100644 --- a/localisation/zh-cn/docs/custom-instructions/javascript/copilot-instructions.md +++ b/localisation/zh-cn/docs/custom-instructions/javascript/copilot-instructions.md @@ -43,4 +43,8 @@ - 在 class 标签中尽可能使用 "class:" 而不是三元运算符。 - 使用描述性的变量和函数/常量名称。同时，事件函数应该以 "handle" 前缀命名，如 onClick 使用 "handleClick"，onKeyDown 使用 "handleKeyDown"。 - 在元素上实现可访问性功能。例如，标签应该有 tabindex="0"、aria-label、on:click 和 on:keydown，以及类似的属性。 -- 使用常量而不是函数，例如，"const toggle = () =>"。同时，如果可能，定义一个类型。 \ No newline at end of file +- 使用常量而不是函数，例如，"const toggle = () =>"。同时，如果可能，定义一个类型。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/custom-instructions/python/copilot-instructions.md b/localisation/zh-cn/docs/custom-instructions/python/copilot-instructions.md index dffe45a..d90eaf3 100644 --- a/localisation/zh-cn/docs/custom-instructions/python/copilot-instructions.md +++ b/localisation/zh-cn/docs/custom-instructions/python/copilot-instructions.md @@ -67,4 +67,8 @@ - 对数据库和外部 API 操作使用专用异步函数。 - 清晰地构建路由和依赖项以优化可读性和可维护性。 -请参考 FastAPI 文档中的数据模型、路径操作和中间件以获取最佳实践。 \ No newline at end of file +请参考 FastAPI 文档中的数据模型、路径操作和中间件以获取最佳实践。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/docs/custom-instructions/setup/copilot-instructions.md b/localisation/zh-cn/docs/custom-instructions/setup/copilot-instructions.md index 6bbc994..3e6656a 100644 --- a/localisation/zh-cn/docs/custom-instructions/setup/copilot-instructions.md +++ b/localisation/zh-cn/docs/custom-instructions/setup/copilot-instructions.md @@ -2,4 +2,8 @@ 当您处理 OpenAPI 时，始终指的是 3.0.1 版本的规范。 -当您创建 OpenAPI 文档时，您应该始终考虑数据架构的可重用性。不要重复类似的数据结构。 \ No newline at end of file +当您创建 OpenAPI 文档时，您应该始终考虑数据架构的可重用性。不要重复类似的数据结构。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/dotnet/README.md b/localisation/zh-cn/dotnet/README.md index e8e8720..a0b5f4d 100644 --- a/localisation/zh-cn/dotnet/README.md +++ b/localisation/zh-cn/dotnet/README.md @@ -2,4 +2,8 @@ 这是您 .NET 应用开发的起点。 -如果您想查看完整示例，请查看此目录：[/complete/dotnet](../complete/dotnet/)。 \ No newline at end of file +如果您想查看完整示例，请查看此目录：[/complete/dotnet](../complete/dotnet/)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/java/README.md b/localisation/zh-cn/java/README.md index b4a8eed..267d339 100644 --- a/localisation/zh-cn/java/README.md +++ b/localisation/zh-cn/java/README.md @@ -2,4 +2,8 @@ 这是您 Java 应用开发的起点。 -如果您想查看完整示例，请查看此目录：[/complete/java](../complete/java/)。 \ No newline at end of file +如果您想查看完整示例，请查看此目录：[/complete/java](../complete/java/)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/javascript/README.md b/localisation/zh-cn/javascript/README.md index ddd030a..7b237d0 100644 --- a/localisation/zh-cn/javascript/README.md +++ b/localisation/zh-cn/javascript/README.md @@ -2,4 +2,8 @@ 这是您 JavaScript 应用开发的起点。 -如果您想查看完整示例，请查看此目录：[/complete/javascript](../complete/javascript/)。 \ No newline at end of file +如果您想查看完整示例，请查看此目录：[/complete/javascript](../complete/javascript/)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/product-requirements.md b/localisation/zh-cn/product-requirements.md index 02f6267..e8440c3 100644 --- a/localisation/zh-cn/product-requirements.md +++ b/localisation/zh-cn/product-requirements.md @@ -145,4 +145,8 @@ Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部 * 用户身份验证（OAuth、JWT 等） * 实时更新或通知 * 审核工具或举报功能 -* 多媒体上传（图片、视频） \ No newline at end of file +* 多媒体上传（图片、视频） + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。 diff --git a/localisation/zh-cn/python/README.md b/localisation/zh-cn/python/README.md index 92ca5ca..12667c2 100644 --- a/localisation/zh-cn/python/README.md +++ b/localisation/zh-cn/python/README.md @@ -2,4 +2,8 @@ 这是您 Python 应用开发的起点。 -如果您想查看完整示例，请查看此目录：[/complete/python](../complete/python/)。 \ No newline at end of file +如果您想查看完整示例，请查看此目录：[/complete/python](../complete/python/)。 + +--- + +**免责声明**: 本文档由 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot) 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 [issue](https://github.com/microsoft/github-copilot-vibe-coding-workshop/issues/new)。