Current count: @currentCount
9 | 10 | 11 | 12 | @code { 13 | private int currentCount = 0; 14 | 15 | private void IncrementCount() 16 | { 17 | currentCount++; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /complete/javascript/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000, 9 | open: true, 10 | proxy: { 11 | '/api': { 12 | target: 'http://0.0.0.0:8000', 13 | changeOrigin: true, 14 | }, 15 | }, 16 | }, 17 | build: { 18 | outDir: 'dist', 19 | minify: 'terser', 20 | sourcemap: false 21 | } 22 | }) -------------------------------------------------------------------------------- /.devcontainer/on-create.sh: -------------------------------------------------------------------------------- 1 | sudo apt-get update && \ 2 | sudo apt upgrade -y && \ 3 | sudo apt-get install -y dos2unix libsecret-1-0 xdg-utils && \ 4 | sudo apt clean -y && \ 5 | sudo rm -rf /var/lib/apt/lists/* 6 | 7 | echo Configure git 8 | git config --global pull.rebase false 9 | git config --global core.autocrlf input 10 | 11 | echo Install .NET dev certs 12 | dotnet dev-certs https --trust 13 | 14 | echo Install uv for Python 15 | sudo curl -LsSf https://astral.sh/uv/install.sh | sh 16 | 17 | echo Done! 18 | -------------------------------------------------------------------------------- /localisation/ja-jp/docs/custom-instructions/setup/copilot-instructions.md: -------------------------------------------------------------------------------- 1 | あなたはビジネスアナリストのエキスパートです。ビジネス要件を技術的な詳細に解釈することに非常に長けています。 2 | 3 | OpenAPIを扱う際は、常にバージョン3.0.1の仕様を参照してください。 4 | 5 | OpenAPI文書を作成する際は、常にデータスキーマの再利用性を考慮する必要があります。類似のデータ構造を重複させないでください。 6 | 7 | --- 8 | 9 | **免責事項**: この文書は[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)を作成してください。 10 | -------------------------------------------------------------------------------- /complete/javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 | Request ID: @RequestId
13 |
18 | Swapping to Development environment will display more detailed information about the error that occurred. 19 |
20 |21 | The Development environment shouldn't be enabled for deployed applications. 22 | It can result in displaying sensitive information from exceptions to end users. 23 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 24 | and restarting the app. 25 |
26 | 27 | @code{ 28 | [CascadingParameter] 29 | private HttpContext? HttpContext { get; set; } 30 | 31 | private string? RequestId { get; set; } 32 | private bool ShowRequestId => !string.IsNullOrEmpty(RequestId); 33 | 34 | protected override void OnInitialized() => 35 | RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier; 36 | } 37 | -------------------------------------------------------------------------------- /complete/java/socialapp/src/main/java/com/contoso/socialapp/config/WebConfig.java: -------------------------------------------------------------------------------- 1 | package com.contoso.socialapp.config; 2 | 3 | import org.springframework.context.annotation.Bean; 4 | import org.springframework.context.annotation.Configuration; 5 | import org.springframework.web.servlet.config.annotation.CorsRegistry; 6 | import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; 7 | 8 | /** 9 | * Web configuration class to handle CORS settings and other web-related configurations. 10 | */ 11 | @Configuration 12 | public class WebConfig { 13 | 14 | /** 15 | * Configure CORS to allow requests from all origins. 16 | * This is suitable for development but should be restricted in production. 17 | */ 18 | @Bean 19 | public WebMvcConfigurer corsConfigurer() { 20 | return new WebMvcConfigurer() { 21 | @Override 22 | public void addCorsMappings(CorsRegistry registry) { 23 | registry.addMapping("/**") 24 | .allowedOriginPatterns("http://localhost:8080", "http://contoso-backend:8080", "https://*.app.github.dev") 25 | .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS", "HEAD", "PATCH") 26 | .allowedHeaders("*") 27 | .allowCredentials(true) 28 | .maxAge(3600); 29 | } 30 | }; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /complete/java/socialapp/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'java' 3 | id 'org.springframework.boot' version '3.2.5' 4 | id 'io.spring.dependency-management' version '1.1.7' 5 | } 6 | 7 | group = 'com.contoso' 8 | version = '0.0.1-SNAPSHOT' 9 | 10 | java { 11 | toolchain { 12 | languageVersion = JavaLanguageVersion.of(21) 13 | } 14 | } 15 | 16 | configurations { 17 | compileOnly { 18 | extendsFrom annotationProcessor 19 | } 20 | } 21 | 22 | repositories { 23 | mavenCentral() 24 | } 25 | 26 | dependencies { 27 | implementation platform("org.springframework.boot:spring-boot-dependencies:3.2.5") 28 | implementation 'org.springframework.boot:spring-boot-starter-web' 29 | implementation 'org.springframework.boot:spring-boot-starter-actuator' 30 | implementation 'org.springframework.boot:spring-boot-starter-data-jpa' 31 | implementation 'org.springframework.boot:spring-boot-starter-validation' 32 | implementation 'org.xerial:sqlite-jdbc:3.45.0.0' 33 | implementation 'org.hibernate.orm:hibernate-community-dialects:6.4.4.Final' 34 | implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.5.0' 35 | compileOnly 'org.projectlombok:lombok' 36 | annotationProcessor 'org.projectlombok:lombok' 37 | testImplementation 'org.springframework.boot:spring-boot-starter-test' 38 | testRuntimeOnly 'org.junit.platform:junit-platform-launcher' 39 | } 40 | 41 | tasks.named('test') { 42 | useJUnitPlatform() 43 | } 44 | -------------------------------------------------------------------------------- /localisation/zh-cn/complete/README.md: -------------------------------------------------------------------------------- 1 | # 完整应用示例 2 | 3 | 以下是完整应用示例的列表。由于它们也是通过氛围编程构建的，您可以查看它们是如何构建的。 4 | 5 | | 应用程序 | 位置 | 6 | |-------------|------------------------------| 7 | | FastAPI | [python](./python/) | 8 | | React | [javascript](./javascript/) | 9 | | Spring Boot | [java](./java/) | 10 | | Blazor | [dotnet](./dotnet/) | 11 | 12 | ## 容器化示例 13 | 14 | ### 先决条件 15 | 16 | 请参考 [README](../README.md) 文档进行准备。 17 | 18 | ### 入门指南 19 | 20 | 1. 确保 Docker 正在运行。 21 | 22 | ```bash 23 | docker info 24 | ``` 25 | 26 | 1. 获取存储库根目录。 27 | 28 | ```bash 29 | # bash/zsh 30 | REPOSITORY_ROOT=$(git rev-parse --show-toplevel) 31 | ``` 32 | 33 | ```powershell 34 | # PowerShell 35 | $REPOSITORY_ROOT = git rev-parse --show-toplevel 36 | ``` 37 | 38 | 1. 导航到 `complete` 目录。 39 | 40 | ```bash 41 | cd $REPOSITORY_ROOT/complete 42 | ``` 43 | 44 | 1. 运行容器化应用。 45 | 46 | ```bash 47 | docker compose up --build -d 48 | ``` 49 | 50 | 1. 打开网络浏览器并导航到 `http://localhost:3030`。 51 | 1. 验证 Web 应用程序是否正常运行。 52 | 1. 通过运行以下命令清理并删除容器化应用。 53 | 54 | ```bash 55 | docker compose down --rmi all 56 | ``` 57 | 58 | --- 59 | 60 | **免责声明**: 本文档由 [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)。 61 | -------------------------------------------------------------------------------- /localisation/pt-br/complete/javascript/README.md: -------------------------------------------------------------------------------- 1 | # Exemplo de Aplicação JavaScript 2 | 3 | ## Pré-requisitos 4 | 5 | Consulte a documentação [README](../../README.md) para preparação. 6 | 7 | ## Primeiros Passos 8 | 9 | ### Executar Backend FastAPI 10 | 11 | Use [Exemplo de Aplicação Python](../python/). 12 | 13 | > **NOTA**: Se você usar GitHub Codespaces, certifique-se de que a porta da aplicação Python, `8000`, está definida como **pública**. 14 | 15 | ### Executar Frontend React 16 | 17 | 1. Obtenha a raiz do repositório. 18 | 19 | ```bash 20 | # bash/zsh 21 | REPOSITORY_ROOT=$(git rev-parse --show-toplevel) 22 | ``` 23 | 24 | ```powershell 25 | # PowerShell 26 | $REPOSITORY_ROOT = git rev-parse --show-toplevel 27 | ``` 28 | 29 | 1. Instale pacotes npm. 30 | 31 | ```bash 32 | cd $REPOSITORY_ROOT/complete/javascript 33 | npm install 34 | ``` 35 | 36 | 1. Execute a aplicação. 37 | 38 | ```bash 39 | npm run dev 40 | ``` 41 | 42 | 1. Abra um navegador web e navegue para `http://localhost:3000`. 43 | 1. Verifique se a aplicação web está funcionando adequadamente. 44 | 45 | --- 46 | 47 | **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). 48 | -------------------------------------------------------------------------------- /localisation/es-es/complete/javascript/README.md: -------------------------------------------------------------------------------- 1 | # Muestra de Aplicación JavaScript 2 | 3 | ## Prerrequisitos 4 | 5 | Consulta el documento [README](../../README.md) para la preparación. 6 | 7 | ## Comenzando 8 | 9 | ### Ejecutar Backend FastAPI 10 | 11 | Usa [Muestra de Aplicación Python](../python/). 12 | 13 | > **NOTA**: Si usas GitHub Codespaces, asegúrate de que el puerto de la aplicación Python, `8000`, esté configurado como **público**. 14 | 15 | ### Ejecutar Frontend React 16 | 17 | 1. Obtén la raíz del repositorio. 18 | 19 | ```bash 20 | # bash/zsh 21 | REPOSITORY_ROOT=$(git rev-parse --show-toplevel) 22 | ``` 23 | 24 | ```powershell 25 | # PowerShell 26 | $REPOSITORY_ROOT = git rev-parse --show-toplevel 27 | ``` 28 | 29 | 1. Instala los paquetes npm. 30 | 31 | ```bash 32 | cd $REPOSITORY_ROOT/complete/javascript 33 | npm install 34 | ``` 35 | 36 | 1. Ejecuta la aplicación. 37 | 38 | ```bash 39 | npm run dev 40 | ``` 41 | 42 | 1. Abre un navegador web y navega a `http://localhost:3000`. 43 | 1. Verifica si la aplicación web está ejecutándose correctamente. 44 | 45 | --- 46 | 47 | **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). 48 | -------------------------------------------------------------------------------- /complete/README.md: -------------------------------------------------------------------------------- 1 | # Complete App Samples 2 | 3 | Here are the list of complete app samples. Because they are also vibe-coded, you can check out how they're built. 4 | 5 | | Application | Location | 6 | |-------------|-----------------------------| 7 | | FastAPI | [python](./python/) | 8 | | React | [javascript](./javascript/) | 9 | | Spring Boot | [java](./java/) | 10 | | Blazor | [dotnet](./dotnet/) | 11 | 12 | ## Containerization Sample 13 | 14 | ### Prerequisites 15 | 16 | Refer to the [README](../README.md) doc for preparation. 17 | 18 | ### Getting Started 19 | 20 | 1. Make sure that Docker is running. 21 | 22 | ```bash 23 | docker info 24 | ``` 25 | 26 | 1. Get the repository root. 27 | 28 | ```bash 29 | # bash/zsh 30 | REPOSITORY_ROOT=$(git rev-parse --show-toplevel) 31 | ``` 32 | 33 | ```powershell 34 | # PowerShell 35 | $REPOSITORY_ROOT = git rev-parse --show-toplevel 36 | ``` 37 | 38 | 1. Navigate to the `complete` directory. 39 | 40 | ```bash 41 | cd $REPOSITORY_ROOT/complete 42 | ``` 43 | 44 | 1. Run the containerized apps. 45 | 46 | ```bash 47 | docker compose up --build -d 48 | ``` 49 | 50 | 1. Open a web browser and navigate to `http://localhost:3030`. 51 | 1. Verify if the web application is running properly. 52 | 1. Clean up by running the following command to remove the containerized apps. 53 | 54 | ```bash 55 | docker compose down --rmi all 56 | ``` 57 | -------------------------------------------------------------------------------- /localisation/fr-fr/complete/javascript/README.md: -------------------------------------------------------------------------------- 1 | # Échantillon d'Application JavaScript 2 | 3 | ## Prérequis 4 | 5 | Référez-vous au document [README](../../../README.md) pour la préparation. 6 | 7 | ## Démarrage 8 | 9 | ### Exécuter le Backend FastAPI 10 | 11 | Utilisez [l'Échantillon d'Application Python](../python/). 12 | 13 | > **NOTE** : Si vous utilisez GitHub Codespaces, assurez-vous que le port de l'application Python, `8000`, est défini sur **public**. 14 | 15 | ### Exécuter le Frontend React 16 | 17 | 1. Obtenez la racine du référentiel. 18 | 19 | ```bash 20 | # bash/zsh 21 | REPOSITORY_ROOT=$(git rev-parse --show-toplevel) 22 | ``` 23 | 24 | ```powershell 25 | # PowerShell 26 | $REPOSITORY_ROOT = git rev-parse --show-toplevel 27 | ``` 28 | 29 | 1. Installez les paquets npm. 30 | 31 | ```bash 32 | cd $REPOSITORY_ROOT/complete/javascript 33 | npm install 34 | ``` 35 | 36 | 1. Exécutez l'application. 37 | 38 | ```bash 39 | npm run dev 40 | ``` 41 | 42 | 1. Ouvrez un navigateur web et naviguez vers `http://localhost:3000`. 43 | 1. Vérifiez si l'application web fonctionne correctement. 44 | 45 | --- 46 | 47 | **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). 48 | -------------------------------------------------------------------------------- /docs/custom-instructions/containerization/copilot-instructions.md: -------------------------------------------------------------------------------- 1 | # DevOps Rules 2 | 3 | You are a senior DevOps engineer and an expert in containerization, Docker, Dockerfile, Docker Compose and Kubernetes. 4 | 5 | ## General Guidelines 6 | 7 | ### Basic Principles 8 | 9 | - Use English for all code, documentation, and comments. 10 | - Prioritize modular, reusable, and scalable code. 11 | - Follow naming conventions: 12 | - camelCase for variables, functions, and method names. 13 | - PascalCase for class names. 14 | - snake_case for file names and directory structures. 15 | - UPPER_CASE for environment variables. 16 | - Avoid hard-coded values; use environment variables or configuration files. 17 | - Apply Infrastructure-as-Code (IaC) principles where possible. 18 | - Always consider the principle of least privilege in access and permissions. 19 | 20 | ### DevOps Principles 21 | 22 | - Automate repetitive tasks and avoid manual interventions. 23 | - Write modular, reusable CI/CD pipelines. 24 | - Use containerized applications with secure registries. 25 | - Manage secrets using Azure Key Vault or other secret management solutions. 26 | - Build resilient systems by applying blue-green or canary deployment strategies. 27 | 28 | ## Specific Scenarios 29 | 30 | ### Docker and Docker Compose 31 | 32 | - Use multi-stage builds in Dockerfiles to optimize image size. 33 | - Ensure Dockerfiles are idempotent and can be built multiple times without side effects. 34 | - Use Docker Compose for local development and testing environments. 35 | -------------------------------------------------------------------------------- /localisation/zh-cn/docs/custom-instructions/javascript/copilot-instructions.md: -------------------------------------------------------------------------------- 1 | # JavaScript 开发规则 2 | 3 | 您是一位高级前端开发人员，也是 ReactJS、NextJS、ViteJS、JavaScript、TypeScript、HTML、CSS 和现代 UI/UX 框架（例如，TailwindCSS、Shadcn、Radix）的专家。 4 | 5 | 您深思熟虑，给出细致入微的答案，在推理方面非常出色。您仔细提供准确、事实、深思熟虑的答案，是推理方面的天才。 6 | 7 | ## 关键原则 8 | 9 | - 仔细按照用户的要求，一字不漏地执行。 10 | - 首先逐步思考 - 用伪代码详细描述您要构建的计划。 11 | - 确认，然后编写代码！ 12 | - 始终编写正确的、最佳实践的、DRY 原则（不要重复自己）的、无错误的、功能齐全的工作代码，并且应该符合下面代码实现指南中列出的规则。 13 | - 专注于简单易读的代码，而不是性能。 14 | - 完全实现所有请求的功能。 15 | - 不留任何待办事项、占位符或缺失部分。 16 | - 确保代码完整！彻底验证已完成。 17 | - 包含所有必需的导入，确保关键组件的正确命名。 18 | - 简洁明了，最小化其他散文。 19 | - 如果您认为可能没有正确答案，请说出来。 20 | - 如果您不知道答案，请说出来，而不是猜测。 21 | 22 | ## 编码环境 23 | 24 | 用户询问以下编码语言的问题： 25 | 26 | - ReactJS 27 | - NextJS 28 | - ViteJS 29 | - JavaScript 30 | - TypeScript 31 | - TailwindCSS 32 | - HTML 33 | - CSS 34 | 35 | ## 代码实现指南 36 | 37 | 编写代码时遵循这些规则： 38 | 39 | - 除非用户特别要求 JavaScript，否则优先使用 TypeScript。 40 | - 根据要求选择 NextJS 或 ViteJS 进行项目开发。 41 | - 尽可能使用早期返回使代码更易读。 42 | - 始终使用 Tailwind 类来样式化 HTML 元素；避免使用 CSS 或标签。 43 | - 在 class 标签中尽可能使用 "class:" 而不是三元运算符。 44 | - 使用描述性的变量和函数/常量名称。同时，事件函数应该以 "handle" 前缀命名，如 onClick 使用 "handleClick"，onKeyDown 使用 "handleKeyDown"。 45 | - 在元素上实现可访问性功能。例如，标签应该有 tabindex="0"、aria-label、on:click 和 on:keydown，以及类似的属性。 46 | - 使用常量而不是函数，例如，"const toggle = () =>"。同时，如果可能，定义一个类型。 47 | 48 | --- 49 | 50 | **免责声明**: 本文档由 [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)。 51 | -------------------------------------------------------------------------------- /localisation/ko-kr/complete/README.md: -------------------------------------------------------------------------------- 1 | # 완성된 앱 샘플 2 | 3 | 완성된 앱 샘플 목록입니다. 이들도 바이브 코딩으로 만들어졌기 때문에, 어떻게 구축되었는지 확인할 수 있습니다. 4 | 5 | | 애플리케이션 | 위치 | 6 | |-------------|-----------------------------| 7 | | FastAPI | [python](./python/) | 8 | | React | [javascript](./javascript/) | 9 | | Spring Boot | [java](./java/) | 10 | | Blazor | [dotnet](./dotnet/) | 11 | 12 | ## 컨테이너화 샘플 13 | 14 | ### 전제 조건 15 | 16 | 준비를 위해 [README](../README.md) 문서를 참조하세요. 17 | 18 | ### 시작하기 19 | 20 | 1. Docker가 실행 중인지 확인하세요. 21 | 22 | ```bash 23 | docker info 24 | ``` 25 | 26 | 1. 저장소 루트를 가져오세요. 27 | 28 | ```bash 29 | # bash/zsh 30 | REPOSITORY_ROOT=$(git rev-parse --show-toplevel) 31 | ``` 32 | 33 | ```powershell 34 | # PowerShell 35 | $REPOSITORY_ROOT = git rev-parse --show-toplevel 36 | ``` 37 | 38 | 1. `complete` 디렉터리로 이동하세요. 39 | 40 | ```bash 41 | cd $REPOSITORY_ROOT/complete 42 | ``` 43 | 44 | 1. 컨테이너화된 앱을 실행하세요. 45 | 46 | ```bash 47 | docker compose up --build -d 48 | ``` 49 | 50 | 1. 웹 브라우저를 열고 `http://localhost:3030`으로 이동하세요. 51 | 1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. 52 | 1. 다음 명령을 실행하여 컨테이너화된 앱을 제거하고 정리하세요. 53 | 54 | ```bash 55 | docker compose down --rmi all 56 | ``` 57 | 58 | --- 59 | 60 | **면책조항**: 이 문서는 [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)를 생성해 주세요. 61 | -------------------------------------------------------------------------------- /localisation/ja-jp/complete/README.md: -------------------------------------------------------------------------------- 1 | # 完成アプリサンプル 2 | 3 | こちらは完成アプリサンプルのリストです。これらもバイブコーディングされているため、どのように構築されているかを確認できます。 4 | 5 | | アプリケーション | 場所 | 6 | |-------------|-----------------------------| 7 | | FastAPI | [python](./python/) | 8 | | React | [javascript](./javascript/) | 9 | | Spring Boot | [java](./java/) | 10 | | Blazor | [dotnet](./dotnet/) | 11 | 12 | ## コンテナ化サンプル 13 | 14 | ### 前提条件 15 | 16 | 準備のために[README](../README.md)文書を参照してください。 17 | 18 | ### はじめに 19 | 20 | 1. Dockerが実行されていることを確認します。 21 | 22 | ```bash 23 | docker info 24 | ``` 25 | 26 | 1. リポジトリルートを取得します。 27 | 28 | ```bash 29 | # bash/zsh 30 | REPOSITORY_ROOT=$(git rev-parse --show-toplevel) 31 | ``` 32 | 33 | ```powershell 34 | # PowerShell 35 | $REPOSITORY_ROOT = git rev-parse --show-toplevel 36 | ``` 37 | 38 | 1. `complete` ディレクトリに移動します。 39 | 40 | ```bash 41 | cd $REPOSITORY_ROOT/complete 42 | ``` 43 | 44 | 1. コンテナ化されたアプリを実行します。 45 | 46 | ```bash 47 | docker compose up --build -d 48 | ``` 49 | 50 | 1. Webブラウザを開いて `http://localhost:3030` に移動します。 51 | 1. Webアプリケーションが適切に実行されているかどうかを確認します。 52 | 1. 以下のコマンドを実行してコンテナ化されたアプリを削除し、クリーンアップします。 53 | 54 | ```bash 55 | docker compose down --rmi all 56 | ``` 57 | 58 | --- 59 | 60 | **免責事項**: この文書は[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)を作成してください。 61 | -------------------------------------------------------------------------------- /complete/java/socialapp/src/main/java/com/contoso/socialapp/entity/Comment.java: -------------------------------------------------------------------------------- 1 | package com.contoso.socialapp.entity; 2 | 3 | import jakarta.persistence.*; 4 | import lombok.Data; 5 | import lombok.NoArgsConstructor; 6 | import lombok.AllArgsConstructor; 7 | import org.hibernate.annotations.GenericGenerator; 8 | 9 | import java.time.LocalDateTime; 10 | 11 | @Entity 12 | @Table(name = "comments") 13 | @Data 14 | @NoArgsConstructor 15 | @AllArgsConstructor 16 | public class Comment { 17 | 18 | @Id 19 | @GeneratedValue(generator = "uuid") 20 | @GenericGenerator(name = "uuid", strategy = "uuid2") 21 | private String id; 22 | 23 | @ManyToOne(fetch = FetchType.LAZY) 24 | @JoinColumn(name = "post_id", nullable = false) 25 | private Post post; 26 | 27 | @Column(nullable = false, length = 50) 28 | private String username; 29 | 30 | @Column(nullable = false, length = 1000) 31 | private String content; 32 | 33 | @Column(name = "created_at", nullable = false) 34 | private LocalDateTime createdAt; 35 | 36 | @Column(name = "updated_at", nullable = false) 37 | private LocalDateTime updatedAt; 38 | 39 | @PrePersist 40 | protected void onCreate() { 41 | createdAt = LocalDateTime.now(); 42 | updatedAt = LocalDateTime.now(); 43 | } 44 | 45 | @PreUpdate 46 | protected void onUpdate() { 47 | updatedAt = LocalDateTime.now(); 48 | } 49 | 50 | // Helper method to get postId 51 | public String getPostId() { 52 | return post != null ? post.getId() : null; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /complete/javascript/src/context/AuthContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext, useState, useEffect } from "react"; 2 | 3 | const AuthContext = createContext(null); 4 | 5 | export const AuthProvider = ({ children }) => { 6 | const [user, setUser] = useState(null); 7 | const [isLoading, setIsLoading] = useState(true); 8 | 9 | useEffect(() => { 10 | const storedUser = localStorage.getItem("user"); 11 | if (storedUser) { 12 | try { 13 | setUser(JSON.parse(storedUser)); 14 | } catch (error) { 15 | console.error("Error parsing stored user information:", error); 16 | localStorage.removeItem("user"); 17 | } 18 | } 19 | setIsLoading(false); 20 | }, []); 21 | 22 | const login = async (username) => { 23 | setIsLoading(true); 24 | try { 25 | const userData = { username: username.trim() }; 26 | setUser(userData); 27 | localStorage.setItem("user", JSON.stringify(userData)); 28 | return userData; 29 | } finally { 30 | setIsLoading(false); 31 | } 32 | }; 33 | 34 | const logout = () => { 35 | setUser(null); 36 | localStorage.removeItem("user"); 37 | }; 38 | 39 | const value = { 40 | user, 41 | isLoading, 42 | login, 43 | logout, 44 | isAuthenticated: !!user, 45 | }; 46 | 47 | returnThis component demonstrates showing data.
9 | 10 | @if (forecasts == null) 11 | { 12 |Loading...
13 | } 14 | else 15 | { 16 || Date | 20 |Temp. (C) | 21 |Temp. (F) | 22 |Summary | 23 |
|---|---|---|---|
| @forecast.Date.ToShortDateString() | 30 |@forecast.TemperatureC | 31 |@forecast.TemperatureF | 32 |@forecast.Summary | 33 |
{error}
63 | )} 64 | 65 |Please enter your name to continue
7 |@error
21 | } 22 | 23 |{error}
65 | )} 66 |@Post.Content
12 |