diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index be1d8f5e..4cb996e4 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -8,11 +8,12 @@ This repo hosts the **workshop content** for **Copilot Workshops**, published as - `docs/` — **Source Markdown for all lessons. Edit here.** Browsable directly on github.com; no build required. - `README.md` — Workshop landing page (also the site home via `slug: index` frontmatter). - - `cli/`, `vscode/`, `cloud/`, `app/` — Per-harness lessons (Copilot CLI / VS Code / Cloud agent / GitHub Copilot app). Each folder's landing page is a `README.md` (routed via a `slug:` matching the folder path). Each harness opens with its own `0-prerequisites.md` setup lesson; the CLI and VS Code harnesses set up a codespace, while the app and cloud harnesses cover the setup their flow needs (for the app, installing Node.js locally and creating the project from the template). + - `first-steps/` — Guided introductory workshops. Each workshop has its own folder and `README.md` landing page. + - `real-world-development/` — Scenario-based workshops organized by environment (`cli/`, `vscode/`, `cloud/`, and `app/`). Each environment's landing page is a `README.md` routed via a slug matching the full category path. Each workshop opens with its own `0-prerequisites.md` setup lesson. - `es-es/`, `ja-jp/`, `ko-kr/`, `pt-br/`, `zh-cn/` — Localized content at the locale-root paths required by Starlight. Translated pages mirror the English path beneath each locale directory; untranslated pages use Starlight's English fallback. - `_images/` — Screenshots and diagrams (shared across all locales). - `website/` — Optional Astro + Starlight site that publishes `docs/` to GitHub Pages (loader `base: '../docs'`). Only needed to self-host or preview the rendered site. - - `astro.config.mjs` — Site config including the manually maintained sidebar and the `locales` block. The legacy `/shared/0-prereqs/` → home (`/`) redirect is a full-HTML redirect page at `src/pages/shared/0-prereqs.astro` (not an `astro.config.mjs` `redirects` entry, which would emit a stub with no `` element that Pagefind can't index). Prerequisites are now per-harness (`//0-prerequisites/`), so the old shared-prereqs URL forwards to the home page. + - `astro.config.mjs` — Site config including the manually maintained sidebar and the `locales` block. The legacy `/shared/0-prereqs/` → home (`/`) redirect is a full-HTML redirect page at `src/pages/shared/0-prereqs.astro` (not an `astro.config.mjs` `redirects` entry, which would emit a stub with no `` element that Pagefind can't index). Prerequisites are now per workshop (`///0-prerequisites/`), so the old shared-prereqs URL forwards to the home page. - `src/content.config.ts` — Custom content loader (`base: '../docs'`) that excludes underscore-prefixed support directories so `_images/` is not routed as content. - `AUTHORING.md` — Author entry point (recipes for adding lessons and images). - `CONTRIBUTING.md` — Short pointer to AUTHORING.md + PR/CI rules. @@ -28,7 +29,7 @@ This repo hosts the **workshop content** for **Copilot Workshops**, published as ### Reusing prose across paths -When the same prose applies to multiple harnesses (CLI, VS Code, cloud), copy it inline into each per-harness `.md` lesson. There is no import-based shared content system; the host page owns frontmatter, headings, navigation, and body prose. +When the same prose applies to multiple workshops (CLI, VS Code, cloud), copy it inline into each workshop's `.md` lesson. There is no import-based shared content system; the host page owns frontmatter, headings, navigation, and body prose. Because inline copies can drift, run the `check-content-alignment` skill after editing duplicated sections. The `.github/workflows/content-alignment.md` agentic workflow performs the same analysis on PRs as a safety net, but do not rely on it as a substitute for updating all affected lessons. diff --git a/.github/instructions/astro.instructions.md b/.github/instructions/astro.instructions.md index 19502d94..56978130 100644 --- a/.github/instructions/astro.instructions.md +++ b/.github/instructions/astro.instructions.md @@ -12,7 +12,7 @@ applyTo: 'website/**/*.{astro,mjs,ts,js}' - Base path: `/copilot-workshops` (the repo's GitHub Pages slug). - Site URL: `https://github-samples.github.io/copilot-workshops/`. - **Sidebar: manually maintained** in `astro.config.mjs`. The `sidebar` array drives both the order learners see and which pages appear in navigation. New lessons must be added explicitly. -- **Content collection** is sourced from the repo-root `docs/` directory via the custom `glob()` loader in `src/content.config.ts` (`base: '../docs'`). That loader excludes underscore-prefixed files and directories so support assets such as `_images/` don't get routed as pages. Folder landing pages are `README.md` files (so they render on github.com) rather than Starlight's default `index.md`; each carries a `slug:` in its frontmatter to reproduce the route it would otherwise get from an index file — `docs/README.md` → `slug: index` (site home `/`), `docs//README.md` → `slug: `, and localized landings use the locale-prefixed slug (`docs//README.md` → `slug: `, `docs///README.md` → `slug: /`). +- **Content collection** is sourced from the repo-root `docs/` directory via the custom `glob()` loader in `src/content.config.ts` (`base: '../docs'`). That loader excludes underscore-prefixed files and directories so support assets such as `_images/` don't get routed as pages. Folder landing pages are `README.md` files (so they render on github.com) rather than Starlight's default `index.md`; each carries a `slug:` in its frontmatter to reproduce the route it would otherwise get from an index file — `docs/README.md` → `slug: index` (site home `/`), `docs//README.md` → `slug: `, `docs///README.md` → `slug: /`, and localized landings use the locale-prefixed full path. ## Don't add app-style components diff --git a/.github/instructions/markdown.instructions.md b/.github/instructions/markdown.instructions.md index 78714542..eab2a655 100644 --- a/.github/instructions/markdown.instructions.md +++ b/.github/instructions/markdown.instructions.md @@ -142,7 +142,7 @@ Use Markdown image syntax with paths relative to the Markdown file: ## Path conventions -- Per-path lessons: `cli/`, `vscode/`, `cloud/`, `app/`. Files are numbered by lesson order: `1-installing.md`, `2-custom-instructions.md`, etc. +- Workshop lessons live under category and workshop folders, such as `first-steps/copilot-app/` and `real-world-development/cli/`. Files are numbered by lesson order: `1-installing.md`, `2-custom-instructions.md`, etc. - Support images live in `_images/` directories and are excluded from routing by `website/src/content.config.ts`. ## Cross-repo links diff --git a/.github/skills/localizations/SKILL.md b/.github/skills/localizations/SKILL.md index 9b0c3dbb..e319ee41 100644 --- a/.github/skills/localizations/SKILL.md +++ b/.github/skills/localizations/SKILL.md @@ -17,22 +17,26 @@ The skill takes input content and a list of target locales. It then translates t . └── docs/ ← workshop content (source + locale outputs) ├── README.md ← landing page (source; slug: index) - ├── / ← English lessons (source) - │ ├── README.md ← harness landing (source; slug: ) - │ └── *.md - ├── _images/ ← shared assets (not localized) - └── / ← localized output, direct child of docs/ - ├── README.md ← locale landing (slug: ) - └── / - ├── README.md ← localized harness landing (slug: /) - └── *.md + ├── / ← English workshop category + │ ├── README.md ← category landing (source; slug: ) + │ └── / + │ ├── README.md ← workshop landing (source; slug: /) + │ └── *.md + ├── _images/ ← shared assets (not localized) + └── / ← localized output, direct child of docs/ + ├── README.md ← locale landing (slug: ) + └── / + ├── README.md ← localized category landing (slug: /) + └── / + ├── README.md ← localized workshop landing (slug: //) + └── *.md ``` ### Input contents Here are the contents in scope for localization: -- All English Markdown files under `docs/` **and its subdirectories** — the workshop landing (`docs/README.md`) and the per-harness lessons (`docs//**/*.md`). +- All English Markdown files under `docs/` **and its subdirectories** — the site landing (`docs/README.md`), category landings, and workshop lessons (`docs///**/*.md`). Do **not** treat `_images/` (shared assets) or any configured locale-root directory as source input. @@ -66,7 +70,7 @@ The process runs in two passes. First, the content is analyzed to identify key p Regardless of locale, the following must be preserved exactly and **not** translated: -- YAML frontmatter **keys** (translate values only where appropriate, e.g. a `title`). **Exception — the `slug` key on landing pages (`README.md`):** the site routes each folder landing via its `slug`, so a localized landing must carry a **locale-prefixed** slug rather than the English one. Rewrite it: a locale root (`docs//README.md`) uses `slug: `, and a localized harness landing (`docs///README.md`) uses `slug: /`. Never copy the English `slug: index` / `slug: ` verbatim into a localized file — that would collide with the English route. +- YAML frontmatter **keys** (translate values only where appropriate, e.g. a `title`). **Exception — the `slug` key on landing pages (`README.md`):** the site routes each folder landing via its `slug`, so a localized landing must carry a **locale-prefixed** slug rather than the English one. Rewrite it: a locale root (`docs//README.md`) uses `slug: `, a localized category landing uses `slug: /`, and a localized workshop landing uses `slug: //`. Never copy an English landing slug verbatim into a localized file because it would collide with the English route. - Fenced and inline code, including variable, function, and command names. - URLs and external link targets. - HTML tags, Markdown structure, tables, and admonition markers. @@ -75,7 +79,7 @@ Translate human-language prose, including comments inside code blocks where they **Heading anchors follow the localized text.** When a heading is translated, its auto-generated anchor/slug changes with it—this is expected. The requirement is that **same-document anchor links keep resolving**: whenever you translate a heading, update every in-page link that targets it (`](#...)`) to the localized heading's new slug. Do not leave a link pointing at the original English slug once the heading is translated, and do not preserve an English anchor that no longer matches its heading. Anchors that point into **non-localized** files (or external URLs) keep their original target. -**Image and asset paths point to the original assets unless a localized asset exists.** Because localized files live under `docs//`, rewrite source-relative paths as needed so they still resolve to the shared asset (for example, an app lesson at `docs//app/2-foo.md` uses `../../_images/x.png` to reach `docs/_images/`). Only point at a localized asset when a corresponding translated image actually exists under the locale tree. Either way, the link must resolve to a real file. +**Image and asset paths point to the original assets unless a localized asset exists.** Because localized files live under `docs//`, rewrite source-relative paths as needed so they still resolve to the shared asset (for example, a lesson at `docs//real-world-development/app/2-foo.md` uses `../../../_images/x.png` to reach `docs/_images/`). Only point at a localized asset when a corresponding translated image actually exists under the locale tree. Either way, the link must resolve to a real file. ### Translator agent @@ -97,4 +101,3 @@ The evaluator scores the localized document against the locale's **Evaluator Sco - **Don't** treat configured locale-root directories as source input. - **Don't** reorder or restructure content; keep headings and their order stable. - **Don't** translate code, commands, or identifiers; translate explanatory prose and code comments only. - diff --git a/.github/skills/validate-site-playwright/SKILL.md b/.github/skills/validate-site-playwright/SKILL.md index f0b22f9f..194b2f51 100644 --- a/.github/skills/validate-site-playwright/SKILL.md +++ b/.github/skills/validate-site-playwright/SKILL.md @@ -39,7 +39,7 @@ Don't hard-code URLs. The built `dist/` is the source of truth for what routes e find website/dist -name index.html | grep -v 404 | sed 's#website/dist#/copilot-workshops#; s#/index.html#/#' ``` -Validate a **representative sample** that covers every layout and harness: the landing page (`/copilot-workshops/`), a per-harness prerequisites page (e.g. `cli/0-prerequisites/`), and at least one lesson from each of `cli/`, `vscode/`, `cloud/`, and `app/`. For a release pass or a change that touches shared layout/components, validate **all** routes. +Validate a **representative sample** that covers every category and workshop: the landing page (`/copilot-workshops/`), a first-steps lesson, and at least one real-world development lesson from each of `cli/`, `vscode/`, `cloud/`, and `app/`. For a release pass or a change that touches shared layout/components, validate **all** routes. ## 3. Validate each route diff --git a/.github/workflows/content-alignment.md b/.github/workflows/content-alignment.md index c53cd137..8f721779 100644 --- a/.github/workflows/content-alignment.md +++ b/.github/workflows/content-alignment.md @@ -50,8 +50,8 @@ Inspect the pull request diff, restricted to `docs/**`. For each changed lesson, Search the rest of `docs/**` for passages that should stay in sync with each change. Focus on three drift categories: -1. **Formerly-shared copies.** Short callouts and steps that used to be shared partials are now copied verbatim into multiple lessons (for example, the Copilot CLI "Allow all" approval callout, and the "Approve and run workflows" step in `cloud/5-iterating.md` and `vscode/6-iterating.md`). Quote a distinctive phrase from the change and grep for it across all lessons. -2. **Parallel concepts across harnesses.** The same idea is taught once per harness in `cli/`, `vscode/`, `app/`, and `cloud/`. A conceptual change usually needs the same correction in the sibling lessons of the other harnesses. +1. **Formerly-shared copies.** Short callouts and steps that used to be shared partials are now copied verbatim into multiple lessons (for example, the Copilot CLI "Allow all" approval callout, and the "Approve and run workflows" step in `real-world-development/cloud/5-iterating.md` and `real-world-development/vscode/6-iterating.md`). Quote a distinctive phrase from the change and grep for it across all lessons. +2. **Parallel concepts across workshops.** The same idea may be taught in the `cli/`, `vscode/`, `app/`, and `cloud/` workshops under `real-world-development/`. A conceptual change usually needs the same correction in sibling lessons. 3. **Cross-references and shared facts.** Reference-style links to a renamed/retitled lesson, lesson numbers in prose, the published URL shape, the `github.com/github-samples/tailspin-toys/...` demo-app URL, tool/library names, and shared screenshots. Exclude the files already changed in this PR from your candidate list. diff --git a/AUTHORING.md b/AUTHORING.md index fd226b81..59666a09 100644 --- a/AUTHORING.md +++ b/AUTHORING.md @@ -12,11 +12,13 @@ This is the entry point for **content authors and maintainers** of **Copilot Wor copilot-workshops/ ├── docs/ ← Markdown source. EDIT HERE. Browsable on github.com. │ ├── README.md ← Workshop landing page (also site home via slug: index) -│ ├── cli/ ← Copilot CLI lessons (0-prerequisites.md + numbered exercises) -│ ├── vscode/ ← VS Code lessons (0-prerequisites.md + numbered exercises) -│ ├── cloud/ ← Cloud agent lessons (0-prerequisites.md + numbered exercises) -│ ├── app/ ← GitHub Copilot app lessons (setup folded into Exercise 1) -│ ├── es-es/ ja-jp/ ... ← Translated locale trees (currently the app harness) +│ ├── first-steps/ ← Guided introductory workshops +│ ├── real-world-development/ ← Scenario workshops organized by environment +│ │ ├── cli/ ← Copilot CLI lessons +│ │ ├── vscode/ ← VS Code lessons +│ │ ├── cloud/ ← Cloud agent lessons +│ │ └── app/ ← GitHub Copilot app lessons +│ ├── es-es/ ja-jp/ ... ← Translated locale trees mirroring source paths │ └── _images/ ← Screenshots and diagrams (shared across locales) ├── website/ ← Optional Astro + Starlight publisher │ ├── astro.config.mjs ← Site URL, base path, locales, sidebar @@ -31,7 +33,7 @@ copilot-workshops/ ### Add a new lesson -1. **Pick a path and number.** Lessons live under `docs/{cli,vscode,app,cloud}/N-name.md`. `N` is the next available integer in that path; the number drives the URL slug (`/cli/3-generating-code/`). +1. **Pick a category, workshop, and number.** Lessons live under `docs///N-name.md`. `N` is the next available integer in that workshop; the number drives the URL slug (`/real-world-development/cli/3-generating-code/`). 2. **Create the file** with frontmatter: ```markdown --- @@ -79,15 +81,16 @@ Prerequisite modules use setup goals and a readiness check instead of an artific Every folder's landing page is a `README.md` so it renders directly when someone browses that folder on github.com. Because Starlight normally derives a folder's index route from an `index.md`, each landing carries an explicit `slug:` in its frontmatter that reproduces the route: - `docs/README.md` → `slug: index` (site home `/`). -- `docs//README.md` → `slug: ` (e.g. `slug: app` → `/app/`). +- `docs//README.md` → `slug: ` (e.g. `slug: first-steps` → `/first-steps/`). +- `docs///README.md` → `slug: /` (e.g. `slug: real-world-development/app` → `/real-world-development/app/`). - `docs//README.md` → `slug: ` (e.g. `slug: es-es` → `/es-es/`). -- `docs///README.md` → `slug: /` (e.g. `slug: es-es/app` → `/es-es/app/`). +- `docs////README.md` → `slug: //` (e.g. `slug: es-es/real-world-development/app` → `/es-es/real-world-development/app/`). When you add a new harness or locale landing, name it `README.md` and set its `slug:` to match the folder path. Localized landings must use the locale-prefixed slug, never the English one. ### Add an image -1. **Drop the file** in `docs/_images/` (or a path-scoped `cli/_images/` etc. when the image is path-specific). Use lowercase-with-hyphens filenames; prefix with `shared-` if the image is referenced from multiple harnesses. +1. **Drop the file** in `docs/_images/` (or a workshop-scoped `_images/` directory when the image is specific to one workshop). Use lowercase-with-hyphens filenames; prefix with `shared-` if the image is referenced from multiple workshops. 2. **Reference it** with a relative path from the consuming Markdown page: ```markdown ![Description of the screenshot](../_images/my-screenshot.png) @@ -97,7 +100,7 @@ When you add a new harness or locale landing, name it `README.md` and set its `s ### Edit an existing lesson -1. **Find the file** under `docs/` (use the published URL as a hint — `/cli/3-generating-code/` lives at `docs/cli/3-generating-code.md`). +1. **Find the file** under `docs/` (use the published URL as a hint — `/real-world-development/cli/3-generating-code/` lives at `docs/real-world-development/cli/3-generating-code.md`). 2. **Edit the Markdown.** Same conventions apply — see **Style essentials** below. 3. **Preview** with `npm run dev` in `website/`. 4. **Commit, PR, merge.** diff --git a/README.md b/README.md index f86ad396..53c86950 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # Copilot Workshops — Workshop Content -Workshop content for **Copilot Workshops**, a guided exploration of GitHub Copilot's agentic capabilities (Copilot CLI, VS Code agent mode, the Copilot app, and the Copilot cloud agent) across the software development lifecycle. +Workshop content for **Copilot Workshops**, with guided first-step experiences and real-world development scenarios across Copilot CLI, VS Code agent mode, the GitHub Copilot app, and the Copilot cloud agent. The published site lives at ****. > [!NOTE] -> The demo application learners build through during the workshop — Tailspin Toys, a pure-Astro crowdfunding site (SSR, API endpoints, and a Drizzle data layer) — lives in a separate repository: ****. This repo holds only the *content*: lesson Markdown, images, and the Astro + Starlight site that publishes them. +> The real-world development workshops use Tailspin Toys, a pure-Astro crowdfunding site (SSR, API endpoints, and a Drizzle data layer) that lives in a separate repository: ****. First steps workshops may guide learners in creating a small project from scratch. This repository holds only the workshop content: lesson Markdown, images, and the Astro + Starlight site that publishes them. ## Start the workshop @@ -21,8 +21,9 @@ For PR/CI rules, see **[CONTRIBUTING.md](./CONTRIBUTING.md)**. - **`docs/`** — **Lesson source (plain Markdown). Edit here.** Browsable directly on github.com, no build required. - `README.md` — Workshop landing page (also the published site's home via `slug: index`). - - `cli/`, `vscode/`, `cloud/`, `app/` — Per-harness lessons (Copilot CLI / VS Code / cloud agent / GitHub Copilot app). Each codespace-based harness opens with its own `0-prerequisites.md` setup lesson, and a folder `README.md` (routed via a `slug:` matching the folder) is its landing page. - - `es-es/`, `ja-jp/`, `ko-kr/`, `pt-br/`, `zh-cn/` — Translated locale trees (currently the app harness). + - `first-steps/` — Guided introductory workshops, including the GitHub Copilot app tour adapted from James Montemagno's GitHub Copilot App Lab. + - `real-world-development/` — Scenario-based workshops organized by environment: `cli/`, `vscode/`, `cloud/`, and `app/`. + - `es-es/`, `ja-jp/`, `ko-kr/`, `pt-br/`, `zh-cn/` — Translated locale trees that mirror available English category and workshop paths. - `_images/` — Screenshots and diagrams (shared across all locales). - **`website/`** — Optional Astro + Starlight site that publishes `docs/` to GitHub Pages. Only needed to self-host or preview the rendered site. - `astro.config.mjs` — Site URL, base path, `locales` block, sidebar. diff --git a/docs/README.md b/docs/README.md index 56ff3ad5..3ffd4445 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,42 +1,33 @@ --- -title: "Hands-on with GitHub Copilot's agents" +title: "GitHub Copilot workshops" slug: index authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-16 --- -The recent additions to the capabilities of GitHub Copilot provide powerful tools to the developer across the entire software development lifecycle (SDLC). This includes working with issues and pull requests on GitHub, interacting with external services, and of course code creation. This lab explores the functionality, providing real-world use cases and tips on how to get the most out of the tools. +Choose a workshop based on what you want to learn and how deeply you want to explore it. **First steps** offers a guided introduction to GitHub Copilot, while **Real-world development** uses a complete application and team backlog to practice production-oriented workflows. -> [!CAUTION] -> Because GitHub Copilot is probabilistic rather than deterministic, the exact code, files changed, etc., may vary. As a result, you may notice slight differences between screenshots and code snippets in the lab and your experience. This is to be expected, and is just the nature of working with this class of tools. -> -> If something appears broken or isn't running correctly, please ask a mentor! - -## Choose your harness - -GitHub Copilot meets you wherever you work. Pick the harness that matches how you want to build, and work through its exercises against a shared Tailspin Toys backlog. Each harness starts with its own setup, so you can dive straight into the one you choose. - -### 🖥️ [VS Code](vscode/) +## First steps -GitHub Copilot inside **Visual Studio Code** and GitHub Codespaces. Work with Copilot Chat agent mode, MCP servers, and custom agents without leaving the editor you already use — ideal when you want AI assistance woven directly into your IDE. +Start with a focused, guided experience that introduces the key capabilities of a GitHub Copilot product without requiring an existing codebase. -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot app tour][first-steps-app] -**GitHub Copilot CLI** — an agentic assistant that runs in your terminal. Install it, connect MCP servers, generate code with plan mode, and build your own skills, custom agents, and slash commands, all from the command line. +Build a Space Quiz from an empty folder, publish it to GitHub, implement an issue, complete a Copilot review, schedule an automation, and explore a Canvas workflow. -### 🤖 [Copilot App](app/) +## Real-world development -The **GitHub Copilot app** — a desktop application built on Copilot CLI. Run parallel agent sessions, switch session modes, collaborate on canvases, and manage GitHub issues and pull requests natively — including **Agent Merge**, which shepherds a pull request through rebases, review feedback, CI fixes, and merge. +Practice GitHub Copilot in a realistic software development lifecycle using the Tailspin Toys application and backlog. Choose the environment where you want to work, then plan, build, test, review, and deliver meaningful changes. -### ☁️ [Copilot Cloud Agent](cloud/) +### [Browse the real-world development workshops][real-world-development] -**Copilot cloud agent** — an asynchronous peer programmer that works on GitHub issues in the background. Assign work, guide it with custom agents, monitor progress from the agents dashboard, and review the pull requests it opens. +Choose from VS Code, Copilot CLI, the GitHub Copilot app, or the Copilot cloud agent. -## Scenario - -You are a new developer for Tailspin Toys, a fictional company who provides crowdfunding for board games with a developer theme - a huge market! Your team's backlog is already filed as GitHub issues, ready for you to pick up — feature work (like filtering and pagination) alongside quality improvements (like accessibility and coding standards). You'll work iteratively, exploring both the site and Copilot's capabilities, to complete the tasks. - -## Get started +> [!CAUTION] +> GitHub Copilot is probabilistic rather than deterministic, so the exact code and files changed may vary from the examples. Small differences are expected. +> +> If something appears broken or does not run correctly during an instructor-led workshop, ask a mentor. -Choose your harness above to begin — each one opens with the setup it needs to get you building. +[first-steps-app]: first-steps/copilot-app/ +[real-world-development]: real-world-development/ diff --git a/docs/es-es/README.md b/docs/es-es/README.md index c57d5067..7192a99e 100644 --- a/docs/es-es/README.md +++ b/docs/es-es/README.md @@ -1,42 +1,33 @@ --- slug: es-es -title: "Manos a la obra con los agentes de GitHub Copilot" +title: "Talleres de GitHub Copilot" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-16 --- -Las recientes ampliaciones de las capacidades de GitHub Copilot ofrecen a los desarrolladores herramientas potentes para todo el ciclo de vida del desarrollo de software (SDLC). Estas capacidades incluyen trabajar con incidencias y solicitudes de incorporación de cambios en GitHub, interactuar con servicios externos y, por supuesto, crear código. En este laboratorio se exploran estas funciones mediante casos de uso reales y consejos para aprovechar al máximo las herramientas. +Elige un taller según lo que quieras aprender y el nivel de profundidad que busques. **Primeros pasos** ofrece una introducción guiada a GitHub Copilot, mientras que **Desarrollo en escenarios reales** utiliza una aplicación completa y el backlog de un equipo para practicar flujos de trabajo orientados a producción. -> [!CAUTION] -> Como GitHub Copilot es probabilístico y no determinista, el código exacto, los archivos modificados y otros elementos pueden variar. Por este motivo, es posible que observes pequeñas diferencias entre las capturas de pantalla y los fragmentos de código del laboratorio y lo que tú ves. Es algo normal y forma parte de trabajar con este tipo de herramientas. -> -> Si algo parece no funcionar o no se ejecuta correctamente, ¡pide ayuda a un mentor! - -## Elige tu entorno - -GitHub Copilot te acompaña allí donde trabajes. Elige el entorno que se ajuste a tu forma de desarrollar y completa sus ejercicios con el trabajo pendiente compartido de Tailspin Toys. Cada entorno comienza con su propia configuración para que puedas empezar directamente con el que elijas. - -### 🖥️ [VS Code](../vscode/) - -GitHub Copilot dentro de **Visual Studio Code** y GitHub Codespaces. Trabaja con el modo agente de Copilot Chat, servidores MCP y agentes personalizados sin salir del editor que ya utilizas. Es ideal si quieres integrar la asistencia de IA directamente en el IDE. - -### 💻 [Copilot CLI](cli/) +## Primeros pasos -**GitHub Copilot CLI** es un asistente basado en agentes que se ejecuta en el terminal. Instálalo, conecta servidores MCP, genera código con el modo de planificación y crea tus propias skills, agentes personalizados y comandos con barra diagonal, todo desde la línea de comandos. +Comienza con una experiencia guiada y específica que presenta las capacidades principales de un producto de GitHub Copilot sin requerir un código base existente. -### 🤖 [Copilot App](app/) +### [Recorrido por la aplicación GitHub Copilot][first-steps-app] -La **aplicación GitHub Copilot** es una aplicación de escritorio basada en Copilot CLI. Ejecuta sesiones de agentes en paralelo, cambia el modo de las sesiones, colabora en lienzos y gestiona incidencias y solicitudes de incorporación de cambios de GitHub de forma nativa. También incluye **Agent Merge**, que guía una solicitud de incorporación de cambios durante los cambios de base, los comentarios de revisión, las correcciones de integración continua y la combinación. +Crea un cuestionario sobre el espacio desde una carpeta vacía, publícalo en GitHub, implementa una incidencia, completa una revisión de Copilot, programa una automatización y explora un flujo de trabajo con Canvas. -### ☁️ [Copilot Cloud Agent](../cloud/) +## Desarrollo en escenarios reales -El **agente de Copilot en la nube** es un compañero de programación asíncrono que trabaja en segundo plano en las incidencias de GitHub. Asígnale trabajo, guíalo con agentes personalizados, supervisa el progreso desde el panel de agentes y revisa las solicitudes de incorporación de cambios que abre. +Practica con GitHub Copilot en un ciclo de vida de desarrollo de software realista mediante la aplicación Tailspin Toys y su backlog. Elige el entorno en el que quieras trabajar y, a continuación, planifica, desarrolla, prueba, revisa y entrega cambios significativos. -## Escenario +### [Consulta los talleres de desarrollo en escenarios reales][real-world-development] -Acabas de incorporarte como desarrollador a Tailspin Toys, una empresa ficticia que ofrece financiación colectiva para juegos de mesa de temática tecnológica: ¡un mercado enorme! El trabajo pendiente del equipo ya está registrado como incidencias de GitHub para que puedas comenzar. Incluye tanto funcionalidades, como el filtrado y la paginación, como mejoras de calidad, como la accesibilidad y los estándares de programación. Trabajarás de forma iterativa para completar las tareas mientras exploras el sitio y las capacidades de Copilot. +Elige entre VS Code, Copilot CLI, la aplicación GitHub Copilot o el agente de Copilot en la nube. -## Primeros pasos +> [!CAUTION] +> GitHub Copilot es probabilístico y no determinista, por lo que el código exacto y los archivos modificados pueden variar respecto a los ejemplos. Es normal que haya pequeñas diferencias. +> +> Si algo parece no funcionar correctamente durante un taller dirigido por un instructor, pide ayuda a un mentor. -Elige uno de los entornos anteriores para empezar. Cada uno comienza con la configuración necesaria para que puedas ponerte manos a la obra. \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[real-world-development]: ../real-world-development/ diff --git a/docs/es-es/app/0-prerequisites.md b/docs/es-es/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/es-es/app/0-prerequisites.md rename to docs/es-es/real-world-development/app/0-prerequisites.md index b93e4997..f9bbfd0f 100644 --- a/docs/es-es/app/0-prerequisites.md +++ b/docs/es-es/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Trabajarás con tu propia copia del proyecto Tailspin Toys. Créala ahora a part 1. En una nueva ventana del navegador, ve al repositorio de GitHub de este laboratorio: `https://github.com/github-samples/tailspin-toys`. 2. Para crear tu propia copia del repositorio, selecciona el botón **Use this template** en la página del repositorio del laboratorio. A continuación, selecciona **Create a new repository**. - ![Botón Use this template con la opción Create a new repository seleccionada en el menú desplegable](../../_images/app-0-use-template.png) + ![Botón Use this template con la opción Create a new repository seleccionada en el menú desplegable](../../../_images/app-0-use-template.png) 3. Si realizas el taller como parte de un evento dirigido por GitHub o Microsoft, sigue las instrucciones de los mentores. De lo contrario, puedes crear el nuevo repositorio en una organización en la que tengas acceso a GitHub Copilot. - ![Formulario Create a new repository con github-samples/tailspin-toys como plantilla y el nombre del repositorio completado](../../_images/app-0-create-repository.png) + ![Formulario Create a new repository con github-samples/tailspin-toys como plantilla y el nombre del repositorio completado](../../../_images/app-0-create-repository.png) 4. Anota la ruta del repositorio que has creado (**organization-or-user-name/repository-name**), ya que la utilizarás más adelante en el laboratorio. diff --git a/docs/es-es/app/1-install-copilot-app.md b/docs/es-es/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/es-es/app/1-install-copilot-app.md rename to docs/es-es/real-world-development/app/1-install-copilot-app.md diff --git a/docs/es-es/app/2-add-star-rating.md b/docs/es-es/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/es-es/app/2-add-star-rating.md rename to docs/es-es/real-world-development/app/2-add-star-rating.md index b10c330b..ce1665f6 100644 --- a/docs/es-es/app/2-add-star-rating.md +++ b/docs/es-es/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Vamos a iniciar una sesión nueva para comenzar a explorar el proyecto e impleme 2. Selecciona **Home screen**. 3. Comprueba que `tailspin-toys` esté seleccionado como repositorio. - ![Cuadro de indicaciones de la aplicación GitHub Copilot con el selector de repositorio establecido en tailspin-toys y el selector de modelo debajo](../../_images/app-2-start-session.png) + ![Cuadro de indicaciones de la aplicación GitHub Copilot con el selector de repositorio establecido en tailspin-toys y el selector de modelo debajo](../../../_images/app-2-start-session.png) 4. Utiliza la indicación siguiente para solicitar el cambio: @@ -55,7 +55,7 @@ Todos los cambios generados por IA deben revisarse antes de combinarlos, incluso 1. En la esquina superior derecha de la aplicación, selecciona **Toggle review panel**. Se abrirá la pantalla de diferencias con todos los cambios pendientes realizados por Copilot. - ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../_images/app-2-review-panel.png) + ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../../_images/app-2-review-panel.png) 2. Deberías observar código añadido a `GameCard.astro`, el archivo principal que se utiliza para mostrar los detalles de los juegos. Debería ser similar al siguiente: un pequeño bloque que representa la valoración cuando existe y muestra "No rating yet" cuando `starRating` es `null`: @@ -80,7 +80,7 @@ No debemos limitarnos a leer el código y dar por hecho que funciona. También d 1. En el panel de revisión situado a la derecha de la aplicación Copilot, selecciona **Terminal**. Si no aparece el botón **Terminal**, selecciona **+** (con la etiqueta **Open in panel**) y, después, **Terminal**. - ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../../_images/app-terminal-screenshot.png) 2. Introduce el comando siguiente en la ventana de terminal para iniciar el servidor de desarrollo de la aplicación web: diff --git a/docs/es-es/app/3-custom-instructions.md b/docs/es-es/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/es-es/app/3-custom-instructions.md rename to docs/es-es/real-world-development/app/3-custom-instructions.md index 3275c5e6..fa914368 100644 --- a/docs/es-es/app/3-custom-instructions.md +++ b/docs/es-es/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ Dedica un momento a leer los archivos de instrucciones incluidos en este reposit 1. Si el panel de revisión aún no está visible, selecciona **Toggle review panel** en la esquina superior derecha para abrirlo. - ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../_images/app-2-review-panel.png) + ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../../_images/app-2-review-panel.png) 2. Selecciona **+** para añadir un elemento nuevo al panel de revisión. 3. Selecciona **File**. @@ -66,7 +66,7 @@ Dedica un momento a leer los archivos de instrucciones incluidos en este reposit 6. Explora el archivo. Observa la breve descripción del proyecto y secciones como **Agent notes**, **Code standards**, **Scripts** y **Repository Structure**. En **Code standards**, fíjate en las directrices anidadas de **GitHub Actions Workflows**. Se aplican a cualquier interacción con Copilot. 7. Selecciona **Show folder view** para abrir el navegador de carpetas. - ![Botón Show folder view del panel de revisión con un archivo abierto en la aplicación GitHub Copilot](../../_images/app-show-folder-view.png) + ![Botón Show folder view del panel de revisión con un archivo abierto en la aplicación GitHub Copilot](../../../_images/app-show-folder-view.png) 8. Ve a la carpeta `.github/instructions` y explora los archivos. Observa que hay instrucciones para archivos de Astro, la capa de datos de Drizzle, pruebas y otros elementos. 9. Abre `.github/instructions/unit-tests.instructions.md`. Observa el campo `applyTo` de la parte superior: establece un patrón glob, relativo a la raíz del repositorio, que determina a qué archivos se aplican las instrucciones. En este caso, coincidirá cualquier archivo de prueba de TypeScript, por ejemplo, uno que cumpla `**/*.test.ts`. @@ -87,7 +87,7 @@ En la lección anterior iniciaste una sesión con una indicación directa. Sin e 2. Selecciona la incidencia titulada **Update our repository coding standards** para abrirla. 3. Selecciona **New session** en la esquina superior derecha para iniciar una sesión basada en la incidencia. - ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../_images/app-new-session-from-issue.png) + ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../../_images/app-new-session-from-issue.png) 4. Utiliza la indicación siguiente para pedir a Copilot que actualice los archivos de instrucciones de acuerdo con los requisitos documentados en la incidencia: @@ -103,7 +103,7 @@ Vamos a leer las actualizaciones de Copilot y también a pedirle un ejemplo del 1. Selecciona **Changes** en la esquina superior derecha para abrir los cambios de código. - ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../_images/app-select-changes.png) + ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../../_images/app-select-changes.png) 2. Revisa el archivo de instrucciones actualizado. Confirma que contiene las directrices para añadir documentación y comentarios al código. diff --git a/docs/es-es/app/4-build-filtering.md b/docs/es-es/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/es-es/app/4-build-filtering.md rename to docs/es-es/real-world-development/app/4-build-filtering.md index 39105d16..47f758bd 100644 --- a/docs/es-es/app/4-build-filtering.md +++ b/docs/es-es/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Vamos a abrir la incidencia, iniciar una sesión nueva y crear un plan. Para ell 2. Selecciona la incidencia titulada **Allow users to filter games by category and publisher**. 3. Selecciona **New session** en la esquina superior derecha. - ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../_images/app-new-session-from-issue.png) + ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../../_images/app-new-session-from-issue.png) 4. Selecciona Shift+Tab hasta que el modo muestre **Plan**. - ![Cuadro de indicaciones de la aplicación GitHub Copilot con una flecha que señala el selector de modo establecido en Plan](../../_images/app-4-plan-mode.png) + ![Cuadro de indicaciones de la aplicación GitHub Copilot con una flecha que señala el selector de modo establecido en Plan](../../../_images/app-4-plan-mode.png) 5. Envía la indicación siguiente. La incidencia sobre filtrado ya está en el contexto de esta sesión porque la has iniciado desde ella: @@ -92,12 +92,12 @@ Todo el código generado por IA debe revisarse antes de combinarlo. Vamos a revi 1. Selecciona **Changes** en la esquina superior derecha para abrir los cambios de código. - ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../_images/app-select-changes.png) + ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../../_images/app-select-changes.png) 2. Revisa los cambios. Deberías ver nuevos archivos de TypeScript y Astro, además de archivos de prueba. Observa que las nuevas funciones auxiliares incluyen comentarios de documentación TSDoc y un comentario de cabecera de archivo: el estándar de documentación que combinaste en la Lección 3, aplicado automáticamente sin solicitarlo. 3. En el panel de revisión situado a la derecha de la aplicación Copilot, selecciona **Terminal**. Si no aparece el botón **Terminal**, selecciona **+** (con la etiqueta **Open in panel**) y, después, **Terminal**. - ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../../_images/app-terminal-screenshot.png) 4. Introduce el comando siguiente en la ventana de terminal para iniciar el servidor de desarrollo de la aplicación web: @@ -138,7 +138,7 @@ Vamos a explorar la habilidad para ver qué hace. 1. Si el panel de revisión aún no está visible, selecciona **Toggle review panel** en la esquina superior derecha para abrirlo. - ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../_images/app-2-review-panel.png) + ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../../_images/app-2-review-panel.png) 2. Selecciona **+** para añadir un elemento nuevo al panel de revisión. 3. Selecciona **File**. diff --git a/docs/es-es/app/5-mcp-playwright.md b/docs/es-es/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/es-es/app/5-mcp-playwright.md rename to docs/es-es/real-world-development/app/5-mcp-playwright.md index 705fe8cd..102e1265 100644 --- a/docs/es-es/app/5-mcp-playwright.md +++ b/docs/es-es/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ Hay muchos otros servidores MCP que proporcionan acceso a distintas herramientas Los servidores MCP se añaden y gestionan desde la configuración de la aplicación. La aplicación incluye un catálogo de servidores populares, por lo que el [servidor MCP de Playwright][playwright-mcp-server] está a solo un par de selecciones. -1. Selecciona Ctrl+, para abrir la página de configuración de la aplicación Copilot. +1. Pulsa Command+, (Mac) o Ctrl+, (Windows/Linux) para abrir la página de configuración de la aplicación Copilot. 2. Selecciona **MCP servers**. 3. En el cuadro de búsqueda, escribe `Playwright`. 4. Selecciona **Playwright** en la lista de **Popular MCP servers**. diff --git a/docs/es-es/app/6-agent-merge.md b/docs/es-es/real-world-development/app/6-agent-merge.md similarity index 97% rename from docs/es-es/app/6-agent-merge.md rename to docs/es-es/real-world-development/app/6-agent-merge.md index b29b7903..9efbc075 100644 --- a/docs/es-es/app/6-agent-merge.md +++ b/docs/es-es/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ Has revisado el código manualmente, ejecutado pruebas e incluso permitido que C 2. En la esquina superior derecha, selecciona el menú desplegable situado junto a **Create PR**. 3. Selecciona **Agent merge** para habilitar Agent Merge. - ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../_images/app-enable-agent-merge.png) + ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../../_images/app-enable-agent-merge.png) 4. El texto del botón cambia a **Agent merge**. 5. Selecciona el botón **Agent merge** para iniciar el proceso. @@ -43,7 +43,7 @@ Transcurridos unos instantes, observarás que Copilot vuelve a trabajar y examin 6. Permite que Agent Merge combine la solicitud seleccionando el menú desplegable situado junto a **Agent merge** y, después, **Merge pull request**. - ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Cuando todos los procesos de CI estén en verde, lo que significa que las pruebas han finalizado correctamente, Copilot combinará la solicitud. diff --git a/docs/es-es/app/7-canvases.md b/docs/es-es/real-world-development/app/7-canvases.md similarity index 98% rename from docs/es-es/app/7-canvases.md rename to docs/es-es/real-world-development/app/7-canvases.md index 2272a3bc..0c0ebac3 100644 --- a/docs/es-es/app/7-canvases.md +++ b/docs/es-es/real-world-development/app/7-canvases.md @@ -70,7 +70,7 @@ Los lienzos pueden convertirse en recursos del repositorio, al igual que los arc 2. Cuando Copilot haya guardado los archivos del lienzo, selecciona el menú desplegable situado junto a **Create PR** en la esquina superior derecha. 3. Selecciona **Agent merge** para habilitar Agent Merge. - ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../_images/app-enable-agent-merge.png) + ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../../_images/app-enable-agent-merge.png) 4. El texto del botón cambia a **Agent merge**. 5. Selecciona el botón **Agent merge** para iniciar el proceso. @@ -81,7 +81,7 @@ Transcurridos unos instantes, observarás que Copilot vuelve a trabajar y examin 6. Permite que Agent Merge combine la solicitud seleccionando el menú desplegable situado junto a **Agent merge** y, después, **Merge pull request**. - ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Espera a que todos los procesos de CI se completen correctamente y se muestren en verde. Cuando terminen, Copilot combinará automáticamente la solicitud. diff --git a/docs/es-es/app/8-review.md b/docs/es-es/real-world-development/app/8-review.md similarity index 100% rename from docs/es-es/app/8-review.md rename to docs/es-es/real-world-development/app/8-review.md diff --git a/docs/es-es/app/README.md b/docs/es-es/real-world-development/app/README.md similarity index 99% rename from docs/es-es/app/README.md rename to docs/es-es/real-world-development/app/README.md index 3607a893..b4f72608 100644 --- a/docs/es-es/app/README.md +++ b/docs/es-es/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/app +slug: es-es/real-world-development/app title: "Aplicación GitHub Copilot" authors: - geektrainer diff --git a/docs/es-es/cli/0-prerequisites.md b/docs/es-es/real-world-development/cli/0-prerequisites.md similarity index 94% rename from docs/es-es/cli/0-prerequisites.md rename to docs/es-es/real-world-development/cli/0-prerequisites.md index 383b011b..91abe83d 100644 --- a/docs/es-es/cli/0-prerequisites.md +++ b/docs/es-es/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Para crear una copia del repositorio para el código que vas a crear, generarás 1. En una nueva ventana del navegador, ve al repositorio de GitHub de este laboratorio: `https://github.com/github-samples/tailspin-toys`. 2. Crea tu propia copia del repositorio seleccionando el botón **Use this template** en la página del repositorio del laboratorio. Después, selecciona **Create a new repository**. - ![Captura del botón Use this template](../../_images/ex0-use-template.png) + ![Captura del botón Use this template](../../../_images/ex0-use-template.png) 3. Si estás realizando el taller como parte de un evento dirigido por GitHub o Microsoft, sigue las instrucciones proporcionadas por el personal mentor. En caso contrario, puedes crear el nuevo repositorio en una organización en la que tengas acceso a GitHub Copilot. - ![Captura de la configuración de la plantilla del repositorio](../../_images/ex0-repository-settings.png) + ![Captura de la configuración de la plantilla del repositorio](../../../_images/ex0-repository-settings.png) 4. Anota la ruta del repositorio que has creado (**nombre-de-organización-o-usuario/nombre-del-repositorio**), ya que la consultarás más adelante en el laboratorio. @@ -36,11 +36,11 @@ Ahora usarás un codespace para completar los ejercicios del laboratorio. 1. Ve a tu repositorio recién creado. 2. Selecciona el botón verde **Code**. - ![Botón Code](../../_images/ex0-code-button.png) + ![Botón Code](../../../_images/ex0-code-button.png) 3. Selecciona la pestaña **Codespaces** y, a continuación, selecciona el botón **+** para crear un Codespace nuevo. - ![Crear un codespace nuevo](../../_images/ex0-create-codespace.png) + ![Crear un codespace nuevo](../../../_images/ex0-create-codespace.png) La creación del codespace tardará varios minutos, aunque sigue siendo mucho más rápida que instalar manualmente todos los servicios. Dicho esto, puedes aprovechar este tiempo para explorar otras funciones de GitHub Copilot, a las que prestaremos atención a continuación. diff --git a/docs/es-es/cli/1-install-copilot-cli.md b/docs/es-es/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/es-es/cli/1-install-copilot-cli.md rename to docs/es-es/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/es-es/cli/2-custom-instructions.md b/docs/es-es/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/es-es/cli/2-custom-instructions.md rename to docs/es-es/real-world-development/cli/2-custom-instructions.md diff --git a/docs/es-es/cli/3-generating-code.md b/docs/es-es/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/es-es/cli/3-generating-code.md rename to docs/es-es/real-world-development/cli/3-generating-code.md diff --git a/docs/es-es/cli/4-mcp.md b/docs/es-es/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/es-es/cli/4-mcp.md rename to docs/es-es/real-world-development/cli/4-mcp.md diff --git a/docs/es-es/cli/5-agent-skills.md b/docs/es-es/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/es-es/cli/5-agent-skills.md rename to docs/es-es/real-world-development/cli/5-agent-skills.md diff --git a/docs/es-es/cli/6-custom-agents.md b/docs/es-es/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/es-es/cli/6-custom-agents.md rename to docs/es-es/real-world-development/cli/6-custom-agents.md diff --git a/docs/es-es/cli/7-slash-commands.md b/docs/es-es/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/es-es/cli/7-slash-commands.md rename to docs/es-es/real-world-development/cli/7-slash-commands.md index b3e1bbe9..c7d33c8f 100644 --- a/docs/es-es/cli/7-slash-commands.md +++ b/docs/es-es/real-world-development/cli/7-slash-commands.md @@ -66,7 +66,7 @@ Cuando trabajas en tareas grandes o complejas, puedes llegar al límite máximo 2. En apenas unos instantes, Copilot CLI generará una representación visual de su contexto actual: - ![Captura de la ventana de contexto de Copilot CLI](../../_images/cli-7-context-window.png) + ![Captura de la ventana de contexto de Copilot CLI](../../../_images/cli-7-context-window.png) 3. Fíjate en el modelo mostrado (que puede ser distinto del de la imagen) y en el porcentaje actual de tokens usados. El resto de la información destaca lo siguiente: diff --git a/docs/es-es/cli/8-review.md b/docs/es-es/real-world-development/cli/8-review.md similarity index 100% rename from docs/es-es/cli/8-review.md rename to docs/es-es/real-world-development/cli/8-review.md diff --git a/docs/es-es/cli/README.md b/docs/es-es/real-world-development/cli/README.md similarity index 98% rename from docs/es-es/cli/README.md rename to docs/es-es/real-world-development/cli/README.md index aca3c5c9..239640cd 100644 --- a/docs/es-es/cli/README.md +++ b/docs/es-es/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/cli +slug: es-es/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/first-steps/README.md b/docs/first-steps/README.md new file mode 100644 index 00000000..f32def50 --- /dev/null +++ b/docs/first-steps/README.md @@ -0,0 +1,17 @@ +--- +title: "First steps" +slug: first-steps +authors: + - geektrainer +lastUpdated: 2026-09-16 +--- + +First steps workshops are guided introductions that help you explore GitHub Copilot without requiring an existing application or a detailed development scenario. Each workshop starts small, introduces the product as you use it, and takes you through a complete workflow. + +## Workshops + +### [GitHub Copilot app tour][copilot-app] + +Build a colorful Space Quiz from an empty folder and take it through the development loop: create, refine, publish, plan work, implement an issue, review a pull request, automate recurring work, and explore a Canvas extension. + +[copilot-app]: copilot-app/ diff --git a/docs/first-steps/copilot-app/0-prerequisites.md b/docs/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 00000000..27d01788 --- /dev/null +++ b/docs/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,68 @@ +--- +title: "Lesson 0 - Prerequisites and setup" +description: "Verify the workshop prerequisites, install the GitHub Copilot app, and get familiar with its workspace." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Before you build the Space Quiz, verify your development tools, install the GitHub Copilot app, and get familiar with its main workspace. + +In this lesson, you will: + +- verify the workshop prerequisites. +- install and sign in to the GitHub Copilot app. +- identify the app's primary work areas. +- try a quick chat. + +## Prerequisites + +You need: + +- a GitHub account with Copilot Student or a paid Copilot plan. +- [Git][git] installed. Run `git --version` to verify it. +- [Node.js 22 or later][nodejs] installed. Run `node --version` to verify it. +- a computer running macOS, Windows, or Linux. + +> [!NOTE] +> If you use Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before the app will work. + +## Install and configure the app + +1. Open the [GitHub Copilot app download page][download-app]. +2. Download the app for your operating system and follow the installation instructions. +3. Open the app. +4. Select **Sign in to GitHub** and authenticate. If you use GitHub Enterprise Server, select **Use GitHub Enterprise** and enter your server address. +5. If the app asks you to connect a repository or local folder, skip that step for now. You will create a new project in the next lesson. +6. Choose a theme, then select **Finish**. + +For your first session, choose **GPT-5.3-Codex** if it is available. Otherwise, choose **Auto**. + +## Explore the workspace + +The app brings the development workflow into one place: + +- **Home**: Choose a project, configure a session, and send a prompt. +- **Sessions**: Run agents in isolated workspaces, including several sessions in parallel. +- **Quick chats**: Ask questions and brainstorm without creating a branch or worktree. +- **My work**: Browse issues and pull requests, check CI, start sessions, and review changes. +- **Automations**: Save agent tasks to run on demand or on a schedule. + +## Try a quick chat + +Open a quick chat and send the following prompt: + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +Quick chats are useful for questions that do not need a project workspace or code changes. + +## Summary and next steps + +You verified the prerequisites, installed the app, and explored its main work areas. Continue to [Lesson 1: Create the Space Quiz workspace][next-lesson]. + +[git]: https://git-scm.com/downloads +[nodejs]: https://nodejs.org/ +[download-app]: https://gh.io/app +[next-lesson]: ../1-create-workspace/ diff --git a/docs/first-steps/copilot-app/1-create-workspace.md b/docs/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 00000000..677847a3 --- /dev/null +++ b/docs/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,33 @@ +--- +title: "Lesson 1 - Create the Space Quiz workspace" +description: "Start a local Interactive session for the Space Quiz in an empty folder." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Create a local workspace for the Space Quiz and configure a session that keeps you in control as the agent begins working. + +In this lesson, you will: + +- create or select an empty local folder. +- start an Interactive agent session. +- confirm the model and project settings. + +## Create the workspace + +1. Open the GitHub Copilot app and confirm that you are signed in. +2. Select the **New** tab. +3. Select **Local folder or repository**. +4. Create or select an empty folder named `space-quiz`. +5. Set the session mode to **Interactive**. +6. Choose **GPT-5.3-Codex** if it is available, or choose **Auto** as the fallback. +7. Confirm that the selected workspace is the local `space-quiz` folder. + +An Interactive session lets you direct the work and review each stage while the agent builds the project. + +## Summary and next steps + +Your empty Space Quiz workspace is ready. Continue to [Lesson 2: Build and polish the quiz][next-lesson]. + +[next-lesson]: ../2-build-and-polish/ diff --git a/docs/first-steps/copilot-app/2-build-and-polish.md b/docs/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 00000000..6c26a558 --- /dev/null +++ b/docs/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "Lesson 2 - Build and polish the quiz" +description: "Build a single-file Space Quiz and refine it with the integrated browser and element picker." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Use one detailed prompt to build the Space Quiz, verify its behavior in the integrated browser, and make a visual refinement with the element picker. + +In this lesson, you will: + +- create a dependency-free quiz in `index.html`. +- test the quiz in the integrated browser. +- inspect the generated code. +- refine a selected element while preserving accessibility. + +## Build the quiz + +Send the following prompt in your `space-quiz` session: + +```plaintext +Create a space exploration quiz with 10 questions, a progress bar, score counter, and colorful animated feedback (green for correct, red shake for wrong). Show a results screen with emoji reaction at the end. Center in a narrow column. Single index.html, no server/dependencies. Polished, sans-serif, 14–16px body, prefers-color-scheme. Open in the integrated browser. +``` + +When the agent finishes, play several questions and confirm: + +- the progress bar advances. +- the score updates. +- correct answers show a green state. +- incorrect answers use a red shake animation. +- the results screen appears after the final question. + +## Inspect the generated code + +Collapse the left sidebar and the right-side browser panel, then review `index.html` in the expanded code area. Notice how the HTML, CSS, and JavaScript work together in one file. Restore both panels when you finish. + +## Polish with the element picker + +1. Select the element picker in the browser toolbar. +2. Select the quiz heading or answer area. +3. Send the following prompt: + + ```plaintext + Make the selected element feel more like a mission-control display. Keep it accessible and preserve the existing light and dark themes. + ``` + +4. Watch the integrated browser refresh and verify the change. + +## Optional refinements + +If you want to continue experimenting, ask the agent to: + +- add a subtle star-field background that respects `prefers-reduced-motion`. +- make the results screen more celebratory when the score is 8 or higher. +- improve keyboard focus states, then verify the quiz without a mouse. + +## Summary and next steps + +You built, tested, inspected, and refined the Space Quiz. Continue to [Lesson 3: Publish the project][next-lesson]. + +[next-lesson]: ../3-publish/ diff --git a/docs/first-steps/copilot-app/3-publish.md b/docs/first-steps/copilot-app/3-publish.md new file mode 100644 index 00000000..842843ca --- /dev/null +++ b/docs/first-steps/copilot-app/3-publish.md @@ -0,0 +1,38 @@ +--- +title: "Lesson 3 - Publish the project" +description: "Turn the local Space Quiz experiment into a public GitHub repository." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Publish the Space Quiz so you can manage issues, use isolated worktrees, and complete a pull request workflow. + +In this lesson, you will: + +- initialize the folder as a Git repository. +- create and push a public GitHub repository. +- link the project to GitHub in the Copilot app. + +## Publish the repository + +Send the following prompt: + +```plaintext +Initialize this folder as a Git repository, create an initial commit, and create a new public GitHub repository named space-quiz in my account. Push the current branch and set it as the default branch. Refresh the project within this app so the GitHub project is linked. +``` + +> [!WARNING] +> The agent will ask for confirmation before it creates a repository or pushes code. Review the proposed action and destination before you approve it. + +After the agent finishes: + +1. Open the new repository on GitHub. +2. Confirm that `index.html` is present. +3. Return to the Copilot app and confirm that the project is linked to the repository. + +## Summary and next steps + +Your project is now a GitHub repository. Continue to [Lesson 4: Work with issues and sessions][next-lesson]. + +[next-lesson]: ../4-issues-and-sessions/ diff --git a/docs/first-steps/copilot-app/4-issues-and-sessions.md b/docs/first-steps/copilot-app/4-issues-and-sessions.md new file mode 100644 index 00000000..3a57956e --- /dev/null +++ b/docs/first-steps/copilot-app/4-issues-and-sessions.md @@ -0,0 +1,49 @@ +--- +title: "Lesson 4 - Work with issues and sessions" +description: "Create a focused backlog, select an issue, and implement it in an isolated worktree." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Ask the agent to suggest focused product improvements, turn those ideas into GitHub issues, and implement one issue in an isolated session. + +In this lesson, you will: + +- create three focused issues for the Space Quiz. +- compare their scope and acceptance criteria. +- start a session from an issue. +- implement and verify the issue in an isolated worktree. + +## Create a backlog + +Send the following prompt: + +```plaintext +Review the space quiz and suggest three focused feature ideas that could each be completed in a short session. Create a separate GitHub issue for each idea with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +Open **My work**, review the three issues, and choose one that has clear value and a manageable scope. + +## Implement an issue + +1. Open the selected issue in **My work**. +2. Select **New session**. +3. Choose a **new worktree** when prompted. +4. Use **Interactive** mode and **GPT-5.3-Codex**, or choose **Auto** as the fallback. +5. Send the following prompt: + + ```plaintext + Implement this issue completely. Keep the single-file, dependency-free design, test the behavior in the integrated browser, and summarize the changes when finished. + ``` + +6. Review the diff. +7. Test the feature in the integrated browser and confirm that it meets the issue's acceptance criteria. + +The new worktree keeps this feature isolated from your default branch until you are ready to review and merge it. + +## Summary and next steps + +You created a backlog and implemented one issue in an isolated session. Continue to [Lesson 5: Complete the Copilot review loop][next-lesson]. + +[next-lesson]: ../5-review/ diff --git a/docs/first-steps/copilot-app/5-review.md b/docs/first-steps/copilot-app/5-review.md new file mode 100644 index 00000000..5766e8b0 --- /dev/null +++ b/docs/first-steps/copilot-app/5-review.md @@ -0,0 +1,40 @@ +--- +title: "Lesson 5 - Complete the Copilot review loop" +description: "Create a pull request, request a Copilot review, and address actionable feedback." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Turn the implemented issue into a pull request, request a review from Copilot, and address the feedback before merging. + +In this lesson, you will: + +- create a pull request from the agent session. +- request a Copilot code review. +- review and apply actionable feedback. +- retest and resolve review conversations. + +## Create and review the pull request + +1. Select **Create PR** in the session toolbar. +2. Review the generated title and description, then create the pull request. +3. Open the pull request on GitHub. +4. From the **Reviewers** menu, request a review from **Copilot**. +5. Open the **Files changed** tab and read every review comment. +6. For each actionable comment, use the Copilot **Fix** action in the app or make the change yourself. +7. Review each change and retest the feature. +8. Reply with a concise description of what changed, then resolve the conversation. + +> [!NOTE] +> If a suggestion is not applicable or is outside the scope of the pull request, reply with the reason instead of making an unnecessary change. Resolve every review conversation before merging. + +## Merge the pull request + +After you have reviewed the final diff and verified the feature, merge the pull request. + +## Summary and next steps + +You completed the development loop from issue to reviewed pull request. Continue to [Lesson 6: Automate issue triage][next-lesson]. + +[next-lesson]: ../6-automations/ diff --git a/docs/first-steps/copilot-app/6-automations.md b/docs/first-steps/copilot-app/6-automations.md new file mode 100644 index 00000000..9eba8f3c --- /dev/null +++ b/docs/first-steps/copilot-app/6-automations.md @@ -0,0 +1,38 @@ +--- +title: "Lesson 6 - Automate issue triage" +description: "Create and run a weekly automation that summarizes recent open issues." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Use an automation to turn a recurring issue-triage task into a scheduled agent workflow. + +In this lesson, you will: + +- create a weekly automation. +- connect the automation to the Space Quiz project. +- run the automation immediately and review its result. + +## Create the automation + +1. Open **Automations**. +2. Choose the template for a new weekly automation. +3. Enter the following prompt: + + ```plaintext + Review the latest GitHub issues created and still open in the last week, and provide a summary table ranked by severity and priority. + ``` + +4. Set the session mode to **Autopilot**. +5. Set the model to **Auto**. +6. Select the `space-quiz` project. +7. Open the **Create** dropdown, then select **Create and run**. + +Review the generated summary and confirm that it references the recent open issues in your repository. + +## Summary and next steps + +You created a reusable agent workflow that runs on a schedule. Continue to [Lesson 7: Explore a Canvas][next-lesson]. + +[next-lesson]: ../7-canvas/ diff --git a/docs/first-steps/copilot-app/7-canvas.md b/docs/first-steps/copilot-app/7-canvas.md new file mode 100644 index 00000000..eab167b6 --- /dev/null +++ b/docs/first-steps/copilot-app/7-canvas.md @@ -0,0 +1,46 @@ +--- +title: "Lesson 7 - Explore a Canvas" +description: "Install a Repository Issues Kanban Canvas and start a session from an issue card." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +A **Canvas** is a shared, bidirectional surface where you and an agent can update the same plan, board, checklist, or dashboard. Explore a Kanban Canvas that turns repository issues into a visual workflow. + +In this lesson, you will: + +- install a Canvas extension. +- connect the Canvas to the Space Quiz repository. +- move an issue into active work. +- inspect the session created from the issue. + +## Install the Repository Issues Kanban Canvas + +1. Browse the [Canvas extensions gallery][canvas-gallery]. +2. Open the [Repository Issues Kanban extension][kanban-extension]. +3. Select **Install in GitHub Copilot app** and approve the installation. +4. In the app, open **Customize**, then **Canvas**. +5. Confirm that the extension is installed. + +## Start work from the Canvas + +1. Select **New session** for the Canvas. +2. Choose the `space-quiz` project. +3. Explore the issue board. +4. Move an issue card into the active-work column. +5. Open the automatically generated session. +6. Confirm that the selected issue is available as session context. + +> [!NOTE] +> The current Repository Issues Kanban extension moves cards with pointer-based drag and drop. If you cannot use that interaction, note the issue number on the board, open the issue in **My work**, then select **New session**. This creates the same issue-grounded session without moving the card. + +The Canvas provides a visual way to select and begin work while keeping the agent grounded in the issue. + +## Summary and next steps + +You used a shared visual surface to start an agent session. Continue to [Lesson 8: Review and next steps][next-lesson]. + +[canvas-gallery]: https://awesome-copilot.github.com/extensions/ +[kanban-extension]: https://awesome-copilot.github.com/extension/accessibility-kanban/ +[next-lesson]: ../8-review/ diff --git a/docs/first-steps/copilot-app/8-review.md b/docs/first-steps/copilot-app/8-review.md new file mode 100644 index 00000000..7eca0a7e --- /dev/null +++ b/docs/first-steps/copilot-app/8-review.md @@ -0,0 +1,41 @@ +--- +title: "Lesson 8 - Review and next steps" +description: "Review the GitHub Copilot app workflow and find resources for continued learning." +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +You directed an agent through a complete development workflow, from an empty folder to planned work, an isolated implementation, code review, automation, and a visual Canvas. + +## What you completed + +You: + +- created a local project in Interactive mode. +- built and refined a quiz with live browser feedback. +- published the project as a GitHub repository. +- created a focused backlog. +- implemented an issue in an isolated worktree. +- shipped the issue through pull request review. +- automated weekly issue triage. +- explored a shared Kanban Canvas. + +## Keep exploring + +- [Learn about the GitHub Copilot app][about-app]. +- [Review the official getting started guide][getting-started]. +- [Learn how to work with agent sessions][agent-sessions]. +- [Manage issues and pull requests in the app][issues-and-prs]. +- [Learn about Copilot code review][code-review]. +- [Build and use Canvas extensions][canvas-extensions]. + +If you are ready for a deeper scenario using a complete application and team backlog, continue with the [real-world GitHub Copilot app workshop][real-world-app]. + +[about-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app +[getting-started]: https://docs.github.com/copilot/how-tos/github-copilot-app/getting-started +[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions +[issues-and-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[code-review]: https://docs.github.com/copilot/concepts/code-review/code-review +[canvas-extensions]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[real-world-app]: ../../../real-world-development/app/ diff --git a/docs/first-steps/copilot-app/README.md b/docs/first-steps/copilot-app/README.md new file mode 100644 index 00000000..682bb0f2 --- /dev/null +++ b/docs/first-steps/copilot-app/README.md @@ -0,0 +1,46 @@ +--- +title: "GitHub Copilot app tour" +description: "Take a guided tour of the GitHub Copilot app by building and shipping a Space Quiz." +slug: first-steps/copilot-app +authors: + - jamesmontemagno +lastUpdated: 2026-09-16 +--- + +Take a beginner-friendly, hands-on tour of the GitHub Copilot app. You will build a colorful Space Quiz from an empty folder and take it through the complete development loop, from your first prompt to a reviewed pull request. + +The workshop takes approximately 90 minutes. Your project uses a single HTML file with no runtime dependencies, so you can focus on learning the app and its agentic workflows. + +> [!NOTE] +> This workshop was created by [James Montemagno][james] and adapted from the [GitHub Copilot App Lab][source-lab]. The original content is available under the [MIT License][source-license]. + +## Lessons + +| Lesson | Topic | What you will do | +| ------ | ----- | ---------------- | +| [0. Prerequisites and setup][lesson-0] | Setup | Verify prerequisites, install the app, and explore the workspace | +| [1. Create the workspace][lesson-1] | Create | Start an Interactive session in an empty local folder | +| [2. Build and polish][lesson-2] | Build | Create the quiz and refine it in the integrated browser | +| [3. Publish the project][lesson-3] | Publish | Create a public GitHub repository from the local project | +| [4. Work with issues and sessions][lesson-4] | Plan and implement | Create a backlog and implement one issue in an isolated worktree | +| [5. Complete the review loop][lesson-5] | Review | Open a pull request and address Copilot review feedback | +| [6. Automate issue triage][lesson-6] | Automate | Schedule and run a weekly issue-triage automation | +| [7. Explore a Canvas][lesson-7] | Canvas | Start work from a Repository Issues Kanban Canvas | +| [8. Review and next steps][lesson-8] | Review | Recap the workflow and continue learning | + +## Get started + +[Start with Lesson 0: Prerequisites and setup][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/github-copilot-app-lab +[source-license]: https://github.com/jamesmontemagno/github-copilot-app-lab/blob/main/LICENSE +[lesson-0]: 0-prerequisites/ +[lesson-1]: 1-create-workspace/ +[lesson-2]: 2-build-and-polish/ +[lesson-3]: 3-publish/ +[lesson-4]: 4-issues-and-sessions/ +[lesson-5]: 5-review/ +[lesson-6]: 6-automations/ +[lesson-7]: 7-canvas/ +[lesson-8]: 8-review/ diff --git a/docs/ja-jp/README.md b/docs/ja-jp/README.md index 04db18c9..d2b52b0d 100644 --- a/docs/ja-jp/README.md +++ b/docs/ja-jp/README.md @@ -1,42 +1,33 @@ --- slug: ja-jp -title: "GitHub Copilot のエージェントを実践で学ぶ" +title: "GitHub Copilot ワークショップ" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-16 --- -GitHub Copilot に最近追加された機能は、ソフトウェア開発ライフサイクル (SDLC) 全体を通して開発者を支援する強力なツールです。GitHub の Issue や pull request を使った作業、外部サービスとの連携、そしてもちろんコードの作成も含まれます。このラボでは、実際のユースケースを通して機能を試し、ツールを最大限に活用するためのヒントを紹介します。 +学びたい内容と深さに合わせてワークショップを選びます。**はじめの一歩**では GitHub Copilot をガイドに沿って体験し、**実践的な開発**では完成したアプリケーションとチームのバックログを使って、本番環境を意識したワークフローを学びます。 -> [!CAUTION] -> GitHub Copilot は決定論的ではなく確率的に動作するため、生成されるコードや変更されるファイルなどは毎回異なる場合があります。そのため、ラボ内のスクリーンショットやコード スニペットと、実際の結果に多少の違いが生じることがあります。これは想定される動作であり、この種のツールが持つ特性によるものです。 -> -> 何かが壊れているように見える場合や正しく動作しない場合は、メンターに相談してください。 - -## 利用環境を選ぶ - -GitHub Copilot は、どの環境で作業していても利用できます。希望する開発方法に合った利用環境を選び、共通の Tailspin Toys バックログに沿って演習を進めます。どの利用環境にも専用のセットアップ手順が用意されているため、選んだものからすぐに始められます。 - -### 🖥️ [VS Code](../vscode/) +## はじめの一歩 -**Visual Studio Code** と GitHub Codespaces 内で GitHub Copilot を使用します。普段使っているエディターを離れることなく、Copilot Chat のエージェント モード、MCP サーバー、カスタム エージェントを利用できます。AI 支援を IDE に直接組み込んで使いたい場合に最適です。 +既存のコードベースを用意せずに、GitHub Copilot 製品の主要な機能を学べる、目的を絞ったガイド形式のワークショップです。 -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot app ツアー][first-steps-app] -**GitHub Copilot CLI** は、ターミナルで動作するエージェント型アシスタントです。インストールして MCP サーバーに接続し、プラン モードでコードを生成できます。さらに、独自のスキル、カスタム エージェント、スラッシュ コマンドをすべてコマンド ラインから構築できます。 +空のフォルダーから Space Quiz を作成し、GitHub への公開、Issue の実装、Copilot レビュー、オートメーションのスケジュール設定、Canvas ワークフローの体験まで進めます。 -### 🤖 [Copilot App](app/) +## 実践的な開発 -**GitHub Copilot app** は、Copilot CLI を基盤とするデスクトップ アプリケーションです。複数のエージェント セッションを並行して実行し、セッション モードの切り替え、キャンバスでの共同作業、GitHub Issue と pull request の管理をアプリ内で行えます。さらに **Agent Merge** を使用すると、リベース、レビュー フィードバックへの対応、CI の修正、マージまで、pull request の一連の作業を進められます。 +Tailspin Toys アプリケーションとバックログを使い、現実的なソフトウェア開発ライフサイクルで GitHub Copilot を実践します。作業環境を選び、意味のある変更を計画、実装、テスト、レビュー、リリースします。 -### ☁️ [Copilot Cloud Agent](../cloud/) +### [実践的な開発ワークショップを見る][real-world-development] -**Copilot cloud agent** は、GitHub Issue の作業をバックグラウンドで進める非同期のペア プログラマーです。作業の割り当て、カスタム エージェントによる指示、エージェント ダッシュボードでの進捗確認、作成された pull request のレビューを行えます。 +VS Code、Copilot CLI、GitHub Copilot app、Copilot cloud agent から選択できます。 -## シナリオ - -架空の企業 Tailspin Toys に新しく参加した開発者として作業します。Tailspin Toys は、開発者をテーマにしたボード ゲームのクラウドファンディングを提供しています。これは巨大な市場です。チームのバックログはすでに GitHub Issue として登録されており、フィルタリングやページネーションなどの機能開発に加えて、アクセシビリティやコーディング規約などの品質改善にもすぐに取り組めます。サイトと Copilot の機能を確認しながら反復的に作業し、タスクを完了させます。 - -## はじめる +> [!CAUTION] +> GitHub Copilot は決定論的ではなく確率的に動作するため、生成されるコードや変更されるファイルは例と異なる場合があります。多少の違いは想定される動作です。 +> +> 講師が進行するワークショップで正しく動作しない場合は、メンターに相談してください。 -上から利用環境を選んで開始します。どの利用環境も、開発に必要なセットアップから始まります。 \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[real-world-development]: ../real-world-development/ diff --git a/docs/ja-jp/app/0-prerequisites.md b/docs/ja-jp/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/ja-jp/app/0-prerequisites.md rename to docs/ja-jp/real-world-development/app/0-prerequisites.md index 10329a2d..8d15b22b 100644 --- a/docs/ja-jp/app/0-prerequisites.md +++ b/docs/ja-jp/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Tailspin Toys プロジェクトの自分用コピーを使って作業します 1. 新しいブラウザーウィンドウで、このラボの GitHub リポジトリ `https://github.com/github-samples/tailspin-toys` を開きます。 2. ラボ用リポジトリのページで **Use this template** ボタンを選択し、**Create a new repository** を選択して、リポジトリの自分用コピーを作成します。 - ![Use this template ボタンのドロップダウンで Create a new repository が選択されている画面](../../_images/app-0-use-template.png) + ![Use this template ボタンのドロップダウンで Create a new repository が選択されている画面](../../../_images/app-0-use-template.png) 3. GitHub または Microsoft が主催するイベントの一環としてワークショップに参加している場合は、メンターの指示に従ってください。それ以外の場合は、GitHub Copilot を利用できる Organization に新しいリポジトリを作成できます。 - ![github-samples/tailspin-toys がテンプレートに設定され、リポジトリ名が入力された Create a new repository フォーム](../../_images/app-0-create-repository.png) + ![github-samples/tailspin-toys がテンプレートに設定され、リポジトリ名が入力された Create a new repository フォーム](../../../_images/app-0-create-repository.png) 4. 作成したリポジトリのパス (**organization-or-user-name/repository-name**) を記録します。このラボで後ほど使用します。 diff --git a/docs/ja-jp/app/1-install-copilot-app.md b/docs/ja-jp/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/ja-jp/app/1-install-copilot-app.md rename to docs/ja-jp/real-world-development/app/1-install-copilot-app.md diff --git a/docs/ja-jp/app/2-add-star-rating.md b/docs/ja-jp/real-world-development/app/2-add-star-rating.md similarity index 98% rename from docs/ja-jp/app/2-add-star-rating.md rename to docs/ja-jp/real-world-development/app/2-add-star-rating.md index b1edad2c..a07a0422 100644 --- a/docs/ja-jp/app/2-add-star-rating.md +++ b/docs/ja-jp/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Tailspin Toys の各ゲームには星評価を設定でき、ゲーム詳細ペ 2. **Home screen** を選択します。 3. リポジトリに `tailspin-toys` が選択されていることを確認します。 - ![リポジトリセレクターに tailspin-toys が設定され、プロンプトの下にモデルセレクターが表示された GitHub Copilot app のプロンプトボックス](../../_images/app-2-start-session.png) + ![リポジトリセレクターに tailspin-toys が設定され、プロンプトの下にモデルセレクターが表示された GitHub Copilot app のプロンプトボックス](../../../_images/app-2-start-session.png) 4. 次のプロンプトを使って変更を依頼します。 @@ -55,7 +55,7 @@ AI が生成したすべての変更は、どれほど小さくてもマージ 1. アプリの右上隅にある **Toggle review panel** を選択します。Copilot が行った未処理の変更がすべて表示される差分画面が開きます。 - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../_images/app-2-review-panel.png) + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../../_images/app-2-review-panel.png) 2. ゲームの詳細表示に使用される中心的なファイル `GameCard.astro` にコードが追加されていることを確認します。次のような小さなブロックが追加されているはずです。評価がある場合は表示し、`starRating` が `null` の場合は "No rating yet" を表示します。 @@ -80,7 +80,7 @@ AI が生成したすべての変更は、どれほど小さくてもマージ 1. Copilot app の右側にあるレビューパネルで **Terminal** を選択します。**Terminal** ボタンがない場合は、**+** (**Open in panel** というラベルが付いています) を選択してから **Terminal** を選択します。 - ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../../_images/app-terminal-screenshot.png) 2. ターミナルウィンドウに次のコマンドを入力し、Web アプリの開発サーバーを起動します。 diff --git a/docs/ja-jp/app/3-custom-instructions.md b/docs/ja-jp/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/ja-jp/app/3-custom-instructions.md rename to docs/ja-jp/real-world-development/app/3-custom-instructions.md index 8b801657..3eebc88a 100644 --- a/docs/ja-jp/app/3-custom-instructions.md +++ b/docs/ja-jp/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ AI の使い方に唯一の方法がないのと同様に、指示ファイル 1. レビューパネルが表示されていない場合は、右上の **Toggle review panel** を選択して開きます。 - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../_images/app-2-review-panel.png) + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../../_images/app-2-review-panel.png) 2. **+** を選択し、レビューパネルに新しい項目を追加します。 3. **File** を選択します。 @@ -66,7 +66,7 @@ AI の使い方に唯一の方法がないのと同様に、指示ファイル 6. ファイルを確認します。プロジェクトの簡単な説明に加えて、**Agent notes**、**Code standards**、**Scripts**、**Repository Structure** などのセクションがあります。**Code standards** の下には、ネストされた **GitHub Actions Workflows** のガイダンスがあります。これらは Copilot とのすべてのやり取りに適用されます。 7. **Show folder view** を選択して、フォルダーナビゲーターを開きます。 - ![GitHub Copilot app でファイルを開いたレビューパネルにある Show folder view ボタン](../../_images/app-show-folder-view.png) + ![GitHub Copilot app でファイルを開いたレビューパネルにある Show folder view ボタン](../../../_images/app-show-folder-view.png) 8. `.github/instructions` フォルダーに移動し、ファイルを確認します。Astro ファイル、Drizzle データレイヤー、テストなどに対応する指示があります。 9. `.github/instructions/unit-tests.instructions.md` を開きます。先頭の `applyTo` フィールドに注目してください。これはリポジトリのルートを基準とする glob で、指示を適用するファイルを決定します。ここでは、TypeScript のテストファイル (`**/*.test.ts` に一致するファイルなど) が対象になります。 @@ -87,7 +87,7 @@ AI の使い方に唯一の方法がないのと同様に、指示ファイル 2. **Update our repository coding standards** というタイトルの Issue を選択して開きます。 3. 右上の **New session** を選択し、Issue に基づく新しいセッションを開始します。 - ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../../_images/app-new-session-from-issue.png) 4. 次のプロンプトを使い、Issue に記載された要件を満たすように指示ファイルを更新することを Copilot に依頼します。 @@ -103,7 +103,7 @@ Copilot が行った更新を読み、更新された指示に基づいて生成 1. 右上の **Changes** を選択してコードの変更を開きます。 - ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../_images/app-select-changes.png) + ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../../_images/app-select-changes.png) 2. 更新された指示ファイルをレビューします。コードにドキュメントとコメントを追加するためのガイドラインが含まれていることを確認します。 diff --git a/docs/ja-jp/app/4-build-filtering.md b/docs/ja-jp/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/ja-jp/app/4-build-filtering.md rename to docs/ja-jp/real-world-development/app/4-build-filtering.md index 781f83d0..2ccb5538 100644 --- a/docs/ja-jp/app/4-build-filtering.md +++ b/docs/ja-jp/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Issue を開いて新しいセッションを開始し、Plan モードに切り 2. **Allow users to filter games by category and publisher** というタイトルの Issue を選択します。 3. 右上の **New session** を選択します。 - ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../../_images/app-new-session-from-issue.png) 4. モードに **Plan** と表示されるまで Shift+Tab を選択します。 - ![モードセレクターが Plan に設定され、矢印で示された GitHub Copilot app のプロンプトボックス](../../_images/app-4-plan-mode.png) + ![モードセレクターが Plan に設定され、矢印で示された GitHub Copilot app のプロンプトボックス](../../../_images/app-4-plan-mode.png) 5. 次のプロンプトを送信します。Issue から開始したため、フィルター機能の Issue はすでにこのセッションのコンテキストに含まれています。 @@ -92,12 +92,12 @@ AI が生成したすべてのコードは、マージ前にレビューする 1. 右上の **Changes** を選択してコードの変更を開きます。 - ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../_images/app-select-changes.png) + ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../../_images/app-select-changes.png) 2. 変更をレビューします。新しい TypeScript ファイル、Astro ファイル、テストファイルが表示されます。新しいヘルパー関数には、レッスン3でマージしたドキュメント標準に従い、依頼していなくても TSDoc doc comment とファイルヘッダーコメントが含まれていることを確認します。 3. Copilot app の右側にあるレビューパネルで **Terminal** を選択します。**Terminal** ボタンがない場合は、**+** (**Open in panel** というラベルが付いています) を選択してから **Terminal** を選択します。 - ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../../_images/app-terminal-screenshot.png) 4. ターミナルウィンドウに次のコマンドを入力し、Web アプリの開発サーバーを起動します。 @@ -138,7 +138,7 @@ description: Run the project's test suites and linter to verify code changes are 1. レビューパネルが表示されていない場合は、右上の **Toggle review panel** を選択して開きます。 - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../_images/app-2-review-panel.png) + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../../_images/app-2-review-panel.png) 2. **+** を選択し、レビューパネルに新しい項目を追加します。 3. **File** を選択します。 diff --git a/docs/ja-jp/app/5-mcp-playwright.md b/docs/ja-jp/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/ja-jp/app/5-mcp-playwright.md rename to docs/ja-jp/real-world-development/app/5-mcp-playwright.md index 4cfea9b8..4393819c 100644 --- a/docs/ja-jp/app/5-mcp-playwright.md +++ b/docs/ja-jp/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ lastUpdated: 2026-07-09 MCP server はアプリの設定から追加して管理します。アプリには一般的なサーバーのカタログが含まれているため、[Playwright MCP server][playwright-mcp-server] は数回の操作で追加できます。 -1. Ctrl+, を選択して、Copilot app の設定ページを開きます。 +1. Command+, (Mac) または Ctrl+, (Windows/Linux) を押して、Copilot app の設定ページを開きます。 2. **MCP servers** を選択します。 3. 検索ダイアログに `Playwright` と入力します。 4. **Popular MCP servers** の一覧から **Playwright** を選択します。 diff --git a/docs/ja-jp/app/6-agent-merge.md b/docs/ja-jp/real-world-development/app/6-agent-merge.md similarity index 98% rename from docs/ja-jp/app/6-agent-merge.md rename to docs/ja-jp/real-world-development/app/6-agent-merge.md index eefc96ae..2f265a33 100644 --- a/docs/ja-jp/app/6-agent-merge.md +++ b/docs/ja-jp/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ lastUpdated: 2026-07-09 2. 右上隅にある **Create PR** の横のドロップダウンを選択します。 3. **Agent merge** を選択して Agent Merge を有効にします。 - ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../../_images/app-enable-agent-merge.png) 4. ボタンのテキストが **Agent merge** に変わります。 5. **Agent merge** ボタンを選択し、Agent Merge のプロセスを開始します。 @@ -43,7 +43,7 @@ Copilot app が PR の作成と管理を開始します。最初にプロジェ 6. **Agent merge** の横にあるドロップダウンを選択してから **Merge pull request** を選択し、Agent Merge に pull request のマージを許可します。 - ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../../_images/app-agent-merge-merge.png) 7. すべての CI プロセスが成功すると、つまりテストに合格すると、Copilot が pull request をマージします。 diff --git a/docs/ja-jp/app/7-canvases.md b/docs/ja-jp/real-world-development/app/7-canvases.md similarity index 98% rename from docs/ja-jp/app/7-canvases.md rename to docs/ja-jp/real-world-development/app/7-canvases.md index 9af8465a..0907a6d3 100644 --- a/docs/ja-jp/app/7-canvases.md +++ b/docs/ja-jp/real-world-development/app/7-canvases.md @@ -70,7 +70,7 @@ Copilot がキャンバスの作成を開始します。 2. Copilot がキャンバスファイルを保存したら、右上隅にある **Create PR** の横のドロップダウンを選択します。 3. **Agent merge** を選択して Agent Merge を有効にします。 - ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../../_images/app-enable-agent-merge.png) 4. ボタンのテキストが **Agent merge** に変わります。 5. **Agent merge** ボタンを選択し、Agent Merge のプロセスを開始します。 @@ -81,7 +81,7 @@ Copilot app が PR の作成と管理を開始します。最初にプロジェ 6. **Agent merge** の横にあるドロップダウンを選択してから **Merge pull request** を選択し、Agent Merge に pull request のマージを許可します。 - ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../../_images/app-agent-merge-merge.png) 7. すべての CI プロセスが成功するまで待ちます。成功すると、Copilot が pull request を自動的にマージします。 diff --git a/docs/ja-jp/app/8-review.md b/docs/ja-jp/real-world-development/app/8-review.md similarity index 100% rename from docs/ja-jp/app/8-review.md rename to docs/ja-jp/real-world-development/app/8-review.md diff --git a/docs/ja-jp/app/README.md b/docs/ja-jp/real-world-development/app/README.md similarity index 99% rename from docs/ja-jp/app/README.md rename to docs/ja-jp/real-world-development/app/README.md index fb9e8b76..05e5b3b9 100644 --- a/docs/ja-jp/app/README.md +++ b/docs/ja-jp/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/app +slug: ja-jp/real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/ja-jp/cli/0-prerequisites.md b/docs/ja-jp/real-world-development/cli/0-prerequisites.md similarity index 93% rename from docs/ja-jp/cli/0-prerequisites.md rename to docs/ja-jp/real-world-development/cli/0-prerequisites.md index eeda24e4..b9dfd022 100644 --- a/docs/ja-jp/cli/0-prerequisites.md +++ b/docs/ja-jp/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Copilot CLI の演習を始める前に、必要な準備を整えます。Tails 1. 新しいブラウザー ウィンドウで、このラボの GitHub リポジトリ `https://github.com/github-samples/tailspin-toys` に移動します。 2. ラボ用リポジトリ ページの **Use this template** ボタンを選択して、自分用のリポジトリ コピーを作成します。次に **Create a new repository** を選択します。 - ![「Use this template」ボタン](../../_images/ex0-use-template.png) + ![「Use this template」ボタン](../../../_images/ex0-use-template.png) 3. GitHub または Microsoft が主催するイベントの一環としてこのワークショップを進めている場合は、メンターから案内された手順に従ってください。そうでない場合は、GitHub Copilot にアクセスできる organization に新しいリポジトリを作成できます。 - ![リポジトリ テンプレートの設定を入力する画面](../../_images/ex0-repository-settings.png) + ![リポジトリ テンプレートの設定を入力する画面](../../../_images/ex0-repository-settings.png) 4. 後でラボ内で参照するため、作成したリポジトリ パス（**organization-or-user-name/repository-name**）を控えておいてください。 @@ -36,11 +36,11 @@ Copilot CLI の演習を始める前に、必要な準備を整えます。Tails 1. 新しく作成したリポジトリに移動します。 2. 緑色の **Code** ボタンを選択します。 - ![「Code」ボタンを選択する](../../_images/ex0-code-button.png) + ![「Code」ボタンを選択する](../../../_images/ex0-code-button.png) 3. **Codespaces** タブを選択し、**+** ボタンを選択して新しい codespace を作成します。 - ![新しい codespace を作成する](../../_images/ex0-create-codespace.png) + ![新しい codespace を作成する](../../../_images/ex0-create-codespace.png) Codespace の作成には数分かかりますが、すべてのサービスを手動でインストールするよりははるかに速く完了します。その間に、次に扱う GitHub Copilot のほかの機能を確認しておくこともできます。 diff --git a/docs/ja-jp/cli/1-install-copilot-cli.md b/docs/ja-jp/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/ja-jp/cli/1-install-copilot-cli.md rename to docs/ja-jp/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/ja-jp/cli/2-custom-instructions.md b/docs/ja-jp/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/ja-jp/cli/2-custom-instructions.md rename to docs/ja-jp/real-world-development/cli/2-custom-instructions.md diff --git a/docs/ja-jp/cli/3-generating-code.md b/docs/ja-jp/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/ja-jp/cli/3-generating-code.md rename to docs/ja-jp/real-world-development/cli/3-generating-code.md diff --git a/docs/ja-jp/cli/4-mcp.md b/docs/ja-jp/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/ja-jp/cli/4-mcp.md rename to docs/ja-jp/real-world-development/cli/4-mcp.md diff --git a/docs/ja-jp/cli/5-agent-skills.md b/docs/ja-jp/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/ja-jp/cli/5-agent-skills.md rename to docs/ja-jp/real-world-development/cli/5-agent-skills.md diff --git a/docs/ja-jp/cli/6-custom-agents.md b/docs/ja-jp/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/ja-jp/cli/6-custom-agents.md rename to docs/ja-jp/real-world-development/cli/6-custom-agents.md diff --git a/docs/ja-jp/cli/7-slash-commands.md b/docs/ja-jp/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/ja-jp/cli/7-slash-commands.md rename to docs/ja-jp/real-world-development/cli/7-slash-commands.md index b884222d..3c1cf55f 100644 --- a/docs/ja-jp/cli/7-slash-commands.md +++ b/docs/ja-jp/real-world-development/cli/7-slash-commands.md @@ -65,7 +65,7 @@ AI ツールを含め、どのツールでも使いこなすにはスキルが 2. 少し待つと、Copilot CLI が現在のコンテキストを視覚的に表現した表示を生成します。 - ![Copilot CLI の context window のスクリーンショット](../../_images/cli-7-context-window.png) + ![Copilot CLI の context window のスクリーンショット](../../../_images/cli-7-context-window.png) 3. 表示されているモデル名（画像と異なる場合があります）と、現在使用されている token の割合を確認します。その他の情報では、次の内容が示されています。 diff --git a/docs/ja-jp/cli/8-review.md b/docs/ja-jp/real-world-development/cli/8-review.md similarity index 100% rename from docs/ja-jp/cli/8-review.md rename to docs/ja-jp/real-world-development/cli/8-review.md diff --git a/docs/ja-jp/cli/README.md b/docs/ja-jp/real-world-development/cli/README.md similarity index 98% rename from docs/ja-jp/cli/README.md rename to docs/ja-jp/real-world-development/cli/README.md index 2ab725f8..fa9e25fa 100644 --- a/docs/ja-jp/cli/README.md +++ b/docs/ja-jp/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/cli +slug: ja-jp/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/ko-kr/README.md b/docs/ko-kr/README.md index 2960a995..3fc5fc1f 100644 --- a/docs/ko-kr/README.md +++ b/docs/ko-kr/README.md @@ -1,42 +1,33 @@ --- slug: ko-kr -title: "GitHub Copilot 에이전트 실습" +title: "GitHub Copilot 워크숍" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-16 --- -최근 GitHub Copilot에 추가된 기능은 소프트웨어 개발 수명 주기(SDLC) 전반에서 개발자에게 강력한 도구를 제공합니다. 여기에는 GitHub의 이슈 및 끌어오기 요청 작업, 외부 서비스와의 상호 작용, 그리고 코드 작성이 포함됩니다. 이 랩에서는 이러한 기능을 살펴보고, 실제 사용 사례와 도구를 최대한 활용하는 방법을 소개합니다. +학습 목표와 원하는 깊이에 따라 워크숍을 선택합니다. **첫 단계**에서는 GitHub Copilot을 따라 하며 익히고, **실제 개발**에서는 완성된 애플리케이션과 팀 백로그를 사용해 프로덕션 중심의 워크플로를 연습합니다. -> [!CAUTION] -> GitHub Copilot은 결정론적이 아니라 확률론적으로 작동하므로 정확한 코드와 변경되는 파일 등이 달라질 수 있습니다. 따라서 랩의 스크린샷 및 코드 조각과 실제 환경에서 약간의 차이가 나타날 수 있습니다. 이는 예상된 결과이며, 이러한 유형의 도구가 작동하는 방식에서 비롯됩니다. -> -> 무언가 제대로 작동하지 않거나 올바르게 실행되지 않는다면 멘토에게 문의하십시오! - -## 하네스(Harness) 선택 - -GitHub Copilot은 어떤 작업 환경에서든 함께할 수 있습니다. 원하는 개발 방식에 맞는 하네스를 선택하고, Tailspin Toys의 공통 백로그를 바탕으로 연습을 진행합니다. 각 하네스는 자체 설정 과정으로 시작하므로 원하는 하네스를 선택해 바로 시작할 수 있습니다. - -### 🖥️ [VS Code](../vscode/) +## 첫 단계 -**Visual Studio Code**와 GitHub Codespaces에서 GitHub Copilot을 사용합니다. 익숙한 편집기를 벗어나지 않고 Copilot Chat 에이전트 모드, MCP 서버, 사용자 지정 에이전트를 활용합니다. AI 지원을 IDE에 직접 통합하고 싶을 때 적합합니다. +기존 코드베이스 없이도 GitHub Copilot 제품의 주요 기능을 익힐 수 있는 집중형 가이드 환경으로 시작합니다. -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot 앱 둘러보기][first-steps-app] -**GitHub Copilot CLI**는 터미널에서 실행되는 에이전트형 도우미입니다. 이를 설치하고, MCP 서버를 연결하고, 계획 모드로 코드를 생성하고, 명령줄에서 직접 스킬, 사용자 지정 에이전트, 슬래시 명령을 만듭니다. +빈 폴더에서 Space Quiz를 만들고 GitHub에 게시한 다음, 이슈 구현, Copilot 검토, 자동화 예약, Canvas 워크플로 탐색까지 진행합니다. -### 🤖 [Copilot 앱](app/) +## 실제 개발 -**GitHub Copilot 앱**은 Copilot CLI를 기반으로 구축된 데스크톱 애플리케이션입니다. 여러 에이전트 세션을 병렬로 실행하고, 세션 모드를 전환하고, 캔버스에서 협업하고, GitHub 이슈와 끌어오기 요청을 기본 기능으로 관리합니다. 여기에는 끌어오기 요청의 리베이스, 검토 피드백, CI 수정, 병합 과정을 관리하는 **Agent Merge**도 포함됩니다. +Tailspin Toys 애플리케이션과 백로그를 사용해 현실적인 소프트웨어 개발 수명 주기에서 GitHub Copilot을 연습합니다. 작업 환경을 선택한 다음 의미 있는 변경 사항을 계획하고, 빌드하고, 테스트하고, 검토하고, 제공합니다. -### ☁️ [Copilot 클라우드 에이전트](../cloud/) +### [실제 개발 워크숍 찾아보기][real-world-development] -**Copilot 클라우드 에이전트**는 백그라운드에서 GitHub 이슈를 처리하는 비동기 동료 프로그래머입니다. 작업을 할당하고, 사용자 지정 에이전트로 작업 방향을 안내하고, 에이전트 대시보드에서 진행 상황을 모니터링하고, 에이전트가 생성한 끌어오기 요청을 검토합니다. +VS Code, Copilot CLI, GitHub Copilot 앱 또는 Copilot 클라우드 에이전트 중에서 선택합니다. -## 시나리오 - -여러분은 개발자 테마의 보드게임 크라우드펀딩을 제공하는 가상 기업 Tailspin Toys에 새로 합류한 개발자입니다. 아주 큰 시장입니다! 팀의 백로그는 이미 GitHub 이슈로 등록되어 있어 바로 작업을 시작할 수 있습니다. 필터링 및 페이지 매김과 같은 기능 작업과 접근성 및 코딩 표준과 같은 품질 개선 작업이 함께 준비되어 있습니다. 사이트와 Copilot의 기능을 모두 살펴보면서 반복적으로 작업을 진행해 과제를 완료합니다. - -## 시작하기 +> [!CAUTION] +> GitHub Copilot은 결정론적이 아니라 확률론적으로 작동하므로 정확한 코드와 변경되는 파일이 예제와 다를 수 있습니다. 약간의 차이는 예상된 결과입니다. +> +> 강사가 진행하는 워크숍에서 무언가 제대로 작동하지 않는다면 멘토에게 문의하십시오. -위에서 하네스를 선택해 시작합니다. 각 하네스는 개발을 시작하는 데 필요한 설정 과정으로 시작합니다. \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[real-world-development]: ../real-world-development/ diff --git a/docs/ko-kr/app/0-prerequisites.md b/docs/ko-kr/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/ko-kr/app/0-prerequisites.md rename to docs/ko-kr/real-world-development/app/0-prerequisites.md index 5296f49c..2ca5b069 100644 --- a/docs/ko-kr/app/0-prerequisites.md +++ b/docs/ko-kr/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Tailspin Toys 프로젝트의 복사본에서 작업합니다. 지금 [템플릿 1. 새 브라우저 창에서 이 실습의 GitHub 리포지토리인 `https://github.com/github-samples/tailspin-toys`로 이동합니다. 2. 실습 리포지토리 페이지에서 **Use this template** 버튼을 선택한 다음 **Create a new repository**를 선택하여 리포지토리 복사본을 만듭니다. - ![드롭다운에서 Create a new repository가 선택된 Use this template 버튼](../../_images/app-0-use-template.png) + ![드롭다운에서 Create a new repository가 선택된 Use this template 버튼](../../../_images/app-0-use-template.png) 3. GitHub 또는 Microsoft가 진행하는 이벤트에서 워크숍을 수행하는 경우 멘토가 제공한 지침을 따릅니다. 그렇지 않으면 GitHub Copilot에 접근할 수 있는 조직에 새 리포지토리를 만들 수 있습니다. - ![github-samples/tailspin-toys가 템플릿으로 설정되고 리포지토리 이름이 입력된 Create a new repository 양식](../../_images/app-0-create-repository.png) + ![github-samples/tailspin-toys가 템플릿으로 설정되고 리포지토리 이름이 입력된 Create a new repository 양식](../../../_images/app-0-create-repository.png) 4. 이 실습에서 나중에 참조할 수 있도록 만든 리포지토리 경로(**organization-or-user-name/repository-name**)를 기록합니다. diff --git a/docs/ko-kr/app/1-install-copilot-app.md b/docs/ko-kr/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/ko-kr/app/1-install-copilot-app.md rename to docs/ko-kr/real-world-development/app/1-install-copilot-app.md diff --git a/docs/ko-kr/app/2-add-star-rating.md b/docs/ko-kr/real-world-development/app/2-add-star-rating.md similarity index 98% rename from docs/ko-kr/app/2-add-star-rating.md rename to docs/ko-kr/real-world-development/app/2-add-star-rating.md index 1bb6fc6f..1203bd2a 100644 --- a/docs/ko-kr/app/2-add-star-rating.md +++ b/docs/ko-kr/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Tailspin Toys의 각 게임에는 별점이 있을 수 있으며, 별점은 이 2. **Home screen**을 선택합니다. 3. 리포지토리로 `tailspin-toys`가 선택되어 있는지 확인합니다. - ![리포지토리 선택기가 tailspin-toys로 설정되고 프롬프트 아래에 모델 선택기가 표시된 GitHub Copilot app 프롬프트 상자](../../_images/app-2-start-session.png) + ![리포지토리 선택기가 tailspin-toys로 설정되고 프롬프트 아래에 모델 선택기가 표시된 GitHub Copilot app 프롬프트 상자](../../../_images/app-2-start-session.png) 4. 다음 프롬프트를 사용하여 변경을 요청합니다. @@ -55,7 +55,7 @@ AI가 생성한 모든 변경 내용은 작더라도 병합하기 전에 검토 1. 앱 오른쪽 위에서 **Toggle review panel**을 선택합니다. Copilot이 적용한 보류 중인 모든 변경 내용을 보여 주는 diff 화면이 열립니다. - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../_images/app-2-review-panel.png) + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../../_images/app-2-review-panel.png) 2. 게임 세부 정보를 표시하는 핵심 파일인 `GameCard.astro`에 코드가 추가된 것을 확인합니다. 다음 코드와 비슷해야 합니다. 별점이 있으면 표시하고 `starRating`이 `null`이면 "No rating yet"으로 대체하는 작은 블록입니다. @@ -80,7 +80,7 @@ AI가 생성한 모든 변경 내용은 작더라도 병합하기 전에 검토 1. Copilot app 오른쪽의 검토 패널에서 **Terminal**을 선택합니다. **Terminal** 버튼이 없으면 **+**(**Open in panel** 레이블)를 선택한 다음 **Terminal**을 선택합니다. - ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../../_images/app-terminal-screenshot.png) 2. 터미널 창에 다음 명령을 입력하여 웹앱의 개발 서버를 시작합니다. diff --git a/docs/ko-kr/app/3-custom-instructions.md b/docs/ko-kr/real-world-development/app/3-custom-instructions.md similarity index 98% rename from docs/ko-kr/app/3-custom-instructions.md rename to docs/ko-kr/real-world-development/app/3-custom-instructions.md index a8dad33c..77ece63b 100644 --- a/docs/ko-kr/app/3-custom-instructions.md +++ b/docs/ko-kr/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ AI를 사용하는 방식이 하나로 정해져 있지 않듯 지침 파일을 1. 검토 패널이 표시되지 않으면 오른쪽 위의 **Toggle review panel**을 선택하여 엽니다. - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../_images/app-2-review-panel.png) + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../../_images/app-2-review-panel.png) 2. 검토 패널에 새 항목을 추가하려면 **+**를 선택합니다. 3. **File**을 선택합니다. @@ -66,7 +66,7 @@ AI를 사용하는 방식이 하나로 정해져 있지 않듯 지침 파일을 6. 파일을 살펴봅니다. 프로젝트에 관한 간단한 설명과 **Agent notes**, **Code standards**, **Scripts**, **Repository Structure** 같은 섹션을 확인합니다. **Code standards** 아래에서 중첩된 **GitHub Actions Workflows** 지침을 확인합니다. 이 내용은 Copilot과의 모든 상호 작용에 적용됩니다. 7. 폴더 탐색기를 열려면 **Show folder view**를 선택합니다. - ![GitHub Copilot app에서 파일이 열린 검토 패널의 Show folder view 버튼](../../_images/app-show-folder-view.png) + ![GitHub Copilot app에서 파일이 열린 검토 패널의 Show folder view 버튼](../../../_images/app-show-folder-view.png) 8. `.github/instructions` 폴더로 이동하여 파일을 살펴봅니다. Astro 파일, Drizzle 데이터 계층, 테스트 등에 관한 지침이 있습니다. 9. `.github/instructions/unit-tests.instructions.md`를 엽니다. 위쪽의 `applyTo` 필드는 지침이 적용되는 파일을 결정하는 glob을 리포지토리 루트 기준으로 설정합니다. 여기서는 TypeScript 테스트 파일(예: `**/*.test.ts`와 일치하는 파일)이 모두 일치합니다. @@ -87,7 +87,7 @@ AI를 사용하는 방식이 하나로 정해져 있지 않듯 지침 파일을 2. **Update our repository coding standards** 이슈를 선택하여 엽니다. 3. 오른쪽 위의 **New session**을 선택하여 이슈를 바탕으로 새 세션을 시작합니다. - ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../_images/app-new-session-from-issue.png) + ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../../_images/app-new-session-from-issue.png) 4. 다음 프롬프트를 사용하여 이슈에 문서화된 요구 사항에 맞게 지침 파일을 업데이트하도록 Copilot에 요청합니다. @@ -103,7 +103,7 @@ Copilot이 적용한 업데이트를 읽고, 업데이트된 지침을 바탕으 1. 오른쪽 위의 **Changes**를 선택하여 코드 변경 내용을 엽니다. - ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../_images/app-select-changes.png) + ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../../_images/app-select-changes.png) 2. 업데이트된 지침 파일을 검토합니다. 코드에 문서와 주석을 추가하는 지침이 있는지 확인합니다. diff --git a/docs/ko-kr/app/4-build-filtering.md b/docs/ko-kr/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/ko-kr/app/4-build-filtering.md rename to docs/ko-kr/real-world-development/app/4-build-filtering.md index 1bf692d4..a8fcc3eb 100644 --- a/docs/ko-kr/app/4-build-filtering.md +++ b/docs/ko-kr/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ AI 코딩 에이전트를 개발 흐름에 도입해도 기본 원칙은 달라 2. **Allow users to filter games by category and publisher** 이슈를 선택합니다. 3. 오른쪽 위의 **New session**을 선택합니다. - ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../_images/app-new-session-from-issue.png) + ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../../_images/app-new-session-from-issue.png) 4. 모드에 **Plan**이 표시될 때까지 Shift+Tab을 선택합니다. - ![Plan으로 설정된 모드 선택기를 화살표로 가리키는 GitHub Copilot app 프롬프트 상자](../../_images/app-4-plan-mode.png) + ![Plan으로 설정된 모드 선택기를 화살표로 가리키는 GitHub Copilot app 프롬프트 상자](../../../_images/app-4-plan-mode.png) 5. 다음 프롬프트를 보냅니다. 이슈에서 세션을 시작했으므로 필터링 이슈는 이미 세션의 컨텍스트에 있습니다. @@ -92,12 +92,12 @@ AI가 생성한 모든 코드는 병합 전에 검토해야 합니다. 코드를 1. 오른쪽 위의 **Changes**를 선택하여 코드 변경 내용을 엽니다. - ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../_images/app-select-changes.png) + ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../../_images/app-select-changes.png) 2. 변경 내용을 검토합니다. 새 TypeScript, Astro, 테스트 파일이 표시되어야 합니다. 새 도우미 함수에 TSDoc doc comments와 파일 헤더 주석이 있는지 확인합니다. 레슨 3에서 병합한 문서화 표준이 요청 없이 자동으로 적용된 것입니다. 3. Copilot app 오른쪽의 검토 패널에서 **Terminal**을 선택합니다. **Terminal** 버튼이 없으면 **+**(**Open in panel** 레이블)를 선택한 다음 **Terminal**을 선택합니다. - ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../../_images/app-terminal-screenshot.png) 4. 터미널 창에 다음 명령을 입력하여 웹앱의 개발 서버를 시작합니다. @@ -138,7 +138,7 @@ description: Run the project's test suites and linter to verify code changes are 1. 검토 패널이 표시되지 않으면 오른쪽 위의 **Toggle review panel**을 선택하여 엽니다. - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../_images/app-2-review-panel.png) + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../../_images/app-2-review-panel.png) 2. 검토 패널에 새 항목을 추가하려면 **+**를 선택합니다. 3. **File**을 선택합니다. diff --git a/docs/ko-kr/app/5-mcp-playwright.md b/docs/ko-kr/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/ko-kr/app/5-mcp-playwright.md rename to docs/ko-kr/real-world-development/app/5-mcp-playwright.md index 40a21566..41d4a60d 100644 --- a/docs/ko-kr/app/5-mcp-playwright.md +++ b/docs/ko-kr/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ lastUpdated: 2026-07-09 앱 설정에서 MCP 서버를 추가하고 관리합니다. 앱에는 인기 서버 카탈로그가 포함되어 있으므로 몇 번의 선택만으로 [Playwright MCP 서버][playwright-mcp-server]를 추가할 수 있습니다. -1. Ctrl+,를 선택하여 Copilot app 설정 페이지를 엽니다. +1. Command+,(Mac) 또는 Ctrl+,(Windows/Linux)를 눌러 Copilot app 설정 페이지를 엽니다. 2. **MCP servers**를 선택합니다. 3. 검색 대화 상자에 `Playwright`를 입력합니다. 4. **Popular MCP servers** 목록에서 **Playwright**를 선택합니다. diff --git a/docs/ko-kr/app/6-agent-merge.md b/docs/ko-kr/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/ko-kr/app/6-agent-merge.md rename to docs/ko-kr/real-world-development/app/6-agent-merge.md index f29b33ed..93dd59ff 100644 --- a/docs/ko-kr/app/6-agent-merge.md +++ b/docs/ko-kr/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ lastUpdated: 2026-07-09 2. 오른쪽 위에서 **Create PR** 옆의 드롭다운을 선택합니다. 3. **Agent merge**를 선택하여 Agent Merge를 활성화합니다. - ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../_images/app-enable-agent-merge.png) + ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../../_images/app-enable-agent-merge.png) 4. 이제 버튼 텍스트가 **Agent merge**로 바뀝니다. 5. **Agent merge** 버튼을 선택하여 Agent Merge 프로세스를 시작합니다. @@ -43,7 +43,7 @@ Copilot app이 PR을 만들고 관리하는 프로세스를 시작합니다. 먼 6. **Agent merge** 옆의 드롭다운을 선택한 다음 **Merge pull request**를 선택하여 Agent Merge가 끌어오기 요청을 병합하도록 허용합니다. - ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../_images/app-agent-merge-merge.png) + ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../../_images/app-agent-merge-merge.png) 7. 모든 CI 프로세스가 통과하면, 즉 테스트가 성공하면 Copilot이 끌어오기 요청을 병합합니다. diff --git a/docs/ko-kr/app/7-canvases.md b/docs/ko-kr/real-world-development/app/7-canvases.md similarity index 97% rename from docs/ko-kr/app/7-canvases.md rename to docs/ko-kr/real-world-development/app/7-canvases.md index dca280c8..4776fc6d 100644 --- a/docs/ko-kr/app/7-canvases.md +++ b/docs/ko-kr/real-world-development/app/7-canvases.md @@ -70,7 +70,7 @@ Copilot이 캔버스를 만들기 시작합니다. 2. Copilot이 캔버스 파일을 저장하면 오른쪽 위에서 **Create PR** 옆의 드롭다운을 선택합니다. 3. **Agent merge**를 선택하여 Agent Merge를 활성화합니다. - ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../_images/app-enable-agent-merge.png) + ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../../_images/app-enable-agent-merge.png) 4. 이제 버튼 텍스트가 **Agent merge**로 바뀝니다. 5. **Agent merge** 버튼을 선택하여 Agent Merge 프로세스를 시작합니다. @@ -81,7 +81,7 @@ Copilot app이 PR을 만들고 관리하는 프로세스를 시작합니다. 먼 6. **Agent merge** 옆의 드롭다운을 선택한 다음 **Merge pull request**를 선택하여 Agent Merge가 끌어오기 요청을 병합하도록 허용합니다. - ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../_images/app-agent-merge-merge.png) + ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../../_images/app-agent-merge-merge.png) 7. 모든 CI 프로세스가 통과할 때까지 기다립니다. 모두 통과하면 Copilot이 끌어오기 요청을 자동으로 병합합니다. diff --git a/docs/ko-kr/app/8-review.md b/docs/ko-kr/real-world-development/app/8-review.md similarity index 100% rename from docs/ko-kr/app/8-review.md rename to docs/ko-kr/real-world-development/app/8-review.md diff --git a/docs/ko-kr/app/README.md b/docs/ko-kr/real-world-development/app/README.md similarity index 99% rename from docs/ko-kr/app/README.md rename to docs/ko-kr/real-world-development/app/README.md index 60cb1e8f..212ebda4 100644 --- a/docs/ko-kr/app/README.md +++ b/docs/ko-kr/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/app +slug: ko-kr/real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/ko-kr/cli/0-prerequisites.md b/docs/ko-kr/real-world-development/cli/0-prerequisites.md similarity index 93% rename from docs/ko-kr/cli/0-prerequisites.md rename to docs/ko-kr/real-world-development/cli/0-prerequisites.md index 555bd1cd..a51eff7a 100644 --- a/docs/ko-kr/cli/0-prerequisites.md +++ b/docs/ko-kr/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Copilot CLI 연습을 시작하기 전에 모든 것을 준비해야 합니다. 1. 새 브라우저 창에서 이 실습의 GitHub 리포지토리로 이동합니다: `https://github.com/github-samples/tailspin-toys`. 2. 실습용 리포지토리 페이지에서 **Use this template** 버튼을 선택해 리포지토리 복사본을 만듭니다. 그런 다음 **Create a new repository**를 선택합니다. - ![Use this template 버튼](../../_images/ex0-use-template.png) + ![Use this template 버튼](../../../_images/ex0-use-template.png) 3. GitHub 또는 Microsoft가 진행하는 행사에서 이 워크숍을 수행하는 경우에는 멘토가 제공하는 안내를 따릅니다. 그렇지 않다면 GitHub Copilot에 액세스할 수 있는 조직에 새 리포지토리를 만들어도 됩니다. - ![리포지토리 템플릿 설정 입력 화면](../../_images/ex0-repository-settings.png) + ![리포지토리 템플릿 설정 입력 화면](../../../_images/ex0-repository-settings.png) 4. 이후 실습에서 참조할 수 있도록 생성한 리포지토리 경로(**organization-or-user-name/repository-name**)를 기록해 둡니다. @@ -36,11 +36,11 @@ Copilot CLI 연습을 시작하기 전에 모든 것을 준비해야 합니다. 1. 방금 만든 리포지토리로 이동합니다. 2. 초록색 **Code** 버튼을 선택합니다. - ![Code 버튼 선택 화면](../../_images/ex0-code-button.png) + ![Code 버튼 선택 화면](../../../_images/ex0-code-button.png) 3. **Codespaces** 탭을 선택한 다음 **+** 버튼을 선택해 새 Codespace를 만듭니다. - ![새 codespace 만들기](../../_images/ex0-create-codespace.png) + ![새 codespace 만들기](../../../_images/ex0-create-codespace.png) 코드스페이스를 만드는 데는 몇 분 정도 걸리지만, 모든 서비스를 수동으로 설치하는 것보다 훨씬 빠릅니다. 기다리는 동안에는 GitHub Copilot의 다른 기능을 살펴볼 수 있으며, 다음 단계에서 그 부분을 이어서 알아봅니다. diff --git a/docs/ko-kr/cli/1-install-copilot-cli.md b/docs/ko-kr/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/ko-kr/cli/1-install-copilot-cli.md rename to docs/ko-kr/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/ko-kr/cli/2-custom-instructions.md b/docs/ko-kr/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/ko-kr/cli/2-custom-instructions.md rename to docs/ko-kr/real-world-development/cli/2-custom-instructions.md diff --git a/docs/ko-kr/cli/3-generating-code.md b/docs/ko-kr/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/ko-kr/cli/3-generating-code.md rename to docs/ko-kr/real-world-development/cli/3-generating-code.md diff --git a/docs/ko-kr/cli/4-mcp.md b/docs/ko-kr/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/ko-kr/cli/4-mcp.md rename to docs/ko-kr/real-world-development/cli/4-mcp.md diff --git a/docs/ko-kr/cli/5-agent-skills.md b/docs/ko-kr/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/ko-kr/cli/5-agent-skills.md rename to docs/ko-kr/real-world-development/cli/5-agent-skills.md diff --git a/docs/ko-kr/cli/6-custom-agents.md b/docs/ko-kr/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/ko-kr/cli/6-custom-agents.md rename to docs/ko-kr/real-world-development/cli/6-custom-agents.md diff --git a/docs/ko-kr/cli/7-slash-commands.md b/docs/ko-kr/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/ko-kr/cli/7-slash-commands.md rename to docs/ko-kr/real-world-development/cli/7-slash-commands.md index c01136b0..919dd5a3 100644 --- a/docs/ko-kr/cli/7-slash-commands.md +++ b/docs/ko-kr/real-world-development/cli/7-slash-commands.md @@ -65,7 +65,7 @@ AI 도구를 포함해 어떤 도구든 잘 활용하는 것은 하나의 기술 2. 잠시 후 Copilot CLI가 현재 컨텍스트를 시각적으로 표현한 결과를 생성합니다. - ![Copilot CLI의 context window 화면](../../_images/cli-7-context-window.png) + ![Copilot CLI의 context window 화면](../../../_images/cli-7-context-window.png) 3. 표시된 모델(이미지와 다를 수 있음)과 현재 사용된 token 비율을 확인합니다. 나머지 정보는 다음을 보여 줍니다. diff --git a/docs/ko-kr/cli/8-review.md b/docs/ko-kr/real-world-development/cli/8-review.md similarity index 100% rename from docs/ko-kr/cli/8-review.md rename to docs/ko-kr/real-world-development/cli/8-review.md diff --git a/docs/ko-kr/cli/README.md b/docs/ko-kr/real-world-development/cli/README.md similarity index 98% rename from docs/ko-kr/cli/README.md rename to docs/ko-kr/real-world-development/cli/README.md index 82f069d0..de9b2634 100644 --- a/docs/ko-kr/cli/README.md +++ b/docs/ko-kr/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/cli +slug: ko-kr/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/pt-br/README.md b/docs/pt-br/README.md index 6e3709b9..03d1d135 100644 --- a/docs/pt-br/README.md +++ b/docs/pt-br/README.md @@ -1,42 +1,33 @@ --- slug: pt-br -title: "Mãos à obra com os agentes do GitHub Copilot" +title: "Workshops do GitHub Copilot" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-16 --- -As adições recentes aos recursos do GitHub Copilot oferecem ferramentas avançadas para apoiar pessoas desenvolvedoras durante todo o ciclo de vida de desenvolvimento de software (SDLC). Isso inclui trabalhar com problemas e solicitações de pull no GitHub, interagir com serviços externos e, é claro, criar código. Este laboratório explora esses recursos e apresenta casos de uso reais e dicas para aproveitar as ferramentas ao máximo. +Escolha um workshop de acordo com o que deseja aprender e com o nível de profundidade que procura. **Primeiros passos** oferece uma introdução guiada ao GitHub Copilot, enquanto **Desenvolvimento em cenários reais** usa um aplicativo completo e o backlog de uma equipe para praticar fluxos de trabalho voltados à produção. -> [!CAUTION] -> Como o GitHub Copilot é probabilístico, e não determinístico, o código exato, os arquivos alterados e outros detalhes podem variar. Por isso, talvez você perceba pequenas diferenças entre as capturas de tela e os trechos de código do laboratório e o que aparece em sua experiência. Isso é esperado e faz parte da natureza do trabalho com essa categoria de ferramentas. -> -> Se algo parecer quebrado ou não estiver funcionando corretamente, peça ajuda a uma pessoa mentora! - -## Escolha seu ambiente - -O GitHub Copilot acompanha você onde quer que trabalhe. Escolha o ambiente que corresponde à forma como você quer desenvolver e conclua os exercícios usando um backlog compartilhado da Tailspin Toys. Cada ambiente começa com sua própria configuração, para que você possa ir direto ao que escolheu. - -### 🖥️ [VS Code](../vscode/) +## Primeiros passos -GitHub Copilot no **Visual Studio Code** e no GitHub Codespaces. Trabalhe com o modo de agente do Copilot Chat, servidores MCP e agentes personalizados sem sair do editor que você já usa — ideal para integrar a assistência de IA diretamente ao seu IDE. +Comece com uma experiência guiada e objetiva que apresenta os principais recursos de um produto do GitHub Copilot sem exigir uma base de código existente. -### 💻 [Copilot CLI](cli/) +### [Tour pelo aplicativo GitHub Copilot][first-steps-app] -**GitHub Copilot CLI** — um assistente baseado em agentes que é executado no terminal. Instale-o, conecte servidores MCP, gere código com o modo de planejamento e crie suas próprias habilidades, agentes personalizados e comandos de barra, tudo pela linha de comando. +Crie um Space Quiz a partir de uma pasta vazia, publique-o no GitHub, implemente um problema, conclua uma revisão do Copilot, agende uma automação e explore um fluxo de trabalho com Canvas. -### 🤖 [Aplicativo Copilot](app/) +## Desenvolvimento em cenários reais -O **aplicativo GitHub Copilot** — um aplicativo para desktop criado com base no Copilot CLI. Execute sessões paralelas de agentes, alterne entre modos de sessão, colabore em telas e gerencie problemas e solicitações de pull do GitHub de forma nativa — incluindo o **Agent Merge**, que conduz uma solicitação de pull por rebases, comentários de revisão, correções de CI e mesclagem. +Pratique o GitHub Copilot em um ciclo de vida de desenvolvimento de software realista usando o aplicativo Tailspin Toys e o backlog correspondente. Escolha o ambiente em que deseja trabalhar e planeje, desenvolva, teste, revise e entregue mudanças significativas. -### ☁️ [Agente de nuvem do Copilot](../cloud/) +### [Explore os workshops de desenvolvimento em cenários reais][real-world-development] -**Agente de nuvem do Copilot** — um programador parceiro assíncrono que trabalha em problemas do GitHub em segundo plano. Atribua tarefas, oriente-o com agentes personalizados, acompanhe o progresso no painel de agentes e revise as solicitações de pull que ele abre. +Escolha entre VS Code, Copilot CLI, o aplicativo GitHub Copilot ou o agente de nuvem do Copilot. -## Cenário - -Você é uma nova pessoa desenvolvedora na Tailspin Toys, uma empresa fictícia que oferece financiamento coletivo para jogos de tabuleiro com tema de desenvolvimento — um mercado enorme! O backlog da sua equipe já está registrado como problemas do GitHub e pronto para você começar — com trabalhos em funcionalidades, como filtragem e paginação, além de melhorias de qualidade, como acessibilidade e padrões de codificação. Você trabalhará de forma iterativa, explorando tanto o site quanto os recursos do Copilot para concluir as tarefas. - -## Comece agora +> [!CAUTION] +> Como o GitHub Copilot é probabilístico, e não determinístico, o código exato e os arquivos alterados podem ser diferentes dos exemplos. Pequenas diferenças são esperadas. +> +> Se algo não funcionar corretamente durante um workshop conduzido por uma pessoa instrutora, peça ajuda a uma pessoa mentora. -Escolha um dos ambientes acima para começar — cada um é aberto com a configuração necessária para você iniciar o desenvolvimento. \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[real-world-development]: ../real-world-development/ diff --git a/docs/pt-br/app/0-prerequisites.md b/docs/pt-br/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/pt-br/app/0-prerequisites.md rename to docs/pt-br/real-world-development/app/0-prerequisites.md index 13492034..9c8855e2 100644 --- a/docs/pt-br/app/0-prerequisites.md +++ b/docs/pt-br/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Você trabalhará na sua própria cópia do projeto Tailspin Toys. Crie-a agora 1. Em uma nova janela do navegador, acesse o repositório do GitHub deste laboratório: `https://github.com/github-samples/tailspin-toys`. 2. Crie sua própria cópia do repositório selecionando o botão **Use this template** na página do repositório do laboratório. Em seguida, selecione **Create a new repository**. - ![Botão Use this template com a opção Create a new repository selecionada no menu suspenso](../../_images/app-0-use-template.png) + ![Botão Use this template com a opção Create a new repository selecionada no menu suspenso](../../../_images/app-0-use-template.png) 3. Se você estiver fazendo o workshop como parte de um evento conduzido pelo GitHub ou pela Microsoft, siga as instruções dos mentores. Caso contrário, crie o novo repositório em uma organização na qual você tenha acesso ao GitHub Copilot. - ![Formulário Create a new repository com github-samples/tailspin-toys definido como modelo e o nome do repositório preenchido](../../_images/app-0-create-repository.png) + ![Formulário Create a new repository com github-samples/tailspin-toys definido como modelo e o nome do repositório preenchido](../../../_images/app-0-create-repository.png) 4. Anote o caminho do repositório que você criou (**organization-or-user-name/repository-name**), pois ele será usado mais adiante no laboratório. diff --git a/docs/pt-br/app/1-install-copilot-app.md b/docs/pt-br/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/pt-br/app/1-install-copilot-app.md rename to docs/pt-br/real-world-development/app/1-install-copilot-app.md diff --git a/docs/pt-br/app/2-add-star-rating.md b/docs/pt-br/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/pt-br/app/2-add-star-rating.md rename to docs/pt-br/real-world-development/app/2-add-star-rating.md index 3a546d52..7058e265 100644 --- a/docs/pt-br/app/2-add-star-rating.md +++ b/docs/pt-br/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Vamos iniciar uma nova sessão para começar a explorar o projeto e implementar 2. Selecione **Home screen**. 3. Verifique se `tailspin-toys` está selecionado como repositório. - ![Caixa de prompt do aplicativo GitHub Copilot com o seletor de repositório definido como tailspin-toys e o seletor de modelo exibido abaixo do prompt](../../_images/app-2-start-session.png) + ![Caixa de prompt do aplicativo GitHub Copilot com o seletor de repositório definido como tailspin-toys e o seletor de modelo exibido abaixo do prompt](../../../_images/app-2-start-session.png) 4. Use o prompt a seguir para solicitar a alteração: @@ -55,7 +55,7 @@ Todas as alterações geradas por IA devem ser revisadas antes do merge, mesmo a 1. No canto superior direito do aplicativo, selecione **Toggle review panel**. A tela de diff será aberta com todas as alterações pendentes feitas pelo Copilot. - ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../_images/app-2-review-panel.png) + ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../../_images/app-2-review-panel.png) 2. Você verá código adicionado a `GameCard.astro`, o arquivo principal usado para exibir os detalhes do jogo. Ele deve ser semelhante ao exemplo a seguir: um pequeno bloco que renderiza a avaliação quando ela existe e usa "No rating yet" quando `starRating` é `null`: @@ -80,7 +80,7 @@ Não devemos apenas ler o código e presumir que ele funciona. Também precisamo 1. No painel de revisão à direita do aplicativo Copilot, selecione **Terminal**. Se não houver um botão **Terminal**, selecione **+** (identificado como **Open in panel**) e depois selecione **Terminal**. - ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../../_images/app-terminal-screenshot.png) 2. Digite o comando a seguir na janela do terminal para iniciar o servidor de desenvolvimento do aplicativo Web: diff --git a/docs/pt-br/app/3-custom-instructions.md b/docs/pt-br/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/pt-br/app/3-custom-instructions.md rename to docs/pt-br/real-world-development/app/3-custom-instructions.md index 91363726..99fe5eee 100644 --- a/docs/pt-br/app/3-custom-instructions.md +++ b/docs/pt-br/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ Reserve um momento para ler os arquivos de instruções incluídos no repositór 1. Se o painel de revisão ainda não estiver visível, abra-o selecionando **Toggle review panel** no canto superior direito. - ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../_images/app-2-review-panel.png) + ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../../_images/app-2-review-panel.png) 2. Selecione **+** para adicionar um novo item ao painel de revisão. 3. Selecione **File**. @@ -66,7 +66,7 @@ Reserve um momento para ler os arquivos de instruções incluídos no repositór 6. Explore o arquivo. Observe a breve descrição do projeto e seções como **Agent notes**, **Code standards**, **Scripts** e **Repository Structure**. Em **Code standards**, observe a orientação aninhada **GitHub Actions Workflows**. Essas instruções se aplicam a qualquer interação com o Copilot. 7. Selecione **Show folder view** para abrir o navegador de pastas. - ![Botão Show folder view no painel de revisão com um arquivo aberto no aplicativo GitHub Copilot](../../_images/app-show-folder-view.png) + ![Botão Show folder view no painel de revisão com um arquivo aberto no aplicativo GitHub Copilot](../../../_images/app-show-folder-view.png) 8. Acesse a pasta `.github/instructions` e explore os arquivos. Observe que há instruções para arquivos Astro, a camada de dados Drizzle, testes e muito mais. 9. Abra `.github/instructions/unit-tests.instructions.md`. Observe o campo `applyTo` na parte superior. Ele define um glob, relativo à raiz do repositório, que determina a quais arquivos as instruções se aplicam. Nesse caso, qualquer arquivo de teste TypeScript, por exemplo um arquivo correspondente a `**/*.test.ts`, será incluído. @@ -87,7 +87,7 @@ Na lição anterior, você iniciou uma sessão com um prompt direto. No entanto, 2. Selecione a issue intitulada **Update our repository coding standards** para abri-la. 3. Selecione **New session** no canto superior direito para iniciar uma nova sessão com base na issue. - ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../_images/app-new-session-from-issue.png) + ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../../_images/app-new-session-from-issue.png) 4. Use o prompt a seguir para solicitar que o Copilot atualize os arquivos de instruções de acordo com os requisitos documentados na issue: @@ -103,7 +103,7 @@ Vamos ler as atualizações feitas pelo Copilot e também pedir um exemplo do c 1. Selecione **Changes** no canto superior direito para abrir as alterações no código. - ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../_images/app-select-changes.png) + ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../../_images/app-select-changes.png) 2. Revise o arquivo de instruções atualizado. Confirme se ele contém as diretrizes para adicionar documentação e comentários ao código. diff --git a/docs/pt-br/app/4-build-filtering.md b/docs/pt-br/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/pt-br/app/4-build-filtering.md rename to docs/pt-br/real-world-development/app/4-build-filtering.md index d36228c4..071e058d 100644 --- a/docs/pt-br/app/4-build-filtering.md +++ b/docs/pt-br/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Vamos abrir a issue, iniciar uma nova sessão e criar um plano alternando para o 2. Selecione a issue intitulada **Allow users to filter games by category and publisher**. 3. Selecione **New session** no canto superior direito. - ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../_images/app-new-session-from-issue.png) + ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../../_images/app-new-session-from-issue.png) 4. Selecione Shift+Tab até que o modo exibido seja **Plan**. - ![Caixa de prompt do aplicativo GitHub Copilot com uma seta apontando para o seletor de modo definido como Plan](../../_images/app-4-plan-mode.png) + ![Caixa de prompt do aplicativo GitHub Copilot com uma seta apontando para o seletor de modo definido como Plan](../../../_images/app-4-plan-mode.png) 5. Envie o prompt a seguir. A issue de filtragem já está no contexto da sessão porque você iniciou a partir dela: @@ -92,12 +92,12 @@ Todo código gerado por IA precisa ser revisado antes do merge. Vamos revisar o 1. Selecione **Changes** no canto superior direito para abrir as alterações no código. - ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../_images/app-select-changes.png) + ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../../_images/app-select-changes.png) 2. Revise as alterações. Você deverá ver novos arquivos TypeScript e Astro, além de arquivos de teste. Observe que as novas funções auxiliares incluem comentários de documentação TSDoc e um comentário de cabeçalho do arquivo. O padrão de documentação integrado na Lição 3 foi aplicado automaticamente, sem que você precisasse solicitá-lo. 3. No painel de revisão à direita do aplicativo Copilot, selecione **Terminal**. Se não houver um botão **Terminal**, selecione **+** (identificado como **Open in panel**) e depois selecione **Terminal**. - ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../../_images/app-terminal-screenshot.png) 4. Digite o comando a seguir na janela do terminal para iniciar o servidor de desenvolvimento do aplicativo Web: @@ -138,7 +138,7 @@ Vamos explorar a skill para entender o que ela faz. 1. Se o painel de revisão ainda não estiver visível, abra-o selecionando **Toggle review panel** no canto superior direito. - ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../_images/app-2-review-panel.png) + ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../../_images/app-2-review-panel.png) 2. Selecione **+** para adicionar um novo item ao painel de revisão. 3. Selecione **File**. diff --git a/docs/pt-br/app/5-mcp-playwright.md b/docs/pt-br/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/pt-br/app/5-mcp-playwright.md rename to docs/pt-br/real-world-development/app/5-mcp-playwright.md index 1f9ea34e..dbc94a05 100644 --- a/docs/pt-br/app/5-mcp-playwright.md +++ b/docs/pt-br/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ Há muitos outros servidores MCP que fornecem acesso a diferentes ferramentas e Você adiciona e gerencia servidores MCP nas configurações do aplicativo. O aplicativo inclui um catálogo de servidores conhecidos, portanto o [servidor MCP do Playwright][playwright-mcp-server] está a poucas seleções de distância. -1. Selecione Ctrl+, para abrir a página de configurações do aplicativo Copilot. +1. Pressione Command+, (Mac) ou Ctrl+, (Windows/Linux) para abrir a página de configurações do aplicativo Copilot. 2. Selecione **MCP servers**. 3. Na caixa de diálogo de pesquisa, digite `Playwright`. 4. Selecione **Playwright** na lista de **Popular MCP servers**. diff --git a/docs/pt-br/app/6-agent-merge.md b/docs/pt-br/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/pt-br/app/6-agent-merge.md rename to docs/pt-br/real-world-development/app/6-agent-merge.md index 44e61b3d..6f811ec1 100644 --- a/docs/pt-br/app/6-agent-merge.md +++ b/docs/pt-br/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ Você revisou o código manualmente, executou testes e permitiu que o Copilot va 2. No canto superior direito, selecione o menu suspenso ao lado de **Create PR**. 3. Selecione **Agent merge** para habilitá-lo. - ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../_images/app-enable-agent-merge.png) + ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../../_images/app-enable-agent-merge.png) 4. O texto do botão mudará para **Agent merge**. 5. Selecione o botão **Agent merge** para iniciar o processo. @@ -43,7 +43,7 @@ Após alguns instantes, você verá que o Copilot voltou a trabalhar, agora anal 6. Permita que o Agent Merge faça o merge do pull request selecionando o menu suspenso ao lado de **Agent merge** e depois **Merge pull request**. - ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Quando todos os processos de CI estiverem verdes, indicando que os testes passaram, o Copilot fará o merge do pull request. diff --git a/docs/pt-br/app/7-canvases.md b/docs/pt-br/real-world-development/app/7-canvases.md similarity index 97% rename from docs/pt-br/app/7-canvases.md rename to docs/pt-br/real-world-development/app/7-canvases.md index abbd6aa6..c7eaee5b 100644 --- a/docs/pt-br/app/7-canvases.md +++ b/docs/pt-br/real-world-development/app/7-canvases.md @@ -70,7 +70,7 @@ Os canvases podem se tornar ativos do repositório, assim como arquivos de instr 2. Depois que o Copilot salvar os arquivos do canvas, selecione o menu suspenso ao lado de **Create PR** no canto superior direito. 3. Selecione **Agent merge** para habilitá-lo. - ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../_images/app-enable-agent-merge.png) + ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../../_images/app-enable-agent-merge.png) 4. O texto do botão mudará para **Agent merge**. 5. Selecione o botão **Agent merge** para iniciar o processo. @@ -81,7 +81,7 @@ Após alguns instantes, você verá que o Copilot voltou a trabalhar, agora anal 6. Permita que o Agent Merge faça o merge do pull request selecionando o menu suspenso ao lado de **Agent merge** e depois **Merge pull request**. - ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Aguarde até que todos os processos de CI sejam concluídos com êxito e fiquem verdes. Quando isso acontecer, o Copilot fará o merge do pull request automaticamente. diff --git a/docs/pt-br/app/8-review.md b/docs/pt-br/real-world-development/app/8-review.md similarity index 100% rename from docs/pt-br/app/8-review.md rename to docs/pt-br/real-world-development/app/8-review.md diff --git a/docs/pt-br/app/README.md b/docs/pt-br/real-world-development/app/README.md similarity index 99% rename from docs/pt-br/app/README.md rename to docs/pt-br/real-world-development/app/README.md index 82e8ba78..9b0f5ad5 100644 --- a/docs/pt-br/app/README.md +++ b/docs/pt-br/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/app +slug: pt-br/real-world-development/app title: "Aplicativo GitHub Copilot" authors: - geektrainer diff --git a/docs/pt-br/cli/0-prerequisites.md b/docs/pt-br/real-world-development/cli/0-prerequisites.md similarity index 93% rename from docs/pt-br/cli/0-prerequisites.md rename to docs/pt-br/real-world-development/cli/0-prerequisites.md index a3ee88c9..0ac43a67 100644 --- a/docs/pt-br/cli/0-prerequisites.md +++ b/docs/pt-br/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Para criar uma cópia do repositório para o código que você desenvolverá, cr 1. Em uma nova janela do navegador, acesse o repositório do GitHub deste laboratório: `https://github.com/github-samples/tailspin-toys`. 2. Crie sua própria cópia do repositório selecionando o botão **Use this template** na página do repositório do laboratório. Em seguida, selecione **Create a new repository**. - ![Botão Use this template](../../_images/ex0-use-template.png) + ![Botão Use this template](../../../_images/ex0-use-template.png) 3. Se você estiver fazendo o workshop como parte de um evento conduzido pelo GitHub ou pela Microsoft, siga as instruções fornecidas pelas pessoas mentoras. Caso contrário, crie o novo repositório em uma organização na qual você tenha acesso ao GitHub Copilot. - ![Preencha as configurações do repositório criado a partir do modelo](../../_images/ex0-repository-settings.png) + ![Preencha as configurações do repositório criado a partir do modelo](../../../_images/ex0-repository-settings.png) 4. Anote o caminho do repositório que você criou (**organization-or-user-name/repository-name**), pois você o usará mais adiante no laboratório. @@ -36,11 +36,11 @@ O [GitHub Codespaces][codespaces] é um ambiente de desenvolvimento baseado em n 1. Acesse o repositório que você acabou de criar. 2. Selecione o botão verde **Code**. - ![Selecione o botão Code](../../_images/ex0-code-button.png) + ![Selecione o botão Code](../../../_images/ex0-code-button.png) 3. Selecione a guia **Codespaces** e depois selecione o botão **+** para criar um novo codespace. - ![Criar um novo codespace](../../_images/ex0-create-codespace.png) + ![Criar um novo codespace](../../../_images/ex0-create-codespace.png) A criação do codespace levará alguns minutos, embora ainda seja muito mais rápida do que instalar todos os serviços manualmente. Enquanto isso, você pode explorar outros recursos do GitHub Copilot, que veremos a seguir. diff --git a/docs/pt-br/cli/1-install-copilot-cli.md b/docs/pt-br/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/pt-br/cli/1-install-copilot-cli.md rename to docs/pt-br/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/pt-br/cli/2-custom-instructions.md b/docs/pt-br/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/pt-br/cli/2-custom-instructions.md rename to docs/pt-br/real-world-development/cli/2-custom-instructions.md diff --git a/docs/pt-br/cli/3-generating-code.md b/docs/pt-br/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/pt-br/cli/3-generating-code.md rename to docs/pt-br/real-world-development/cli/3-generating-code.md diff --git a/docs/pt-br/cli/4-mcp.md b/docs/pt-br/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/pt-br/cli/4-mcp.md rename to docs/pt-br/real-world-development/cli/4-mcp.md diff --git a/docs/pt-br/cli/5-agent-skills.md b/docs/pt-br/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/pt-br/cli/5-agent-skills.md rename to docs/pt-br/real-world-development/cli/5-agent-skills.md diff --git a/docs/pt-br/cli/6-custom-agents.md b/docs/pt-br/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/pt-br/cli/6-custom-agents.md rename to docs/pt-br/real-world-development/cli/6-custom-agents.md diff --git a/docs/pt-br/cli/7-slash-commands.md b/docs/pt-br/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/pt-br/cli/7-slash-commands.md rename to docs/pt-br/real-world-development/cli/7-slash-commands.md index b37b4de0..083a1ac7 100644 --- a/docs/pt-br/cli/7-slash-commands.md +++ b/docs/pt-br/real-world-development/cli/7-slash-commands.md @@ -66,7 +66,7 @@ Ao trabalhar em tarefas maiores ou mais complexas, você pode atingir o limite d 2. Em poucos instantes, o Copilot CLI gerará uma representação visual do contexto atual: - ![Captura de tela da janela de contexto do Copilot CLI](../../_images/cli-7-context-window.png) + ![Captura de tela da janela de contexto do Copilot CLI](../../../_images/cli-7-context-window.png) 3. Observe o modelo exibido, que pode ser diferente do mostrado na imagem, e a porcentagem atual de tokens usados. O restante das informações destaca: diff --git a/docs/pt-br/cli/8-review.md b/docs/pt-br/real-world-development/cli/8-review.md similarity index 100% rename from docs/pt-br/cli/8-review.md rename to docs/pt-br/real-world-development/cli/8-review.md diff --git a/docs/pt-br/cli/README.md b/docs/pt-br/real-world-development/cli/README.md similarity index 98% rename from docs/pt-br/cli/README.md rename to docs/pt-br/real-world-development/cli/README.md index 0844114e..8774a3b8 100644 --- a/docs/pt-br/cli/README.md +++ b/docs/pt-br/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/cli +slug: pt-br/real-world-development/cli title: "CLI do GitHub Copilot" authors: - geektrainer diff --git a/docs/real-world-development/README.md b/docs/real-world-development/README.md new file mode 100644 index 00000000..913bb2ce --- /dev/null +++ b/docs/real-world-development/README.md @@ -0,0 +1,38 @@ +--- +title: "Real-world development" +slug: real-world-development +authors: + - geektrainer +lastUpdated: 2026-09-16 +--- + +Explore GitHub Copilot across the software development lifecycle using realistic scenarios, a complete application, and a shared backlog. You will work iteratively to plan changes, create code, test behavior, review pull requests, and manage work with agents. + +## Scenario + +You are a new developer for Tailspin Toys, a fictional company that provides crowdfunding for board games with a developer theme. Your team's backlog is already filed as GitHub issues, ready for you to pick up. It includes feature work such as filtering and pagination alongside quality improvements such as accessibility and coding standards. + +## Choose your environment + +GitHub Copilot meets you wherever you work. Choose the environment that matches how you want to build. Each workshop starts with its own setup and uses the shared Tailspin Toys scenario. + +### [VS Code][vscode] + +Use GitHub Copilot in Visual Studio Code and GitHub Codespaces. Work with Copilot Chat agent mode, MCP servers, and custom agents without leaving your editor. + +### [Copilot CLI][cli] + +Use the agentic assistant in your terminal. Connect MCP servers, generate code with plan mode, and build skills, custom agents, and slash commands. + +### [GitHub Copilot app][app] + +Run parallel agent sessions, switch session modes, collaborate on canvases, and manage GitHub issues and pull requests in the desktop app. + +### [Copilot cloud agent][cloud] + +Assign GitHub issues to an asynchronous agent, guide its work, monitor progress, and review the pull requests it opens. + +[vscode]: vscode/ +[cli]: cli/ +[app]: app/ +[cloud]: cloud/ diff --git a/docs/app/0-prerequisites.md b/docs/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/app/0-prerequisites.md rename to docs/real-world-development/app/0-prerequisites.md index 7e9a4050..0000f616 100644 --- a/docs/app/0-prerequisites.md +++ b/docs/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ You'll work against your own copy of the Tailspin Toys project. Create it now fr 1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/tailspin-toys`. 2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**. - ![The Use this template button with Create a new repository selected from the dropdown](../_images/app-0-use-template.png) + ![The Use this template button with Create a new repository selected from the dropdown](../../_images/app-0-use-template.png) 3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to GitHub Copilot. - ![The Create a new repository form with github-samples/tailspin-toys set as the template and the repository name filled in](../_images/app-0-create-repository.png) + ![The Create a new repository form with github-samples/tailspin-toys set as the template and the repository name filled in](../../_images/app-0-create-repository.png) 4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab. diff --git a/docs/app/1-install-copilot-app.md b/docs/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/app/1-install-copilot-app.md rename to docs/real-world-development/app/1-install-copilot-app.md diff --git a/docs/app/2-add-star-rating.md b/docs/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/app/2-add-star-rating.md rename to docs/real-world-development/app/2-add-star-rating.md index 0ac7a9e3..4f12f310 100644 --- a/docs/app/2-add-star-rating.md +++ b/docs/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Let's start a new session to begin exploring the project and implementing our fe 2. Select the **Home screen**. 3. Ensure `tailspin-toys` is selected for the repo. - ![The GitHub Copilot app prompt box with the repository selector set to tailspin-toys and the model selector shown beneath the prompt](../_images/app-2-start-session.png) + ![The GitHub Copilot app prompt box with the repository selector set to tailspin-toys and the model selector shown beneath the prompt](../../_images/app-2-start-session.png) 4. Use the following prompt to request the change: @@ -55,7 +55,7 @@ All AI-generated changes deserve a review before they're merged, even small ones 1. In the upper right-hand corner of the app, select **Toggle review panel**. This will open the diff screen with all the outstanding changes made by Copilot. - ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../_images/app-2-review-panel.png) + ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../../_images/app-2-review-panel.png) 2. You should notice code added to `GameCard.astro`, the core file used to display game details. It should be similar to the following — a small block that renders the rating when present and falls back to "No rating yet" when `starRating` is `null`: @@ -80,7 +80,7 @@ Of course we shouldn't just read the code and assume it works. We should visuall 1. In the review panel on the right side of Copilot app, select **Terminal**. If there is no **Terminal** button, select the **+** (labeled as **Open in panel**), then select **Terminal**. - ![The Terminal button in the review panel of the GitHub Copilot app](../_images/app-terminal-screenshot.png) + ![The Terminal button in the review panel of the GitHub Copilot app](../../_images/app-terminal-screenshot.png) 2. Enter the following command in the terminal window to start the web app's dev server: diff --git a/docs/app/3-custom-instructions.md b/docs/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/app/3-custom-instructions.md rename to docs/real-world-development/app/3-custom-instructions.md index 4711afd4..5a6dcf74 100644 --- a/docs/app/3-custom-instructions.md +++ b/docs/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ Take a moment to read the instruction files this repository ships with — there 1. If the review panel is not already visible, open it by selecting **Toggle review panel** in the upper right. - ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../_images/app-2-review-panel.png) + ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../../_images/app-2-review-panel.png) 2. Select the **+** to add a new item to the review panel. 3. Select **File**. @@ -66,7 +66,7 @@ Take a moment to read the instruction files this repository ships with — there 6. Explore the file, noting the brief description of the project plus sections such as **Agent notes**, **Code standards**, **Scripts**, and **Repository Structure**. Under **Code standards**, note the nested **GitHub Actions Workflows** guidance. These are applicable to any interactions you'd have with Copilot. 7. Select **Show folder view** to open the folder navigator. - ![The Show folder view button in the review panel with a file open in the GitHub Copilot app](../_images/app-show-folder-view.png) + ![The Show folder view button in the review panel with a file open in the GitHub Copilot app](../../_images/app-show-folder-view.png) 8. Navigate to the `.github/instructions` folder and explore the files. Note there are instructions for Astro files, the Drizzle data layer, tests, and more. 9. Open `.github/instructions/unit-tests.instructions.md`. Note the `applyTo` field at the top — this sets a glob (relative to the repo root) that determines which files the instructions apply to. Here, any TypeScript test file (for example, one matching `**/*.test.ts`) will match. @@ -87,7 +87,7 @@ In the previous lesson you started a session from a direct prompt. Most work, ho 2. Select the issue titled **Update our repository coding standards** to open the issue. 3. Select **New session** in the upper right to start a new session based on the issue. - ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../_images/app-new-session-from-issue.png) + ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../../_images/app-new-session-from-issue.png) 4. Use the following prompt to request Copilot update the instructions files to meet the requirements documented in the issue: @@ -103,7 +103,7 @@ Let's both read through the updates Copilot made, but also ask it to provide an 1. Select **Changes** in the upper right to open the code changes. - ![The session panel tabs in the GitHub Copilot app with an arrow pointing to the Changes tab](../_images/app-select-changes.png) + ![The session panel tabs in the GitHub Copilot app with an arrow pointing to the Changes tab](../../_images/app-select-changes.png) 2. Review the updated instructions file. Confirm it has the guidelines about adding documentation and comments to the code. diff --git a/docs/app/4-build-filtering.md b/docs/real-world-development/app/4-build-filtering.md similarity index 96% rename from docs/app/4-build-filtering.md rename to docs/real-world-development/app/4-build-filtering.md index 328b1edd..31b71321 100644 --- a/docs/app/4-build-filtering.md +++ b/docs/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Let's open the issue, start a new session, and create a plan by switching into p 2. Select the issue titled **Allow users to filter games by category and publisher**. 3. Select **New session** in the upper right. - ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../_images/app-new-session-from-issue.png) + ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../../_images/app-new-session-from-issue.png) 4. Select Shift+Tab until the mode displays **Plan**. - ![The GitHub Copilot app prompt box with an arrow pointing to the mode selector set to Plan](../_images/app-4-plan-mode.png) + ![The GitHub Copilot app prompt box with an arrow pointing to the mode selector set to Plan](../../_images/app-4-plan-mode.png) 5. Send the following prompt. The filtering issue is already in this session's context because you started from it: @@ -92,12 +92,12 @@ All AI-generated code needs review before it's merged. Let's both review the cod 1. Select **Changes** in the upper right to open the code changes. - ![The session panel tabs in the GitHub Copilot app with an arrow pointing to the Changes tab](../_images/app-select-changes.png) + ![The session panel tabs in the GitHub Copilot app with an arrow pointing to the Changes tab](../../_images/app-select-changes.png) 2. Review the changes. You should see new TypeScript and Astro files, and test files. Notice the new helper functions include TSDoc doc comments and a file header comment — the documentation standard you merged in Lesson 3, applied automatically without being asked. 3. In the review panel on the right side of Copilot app, select **Terminal**. If there is no **Terminal** button, select the **+** (labeled as **Open in panel**), then select **Terminal**. - ![The Terminal button in the review panel of the GitHub Copilot app](../_images/app-terminal-screenshot.png) + ![The Terminal button in the review panel of the GitHub Copilot app](../../_images/app-terminal-screenshot.png) 4. Enter the following command in the terminal window to start the web app's dev server: @@ -138,7 +138,7 @@ Let's explore the skill to see what it does. 1. If the review panel is not already visible, open it by selecting **Toggle review panel** in the upper right. - ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../_images/app-2-review-panel.png) + ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../../_images/app-2-review-panel.png) 2. Select the **+** to add a new item to the review panel. 3. Select **File**. diff --git a/docs/app/5-mcp-playwright.md b/docs/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/app/5-mcp-playwright.md rename to docs/real-world-development/app/5-mcp-playwright.md index 202d83bd..3f47d21f 100644 --- a/docs/app/5-mcp-playwright.md +++ b/docs/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ There are many other MCP servers available that provide access to different tool You add and manage MCP servers from the app settings. The app includes a catalog of popular servers, so the [Playwright MCP server][playwright-mcp-server] is just a couple of clicks away. -1. Select Ctrl+, to open the Copilot app settings page. +1. Press Command+, (Mac) or Ctrl+, (Windows/Linux) to open the Copilot app settings page. 2. Select **MCP servers**. 3. In the search dialog, type `Playwright`. 4. Select **Playwright** from the list of **Popular MCP servers**. diff --git a/docs/app/6-agent-merge.md b/docs/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/app/6-agent-merge.md rename to docs/real-world-development/app/6-agent-merge.md index 55aff8bb..6acd496b 100644 --- a/docs/app/6-agent-merge.md +++ b/docs/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ You've reviewed the code manually, run tests, and even allowed Copilot to valida 2. In the upper right-hand corner, select the dropdown next to **Create PR**. 3. Select **Agent merge** to enable agent merge. - ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../_images/app-enable-agent-merge.png) + ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../../_images/app-enable-agent-merge.png) 4. The button text now changes to **Agent merge**. 5. Select the **Agent merge** button to start the agent merge process. @@ -43,7 +43,7 @@ After a few moments, you'll notice Copilot starts work again, looking at the PR 6. Allow agent merge to merge the pull request by selecting the dropdown next to **Agent merge** then **Merge pull request**. - ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../_images/app-agent-merge-merge.png) + ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../../_images/app-agent-merge-merge.png) 7. Once all CI processes are green (meaning the tests passed), Copilot will merge the pull request! diff --git a/docs/app/7-canvases.md b/docs/real-world-development/app/7-canvases.md similarity index 97% rename from docs/app/7-canvases.md rename to docs/real-world-development/app/7-canvases.md index 223552db..f882330b 100644 --- a/docs/app/7-canvases.md +++ b/docs/real-world-development/app/7-canvases.md @@ -70,7 +70,7 @@ Canvases can become assets in the repository, just like instructions files and s 2. Once Copilot has saved the canvas files, select the dropdown next to **Create PR** in the upper right-hand corner. 3. Select **Agent merge** to enable agent merge. - ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../_images/app-enable-agent-merge.png) + ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../../_images/app-enable-agent-merge.png) 4. The button text now changes to **Agent merge**. 5. Select the **Agent merge** button to start the agent merge process. @@ -81,7 +81,7 @@ After a few moments, you'll notice Copilot starts work again, looking at the PR 6. Allow agent merge to merge the pull request by selecting the dropdown next to **Agent merge** then **Merge pull request**. - ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../_images/app-agent-merge-merge.png) + ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../../_images/app-agent-merge-merge.png) 7. Wait for all CI processes to pass (go green). Once they do, Copilot will merge the pull request automatically! diff --git a/docs/app/8-review.md b/docs/real-world-development/app/8-review.md similarity index 100% rename from docs/app/8-review.md rename to docs/real-world-development/app/8-review.md diff --git a/docs/app/README.md b/docs/real-world-development/app/README.md similarity index 99% rename from docs/app/README.md rename to docs/real-world-development/app/README.md index 0f424ef9..55bea46d 100644 --- a/docs/app/README.md +++ b/docs/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: app +slug: real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/cli/0-prerequisites.md b/docs/real-world-development/cli/0-prerequisites.md similarity index 92% rename from docs/cli/0-prerequisites.md rename to docs/real-world-development/cli/0-prerequisites.md index b75cccb2..284f0c9c 100644 --- a/docs/cli/0-prerequisites.md +++ b/docs/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ To create a copy of the repository for the code you'll create, you'll make an in 1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/tailspin-toys`. 2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**. - ![Use this template button](../_images/ex0-use-template.png) + ![Use this template button](../../_images/ex0-use-template.png) 3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to GitHub Copilot. - ![Input the repository template settings](../_images/ex0-repository-settings.png) + ![Input the repository template settings](../../_images/ex0-repository-settings.png) 4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab. @@ -35,11 +35,11 @@ Next up, you'll use a codespace to complete the lab exercises. 1. Navigate to your newly created repository. 2. Select the green **Code** button. - ![Select the Code button](../_images/ex0-code-button.png) + ![Select the Code button](../../_images/ex0-code-button.png) 3. Select the **Codespaces** tab and select the **+** button to create a new Codespace. - ![Create a new codespace](../_images/ex0-create-codespace.png) + ![Create a new codespace](../../_images/ex0-create-codespace.png) The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, you can use this time to explore other features of GitHub Copilot, which we'll turn your attention to next. diff --git a/docs/cli/1-install-copilot-cli.md b/docs/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/cli/1-install-copilot-cli.md rename to docs/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/cli/2-custom-instructions.md b/docs/real-world-development/cli/2-custom-instructions.md similarity index 98% rename from docs/cli/2-custom-instructions.md rename to docs/real-world-development/cli/2-custom-instructions.md index e1bfab7d..83cc6b22 100644 --- a/docs/cli/2-custom-instructions.md +++ b/docs/real-world-development/cli/2-custom-instructions.md @@ -107,7 +107,7 @@ To see the impact of custom instructions, start by generating code with the curr Running Copilot CLI from the **repository root** ensures it picks up `.github/copilot-instructions.md` automatically. `--enable-all-github-mcp-tools` turns on the read/write GitHub MCP tools so Copilot can read your backlog and open pull requests later in the workshop. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. At the Copilot CLI prompt, ask it to generate the publishers helper that the filtering UI will use: ```plaintext diff --git a/docs/cli/3-generating-code.md b/docs/real-world-development/cli/3-generating-code.md similarity index 95% rename from docs/cli/3-generating-code.md rename to docs/real-world-development/cli/3-generating-code.md index 7a71d1f2..d1d632e6 100644 --- a/docs/cli/3-generating-code.md +++ b/docs/real-world-development/cli/3-generating-code.md @@ -25,7 +25,7 @@ One of the best uses of AI is planning. Oftentimes you'll have a good concept of You'll start the process of creating the new functionality by utilizing plan mode in Copilot CLI. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. Enter the following prompt into Copilot CLI to create a plan based on the filtering issue: ``` diff --git a/docs/cli/4-mcp.md b/docs/real-world-development/cli/4-mcp.md similarity index 97% rename from docs/cli/4-mcp.md rename to docs/real-world-development/cli/4-mcp.md index 35bc2649..52a13944 100644 --- a/docs/cli/4-mcp.md +++ b/docs/real-world-development/cli/4-mcp.md @@ -37,7 +37,7 @@ There are many other MCP servers available that provide access to different tool The quickest way to add a server is the interactive `/mcp add` command. You'll register the [Playwright MCP server][playwright-mcp-server], which gives Copilot a browser it can control. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. In your Copilot CLI session, enter: ```text diff --git a/docs/cli/5-agent-skills.md b/docs/real-world-development/cli/5-agent-skills.md similarity index 95% rename from docs/cli/5-agent-skills.md rename to docs/real-world-development/cli/5-agent-skills.md index 5eecd846..6dc30cdb 100644 --- a/docs/cli/5-agent-skills.md +++ b/docs/real-world-development/cli/5-agent-skills.md @@ -62,7 +62,7 @@ Because Tailspin Toys has a set of requirements for creating PRs, they created a As highlighted previously, skills are automatically invoked by Copilot CLI. As a result, all we need to do is ask Copilot to create a PR! 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. Ask Copilot to create a PR by using the following prompt: ``` diff --git a/docs/cli/6-custom-agents.md b/docs/real-world-development/cli/6-custom-agents.md similarity index 96% rename from docs/cli/6-custom-agents.md rename to docs/real-world-development/cli/6-custom-agents.md index e7f81dce..467f9b2f 100644 --- a/docs/cli/6-custom-agents.md +++ b/docs/real-world-development/cli/6-custom-agents.md @@ -52,7 +52,7 @@ A custom agent has already been created for you for accessibility. Let's review You can start a custom agent in Copilot CLI by using the `/agent` command. Let's perform an accessibility pass on our website. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. Bring up the list of agents by typing `/agent` in the prompt window in Copilot CLI and selecting Enter. 4. Select the **Accessibility agent** from the list of available agents. 5. Use the following prompt to ask the accessibility agent to perform a review and generate fixes for the accessibility backlog item: diff --git a/docs/cli/7-slash-commands.md b/docs/real-world-development/cli/7-slash-commands.md similarity index 96% rename from docs/cli/7-slash-commands.md rename to docs/real-world-development/cli/7-slash-commands.md index 6f67591f..9409b869 100644 --- a/docs/cli/7-slash-commands.md +++ b/docs/real-world-development/cli/7-slash-commands.md @@ -25,7 +25,7 @@ Using any tool, including an AI tool, is a skill. Working together as a team, sh Let's create a GitHub gist we could share with our team. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. In the prompt window for Copilot CLI, send the following command: ``` @@ -50,7 +50,7 @@ When working on larger or more complex tasks you may bump into the maximum conte 2. In just a couple of moments, Copilot CLI will generate a visual representation of its current context: - ![Screenshot of context window from Copilot CLI](../_images/cli-7-context-window.png) + ![Screenshot of context window from Copilot CLI](../../_images/cli-7-context-window.png) 3. Note the model displayed (which may be different than the one in the image), and the current percentage of tokens used. The rest of the information highlights: diff --git a/docs/cli/8-review.md b/docs/real-world-development/cli/8-review.md similarity index 100% rename from docs/cli/8-review.md rename to docs/real-world-development/cli/8-review.md diff --git a/docs/cli/README.md b/docs/real-world-development/cli/README.md similarity index 98% rename from docs/cli/README.md rename to docs/real-world-development/cli/README.md index 2ca8e6f9..18228a85 100644 --- a/docs/cli/README.md +++ b/docs/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: cli +slug: real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/cli/images/.gitkeep b/docs/real-world-development/cli/images/.gitkeep similarity index 100% rename from docs/cli/images/.gitkeep rename to docs/real-world-development/cli/images/.gitkeep diff --git a/docs/cloud/0-prerequisites.md b/docs/real-world-development/cloud/0-prerequisites.md similarity index 92% rename from docs/cloud/0-prerequisites.md rename to docs/real-world-development/cloud/0-prerequisites.md index 4abd67cd..2fabf9c7 100644 --- a/docs/cloud/0-prerequisites.md +++ b/docs/real-world-development/cloud/0-prerequisites.md @@ -14,11 +14,11 @@ To create a copy of the repository for the code you'll create, you'll make an in 1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/tailspin-toys`. 2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**. - ![Use this template button](../_images/ex0-use-template.png) + ![Use this template button](../../_images/ex0-use-template.png) 3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to GitHub Copilot. - ![Input the repository template settings](../_images/ex0-repository-settings.png) + ![Input the repository template settings](../../_images/ex0-repository-settings.png) 4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab. ## Creating a codespace @@ -30,11 +30,11 @@ Next up, you'll use a codespace to complete the lab exercises. 1. Navigate to your newly created repository. 2. Select the green **Code** button. - ![Select the Code button](../_images/ex0-code-button.png) + ![Select the Code button](../../_images/ex0-code-button.png) 3. Select the **Codespaces** tab and select the **+** button to create a new Codespace. - ![Create a new codespace](../_images/ex0-create-codespace.png) + ![Create a new codespace](../../_images/ex0-create-codespace.png) The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, you can use this time to explore other features of GitHub Copilot, which we'll turn your attention to next. diff --git a/docs/cloud/1-custom-instructions.md b/docs/real-world-development/cloud/1-custom-instructions.md similarity index 100% rename from docs/cloud/1-custom-instructions.md rename to docs/real-world-development/cloud/1-custom-instructions.md diff --git a/docs/cloud/2-cloud-agent.md b/docs/real-world-development/cloud/2-cloud-agent.md similarity index 97% rename from docs/cloud/2-cloud-agent.md rename to docs/real-world-development/cloud/2-cloud-agent.md index 581dfbb8..f2e06506 100644 --- a/docs/cloud/2-cloud-agent.md +++ b/docs/real-world-development/cloud/2-cloud-agent.md @@ -110,11 +110,11 @@ While everyone understands the importance of documentation, most projects have e 7. Select **Create** to create the issue. 8. On the right side, select **Assign to Copilot** to open the assignment dialog. - ![Assigning Copilot to an issue](../_images/shared-assign-copilot.png) + ![Assigning Copilot to an issue](../../_images/shared-assign-copilot.png) 9. Select **Assign**. - ![Copilot assignment details](../_images/ex4-assign-copilot-details.png) + ![Copilot assignment details](../../_images/ex4-assign-copilot-details.png) 10. Select the **Pull Requests** tab. 11. Open the newly generated pull request (PR), which will be titled something similar to `[WIP]: Code lacks documentation`. If a new PR doesn't appear on the list, wait for a moment or two and refresh the browser window. @@ -127,7 +127,7 @@ While everyone understands the importance of documentation, most projects have e 14. Scroll down the pull request timeline, and you should see an update that Copilot has started working on the issue. 15. Select the **View session** button. - ![Copilot session view](../_images/ex4-view-session.png) + ![Copilot session view](../../_images/ex4-view-session.png) > [!CAUTION] > You may need to refresh the window to see the updated indicator. @@ -160,13 +160,13 @@ As has been highlighted, one of the great advantages of GitHub Copilot cloud age 7. Select **Create** to create the issue. 8. On the right side, select **Assign to Copilot** to open the assignment dialog. - ![Assigning Copilot to an issue](../_images/shared-assign-copilot.png) + ![Assigning Copilot to an issue](../../_images/shared-assign-copilot.png) 9. Select **Assign**. Shortly after, you should see a set of 👀 on the first comment in the issue, indicating Copilot is on the job! -![Copilot uses the eyes emoji to indicate it's working on the issue](../_images/ex4-issue-eyes-emoji.png) +![Copilot uses the eyes emoji to indicate it's working on the issue](../../_images/ex4-issue-eyes-emoji.png) Copilot is now diligently working on your second request! Copilot cloud agent works in a similar fashion to a SWE, so you don't need to actively monitor it, but instead review once it's completed. Let's turn your attention to creating and using custom agents. diff --git a/docs/cloud/3-custom-agents.md b/docs/real-world-development/cloud/3-custom-agents.md similarity index 98% rename from docs/cloud/3-custom-agents.md rename to docs/real-world-development/cloud/3-custom-agents.md index cda3be2a..b362c66f 100644 --- a/docs/cloud/3-custom-agents.md +++ b/docs/real-world-development/cloud/3-custom-agents.md @@ -69,7 +69,7 @@ Mission control is the central location for working with all agents for your env 8. On the right side, select **Assign to Copilot** to open the assignment dialog. 9. Select **Accessibility agent** from the list of custom agents. - ![Screenshot of cloud agent assignment, with custom agent and accessibility highlighted](../_images/ex5-select-custom-agent.png) + ![Screenshot of cloud agent assignment, with custom agent and accessibility highlighted](../../_images/ex5-select-custom-agent.png) 10. Select **Assign**. 11. Copilot gets to work on the task in the background! diff --git a/docs/cloud/4-managing-agents.md b/docs/real-world-development/cloud/4-managing-agents.md similarity index 97% rename from docs/cloud/4-managing-agents.md rename to docs/real-world-development/cloud/4-managing-agents.md index 5aed8fca..dd60f4ec 100644 --- a/docs/cloud/4-managing-agents.md +++ b/docs/real-world-development/cloud/4-managing-agents.md @@ -44,7 +44,7 @@ Now that you've seen the tasks which are active, let's request Copilot include t 1. Select the session which refers to adding a high contrast mode. The exact title will vary depending on the name Copilot uses and the current state of work. - ![Accessibility session in mission control](../_images/ex6-accessibility-session.png) + ![Accessibility session in mission control](../../_images/ex6-accessibility-session.png) 2. Watch the session for a few minutes, until it indicates it's completed the setup and begun its work. You'll know this has happened when you start seeing messages similar to the ones below. 3. In the **Steer active session while Copilot is working** dialog, add the following prompt: @@ -53,7 +53,7 @@ Now that you've seen the tasks which are active, let's request Copilot include t While we are working on a high contrast mode, let's also add a light mode. There should be a switch for this mode as well where users can select their desired display mode. ``` - ![Screenshot of the cloud agent task in the agents page with the steer active session while copilot is working dialog highlighted](../_images/ex6-steer-cloud-agent-task.png) + ![Screenshot of the cloud agent task in the agents page with the steer active session while copilot is working dialog highlighted](../../_images/ex6-steer-cloud-agent-task.png) 4. Press Enter to send the prompt. 5. Notice how Copilot acknowledges the prompt and includes it in its flow. diff --git a/docs/cloud/5-iterating.md b/docs/real-world-development/cloud/5-iterating.md similarity index 96% rename from docs/cloud/5-iterating.md rename to docs/real-world-development/cloud/5-iterating.md index d2793824..09a95b05 100644 --- a/docs/cloud/5-iterating.md +++ b/docs/real-world-development/cloud/5-iterating.md @@ -39,7 +39,7 @@ Let's start by exploring the first pull request (PR) generated by GitHub Copilot 4. Once the pull request is ready, select the **Files changed** tab and review the changes. - ![Files changed tab](../_images/shared-pr-files-changed.png) + ![Files changed tab](../../_images/shared-pr-files-changed.png) 5. Explore the newly updated code, which includes the newly created TSDoc doc comments and other documentation. The exact changes will vary. @@ -49,7 +49,7 @@ Let's start by exploring the first pull request (PR) generated by GitHub Copilot 7. You should see an indicator that some workflows are waiting for approval. 8. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the project checks pass for the single Astro app. This may take a few minutes to complete. ## Requesting changes from GitHub Copilot @@ -64,14 +64,14 @@ Working with Copilot on a pull request is not just a one-way street. You can als 2. Select **View Session** to watch Copilot perform its work. Notice how Copilot starts a new session to make the updates. 3. You can select **Back to pull request** to return to the pull request. - ![Back to pull request](../_images/ex7-back-to-pr.png) + ![Back to pull request](../../_images/ex7-back-to-pr.png) 4. Once Copilot has completed the changes, you should see a new commit in the pull request. 5. Select the **Files changed** tab to review the changes. Feel free to continue iterating until you are happy. Once happy, you can convert the PR to ready from a draft, and merge it into the main branch. -![Convert PR to ready](../_images/ex7-ready-for-review.png) +![Convert PR to ready](../../_images/ex7-ready-for-review.png) ## Review the related games feature @@ -85,7 +85,7 @@ Let's return to the PR Copilot generated for resolving our issue about showing r 6. You should see an indicator that some workflows are waiting for approval. 7. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 8. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the project checks pass for the single Astro app. This may take a few minutes to complete. 9. **Optional:** You could even switch to this branch in your Codespace to perform a manual test of the related games feature. Navigate to your Codespace, open the terminal, and run the following commands (replace `` with the name of the branch Copilot created, e.g. **copilot/fix-8**.): @@ -119,7 +119,7 @@ Finally, let's review the accessibility features that were implemented using the 7. You should see an indicator that some workflows are waiting for approval. 8. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the project checks pass for the single Astro app. This may take a few minutes to complete. 10. **Optional:** You could switch to this branch in your Codespace to manually test the accessibility features. Navigate to your Codespace, open the terminal, and run the following commands (replace `` with the name of the branch Copilot created): diff --git a/docs/cloud/README.md b/docs/real-world-development/cloud/README.md similarity index 98% rename from docs/cloud/README.md rename to docs/real-world-development/cloud/README.md index faeea7f4..b434067f 100644 --- a/docs/cloud/README.md +++ b/docs/real-world-development/cloud/README.md @@ -1,5 +1,5 @@ --- -slug: cloud +slug: real-world-development/cloud title: "Copilot cloud agent" authors: - geektrainer diff --git a/docs/cloud/images/.gitkeep b/docs/real-world-development/cloud/images/.gitkeep similarity index 100% rename from docs/cloud/images/.gitkeep rename to docs/real-world-development/cloud/images/.gitkeep diff --git a/docs/vscode/0-prerequisites.md b/docs/real-world-development/vscode/0-prerequisites.md similarity index 92% rename from docs/vscode/0-prerequisites.md rename to docs/real-world-development/vscode/0-prerequisites.md index f874d605..8d5e2656 100644 --- a/docs/vscode/0-prerequisites.md +++ b/docs/real-world-development/vscode/0-prerequisites.md @@ -14,11 +14,11 @@ To create a copy of the repository for the code you'll create, you'll make an in 1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/tailspin-toys`. 2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**. - ![Use this template button](../_images/ex0-use-template.png) + ![Use this template button](../../_images/ex0-use-template.png) 3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to GitHub Copilot. - ![Input the repository template settings](../_images/ex0-repository-settings.png) + ![Input the repository template settings](../../_images/ex0-repository-settings.png) 4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab. @@ -35,11 +35,11 @@ Next up, you'll use a codespace to complete the lab exercises. 1. Navigate to your newly created repository. 2. Select the green **Code** button. - ![Select the Code button](../_images/ex0-code-button.png) + ![Select the Code button](../../_images/ex0-code-button.png) 3. Select the **Codespaces** tab and select the **+** button to create a new Codespace. - ![Create a new codespace](../_images/ex0-create-codespace.png) + ![Create a new codespace](../../_images/ex0-create-codespace.png) The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, you can use this time to explore other features of GitHub Copilot, which we'll turn your attention to next. @@ -65,7 +65,7 @@ Once you have the extension installed, you may need to authenticate with your Gi 3. Type a message like "Hello world" in the Copilot Chat window and press enter. This should activate Copilot Chat. 4. Alternatively, if you are not authenticated you will be prompted to sign in to your GitHub account. Follow the instructions to authenticate. - ![Example of Copilot Chat authentication prompt](../_images/ex1-copilot-authentication.png) + ![Example of Copilot Chat authentication prompt](../../_images/ex1-copilot-authentication.png) 5. After authentication, you should see the Copilot Chat window appear. diff --git a/docs/vscode/1-custom-instructions.md b/docs/real-world-development/vscode/1-custom-instructions.md similarity index 99% rename from docs/vscode/1-custom-instructions.md rename to docs/real-world-development/vscode/1-custom-instructions.md index dbe1939e..b17afdec 100644 --- a/docs/vscode/1-custom-instructions.md +++ b/docs/real-world-development/vscode/1-custom-instructions.md @@ -107,7 +107,7 @@ To see the impact of custom instructions, start by sending a prompt with the cur 2. Open `src/lib/publishers.ts` so Copilot knows where the helper should live. 3. Select **Agent** from the agents dropdown in the Chat view so Copilot can apply file changes. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 4. Send the following prompt: diff --git a/docs/vscode/2-agent-mode.md b/docs/real-world-development/vscode/2-agent-mode.md similarity index 96% rename from docs/vscode/2-agent-mode.md rename to docs/real-world-development/vscode/2-agent-mode.md index c9993a3a..b1f2cbea 100644 --- a/docs/vscode/2-agent-mode.md +++ b/docs/real-world-development/vscode/2-agent-mode.md @@ -83,7 +83,7 @@ The initial implementation of the website is functional, but we want to enhance 1. Select **Agent** from the agents dropdown in the Chat view. The **Agent** agent autonomously plans and implements changes across files, runs terminal commands, and invokes tools. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 2. Select **Claude Sonnet 4.5** from the list of available models. @@ -132,11 +132,11 @@ In addition, the tests need to run (and pass) before you merge everything into y 1. You can continue in the current conversation with Copilot, or start a new one by selecting **New Chat**. 2. Select **Add Context**, **Instructions**, and **ui** as the instructions file. - ![Screenshot showing an example of selecting the UI instructions file](../_images/ex3-select-instructions-file.png) + ![Screenshot showing an example of selecting the UI instructions file](../../_images/ex3-select-instructions-file.png) 3. Ensure **Agent** is still selected from the agents dropdown in the Chat view. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 4. Ensure **Claude Sonnet 4.5** is still selected for the model. 5. Prompt Copilot to implement the functionality based on the related issue in your backlog by using the following prompt: @@ -147,18 +147,18 @@ In addition, the tests need to run (and pass) before you merge everything into y 6. Watch as Copilot begins by exploring the project, locating the files associated with the desired functionality. You should see it finding both the data-layer helpers and UI, as well as the tests. It then begins modifying the files and running the tests. - ![Screenshot showing Copilot exploring the project files](../_images/ex3-agent-mode-explores.png) + ![Screenshot showing Copilot exploring the project files](../../_images/ex3-agent-mode-explores.png) > [!NOTE] > You will notice that Copilot will perform several tasks, like exploring the project, modifying files, and running tests. It may take a few minutes depending on the complexity of the task and the codebase. During that process, you may notice **Keep** and **Undo** buttons appear in the code editor. When Copilot is finished, you will have a **Keep** or **Undo** for all of the changes, so you do not need to select them while work is in progress. 7. As prompted by Copilot, select **Continue** to run the tests. - ![Screenshot showing a dialog in the Copilot Chat pane asking the user to confirm they are happy to run tests](../_images/ex3-agent-mode-run-tests.png) + ![Screenshot showing a dialog in the Copilot Chat pane asking the user to confirm they are happy to run tests](../../_images/ex3-agent-mode-run-tests.png) 8. You may experience some pauses and even see some tests fail throughout the process. That's okay! Copilot works back and forth between code generation and tests until it completes the task and doesn't detect any errors. - ![Screenshot showing a complete Chat session with Copilot Agent Mode](../_images/ex3-agent-mode-proposed-changes.png) + ![Screenshot showing a complete Chat session with Copilot Agent Mode](../../_images/ex3-agent-mode-proposed-changes.png) 9. Explore the generated code for any potential issues. diff --git a/docs/vscode/3-mcp.md b/docs/real-world-development/vscode/3-mcp.md similarity index 98% rename from docs/vscode/3-mcp.md rename to docs/real-world-development/vscode/3-mcp.md index 2f97efbb..a840380b 100644 --- a/docs/vscode/3-mcp.md +++ b/docs/real-world-development/vscode/3-mcp.md @@ -20,7 +20,7 @@ In this exercise, you will: Agent mode becomes far more powerful when it can reach beyond your editor. Model Context Protocol (MCP) is how Copilot does that — it's a standard way for the agent to talk to external tools and services. -![Diagram showing the inner works of agent mode and how it interacts with context, LLM and tools - including tools contributed by MCP servers and VS Code extensions](../_images/ex1-mcp-diagram.png) +![Diagram showing the inner works of agent mode and how it interacts with context, LLM and tools - including tools contributed by MCP servers and VS Code extensions](../../_images/ex1-mcp-diagram.png) [Model Context Protocol (MCP)](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/) provides AI agents with a way to communicate with external tools and services. By using MCP, AI agents can communicate with external tools and services in real-time. This allows them to access up-to-date information (using resources) and perform actions on your behalf (using tools). @@ -125,7 +125,7 @@ Now that you've confirmed the feature works, you're ready to open a pull request 2. Stage the changes by selecting the **+** icon. 3. Generate a commit message using the **Sparkle** button. - ![Screenshot of the Source Control panel showing the changes made](../_images/ex3-source-control-changes.png) + ![Screenshot of the Source Control panel showing the changes made](../../_images/ex3-source-control-changes.png) 4. Select **Publish** to push the branch to your repository. diff --git a/docs/vscode/4-custom-agents.md b/docs/real-world-development/vscode/4-custom-agents.md similarity index 98% rename from docs/vscode/4-custom-agents.md rename to docs/real-world-development/vscode/4-custom-agents.md index 7a762452..cf8f5e63 100644 --- a/docs/vscode/4-custom-agents.md +++ b/docs/real-world-development/vscode/4-custom-agents.md @@ -66,7 +66,7 @@ VS Code surfaces every custom agent defined in `.github/agents` in the agents dr > Before you start the exercises below, return to your codespace, open the Copilot Chat panel, and select **New Chat** to start a clean conversation. Mode and model selection vary per exercise — each step calls those out where it matters. 1. Select **Agent** from the agents dropdown in the Chat view if it isn't already selected. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 2. Select the agents dropdown at the bottom of the chat view (it shows the active agent — by default, this is **default**). 3. Select **Accessibility agent** from the list of available agents. diff --git a/docs/vscode/5-managing-agents.md b/docs/real-world-development/vscode/5-managing-agents.md similarity index 98% rename from docs/vscode/5-managing-agents.md rename to docs/real-world-development/vscode/5-managing-agents.md index 0af014e6..82e42b3a 100644 --- a/docs/vscode/5-managing-agents.md +++ b/docs/real-world-development/vscode/5-managing-agents.md @@ -5,6 +5,9 @@ authors: lastUpdated: 2026-06-30 --- +| [← Previous lesson: Custom agents][previous-lesson] | +|:--| + When you put GitHub Copilot in agent mode, it works autonomously — exploring your codebase, proposing changes, editing files, and running commands. Because that work is happening on your machine in real time, Copilot Chat in VS Code gives you a running view of every tool call and every file edit as it happens. You can review each diff inline, accept or reject individual changes, and steer the conversation with follow-up prompts to refine or extend the work without leaving your editor. In this exercise, you will: diff --git a/docs/vscode/6-iterating.md b/docs/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/vscode/6-iterating.md rename to docs/real-world-development/vscode/6-iterating.md index edb501d4..67b910af 100644 --- a/docs/vscode/6-iterating.md +++ b/docs/real-world-development/vscode/6-iterating.md @@ -36,7 +36,7 @@ The high-contrast and light-mode toggles you implemented with the accessibility 9. Return to the **Conversation** tab. 10. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 11. Wait for the workflows to complete. All being well, you should see them pass. > [!TIP] diff --git a/docs/vscode/README.md b/docs/real-world-development/vscode/README.md similarity index 98% rename from docs/vscode/README.md rename to docs/real-world-development/vscode/README.md index 911eb0a1..f9df5cd9 100644 --- a/docs/vscode/README.md +++ b/docs/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: vscode +slug: real-world-development/vscode title: "VS Code" authors: - geektrainer diff --git a/docs/vscode/images/.gitkeep b/docs/real-world-development/vscode/images/.gitkeep similarity index 100% rename from docs/vscode/images/.gitkeep rename to docs/real-world-development/vscode/images/.gitkeep diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index d3fc1484..64114cba 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -1,42 +1,33 @@ --- slug: zh-cn -title: "动手实践 GitHub Copilot 智能体" +title: "GitHub Copilot 研讨会" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-16 --- -GitHub Copilot 最近新增的功能为开发人员提供了贯穿整个软件开发生命周期 (SDLC) 的强大工具，包括处理 GitHub 上的议题和拉取请求、与外部服务交互，当然也包括创建代码。本实验将探索这些功能，并通过实际用例和技巧，帮助你充分发挥这些工具的价值。 +根据学习目标和期望的深入程度选择研讨会。**入门体验**提供 GitHub Copilot 引导式介绍，**真实场景开发**则使用完整应用程序和团队待办事项，练习面向生产环境的工作流。 -> [!CAUTION] -> GitHub Copilot 具有概率性而非确定性，因此生成的具体代码、修改的文件等可能有所不同。因此，实验中的屏幕截图和代码片段可能与你的实际体验略有差异。这是正常现象，也是使用此类工具的固有特点。 -> -> 如果内容似乎有误或无法正常运行，请向导师求助！ - -## 选择操作环境 - -无论在哪里工作，都可以使用 GitHub Copilot。请选择符合开发方式的操作环境，并基于共用的 Tailspin Toys 待办事项完成相应练习。每种操作环境都有专属的设置步骤，可以直接开始所选路径。 - -### 🖥️ [VS Code](../vscode/) +## 入门体验 -在 **Visual Studio Code** 和 GitHub Codespaces 中使用 GitHub Copilot。无需离开熟悉的编辑器，即可使用 Copilot Chat 智能体模式、MCP 服务器和自定义智能体。如果希望将 AI 辅助直接融入 IDE，这是理想选择。 +从聚焦的引导式体验开始，无需现有代码库即可了解 GitHub Copilot 产品的主要功能。 -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot app 导览][first-steps-app] -**GitHub Copilot CLI** 是一款在终端中运行的智能体助手。安装后，可以连接 MCP 服务器、使用计划模式生成代码，还能完全通过命令行构建自己的技能、自定义智能体和斜杠命令。 +从空文件夹创建 Space Quiz，将其发布到 GitHub，实现一个议题，完成 Copilot 审查，安排自动化任务，并探索 Canvas 工作流。 -### 🤖 [Copilot App](app/) +## 真实场景开发 -**GitHub Copilot app** 是一款基于 Copilot CLI 构建的桌面应用。它支持并行运行智能体会话、切换会话模式、在画布上协作，以及直接管理 GitHub 议题和拉取请求。其中包括 **Agent Merge**，可引导拉取请求完成变基、处理审查反馈、修复 CI 问题并最终合并。 +使用 Tailspin Toys 应用程序及其待办事项，在真实的软件开发生命周期中练习 GitHub Copilot。选择工作环境，然后规划、构建、测试、审查并交付有意义的更改。 -### ☁️ [Copilot Cloud Agent](../cloud/) +### [浏览真实场景开发研讨会][real-world-development] -**Copilot 云智能体** 是一位异步结对编程伙伴，可在后台处理 GitHub 议题。可以分配工作、通过自定义智能体提供指导、在智能体仪表板中监控进度，并审查它创建的拉取请求。 +可以选择 VS Code、Copilot CLI、GitHub Copilot app 或 Copilot 云智能体。 -## 场景 - -你是 Tailspin Toys 的新开发人员。这是一家虚构公司，为开发人员主题的桌游提供众筹服务，而这可是一个巨大的市场！团队的待办事项已经创建为 GitHub 议题，等待处理。其中既有筛选和分页等功能开发，也有无障碍支持和编码标准等质量改进。你将通过迭代完成这些任务，同时探索网站和 Copilot 的功能。 - -## 开始使用 +> [!CAUTION] +> GitHub Copilot 具有概率性而非确定性，因此具体代码和修改的文件可能与示例不同。出现细微差异属于正常现象。 +> +> 如果在讲师指导的研讨会中遇到无法正常运行的内容，请向导师求助。 -选择上述操作环境即可开始。每种环境都会先引导完成所需设置，让你立即开始构建。 \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[real-world-development]: ../real-world-development/ diff --git a/docs/zh-cn/app/0-prerequisites.md b/docs/zh-cn/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/zh-cn/app/0-prerequisites.md rename to docs/zh-cn/real-world-development/app/0-prerequisites.md index b23c75d0..79cf760f 100644 --- a/docs/zh-cn/app/0-prerequisites.md +++ b/docs/zh-cn/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ GitHub Copilot app 是一款桌面应用，作为 Copilot 和 GitHub 的中央 1. 在新的浏览器窗口中，转到本实验的 GitHub 存储库：`https://github.com/github-samples/tailspin-toys`。 2. 在实验存储库页面选择 **Use this template** 按钮，再选择 **Create a new repository**，创建自己的存储库副本。 - ![展开 Use this template 下拉菜单并选中 Create a new repository](../../_images/app-0-use-template.png) + ![展开 Use this template 下拉菜单并选中 Create a new repository](../../../_images/app-0-use-template.png) 3. 如果在 GitHub 或 Microsoft 主办的活动中参加本研讨会，请遵循导师提供的说明。否则，可在有权使用 GitHub Copilot 的组织中创建新存储库。 - ![Create a new repository 表单，其中 github-samples/tailspin-toys 被设为模板，且已填写存储库名称](../../_images/app-0-create-repository.png) + ![Create a new repository 表单，其中 github-samples/tailspin-toys 被设为模板，且已填写存储库名称](../../../_images/app-0-create-repository.png) 4. 记下所创建的存储库路径 (**organization-or-user-name/repository-name**)，后续实验会用到该路径。 diff --git a/docs/zh-cn/app/1-install-copilot-app.md b/docs/zh-cn/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/zh-cn/app/1-install-copilot-app.md rename to docs/zh-cn/real-world-development/app/1-install-copilot-app.md diff --git a/docs/zh-cn/app/2-add-star-rating.md b/docs/zh-cn/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/zh-cn/app/2-add-star-rating.md rename to docs/zh-cn/real-world-development/app/2-add-star-rating.md index 632d0194..11d6a69e 100644 --- a/docs/zh-cn/app/2-add-star-rating.md +++ b/docs/zh-cn/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Tailspin Toys 中的每款游戏都可以有星级评分，该评分已显示在 2. 选择 **Home screen**。 3. 确保为存储库选择了 `tailspin-toys`。 - ![GitHub Copilot app 提示框，其中存储库选择器设为 tailspin-toys，提示框下方显示模型选择器](../../_images/app-2-start-session.png) + ![GitHub Copilot app 提示框，其中存储库选择器设为 tailspin-toys，提示框下方显示模型选择器](../../../_images/app-2-start-session.png) 4. 使用以下提示词请求更改： @@ -55,7 +55,7 @@ Copilot app 首先创建新的工作树，即项目的隔离副本。随后， 1. 在应用右上角选择 **Toggle review panel**。差异屏幕会打开，显示 Copilot 所做的所有待处理更改。 - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../_images/app-2-review-panel.png) + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../../_images/app-2-review-panel.png) 2. 应会看到核心游戏详情显示文件 `GameCard.astro` 中新增了代码。代码应与以下示例类似：一个小代码块，在评分存在时呈现评分，在 `starRating` 为 `null` 时回退到 "No rating yet"： @@ -80,7 +80,7 @@ Copilot app 首先创建新的工作树，即项目的隔离副本。随后， 1. 在 Copilot app 右侧的审查面板中选择 **Terminal**。如果没有 **Terminal** 按钮，请选择 **+**（标记为 **Open in panel**），再选择 **Terminal**。 - ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../../_images/app-terminal-screenshot.png) 2. 在终端窗口中输入以下命令，启动 Web 应用的开发服务器： diff --git a/docs/zh-cn/app/3-custom-instructions.md b/docs/zh-cn/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/zh-cn/app/3-custom-instructions.md rename to docs/zh-cn/real-world-development/app/3-custom-instructions.md index 5ab57279..4f6a64ff 100644 --- a/docs/zh-cn/app/3-custom-instructions.md +++ b/docs/zh-cn/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ lastUpdated: 2026-07-09 1. 如果审查面板尚不可见，请选择右上角的 **Toggle review panel** 将其打开。 - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../_images/app-2-review-panel.png) + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../../_images/app-2-review-panel.png) 2. 选择 **+**，向审查面板添加新项目。 3. 选择 **File**。 @@ -66,7 +66,7 @@ lastUpdated: 2026-07-09 6. 探索该文件，注意项目的简要说明，以及 **Agent notes**、**Code standards**、**Scripts** 和 **Repository Structure** 等部分。在 **Code standards** 下，注意嵌套的 **GitHub Actions Workflows** 指导。这些内容适用于与 Copilot 的所有交互。 7. 选择 **Show folder view** 打开文件夹导航器。 - ![GitHub Copilot app 审查面板中打开了一个文件，并显示 Show folder view 按钮](../../_images/app-show-folder-view.png) + ![GitHub Copilot app 审查面板中打开了一个文件，并显示 Show folder view 按钮](../../../_images/app-show-folder-view.png) 8. 转到 `.github/instructions` 文件夹并探索其中的文件。注意，其中包含针对 Astro 文件、Drizzle 数据层和测试等内容的指令。 9. 打开 `.github/instructions/unit-tests.instructions.md`。注意顶部的 `applyTo` 字段，它设置了一个相对于存储库根目录的 glob，用于确定指令适用的文件。此处会匹配任何 TypeScript 测试文件，例如匹配 `**/*.test.ts` 的文件。 @@ -87,7 +87,7 @@ lastUpdated: 2026-07-09 2. 选择标题为 **Update our repository coding standards** 的议题，将其打开。 3. 选择右上角的 **New session**，根据该议题启动新会话。 - ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../../_images/app-new-session-from-issue.png) 4. 使用以下提示词，请求 Copilot 更新指令文件以满足议题中记录的要求： @@ -103,7 +103,7 @@ Copilot 会进行更新。 1. 选择右上角的 **Changes**，打开代码更改。 - ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../_images/app-select-changes.png) + ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../../_images/app-select-changes.png) 2. 审查更新后的指令文件，确认其中包含有关向代码添加文档和注释的准则。 diff --git a/docs/zh-cn/app/4-build-filtering.md b/docs/zh-cn/real-world-development/app/4-build-filtering.md similarity index 96% rename from docs/zh-cn/app/4-build-filtering.md rename to docs/zh-cn/real-world-development/app/4-build-filtering.md index 653e19d1..b29c66cd 100644 --- a/docs/zh-cn/app/4-build-filtering.md +++ b/docs/zh-cn/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ lastUpdated: 2026-07-13 2. 选择标题为 **Allow users to filter games by category and publisher** 的议题。 3. 选择右上角的 **New session**。 - ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../../_images/app-new-session-from-issue.png) 4. 选择 Shift+Tab，直到模式显示为 **Plan**。 - ![GitHub Copilot app 提示框，箭头指向设为 Plan 的模式选择器](../../_images/app-4-plan-mode.png) + ![GitHub Copilot app 提示框，箭头指向设为 Plan 的模式选择器](../../../_images/app-4-plan-mode.png) 5. 发送以下提示词。由于会话从筛选议题启动，因此该议题已在会话上下文中： @@ -92,12 +92,12 @@ Copilot 将开始实现。 1. 选择右上角的 **Changes**，打开代码更改。 - ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../_images/app-select-changes.png) + ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../../_images/app-select-changes.png) 2. 审查更改。应会看到新的 TypeScript、Astro 和测试文件。注意，新辅助函数包含 TSDoc 文档注释和文件标头注释。这是第 3 课中合并的文档标准，无需提示便已自动应用。 3. 在 Copilot app 右侧的审查面板中选择 **Terminal**。如果没有 **Terminal** 按钮，请选择 **+**（标记为 **Open in panel**），再选择 **Terminal**。 - ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../../_images/app-terminal-screenshot.png) 4. 在终端窗口中输入以下命令，启动 Web 应用的开发服务器： @@ -138,7 +138,7 @@ description: Run the project's test suites and linter to verify code changes are 1. 如果审查面板尚不可见，请选择右上角的 **Toggle review panel** 将其打开。 - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../_images/app-2-review-panel.png) + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../../_images/app-2-review-panel.png) 2. 选择 **+**，向审查面板添加新项目。 3. 选择 **File**。 diff --git a/docs/zh-cn/app/5-mcp-playwright.md b/docs/zh-cn/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/zh-cn/app/5-mcp-playwright.md rename to docs/zh-cn/real-world-development/app/5-mcp-playwright.md index 5e288516..0cc84c6e 100644 --- a/docs/zh-cn/app/5-mcp-playwright.md +++ b/docs/zh-cn/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ lastUpdated: 2026-07-09 可以在应用设置中添加和管理 MCP 服务器。应用内置了常用服务器目录，只需几个步骤即可添加 [Playwright MCP 服务器][playwright-mcp-server]。 -1. 选择 Ctrl+, 打开 Copilot app 设置页面。 +1. 按 Command+, (Mac) 或 Ctrl+, (Windows/Linux) 打开 Copilot app 设置页面。 2. 选择 **MCP servers**。 3. 在搜索对话框中输入 `Playwright`。 4. 从 **Popular MCP servers** 列表中选择 **Playwright**。 diff --git a/docs/zh-cn/app/6-agent-merge.md b/docs/zh-cn/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/zh-cn/app/6-agent-merge.md rename to docs/zh-cn/real-world-development/app/6-agent-merge.md index 6001d43d..23803809 100644 --- a/docs/zh-cn/app/6-agent-merge.md +++ b/docs/zh-cn/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ lastUpdated: 2026-07-09 2. 在右上角选择 **Create PR** 旁的下拉菜单。 3. 选择 **Agent merge** 以启用 agent merge。 - ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../../_images/app-enable-agent-merge.png) 4. 按钮文本现在会变为 **Agent merge**。 5. 选择 **Agent merge** 按钮，启动 agent merge 流程。 @@ -43,7 +43,7 @@ Copilot app 随即开始创建并管理 PR。它先探索项目以确定创建 P 6. 选择 **Agent merge** 旁的下拉菜单，再选择 **Merge pull request**，允许 agent merge 合并拉取请求。 - ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../../_images/app-agent-merge-merge.png) 7. 所有 CI 流程变为绿色（表示测试通过）后，Copilot 会合并拉取请求。 diff --git a/docs/zh-cn/app/7-canvases.md b/docs/zh-cn/real-world-development/app/7-canvases.md similarity index 97% rename from docs/zh-cn/app/7-canvases.md rename to docs/zh-cn/real-world-development/app/7-canvases.md index 0affd8dd..20439f79 100644 --- a/docs/zh-cn/app/7-canvases.md +++ b/docs/zh-cn/real-world-development/app/7-canvases.md @@ -70,7 +70,7 @@ Copilot 将开始创建画布。 2. Copilot 保存画布文件后，选择右上角 **Create PR** 旁的下拉菜单。 3. 选择 **Agent merge** 以启用 agent merge。 - ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../../_images/app-enable-agent-merge.png) 4. 按钮文本现在会变为 **Agent merge**。 5. 选择 **Agent merge** 按钮，启动 agent merge 流程。 @@ -81,7 +81,7 @@ Copilot app 会开始创建并管理 PR。它先探索项目以确定创建 PR 6. 选择 **Agent merge** 旁的下拉菜单，再选择 **Merge pull request**，允许 agent merge 合并拉取请求。 - ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../../_images/app-agent-merge-merge.png) 7. 等待所有 CI 流程通过（变为绿色）。全部通过后，Copilot 会自动合并拉取请求。 diff --git a/docs/zh-cn/app/8-review.md b/docs/zh-cn/real-world-development/app/8-review.md similarity index 100% rename from docs/zh-cn/app/8-review.md rename to docs/zh-cn/real-world-development/app/8-review.md diff --git a/docs/zh-cn/app/README.md b/docs/zh-cn/real-world-development/app/README.md similarity index 98% rename from docs/zh-cn/app/README.md rename to docs/zh-cn/real-world-development/app/README.md index 106881c3..79dd4a46 100644 --- a/docs/zh-cn/app/README.md +++ b/docs/zh-cn/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/app +slug: zh-cn/real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/zh-cn/cli/0-prerequisites.md b/docs/zh-cn/real-world-development/cli/0-prerequisites.md similarity index 91% rename from docs/zh-cn/cli/0-prerequisites.md rename to docs/zh-cn/real-world-development/cli/0-prerequisites.md index 0bc2d6a8..d674ec37 100644 --- a/docs/zh-cn/cli/0-prerequisites.md +++ b/docs/zh-cn/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ lastUpdated: 2026-06-30 1. 在新的浏览器窗口中，访问本实验的 GitHub 存储库：`https://github.com/github-samples/tailspin-toys`。 2. 在实验存储库页面上，选择 **Use this template** 按钮创建自己的存储库副本。然后选择 **Create a new repository**。 - ![“Use this template”按钮](../../_images/ex0-use-template.png) + ![“Use this template”按钮](../../../_images/ex0-use-template.png) 3. 如果参加的是由 GitHub 或 Microsoft 主办的活动，请按照导师提供的说明操作。否则，可以在已启用 GitHub Copilot 访问权限的组织中创建这个新存储库。 - ![输入存储库模板设置](../../_images/ex0-repository-settings.png) + ![输入存储库模板设置](../../../_images/ex0-repository-settings.png) 4. 记下创建的存储库路径（**organization-or-user-name/repository-name**），后续实验会用到它。 @@ -36,11 +36,11 @@ lastUpdated: 2026-06-30 1. 打开刚创建的存储库。 2. 选择绿色的 **Code** 按钮。 - ![选择 Code 按钮](../../_images/ex0-code-button.png) + ![选择 Code 按钮](../../../_images/ex0-code-button.png) 3. 选择 **Codespaces** 选项卡，再选择 **+** 按钮创建新的 Codespace。 - ![创建新的 codespace](../../_images/ex0-create-codespace.png) + ![创建新的 codespace](../../../_images/ex0-create-codespace.png) codespace 的创建需要几分钟，但仍然比手动安装所有服务快得多。等待期间，可以先了解 GitHub Copilot 的其他功能，接下来就会用到。 diff --git a/docs/zh-cn/cli/1-install-copilot-cli.md b/docs/zh-cn/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/zh-cn/cli/1-install-copilot-cli.md rename to docs/zh-cn/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/zh-cn/cli/2-custom-instructions.md b/docs/zh-cn/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/zh-cn/cli/2-custom-instructions.md rename to docs/zh-cn/real-world-development/cli/2-custom-instructions.md diff --git a/docs/zh-cn/cli/3-generating-code.md b/docs/zh-cn/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/zh-cn/cli/3-generating-code.md rename to docs/zh-cn/real-world-development/cli/3-generating-code.md diff --git a/docs/zh-cn/cli/4-mcp.md b/docs/zh-cn/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/zh-cn/cli/4-mcp.md rename to docs/zh-cn/real-world-development/cli/4-mcp.md diff --git a/docs/zh-cn/cli/5-agent-skills.md b/docs/zh-cn/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/zh-cn/cli/5-agent-skills.md rename to docs/zh-cn/real-world-development/cli/5-agent-skills.md diff --git a/docs/zh-cn/cli/6-custom-agents.md b/docs/zh-cn/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/zh-cn/cli/6-custom-agents.md rename to docs/zh-cn/real-world-development/cli/6-custom-agents.md diff --git a/docs/zh-cn/cli/7-slash-commands.md b/docs/zh-cn/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/zh-cn/cli/7-slash-commands.md rename to docs/zh-cn/real-world-development/cli/7-slash-commands.md index 15262f20..3e9aea7c 100644 --- a/docs/zh-cn/cli/7-slash-commands.md +++ b/docs/zh-cn/real-world-development/cli/7-slash-commands.md @@ -66,7 +66,7 @@ lastUpdated: 2026-06-30 2. 稍等片刻后，Copilot CLI 会生成当前上下文的可视化表示： - ![Copilot CLI 上下文窗口截图](../../_images/cli-7-context-window.png) + ![Copilot CLI 上下文窗口截图](../../../_images/cli-7-context-window.png) 3. 注意显示的模型（可能与图片中不同）以及当前已使用的 token 百分比。其余信息展示了以下内容： diff --git a/docs/zh-cn/cli/8-review.md b/docs/zh-cn/real-world-development/cli/8-review.md similarity index 100% rename from docs/zh-cn/cli/8-review.md rename to docs/zh-cn/real-world-development/cli/8-review.md diff --git a/docs/zh-cn/cli/README.md b/docs/zh-cn/real-world-development/cli/README.md similarity index 98% rename from docs/zh-cn/cli/README.md rename to docs/zh-cn/real-world-development/cli/README.md index 5d6513c4..6a4d4079 100644 --- a/docs/zh-cn/cli/README.md +++ b/docs/zh-cn/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/cli +slug: zh-cn/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/website/astro.config.mjs b/website/astro.config.mjs index 2abc22db..363d0e9c 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -53,58 +53,85 @@ export default defineConfig({ sidebar: [ { label: 'Home', link: '/' }, { - label: 'VS Code', + label: 'First steps', items: [ - { label: 'Overview', link: '/vscode/' }, - { label: '0. Prerequisites', link: '/vscode/0-prerequisites/' }, - { label: '1. Custom instructions', link: '/vscode/1-custom-instructions/' }, - { label: '2. Agent mode', link: '/vscode/2-agent-mode/' }, - { label: '3. Testing with Playwright MCP', link: '/vscode/3-mcp/' }, - { label: '4. Custom agents', link: '/vscode/4-custom-agents/' }, - { label: '5. Managing agents', link: '/vscode/5-managing-agents/' }, - { label: '6. Iterating', link: '/vscode/6-iterating/' }, + { label: 'Overview', link: '/first-steps/' }, + { + label: 'GitHub Copilot app', + items: [ + { label: 'Overview', link: '/first-steps/copilot-app/' }, + { label: '0. Prerequisites and setup', link: '/first-steps/copilot-app/0-prerequisites/' }, + { label: '1. Create the workspace', link: '/first-steps/copilot-app/1-create-workspace/' }, + { label: '2. Build and polish', link: '/first-steps/copilot-app/2-build-and-polish/' }, + { label: '3. Publish the project', link: '/first-steps/copilot-app/3-publish/' }, + { label: '4. Issues and sessions', link: '/first-steps/copilot-app/4-issues-and-sessions/' }, + { label: '5. Complete the review loop', link: '/first-steps/copilot-app/5-review/' }, + { label: '6. Automate issue triage', link: '/first-steps/copilot-app/6-automations/' }, + { label: '7. Explore a Canvas', link: '/first-steps/copilot-app/7-canvas/' }, + { label: '8. Review and next steps', link: '/first-steps/copilot-app/8-review/' }, + ], + }, ], }, { - label: 'Copilot CLI', + label: 'Real-world development', items: [ - { label: 'Overview', link: '/cli/' }, - { label: '0. Prerequisites', link: '/cli/0-prerequisites/' }, - { label: '1. Install Copilot CLI', link: '/cli/1-install-copilot-cli/' }, - { label: '2. Custom instructions', link: '/cli/2-custom-instructions/' }, - { label: '3. Generating code', link: '/cli/3-generating-code/' }, - { label: '4. Testing with Playwright MCP', link: '/cli/4-mcp/' }, - { label: '5. Agent skills', link: '/cli/5-agent-skills/' }, - { label: '6. Custom agents', link: '/cli/6-custom-agents/' }, - { label: '7. Slash commands', link: '/cli/7-slash-commands/' }, - { label: '8. Review', link: '/cli/8-review/' }, - ], - }, - { - label: 'Copilot App', - items: [ - { label: 'Overview', link: '/app/' }, - { label: '0. Prerequisites', link: '/app/0-prerequisites/' }, - { label: '1. Install the Copilot app', link: '/app/1-install-copilot-app/' }, - { label: '2. Running your first agent session', link: '/app/2-add-star-rating/' }, - { label: '3. Guiding Copilot with custom instructions', link: '/app/3-custom-instructions/' }, - { label: '4. Building a feature with Autopilot', link: '/app/4-build-filtering/' }, - { label: '5. Testing with Playwright MCP', link: '/app/5-mcp-playwright/' }, - { label: '6. Merging with Agent Merge', link: '/app/6-agent-merge/' }, - { label: '7. Planning with canvases', link: '/app/7-canvases/' }, - { label: '8. Review', link: '/app/8-review/' }, - ], - }, - { - label: 'Copilot Cloud Agent', - items: [ - { label: 'Overview', link: '/cloud/' }, - { label: '0. Prerequisites', link: '/cloud/0-prerequisites/' }, - { label: '1. Custom instructions', link: '/cloud/1-custom-instructions/' }, - { label: '2. Cloud agent', link: '/cloud/2-cloud-agent/' }, - { label: '3. Custom agents', link: '/cloud/3-custom-agents/' }, - { label: '4. Managing agents', link: '/cloud/4-managing-agents/' }, - { label: '5. Iterating', link: '/cloud/5-iterating/' }, + { label: 'Overview', link: '/real-world-development/' }, + { + label: 'VS Code', + items: [ + { label: 'Overview', link: '/real-world-development/vscode/' }, + { label: '0. Prerequisites', link: '/real-world-development/vscode/0-prerequisites/' }, + { label: '1. Custom instructions', link: '/real-world-development/vscode/1-custom-instructions/' }, + { label: '2. Agent mode', link: '/real-world-development/vscode/2-agent-mode/' }, + { label: '3. Testing with Playwright MCP', link: '/real-world-development/vscode/3-mcp/' }, + { label: '4. Custom agents', link: '/real-world-development/vscode/4-custom-agents/' }, + { label: '5. Managing agents', link: '/real-world-development/vscode/5-managing-agents/' }, + { label: '6. Iterating', link: '/real-world-development/vscode/6-iterating/' }, + ], + }, + { + label: 'Copilot CLI', + items: [ + { label: 'Overview', link: '/real-world-development/cli/' }, + { label: '0. Prerequisites', link: '/real-world-development/cli/0-prerequisites/' }, + { label: '1. Install Copilot CLI', link: '/real-world-development/cli/1-install-copilot-cli/' }, + { label: '2. Custom instructions', link: '/real-world-development/cli/2-custom-instructions/' }, + { label: '3. Generating code', link: '/real-world-development/cli/3-generating-code/' }, + { label: '4. Testing with Playwright MCP', link: '/real-world-development/cli/4-mcp/' }, + { label: '5. Agent skills', link: '/real-world-development/cli/5-agent-skills/' }, + { label: '6. Custom agents', link: '/real-world-development/cli/6-custom-agents/' }, + { label: '7. Slash commands', link: '/real-world-development/cli/7-slash-commands/' }, + { label: '8. Review', link: '/real-world-development/cli/8-review/' }, + ], + }, + { + label: 'Copilot app', + items: [ + { label: 'Overview', link: '/real-world-development/app/' }, + { label: '0. Prerequisites', link: '/real-world-development/app/0-prerequisites/' }, + { label: '1. Install the Copilot app', link: '/real-world-development/app/1-install-copilot-app/' }, + { label: '2. Running your first agent session', link: '/real-world-development/app/2-add-star-rating/' }, + { label: '3. Guiding Copilot with custom instructions', link: '/real-world-development/app/3-custom-instructions/' }, + { label: '4. Building a feature with Autopilot', link: '/real-world-development/app/4-build-filtering/' }, + { label: '5. Testing with Playwright MCP', link: '/real-world-development/app/5-mcp-playwright/' }, + { label: '6. Merging with Agent Merge', link: '/real-world-development/app/6-agent-merge/' }, + { label: '7. Planning with canvases', link: '/real-world-development/app/7-canvases/' }, + { label: '8. Review', link: '/real-world-development/app/8-review/' }, + ], + }, + { + label: 'Copilot cloud agent', + items: [ + { label: 'Overview', link: '/real-world-development/cloud/' }, + { label: '0. Prerequisites', link: '/real-world-development/cloud/0-prerequisites/' }, + { label: '1. Custom instructions', link: '/real-world-development/cloud/1-custom-instructions/' }, + { label: '2. Cloud agent', link: '/real-world-development/cloud/2-cloud-agent/' }, + { label: '3. Custom agents', link: '/real-world-development/cloud/3-custom-agents/' }, + { label: '4. Managing agents', link: '/real-world-development/cloud/4-managing-agents/' }, + { label: '5. Iterating', link: '/real-world-development/cloud/5-iterating/' }, + ], + }, ], }, ],