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 cede46e7..0f72b37c 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, including the optional 8-foundry-agent/ series -│ ├── 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 (app harness and selected VS Code content) +│ ├── first-steps/ ← Guided introductory workshops +│ ├── real-world-development/ ← Scenario workshops organized by environment +│ │ ├── cli/ ← Copilot CLI lessons, including the optional 8-foundry-agent/ series +│ │ ├── vscode/ ← VS Code lessons, including the optional 7-foundry-toolkit/ series +│ │ ├── 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/`). A longer optional exercise can use `N-name/README.md` for its overview and numbered modules inside that folder. Preserve the entry URL with the overview's `slug`, keep the core review as the default next destination, and place the optional sidebar group after it. +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/`). A longer optional exercise can use `N-name/README.md` for its overview and numbered modules inside that folder. Preserve the entry URL with the overview's `slug`, keep the core review as the default next destination, and place the optional sidebar group after it. 2. **Create the file** with frontmatter: ```markdown --- @@ -79,22 +81,23 @@ 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/`). -- Nested lesson overviews follow the same rule: `docs/app/8-foundry-canvas/README.md` → `slug: app/8-foundry-canvas` and `docs/vscode/7-foundry-toolkit/README.md` → `slug: vscode/7-foundry-toolkit`; localized copies use the corresponding `slug: //` path. Numbered modules live beside the overview and retain nested routes. Links between lessons resolve from the published route, while image paths resolve from the Markdown source file. +- `docs////README.md` → `slug: //` (e.g. `slug: es-es/real-world-development/app` → `/es-es/real-world-development/app/`). +- Nested lesson overviews follow the same rule: `docs/real-world-development/app/8-foundry-canvas/README.md` → `slug: real-world-development/app/8-foundry-canvas`; localized copies include the locale prefix. Numbered modules live beside the overview and retain nested routes. Links between lessons resolve from the published route, while image paths resolve from the Markdown source file. 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. ### Optional multi-module series -An optional series can live in a lesson subfolder, such as `docs/cli/8-foundry-agent/`, with a `README.md` overview and numbered module files. The overview uses `slug: cli/8-foundry-agent` to preserve the series entry URL. The sidebar groups its overview and modules under the optional series title, after the core workshop's review lesson. +An optional series can live in a lesson subfolder, such as `docs/real-world-development/cli/8-foundry-agent/`, `docs/real-world-development/vscode/7-foundry-toolkit/`, or `docs/real-world-development/app/8-foundry-canvas/`, with a `README.md` overview and numbered module files. The overview slug matches the complete category, workshop, and series path. The sidebar groups its overview and modules under the optional series title after the core workshop lessons. Each module has its own objectives, story-focused scenario, numbered instructions, completion checkpoint, and next-module handoff. Shared cleanup instructions live on the overview and are linked from every module so learners can stop at any checkpoint. When moving a lesson into a subfolder, adjust image paths and navigation links for the extra directory level, and keep existing localized entry links aligned; missing module translations use the site's English fallback. ### 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) @@ -104,7 +107,7 @@ Each module has its own objectives, story-focused scenario, numbered instruction ### 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 9747d7e7..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 (app harness and selected VS Code content). + - `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 97% rename from docs/es-es/app/7-canvases.md rename to docs/es-es/real-world-development/app/7-canvases.md index 693e1c2b..e3435214 100644 --- a/docs/es-es/app/7-canvases.md +++ b/docs/es-es/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/es-es/app/9-review/ + link: /copilot-workshops/es-es/real-world-development/app/9-review/ label: "Repaso y pasos siguientes" --- @@ -73,7 +73,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. @@ -84,7 +84,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-foundry-canvas/1-project-and-model.md b/docs/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 93% rename from docs/es-es/app/8-foundry-canvas/1-project-and-model.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 9b4908ab..b8d4c76d 100644 --- a/docs/es-es/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/8-foundry-canvas/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/ label: "Opcional: Incorporar Foundry" next: - link: /copilot-workshops/es-es/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Crear e implementar el agente --- @@ -33,7 +33,7 @@ La configuración conecta la aplicación GitHub Copilot con Azure y mantiene uni 3. Instala [Azure Developer CLI][install-azd] y verifica con `azd version` que esté instalada la versión 1.27.1 o posterior. 4. Abre la aplicación GitHub Copilot, abre **Customize** y selecciona **Plugins**. Busca `microsoft-foundry` y selecciona **Install** para el complemento Microsoft Foundry, que incluye Canvas y las habilidades de Foundry. - ![Instalar el complemento Microsoft Foundry](../../../_images/app-8-install-foundry-plugin.png) + ![Instalar el complemento Microsoft Foundry](../../../../_images/app-8-install-foundry-plugin.png) 5. En **Customize**, selecciona **Plugins**, busca `azure` o selecciónalo en la lista **Featured** y, después, selecciona **Install** para el complemento Azure. 6. En la pestaña **My work**, busca y abre la incidencia titulada **Add a Backer Concierge assistant for catalog questions** en el repositorio de Tailspin Toys. Selecciona **New session** para iniciar una sesión vinculada a la incidencia en un worktree nuevo. Conserva este repositorio, esta rama del worktree y esta sesión de la incidencia durante los tres módulos. @@ -57,11 +57,11 @@ El repositorio de ejemplo incluye un script de exportación que proporciona al a npm run db:export ``` - ![Generar la exportación del catálogo](../../../_images/app-8-generate-catalog-export.png) + ![Generar la exportación del catálogo](../../../../_images/app-8-generate-catalog-export.png) 10. Abre `db/catalog.json` y confirma que contiene 21 juegos con título, descripción, categoría, editor y valoración por estrellas. Comprueba el campo `note`: el catálogo no contiene importes recaudados, cifras de patrocinadores, niveles de aportación ni fechas de lanzamiento. Considera también como no disponibles los precios, números de jugadores y duraciones de partida que falten, en lugar de rellenar los huecos con conocimientos externos. Si la exportación falla o es distinta, pide a Copilot que lo investigue y vuelva a ejecutarla antes de continuar. - ![Exportación del catálogo abierta en la aplicación Copilot](../../../_images/app-8-view-catalog.png) + ![Exportación del catálogo abierta en la aplicación Copilot](../../../../_images/app-8-view-catalog.png) ## Configurar un proyecto de Foundry y un modelo @@ -95,7 +95,7 @@ Crear primero el proyecto y la implementación en el chat permite que Canvas se Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Crear un proyecto de Foundry](../../../_images/app-8-foundry-project-created.png) + ![Crear un proyecto de Foundry](../../../../_images/app-8-foundry-project-created.png) 14. Pide a Copilot que recomiende un modelo. Los criterios de aceptación de la incidencia ya están en el contexto porque la sesión se inició desde ella: @@ -105,7 +105,7 @@ Crear primero el proyecto y la implementación en el chat permite que Canvas se 15. Confirma que Copilot carga la habilidad `microsoft-foundry` y elige un modelo disponible según sus ventajas e inconvenientes. La guía de inicio rápido de agentes hospedados de Microsoft Foundry utiliza actualmente `gpt-5.4-mini`, pero la disponibilidad y la cuota varían según la región. - ![Seleccionar un modelo](../../../_images/app-8-select-model.png) + ![Seleccionar un modelo](../../../../_images/app-8-select-model.png) 16. Pide a Copilot que implemente el modelo elegido y revisa el proyecto de destino y el coste antes de aprobarlo: @@ -124,7 +124,7 @@ Esta comprobación verifica el proyecto y el modelo antes de que exista código 18. Abre el menú **More options** en la esquina superior derecha de Canvas y selecciona **Sign in**. 19. Selecciona el proyecto de Foundry **tailspin-toys**. Expande **Models** y confirma que la implementación aparece con el nombre y el estado esperados. - ![Validar el proyecto y el modelo en Canvas](../../../_images/app-8-validate-project-model.png) + ![Validar el proyecto y el modelo en Canvas](../../../../_images/app-8-validate-project-model.png) 20. En la misma sesión, escribe: diff --git a/docs/es-es/app/8-foundry-canvas/2-build-and-deploy.md b/docs/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 95% rename from docs/es-es/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index a2c83233..03912153 100644 --- a/docs/es-es/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar el proyecto y el modelo next: - link: /copilot-workshops/es-es/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: Conectar el agente al sitio --- @@ -49,7 +49,7 @@ Canvas genera el código, la estructura de carpetas y el archivo `azure.yaml` de Canvas envía a Copilot la indicación y el contexto de la suscripción actual y del proyecto de Foundry. Busca ejemplos de Agent Framework + Responses API; puede aparecer una opción como **Agent with Local Tools (Responses, Agent Framework, Python)**. - ![Generar la estructura inicial del agente Backer Concierge en Canvas](../../../_images/app-8-scaffold-backer-concierge.png) + ![Generar la estructura inicial del agente Backer Concierge en Canvas](../../../../_images/app-8-scaffold-backer-concierge.png) 5. Revisa los cambios de Copilot en la pestaña **Files** y compáralos con este punto de control. Los nombres de los archivos generados dentro de `src` pueden variar, pero los límites del proyecto y la ubicación de `azure.yaml` deberían coincidir: @@ -90,7 +90,7 @@ Canvas genera el código, la estructura de carpetas y el archivo `azure.yaml` de Resultado esperado: menciona solo títulos reales del catálogo y utiliza la información correcta de cada título. - ![Recomendación basada en el catálogo en Agent Inspector](../../../_images/app-8-grounded-recommendation.png) + ![Recomendación basada en el catálogo en Agent Inspector](../../../../_images/app-8-grounded-recommendation.png) 10. Prueba una **pregunta trampa para detectar alucinaciones**: @@ -144,7 +144,7 @@ Canvas utiliza `azd` para implementar el agente probado. Foundry empaqueta el c 16. En Canvas, en **Deploy and test**, selecciona **Deploy to Foundry**. Revisa la indicación que inserta en el chat. - ![Indicación Deploy to Foundry en el lienzo](../../../_images/app-8-deploy-to-foundry.png) + ![Indicación Deploy to Foundry en el lienzo](../../../../_images/app-8-deploy-to-foundry.png) 17. Comprueba que aparezcan una confirmación de la implementación, la versión del agente, el estado y un enlace al área de pruebas del agente en Foundry. Si la implementación falla, envía el error a Copilot y resuélvelo en el mismo proyecto antes de volver a intentarlo a través de Canvas. 18. Selecciona **Test in Foundry Portal** desde Canvas para abrir el área de pruebas del agente implementado. Vuelve a ejecutar las seis comprobaciones de aceptación de los pasos 9–14 con esta versión implementada; mantén las dos indicaciones enlazadas en una misma conversación para comprobar la continuidad. Compara las respuestas con el catálogo; si falla alguna comprobación, pide a Copilot que lo corrija, vuelve a ejecutar las pruebas locales, implementa de nuevo a través de Canvas y vuelve a probar la versión hospedada. diff --git a/docs/es-es/app/8-foundry-canvas/3-connect-to-site.md b/docs/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/es-es/app/8-foundry-canvas/3-connect-to-site.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 401c65e8..af5b893c 100644 --- a/docs/es-es/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Crear e implementar el agente next: - link: /copilot-workshops/es-es/app/9-review/ + link: /copilot-workshops/es-es/real-world-development/app/9-review/ label: Repaso y pasos siguientes --- @@ -56,7 +56,7 @@ El proxy es la única parte del código que puede acceder a las credenciales de 7. Inspecciona la respuesta: debería explicar que el catálogo no contiene precios. Confirma que no contiene ningún token de Foundry, credencial, identificador interno de conversación, punto de conexión del proyecto ni traza de la pila. Si no se puede acceder a la función, o la respuesta filtra detalles o inventa precios, envía el fallo sin datos sensibles a Copilot, corrígelo y vuelve a ejecutar las pruebas del proxy antes de continuar. - ![Prueba del proxy local](../../../_images/app-8-local-proxy-test.png) + ![Prueba del proxy local](../../../../_images/app-8-local-proxy-test.png) ## Crear y probar el widget de chat @@ -77,7 +77,7 @@ Con el proxy en ejecución, el widget muestra la conversación en el sitio sin e 11. Revisa el informe y verifica en el navegador el comportamiento que describe, incluido el uso del teclado y la conversación de dos turnos de las [comprobaciones de aceptación del agente hospedado][agent-checks]. Confirma que las solicitudes del navegador pasan por `/api/concierge` con una referencia opaca, no directamente a Foundry, y que las respuestas no exponen credenciales ni identificadores internos de Foundry. Comprueba que las recomendaciones y las respuestas sobre datos ausentes se mantengan dentro de los límites del catálogo. Resuelve las pruebas fallidas con Copilot, reinicia el servicio local afectado si es necesario y vuelve a ejecutar las pruebas. - ![Resultados de las pruebas de extremo a extremo del widget Backer Concierge](../../../_images/app-8-e2e-test-results.png) + ![Resultados de las pruebas de extremo a extremo del widget Backer Concierge](../../../../_images/app-8-e2e-test-results.png) ## Punto de control y pasos siguientes diff --git a/docs/es-es/app/8-foundry-canvas/README.md b/docs/es-es/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/es-es/app/8-foundry-canvas/README.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/README.md index 4888bf7c..ad59478c 100644 --- a/docs/es-es/app/8-foundry-canvas/README.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "Opcional: Incorporar Foundry" -slug: es-es/app/8-foundry-canvas +slug: es-es/real-world-development/app/8-foundry-canvas description: "Crea un Backer Concierge basado en el catálogo con Microsoft Foundry Canvas, con puntos seguros para detenerte durante el recorrido." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/9-review/ + link: /copilot-workshops/es-es/real-world-development/app/9-review/ label: Repaso y pasos siguientes next: - link: /copilot-workshops/es-es/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar el proyecto y el modelo --- diff --git a/docs/es-es/app/9-review.md b/docs/es-es/real-world-development/app/9-review.md similarity index 100% rename from docs/es-es/app/9-review.md rename to docs/es-es/real-world-development/app/9-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 56ea701e..92fd275b 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 0973cdf8..c9bdcbd6 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-foundry-agent/1-project-and-model.md b/docs/es-es/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/es-es/cli/8-foundry-agent/1-project-and-model.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 93e2ea9e..e0561da3 100644 --- a/docs/es-es/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ El agente necesita el catálogo en un archivo que pueda leer. El ejemplo de Tail npm run db:export ``` - ![Resumen de la exportación del catálogo](../../../_images/cli-8-export-db-catalog.png) + ![Resumen de la exportación del catálogo](../../../../_images/cli-8-export-db-catalog.png) 2. Abre `db/catalog.json`. Confirma que contiene 21 juegos con título, descripción, categoría, editorial y valoración por estrellas. Su campo `note` indica que el catálogo no contiene importes totales de financiación, cifras de personas que apoyan los juegos, niveles de aportación ni fechas de lanzamiento. Tampoco tiene campos de precio, número de jugadores o duración de las partidas. Esas omisiones definen el límite que debe respetar el agente. @@ -129,7 +129,7 @@ El agente necesita un proyecto de Foundry y un modelo desplegado. Usarás la hab Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![Creación de un proyecto público de Foundry](../../../_images/cli-8-create-foundry-project.png) + ![Creación de un proyecto público de Foundry](../../../../_images/cli-8-create-foundry-project.png) 2. Cuando el proyecto esté listo, pide a Copilot que recomiende un modelo: @@ -139,7 +139,7 @@ El agente necesita un proyecto de Foundry y un modelo desplegado. Usarás la hab Copilot puede pedirte que selecciones un modelo entre las opciones recomendadas. - ![Selección de un modelo entre las opciones recomendadas](../../../_images/cli-8-select-foundry-model.png) + ![Selección de un modelo entre las opciones recomendadas](../../../../_images/cli-8-select-foundry-model.png) Continuaremos con `gpt-5.4-mini` en los pasos restantes, pero la disponibilidad y la cuota varían según la región. @@ -149,7 +149,7 @@ El agente necesita un proyecto de Foundry y un modelo desplegado. Usarás la hab Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![Despliegue del modelo seleccionado](../../../_images/cli-8-deploy-foundry-model.png) + ![Despliegue del modelo seleccionado](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > La disponibilidad de los modelos cambia con el tiempo. La elección adecuada es un modelo cuya disponibilidad en tu proyecto confirme Copilot, no un modelo fijado en un ejemplo. @@ -198,7 +198,7 @@ Primero, asignarás a la cuenta con la que has iniciado sesión el rol **Foundry Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Respuesta del modelo de Foundry que recomienda un juego real del catálogo e indica que no hay datos de financiación disponibles](../../../_images/cli-8-foundry-agent-response.png) + ![Respuesta del modelo de Foundry que recomienda un juego real del catálogo e indica que no hay datos de financiación disponibles](../../../../_images/cli-8-foundry-agent-response.png) 5. Revisa la respuesta. Debe recomendar únicamente un juego real del catálogo, usar los datos correctos del catálogo y explicar que la información de financiación no está disponible. Si el modelo inventa un título, detalles del juego o un importe total de financiación, compáralo con otro modelo recomendado antes de continuar. diff --git a/docs/es-es/cli/8-foundry-agent/2-build-and-deploy.md b/docs/es-es/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 98% rename from docs/es-es/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index ad11981b..a699ed6f 100644 --- a/docs/es-es/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Ahora pedirás a la habilidad Microsoft Foundry que genere la estructura del age No continúes hasta que las pruebas específicas se superen. - ![Verificación de la estructura generada del agente](../../../_images/cli-8-verify-generated-agent.png) + ![Verificación de la estructura generada del agente](../../../../_images/cli-8-verify-generated-agent.png) ## Prueba el agente en local @@ -113,7 +113,7 @@ Ahora comprobarás, mediante la API Responses local del agente, que sus respuest 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![Pruebas del despliegue del agente hospedado superadas](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![Pruebas del despliegue del agente hospedado superadas](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. Revisa los resultados. Si el agente no puede conectarse, confirma que el segundo terminal sigue ejecutando el servicio. Si falla una prueba, pide a Copilot que corrija solo el defecto local, ejecute las pruebas específicas y te indique cuándo reiniciar `azd ai agent run`. Reinicia el servicio y repite la prueba de aceptación fallida después de cada cambio. @@ -130,7 +130,7 @@ Una vez superadas las pruebas de aceptación locales, puedes desplegar el agente 3. Si se te pide que selecciones el origen de una batería de evaluación, elige **No, set it up later**. - ![Estado del despliegue del agente hospedado y enlace al área de pruebas](../../../_images/cli-8-hosted-agent-deployment.png) + ![Estado del despliegue del agente hospedado y enlace al área de pruebas](../../../../_images/cli-8-hosted-agent-deployment.png) 4. Revisa el estado del despliegue y la respuesta remota. Confirma que el agente está en ejecución y recomienda únicamente juegos reales del catálogo. Si el despliegue o la invocación fallan, pide a Copilot que diagnostique el fallo y repita la prueba remota antes de continuar. diff --git a/docs/es-es/cli/8-foundry-agent/3-connect-to-site.md b/docs/es-es/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 97% rename from docs/es-es/cli/8-foundry-agent/3-connect-to-site.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 8df12ffc..b35fd33a 100644 --- a/docs/es-es/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ La habilidad `microsoft-foundry` se encarga del flujo del agente hospedado, mien For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Configuración del proxy local de Azure Functions](../../../_images/cli-8-azure-functions-proxy.png) + ![Configuración del proxy local de Azure Functions](../../../../_images/cli-8-azure-functions-proxy.png) 2. Abre otro terminal e inicia la función local con el comando que te proporcione Copilot. Deja la función en ejecución. 3. Vuelve a Copilot CLI y pide a Copilot que pruebe el proxy local: @@ -54,7 +54,7 @@ La habilidad `microsoft-foundry` se encarga del flujo del agente hospedado, mien 4. Inspecciona la respuesta. Debe explicar que el catálogo no contiene precios. No debe contener ningún token, credencial, punto de conexión del proyecto ni identificador de conversación sin procesar de Foundry, ni tampoco una traza de la pila. - ![Respuesta JSON sin datos sensibles del punto de conexión local del concierge](../../../_images/cli-8-sanitized-json-response.png) + ![Respuesta JSON sin datos sensibles del punto de conexión local del concierge](../../../../_images/cli-8-sanitized-json-response.png) ## Crea el widget de chat @@ -73,7 +73,7 @@ El proxy ofrece al navegador una forma segura de conectarse al concierge. Ahora Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Captura del widget Backer Concierge en el sitio de Tailspin Toys](../../../_images/cli-8-backer-concierge-widget.png) + ![Captura del widget Backer Concierge en el sitio de Tailspin Toys](../../../../_images/cli-8-backer-concierge-widget.png) 4. Revisa los resultados y las pruebas aportadas. Si alguna comprobación falla, pide a Copilot que corrija el comportamiento correspondiente del proxy o del widget y repita las comprobaciones fallidas antes de terminar. diff --git a/docs/es-es/cli/8-foundry-agent/README.md b/docs/es-es/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/es-es/cli/8-foundry-agent/README.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/README.md index 27342b72..7b27f394 100644 --- a/docs/es-es/cli/8-foundry-agent/README.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/cli/8-foundry-agent +slug: es-es/real-world-development/cli/8-foundry-agent title: "Opcional: incorpora Foundry" description: "Una serie de tres módulos para preparar un modelo, crear y desplegar un agente basado en el catálogo y conectarlo a Tailspin Toys." authors: diff --git a/docs/es-es/cli/9-review.md b/docs/es-es/real-world-development/cli/9-review.md similarity index 100% rename from docs/es-es/cli/9-review.md rename to docs/es-es/real-world-development/cli/9-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 568127ff..35469ce0 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/es-es/vscode/6-iterating.md b/docs/es-es/real-world-development/vscode/6-iterating.md similarity index 99% rename from docs/es-es/vscode/6-iterating.md rename to docs/es-es/real-world-development/vscode/6-iterating.md index b609bd0a..942e9f3f 100644 --- a/docs/es-es/vscode/6-iterating.md +++ b/docs/es-es/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ Los controles de alto contraste y modo claro que has implementado con el agente 9. Vuelve a la pestaña **Conversation**. 10. Si hay flujos de trabajo pendientes de aprobación, selecciona **Approve and run workflows**. - ![Aprobar y ejecutar flujos de trabajo con Approve and run workflows](../../_images/shared-approve-workflows.png) + ![Aprobar y ejecutar flujos de trabajo con Approve and run workflows](../../../_images/shared-approve-workflows.png) 11. Espera a que terminen los flujos de trabajo. Si todo va bien, deberían completarse correctamente. > [!TIP] diff --git a/docs/es-es/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/es-es/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 0be9b826..2fb7573b 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ El proyecto contiene el modelo y, más adelante, el agente hospedado. Al retomar 1. Selecciona **Foundry Toolkit** en la barra de actividades, expande **Help and Feedback** y selecciona **Ask Copilot**. Confirma el modelo que prefieras en la lista desplegable y envía el prompt `/foundrytk-quick-start` generado. - ![Captura de pantalla que muestra la secuencia de inicio rápido de Foundry Toolkit.](../../../_images/vscode-foundry-setup.png) + ![Captura de pantalla que muestra la secuencia de inicio rápido de Foundry Toolkit.](../../../../_images/vscode-foundry-setup.png) 2. En el flujo interactivo, responde a **Where are you starting from?** con **Set up Foundry** y, a continuación, a **What do you have already?** con **I have an Azure subscription or Foundry resources**. 3. Revisa las solicitudes de aprobación de herramientas. Si los comandos propuestos y su alcance son adecuados, selecciona **Allow azmcp …** para esta sesión para reducir las solicitudes de aprobación repetidas. @@ -93,7 +93,7 @@ Aquí importan más el cumplimiento de las reglas y la fundamentación en los da 3. Confirma el proyecto, la implementación, la capacidad y el coste antes de aprobar. Si procede tras revisar el alcance, selecciona **Allow az …** para esta sesión para reducir las solicitudes repetidas. 4. Selecciona **Foundry Toolkit**, expande **My Resources** y selecciona **Models**. Confirma que el modelo implementado aparece en Foundry. La captura de pantalla es un ejemplo; tu región puede ofrecer un modelo diferente. - ![Captura de pantalla que muestra un ejemplo de implementación de modelo en Foundry Toolkit.](../../../_images/vscode-model-deployed.png) + ![Captura de pantalla que muestra un ejemplo de implementación de modelo en Foundry Toolkit.](../../../../_images/vscode-model-deployed.png) ## Probar el modelo implementado diff --git a/docs/es-es/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 95% rename from docs/es-es/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 6bfc2aeb..da9becad 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ El kit de herramientas genera la estructura de código en el repositorio actual 1. Selecciona **Foundry Toolkit**, expande **Developer Tools**, expande **+ Build** y selecciona **+ Create Agent**. En **Create Agent**, selecciona **Code an agent with Copilot**. - ![Captura de pantalla que muestra la página de creación de agentes.](../../../_images/vscode-create-agent.png) + ![Captura de pantalla que muestra la página de creación de agentes.](../../../../_images/vscode-create-agent.png) 2. En el nuevo chat, confirma que se cambia a **AIAgentExpert**. Sustituye el prompt generado por el prompt personalizado y envíalo: @@ -65,7 +65,7 @@ El kit de herramientas genera la estructura de código en el repositorio actual 5. Reutiliza los seis prompts de [Probar el modelo implementado][model-tests]. Comprueba las respuestas con el archivo `db/catalog.json` completo, en lugar de suponer que la clasificación del subconjunto de nueve juegos coincide con la del catálogo completo. 6. Alterna entre **Input & Output**, **Events** y **Tools** para inspeccionar los datos de las solicitudes y respuestas, los eventos de sesión y las llamadas a herramientas. Si el comportamiento incumple los criterios de aceptación, pide a Copilot que lo corrija y vuelve a ejecutar las pruebas específicas y las comprobaciones de Inspector antes de implementar. - ![Captura de pantalla que muestra el flujo de depuración local del agente.](../../../_images/vscode-agent-debug.png) + ![Captura de pantalla que muestra el flujo de depuración local del agente.](../../../../_images/vscode-agent-debug.png) ## Implementar y probar el agente hospedado @@ -77,17 +77,17 @@ La transferencia **Go production** empaqueta el agente existente para Foundry. N /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![Captura de pantalla que muestra las opciones de transferencia del agente AIAgentExpert.](../../../_images/vscode-go-production-handoff.png) + ![Captura de pantalla que muestra las opciones de transferencia del agente AIAgentExpert.](../../../../_images/vscode-go-production-handoff.png) 2. Revisa el chat y el terminal para comprobar los parámetros y las solicitudes de aprobación de comandos. Confirma que la implementación tiene como destino el proyecto `tailspin-toys` existente y revisa los recursos facturables antes de aprobar. 3. Si Copilot ofrece un conjunto de evaluaciones, puedes aceptarlo y completarlo como comprobación adicional. 4. Selecciona **Foundry Toolkit**, expande **My Resources** y selecciona **Agents**. En la pestaña **Agents**, cambia a **Hosted Agent**. - ![Captura de pantalla que muestra el agente hospedado implementado.](../../../_images/vscode-agent-deployed.png) + ![Captura de pantalla que muestra el agente hospedado implementado.](../../../../_images/vscode-agent-deployed.png) 5. Selecciona el nombre del agente y confirma que el estado de implementación es **Running**. Cambia a **Playground** y repite las comprobaciones de fundamentación, datos ausentes, peticiones fuera del catálogo, peticiones vagas y clasificación con el catálogo implementado. - ![Captura de pantalla que muestra una respuesta del agente hospedado implementado.](../../../_images/vscode-agent-response.png) + ![Captura de pantalla que muestra una respuesta del agente hospedado implementado.](../../../../_images/vscode-agent-response.png) 6. Si la implementación o las respuestas fallan, inspecciona con Copilot el estado notificado y los registros, corrige el fallo en el proyecto existente y repite las comprobaciones. No continúes con una implementación sin verificar. diff --git a/docs/es-es/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/es-es/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 7a094df0..1316ad21 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ La interfaz ya tiene un backend verificado. Las pruebas de extremo a extremo com Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Captura de pantalla que muestra el widget de chat Backer Concierge en funcionamiento](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Captura de pantalla que muestra el widget de chat Backer Concierge en funcionamiento](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Mantén la función y el sitio en ejecución y, a continuación, verifica la experiencia completa: diff --git a/docs/es-es/vscode/7-foundry-toolkit/README.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/es-es/vscode/7-foundry-toolkit/README.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/README.md index 847d40cc..8fe9b31a 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/README.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/vscode/7-foundry-toolkit +slug: es-es/real-world-development/vscode/7-foundry-toolkit title: "Opcional: Incorporar Foundry" description: "Crea un Backer Concierge basado en el catálogo con VS Code y Microsoft Foundry Toolkit en tres módulos específicos." authors: diff --git a/docs/es-es/vscode/README.md b/docs/es-es/real-world-development/vscode/README.md similarity index 98% rename from docs/es-es/vscode/README.md rename to docs/es-es/real-world-development/vscode/README.md index 15d8feb0..71398c63 100644 --- a/docs/es-es/vscode/README.md +++ b/docs/es-es/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/vscode +slug: es-es/real-world-development/vscode title: "VS Code" 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 301cbc03..7c79ee18 100644 --- a/docs/ja-jp/app/7-canvases.md +++ b/docs/ja-jp/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/ja-jp/app/9-review/ + link: /copilot-workshops/ja-jp/real-world-development/app/9-review/ label: "振り返りと次のステップ" --- @@ -73,7 +73,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 のプロセスを開始します。 @@ -84,7 +84,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-foundry-canvas/1-project-and-model.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 95% rename from docs/ja-jp/app/8-foundry-canvas/1-project-and-model.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 5400d446..f49234c3 100644 --- a/docs/ja-jp/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/ label: "オプション: Foundry を組み込む" next: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: エージェントを構築してデプロイする --- @@ -33,7 +33,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム 3. [Azure Developer CLI][install-azd] をインストールし、`azd version` でバージョン 1.27.1 以降がインストールされていることを確認します。 4. GitHub Copilot app を開き、**Customize** を開いてから **Plugins** を選択します。`microsoft-foundry` を検索し、Canvas と Foundry スキルを含む Microsoft Foundry プラグインの **Install** を選択します。 - ![Microsoft Foundry プラグインのインストール](../../../_images/app-8-install-foundry-plugin.png) + ![Microsoft Foundry プラグインのインストール](../../../../_images/app-8-install-foundry-plugin.png) 5. **Customize** で **Plugins** を選択し、`azure` を検索するか、**Featured** 一覧から選択します。次に、Azure プラグインの **Install** を選択します。 6. **My work** タブで、Tailspin Toys リポジトリの **Add a Backer Concierge assistant for catalog questions** というタイトルの Issue を探して開きます。**New session** を選択し、新しい worktree で Issue にリンクされたセッションを開始します。3 つのモジュールすべてで、このリポジトリ、worktree ブランチ、Issue セッションを使い続けてください。 @@ -57,11 +57,11 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム npm run db:export ``` - ![カタログのエクスポートの生成](../../../_images/app-8-generate-catalog-export.png) + ![カタログのエクスポートの生成](../../../../_images/app-8-generate-catalog-export.png) 10. `db/catalog.json` を開き、タイトル、説明、カテゴリ、パブリッシャー、星評価を持つ 21 個のゲームが含まれていることを確認します。`note` フィールドも確認してください。カタログには資金調達総額、支援者数、支援プラン、発売日は含まれていません。価格、プレイヤー数、プレイ時間も、記載がなければ外部知識で補わず、情報がないものとして扱います。エクスポートが失敗した場合や内容が異なる場合は、先に進む前に Copilot に調査と再実行を依頼します。 - ![Copilot app で開いたカタログのエクスポート](../../../_images/app-8-view-catalog.png) + ![Copilot app で開いたカタログのエクスポート](../../../../_images/app-8-view-catalog.png) ## Foundry プロジェクトとモデルを設定する @@ -95,7 +95,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Foundry プロジェクトの作成](../../../_images/app-8-foundry-project-created.png) + ![Foundry プロジェクトの作成](../../../../_images/app-8-foundry-project-created.png) 14. Copilot にモデルの推奨を依頼します。Issue からセッションを開始したため、Issue の受け入れ条件はすでにコンテキストに含まれています。 @@ -105,7 +105,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム 15. Copilot が `microsoft-foundry` スキルを読み込んだことを確認し、トレードオフを踏まえて利用可能なモデルを選びます。Microsoft Foundry のホステッド エージェントのクイックスタートでは、現在 `gpt-5.4-mini` を使用していますが、利用可否とクォータはリージョンによって異なります。 - ![モデルの選択](../../../_images/app-8-select-model.png) + ![モデルの選択](../../../../_images/app-8-select-model.png) 16. 選んだモデルのデプロイを Copilot に依頼し、承認前に対象プロジェクトとコストを確認します。 @@ -124,7 +124,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム 18. Canvas の右上隅にある **More options** メニューを開き、**Sign in** を選択します。 19. **tailspin-toys** Foundry プロジェクトを選択します。**Models** を展開し、デプロイが想定どおりの名前とステータスで表示されることを確認します。 - ![Canvas でのプロジェクトとモデルの検証](../../../_images/app-8-validate-project-model.png) + ![Canvas でのプロジェクトとモデルの検証](../../../../_images/app-8-validate-project-model.png) 20. 同じセッションで、次のプロンプトを入力します。 diff --git a/docs/ja-jp/app/8-foundry-canvas/2-build-and-deploy.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 96% rename from docs/ja-jp/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index abf2e34f..30515ea2 100644 --- a/docs/ja-jp/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: プロジェクトとモデルを準備する next: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: エージェントをサイトに接続する --- @@ -49,7 +49,7 @@ Canvas は、Backer Concierge を既存のモデルデプロイに接続する Canvas は、プロンプトと現在のサブスクリプションおよび Foundry プロジェクトのコンテキストを Copilot に送信します。Agent Framework + Responses API のサンプルを探すため、**Agent with Local Tools (Responses, Agent Framework, Python)** などの選択肢が表示される場合があります。 - ![Canvas での Backer Concierge エージェントのひな形作成](../../../_images/app-8-scaffold-backer-concierge.png) + ![Canvas での Backer Concierge エージェントのひな形作成](../../../../_images/app-8-scaffold-backer-concierge.png) 5. **Files** タブで Copilot の変更を確認し、次のチェックポイントと照合します。`src` 内に生成されるファイル名は異なる場合がありますが、プロジェクトの構成範囲と `azure.yaml` の場所は一致するはずです。 @@ -90,7 +90,7 @@ Canvas は、Backer Concierge を既存のモデルデプロイに接続する 期待される結果: カタログに実在するタイトルだけを挙げ、それぞれの正しい情報を使用します。 - ![Agent Inspector でのカタログに基づく推奨](../../../_images/app-8-grounded-recommendation.png) + ![Agent Inspector でのカタログに基づく推奨](../../../../_images/app-8-grounded-recommendation.png) 10. **ハルシネーションを誘う質問**をテストします。 @@ -144,7 +144,7 @@ Canvas は `azd` を使ってテスト済みのエージェントをデプロイ 16. Canvas の **Deploy and test** で **Deploy to Foundry** を選択します。チャットに挿入されるプロンプトを確認します。 - ![Canvas の Deploy to Foundry プロンプト](../../../_images/app-8-deploy-to-foundry.png) + ![Canvas の Deploy to Foundry プロンプト](../../../../_images/app-8-deploy-to-foundry.png) 17. デプロイの完了通知、エージェントのバージョン、ステータス、Foundry のエージェントプレイグラウンドへのリンクを確認します。デプロイが失敗した場合は、エラーを Copilot に送り、同じプロジェクトで解決してから Canvas で再試行します。 18. Canvas で **Test in Foundry Portal** を選択し、デプロイしたエージェントのプレイグラウンドを開きます。このデプロイ済みバージョンに対して、手順 9～14 の 6 つの受け入れチェックをすべて再実行します。継続性を確認する 2 つのプロンプトは、同じ会話で送信してください。応答をカタログと照合し、いずれかのチェックに失敗した場合は、Copilot に修正を依頼してローカルテストを再実行し、Canvas で再デプロイして、ホストされたバージョンを再テストします。 diff --git a/docs/ja-jp/app/8-foundry-canvas/3-connect-to-site.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/ja-jp/app/8-foundry-canvas/3-connect-to-site.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 69bf712e..309e6d67 100644 --- a/docs/ja-jp/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: エージェントを構築してデプロイする next: - link: /copilot-workshops/ja-jp/app/9-review/ + link: /copilot-workshops/ja-jp/real-world-development/app/9-review/ label: 振り返りと次のステップ --- @@ -56,7 +56,7 @@ Azure の資格情報にアクセスできるコードは、プロキシだけ 7. 応答を確認します。カタログに価格が含まれていないことを説明するはずです。Foundry のトークン、資格情報、内部の会話識別子、プロジェクトのエンドポイント、スタックトレースが含まれていないことを確認します。Function に接続できない場合や、応答に内部情報の漏洩や価格の捏造がある場合は、機密情報を除去した失敗の内容を Copilot に送り、修正してプロキシのテストを再実行してから先に進みます。 - ![ローカルプロキシのテスト](../../../_images/app-8-local-proxy-test.png) + ![ローカルプロキシのテスト](../../../../_images/app-8-local-proxy-test.png) ## チャットウィジェットを構築してテストする @@ -77,7 +77,7 @@ Azure の資格情報にアクセスできるコードは、プロキシだけ 11. レポートを確認し、キーボード操作や[ホステッド エージェントの受け入れチェック][agent-checks]の 2 ターンの会話など、報告された動作をブラウザーで検証します。ブラウザーのリクエストが Foundry に直接送られず、不透明なハンドルとともに `/api/concierge` を経由し、応答に資格情報や Foundry の内部識別子が公開されていないことを確認します。推奨や情報不足への回答がカタログの範囲内に収まっていることも確認してください。Copilot とともに失敗したテストに対処し、必要に応じて影響のあるローカルサービスを再起動して、テストを再実行します。 - ![Backer Concierge ウィジェットのエンドツーエンドテスト結果](../../../_images/app-8-e2e-test-results.png) + ![Backer Concierge ウィジェットのエンドツーエンドテスト結果](../../../../_images/app-8-e2e-test-results.png) ## チェックポイントと次のステップ diff --git a/docs/ja-jp/app/8-foundry-canvas/README.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/README.md similarity index 96% rename from docs/ja-jp/app/8-foundry-canvas/README.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/README.md index 184456cd..9bf1ddc0 100644 --- a/docs/ja-jp/app/8-foundry-canvas/README.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "オプション: Foundry を組み込む" -slug: ja-jp/app/8-foundry-canvas +slug: ja-jp/real-world-development/app/8-foundry-canvas description: "Microsoft Foundry Canvas を使ってカタログに基づく Backer Concierge を構築します。各段階で安全に中断できます。" authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/9-review/ + link: /copilot-workshops/ja-jp/real-world-development/app/9-review/ label: 振り返りと次のステップ next: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: プロジェクトとモデルを準備する --- diff --git a/docs/ja-jp/app/9-review.md b/docs/ja-jp/real-world-development/app/9-review.md similarity index 100% rename from docs/ja-jp/app/9-review.md rename to docs/ja-jp/real-world-development/app/9-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 2608dc21..e374588b 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 e8ec62f2..2e0ae2a4 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-foundry-agent/1-project-and-model.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 97% rename from docs/ja-jp/cli/8-foundry-agent/1-project-and-model.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/1-project-and-model.md index bcd7622e..568de7c7 100644 --- a/docs/ja-jp/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ Azure で Backer Concierge をホストし、Copilot CLI の支援を受けな npm run db:export ``` - ![カタログのエクスポート結果の概要](../../../_images/cli-8-export-db-catalog.png) + ![カタログのエクスポート結果の概要](../../../../_images/cli-8-export-db-catalog.png) 2. `db/catalog.json` を開きます。21 個のゲームが含まれ、それぞれにタイトル、説明、カテゴリ、パブリッシャー、星評価があることを確認します。`note` フィールドには、カタログに資金調達総額、支援者数、支援プラン、発売日が含まれないと記載されています。価格、プレイ人数、プレイ時間のフィールドもありません。こうした情報の欠如が、エージェントが守るべき境界を定めます。 @@ -129,7 +129,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![パブリックな Foundry プロジェクトを作成する](../../../_images/cli-8-create-foundry-project.png) + ![パブリックな Foundry プロジェクトを作成する](../../../../_images/cli-8-create-foundry-project.png) 2. プロジェクトの準備ができたら、Copilot にモデルの提案を依頼します。 @@ -139,7 +139,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Copilot から、推奨された選択肢の中からモデルを選ぶよう求められる場合があります。 - ![推奨された選択肢の中からモデルを選択する](../../../_images/cli-8-select-foundry-model.png) + ![推奨された選択肢の中からモデルを選択する](../../../../_images/cli-8-select-foundry-model.png) 以降の手順では `gpt-5.4-mini` を使いますが、提供状況とクォータはリージョンによって異なります。 @@ -149,7 +149,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![選択したモデルをデプロイする](../../../_images/cli-8-deploy-foundry-model.png) + ![選択したモデルをデプロイする](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > モデルの提供状況は変わります。適切なのは、例に固定で指定されたモデルではなく、プロジェクトで利用可能だと Copilot が確認したモデルです。 @@ -198,7 +198,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![カタログに実在するゲームを勧め、資金調達データがないことを伝える Foundry モデルの回答](../../../_images/cli-8-foundry-agent-response.png) + ![カタログに実在するゲームを勧め、資金調達データがないことを伝える Foundry モデルの回答](../../../../_images/cli-8-foundry-agent-response.png) 5. 回答を確認します。カタログに実在するゲームだけを勧め、カタログの正しい詳細を使い、資金調達に関する情報がないことを説明している必要があります。モデルがタイトル、ゲームの詳細、資金調達総額を作り上げた場合は、続行する前に別の推奨モデルと比較してください。 diff --git a/docs/ja-jp/cli/8-foundry-agent/2-build-and-deploy.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 98% rename from docs/ja-jp/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index dc332692..13d0451c 100644 --- a/docs/ja-jp/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Microsoft Foundry Skill に、既存の Tailspin Toys リポジトリ内でホ 対象を絞ったテストがすべて成功するまでは、先に進まないでください。 - ![生成されたエージェントのひな形を検証する](../../../_images/cli-8-verify-generated-agent.png) + ![生成されたエージェントのひな形を検証する](../../../../_images/cli-8-verify-generated-agent.png) ## エージェントをローカルでテストする @@ -113,7 +113,7 @@ Microsoft Foundry Skill に、既存の Tailspin Toys リポジトリ内でホ 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![ホスト型エージェントのデプロイに向けたテストの成功結果](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![ホスト型エージェントのデプロイに向けたテストの成功結果](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. 結果を確認します。エージェントに接続できない場合は、2 つ目のターミナルでサービスがまだ実行中であることを確認します。テストが失敗した場合は、ローカルの不具合だけを修正し、対象を絞ったテストを実行して、`azd ai agent run` の再起動が必要なタイミングを知らせるよう Copilot に依頼します。変更するたびにサービスを再起動し、失敗した受け入れテストを再実行します。 @@ -130,7 +130,7 @@ Microsoft Foundry Skill に、既存の Tailspin Toys リポジトリ内でホ 3. 評価スイートのソースを選ぶよう求められた場合は、**No, set it up later** を選択します。 - ![ホスト型エージェントのデプロイ状況とプレイグラウンドへのリンク](../../../_images/cli-8-hosted-agent-deployment.png) + ![ホスト型エージェントのデプロイ状況とプレイグラウンドへのリンク](../../../../_images/cli-8-hosted-agent-deployment.png) 4. デプロイ状況とリモートからの回答を確認します。エージェントが実行中であり、カタログに実在するゲームだけを勧めていることを確認します。デプロイまたは呼び出しが失敗した場合は、続行する前に、Copilot に原因の診断を依頼してリモート テストを繰り返します。 diff --git a/docs/ja-jp/cli/8-foundry-agent/3-connect-to-site.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 97% rename from docs/ja-jp/cli/8-foundry-agent/3-connect-to-site.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 60ba3160..c203787b 100644 --- a/docs/ja-jp/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ Tailspin Toys は、すべて事前レンダリングされています。ブラ For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions ローカル プロキシのセットアップ](../../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions ローカル プロキシのセットアップ](../../../../_images/cli-8-azure-functions-proxy.png) 2. 別のターミナルを開き、Copilot が提示したコマンドでローカルの Function を起動します。Function は実行したままにします。 3. Copilot CLI に戻り、ローカル プロキシをテストするよう Copilot に依頼します。 @@ -54,7 +54,7 @@ Tailspin Toys は、すべて事前レンダリングされています。ブラ 4. 回答を確認します。カタログには価格が含まれないことを説明している必要があります。Foundry のトークン、資格情報、プロジェクトのエンドポイント、Foundry の会話識別子そのもの、スタック トレースが含まれていてはいけません。 - ![ローカルのコンシェルジュ エンドポイントから返された、機密情報を除去済みの JSON レスポンス](../../../_images/cli-8-sanitized-json-response.png) + ![ローカルのコンシェルジュ エンドポイントから返された、機密情報を除去済みの JSON レスポンス](../../../../_images/cli-8-sanitized-json-response.png) ## チャット ウィジェットを構築する @@ -73,7 +73,7 @@ Tailspin Toys は、すべて事前レンダリングされています。ブラ Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Tailspin Toys サイト内の Backer Concierge ウィジェットのスクリーンショット](../../../_images/cli-8-backer-concierge-widget.png) + ![Tailspin Toys サイト内の Backer Concierge ウィジェットのスクリーンショット](../../../../_images/cli-8-backer-concierge-widget.png) 4. 報告された根拠と照らし合わせて結果を確認します。失敗したチェックがある場合は、関連するプロキシやウィジェットの動作を修正するよう Copilot に依頼し、失敗したチェックを再実行してから終了してください。 diff --git a/docs/ja-jp/cli/8-foundry-agent/README.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/ja-jp/cli/8-foundry-agent/README.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/README.md index 07d0f032..192da0b3 100644 --- a/docs/ja-jp/cli/8-foundry-agent/README.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/cli/8-foundry-agent +slug: ja-jp/real-world-development/cli/8-foundry-agent title: "オプション: Foundry を組み込む" description: "モデルを準備し、カタログに基づくエージェントを構築してデプロイし、Tailspin Toys に接続する全 3 モジュールのシリーズです。" authors: diff --git a/docs/ja-jp/cli/9-review.md b/docs/ja-jp/real-world-development/cli/9-review.md similarity index 100% rename from docs/ja-jp/cli/9-review.md rename to docs/ja-jp/real-world-development/cli/9-review.md diff --git a/docs/ja-jp/cli/README.md b/docs/ja-jp/real-world-development/cli/README.md similarity index 99% rename from docs/ja-jp/cli/README.md rename to docs/ja-jp/real-world-development/cli/README.md index ff02387f..248de5b3 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/ja-jp/vscode/6-iterating.md b/docs/ja-jp/real-world-development/vscode/6-iterating.md similarity index 99% rename from docs/ja-jp/vscode/6-iterating.md rename to docs/ja-jp/real-world-development/vscode/6-iterating.md index 9de22894..b2f82e44 100644 --- a/docs/ja-jp/vscode/6-iterating.md +++ b/docs/ja-jp/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ next: false 9. **Conversation** タブに戻ります。 10. 承認待ちのワークフローがある場合は、**Approve and run workflows** を選択します。 - ![ワークフローの承認と実行を行う Approve and run workflows](../../_images/shared-approve-workflows.png) + ![ワークフローの承認と実行を行う Approve and run workflows](../../../_images/shared-approve-workflows.png) 11. ワークフローの完了を待ちます。問題がなければ、成功したことを確認できるはずです。 > [!TIP] diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/ja-jp/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index c566b01f..de856e26 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ Tailspin の支援者は、信頼できるおすすめを求めています。 1. アクティビティバーで **Foundry Toolkit** を選択し、**Help and Feedback** を展開して **Ask Copilot** を選択します。ドロップダウンで使いたいモデルを確認し、生成された `/foundrytk-quick-start` プロンプトを送信します。 - ![Foundry Toolkit のクイックスタートの流れを示すスクリーンショット。](../../../_images/vscode-foundry-setup.png) + ![Foundry Toolkit のクイックスタートの流れを示すスクリーンショット。](../../../../_images/vscode-foundry-setup.png) 2. 対話式ワークフローで、**Where are you starting from?** には **Set up Foundry**、続く **What do you have already?** には **I have an Azure subscription or Foundry resources** と回答します。 3. ツールの承認内容を確認します。提案されたコマンドとその対象範囲が適切であれば、このセッションで **Allow azmcp …** を選択し、繰り返し表示される承認プロンプトを減らします。 @@ -93,7 +93,7 @@ Tailspin の支援者は、信頼できるおすすめを求めています。 3. 承認する前に、プロジェクト、デプロイ、容量、費用を確認します。対象範囲を確認して適切であれば、このセッションで **Allow az …** を選択し、繰り返し表示されるプロンプトを減らします。 4. **Foundry Toolkit** を選択し、**My Resources** を展開して **Models** を選択します。デプロイ済みモデルが Foundry の下に表示されることを確認します。スクリーンショットは一例です。リージョンによっては別のモデルが提供されます。 - ![Foundry Toolkit でのモデルデプロイの例を示すスクリーンショット。](../../../_images/vscode-model-deployed.png) + ![Foundry Toolkit でのモデルデプロイの例を示すスクリーンショット。](../../../../_images/vscode-model-deployed.png) ## デプロイ済みモデルをテストする diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 95% rename from docs/ja-jp/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 772c3aad..399ac7a5 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ lastUpdated: 2026-09-16 1. **Foundry Toolkit** を選択し、**Developer Tools**、**+ Build** の順に展開して **+ Create Agent** を選択します。**Create Agent** で **Code an agent with Copilot** を選択します。 - ![エージェント作成ページを示すスクリーンショット。](../../../_images/vscode-create-agent.png) + ![エージェント作成ページを示すスクリーンショット。](../../../../_images/vscode-create-agent.png) 2. 新しいチャットで **AIAgentExpert** に切り替わっていることを確認します。生成されたプロンプトを次のカスタマイズ済みプロンプトに置き換え、送信します。 @@ -65,7 +65,7 @@ lastUpdated: 2026-09-16 5. [デプロイ済みモデルをテストする][model-tests]の 6 つのプロンプトをすべて再利用します。9 個のゲームの抜粋での順位がカタログ全体の順位だと思い込まず、`db/catalog.json` 全体に照らして回答を確認します。 6. **Input & Output**、**Events**、**Tools** を切り替え、ペイロード、セッションイベント、ツール呼び出しを調べます。動作が受け入れ基準に反する場合は、Copilot に修正を依頼し、デプロイ前に対象を絞ったテストと Inspector での確認を再実行します。 - ![ローカルでのエージェントのデバッグ手順を示すスクリーンショット。](../../../_images/vscode-agent-debug.png) + ![ローカルでのエージェントのデバッグ手順を示すスクリーンショット。](../../../../_images/vscode-agent-debug.png) ## ホスト型エージェントをデプロイしてテストする @@ -77,17 +77,17 @@ lastUpdated: 2026-09-16 /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![AIAgentExpert エージェントのハンドオフの選択肢を示すスクリーンショット。](../../../_images/vscode-go-production-handoff.png) + ![AIAgentExpert エージェントのハンドオフの選択肢を示すスクリーンショット。](../../../../_images/vscode-go-production-handoff.png) 2. チャットとターミナルでパラメーターとコマンドの承認内容を確認します。デプロイ先が既存の `tailspin-toys` プロジェクトであることを確認し、承認する前に課金対象のリソースを確認します。 3. Copilot が評価スイートを提案した場合は、必要に応じて受け入れ、追加の確認として実行します。 4. **Foundry Toolkit** を選択し、**My Resources** を展開して **Agents** を選択します。**Agents** タブで **Hosted Agent** に切り替えます。 - ![デプロイ済みのホスト型エージェントを示すスクリーンショット。](../../../_images/vscode-agent-deployed.png) + ![デプロイ済みのホスト型エージェントを示すスクリーンショット。](../../../../_images/vscode-agent-deployed.png) 5. エージェント名を選択し、デプロイ状態が **Running** であることを確認します。**Playground** に切り替え、デプロイしたカタログに照らして、根拠に基づく回答、不足しているデータ、カタログ外の情報、曖昧な依頼、順位付けの確認を繰り返します。 - ![デプロイ済みのホスト型エージェントからの回答を示すスクリーンショット。](../../../_images/vscode-agent-response.png) + ![デプロイ済みのホスト型エージェントからの回答を示すスクリーンショット。](../../../../_images/vscode-agent-response.png) 6. デプロイや回答に問題がある場合は、Copilot とともに報告された状態とログを調べ、既存のプロジェクト内で問題を修正して、確認を繰り返します。デプロイの検証が済むまで先に進まないでください。 diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/ja-jp/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 479a2bc0..3f813b3b 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ next: false Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Backer Concierge のチャットウィジェットの動作を示すスクリーンショット](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Backer Concierge のチャットウィジェットの動作を示すスクリーンショット](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Function とサイトを実行したまま、体験全体を検証します。 diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/README.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 99% rename from docs/ja-jp/vscode/7-foundry-toolkit/README.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/README.md index 78134ca4..56e72784 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/README.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/vscode/7-foundry-toolkit +slug: ja-jp/real-world-development/vscode/7-foundry-toolkit title: "省略可能: Foundry を組み込む" description: "VS Code と Microsoft Foundry Toolkit を使い、根拠に基づいて回答する Backer Concierge を 3 つのモジュールで構築します。" authors: diff --git a/docs/ja-jp/vscode/README.md b/docs/ja-jp/real-world-development/vscode/README.md similarity index 98% rename from docs/ja-jp/vscode/README.md rename to docs/ja-jp/real-world-development/vscode/README.md index 8783d480..bed5681a 100644 --- a/docs/ja-jp/vscode/README.md +++ b/docs/ja-jp/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/vscode +slug: ja-jp/real-world-development/vscode title: "VS Code" 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 599052db..2be4dd22 100644 --- a/docs/ko-kr/app/7-canvases.md +++ b/docs/ko-kr/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/ko-kr/app/9-review/ + link: /copilot-workshops/ko-kr/real-world-development/app/9-review/ label: "검토 및 다음 단계" --- @@ -73,7 +73,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 프로세스를 시작합니다. @@ -84,7 +84,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-foundry-canvas/1-project-and-model.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 93% rename from docs/ko-kr/app/8-foundry-canvas/1-project-and-model.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 7ef87d0c..6812143f 100644 --- a/docs/ko-kr/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/ label: "선택 사항: Foundry 통합" next: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 에이전트 빌드 및 배포 --- @@ -33,7 +33,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 3. [Azure Developer CLI][install-azd]를 설치한 다음 `azd version`으로 1.27.1 이상 버전이 설치되었는지 확인합니다. 4. GitHub Copilot app에서 **Customize**를 연 다음 **Plugins**를 선택합니다. `microsoft-foundry`를 검색하고 Canvas와 Foundry 스킬이 포함된 Microsoft Foundry 플러그인의 **Install**을 선택합니다. - ![Microsoft Foundry 플러그인 설치](../../../_images/app-8-install-foundry-plugin.png) + ![Microsoft Foundry 플러그인 설치](../../../../_images/app-8-install-foundry-plugin.png) 5. **Customize**에서 **Plugins**를 선택하고 `azure`를 검색하거나 **Featured** 목록에서 선택한 다음, Azure 플러그인의 **Install**을 선택합니다. 6. **My work** 탭에서 Tailspin Toys 리포지토리의 **Add a Backer Concierge assistant for catalog questions** 이슈를 찾아 엽니다. **New session**을 선택하여 새 워크트리(Worktree)에서 이슈에 연결된 세션을 시작합니다. 세 모듈 모두에서 이 리포지토리, 워크트리 브랜치, 이슈 세션을 유지합니다. @@ -57,11 +57,11 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 npm run db:export ``` - ![카탈로그 내보내기 파일 생성](../../../_images/app-8-generate-catalog-export.png) + ![카탈로그 내보내기 파일 생성](../../../../_images/app-8-generate-catalog-export.png) 10. `db/catalog.json`을 열고 제목, 설명, 카테고리, 퍼블리셔, 별점을 포함한 게임 21개가 있는지 확인합니다. `note` 필드를 확인합니다. 카탈로그에는 펀딩 총액, 후원자 수, 후원 등급, 출시일이 없습니다. 가격, 플레이어 수, 플레이 시간도 누락되어 있다면 외부 지식으로 채우지 말고 제공되지 않는 정보로 취급합니다. 내보내기가 실패하거나 내용이 다르면 계속하기 전에 Copilot에 원인을 조사하고 다시 실행하도록 요청합니다. - ![Copilot app에서 연 카탈로그 내보내기 파일](../../../_images/app-8-view-catalog.png) + ![Copilot app에서 연 카탈로그 내보내기 파일](../../../../_images/app-8-view-catalog.png) ## Foundry 프로젝트와 모델 설정 @@ -95,7 +95,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Foundry 프로젝트 생성](../../../_images/app-8-foundry-project-created.png) + ![Foundry 프로젝트 생성](../../../../_images/app-8-foundry-project-created.png) 14. Copilot에 모델을 추천하도록 요청합니다. 이슈에서 시작한 세션이므로 이슈의 승인 기준이 이미 컨텍스트에 포함되어 있습니다. @@ -105,7 +105,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 15. Copilot이 `microsoft-foundry` 스킬을 로드하는지 확인한 다음, 장단점을 고려하여 사용 가능한 모델을 선택합니다. Microsoft Foundry 호스팅 에이전트 빠른 시작에서는 현재 `gpt-5.4-mini`를 사용하지만, 가용성과 할당량은 지역에 따라 다릅니다. - ![모델 선택](../../../_images/app-8-select-model.png) + ![모델 선택](../../../../_images/app-8-select-model.png) 16. Copilot에 선택한 모델을 배포하도록 요청하고, 승인하기 전에 대상 프로젝트와 비용을 검토합니다. @@ -124,7 +124,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 18. Canvas 오른쪽 위의 **More options** 메뉴를 연 다음 **Sign in**을 선택합니다. 19. **tailspin-toys** Foundry 프로젝트를 선택합니다. **Models**를 펼치고 배포가 예상한 이름과 상태로 표시되는지 확인합니다. - ![Canvas에서 프로젝트와 모델 검증](../../../_images/app-8-validate-project-model.png) + ![Canvas에서 프로젝트와 모델 검증](../../../../_images/app-8-validate-project-model.png) 20. 동일한 세션에 다음 프롬프트를 입력합니다. diff --git a/docs/ko-kr/app/8-foundry-canvas/2-build-and-deploy.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 96% rename from docs/ko-kr/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index 8c14d4e4..14816142 100644 --- a/docs/ko-kr/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 프로젝트와 모델 준비 next: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: 에이전트를 사이트에 연결 --- @@ -49,7 +49,7 @@ Canvas는 Backer Concierge를 기존 모델 배포에 연결하는 코드, 폴 Canvas는 프롬프트와 현재 구독 및 Foundry 프로젝트 컨텍스트를 Copilot에 전달합니다. Agent Framework + Responses API 샘플을 검색하며, **Agent with Local Tools (Responses, Agent Framework, Python)** 같은 선택 항목이 나타날 수 있습니다. - ![Canvas에서 Backer Concierge 에이전트 기본 구조 생성](../../../_images/app-8-scaffold-backer-concierge.png) + ![Canvas에서 Backer Concierge 에이전트 기본 구조 생성](../../../../_images/app-8-scaffold-backer-concierge.png) 5. **Files** 탭에서 다음 체크포인트를 기준으로 Copilot의 변경 내용을 검토합니다. `src` 안에 생성된 파일 이름은 다를 수 있지만 프로젝트 경계와 `azure.yaml` 위치는 일치해야 합니다. @@ -90,7 +90,7 @@ Canvas는 Backer Concierge를 기존 모델 배포에 연결하는 코드, 폴 예상 결과: 카탈로그에 실제로 존재하는 게임만 언급하고 각 게임에 대해 올바른 정보를 사용합니다. - ![Agent Inspector에서 카탈로그에 근거한 추천](../../../_images/app-8-grounded-recommendation.png) + ![Agent Inspector에서 카탈로그에 근거한 추천](../../../../_images/app-8-grounded-recommendation.png) 10. **환각(Hallucination) 유도 질문**을 테스트합니다. @@ -144,7 +144,7 @@ Canvas는 `azd`로 테스트를 마친 에이전트를 배포합니다. Foundry 16. Canvas의 **Deploy and test**에서 **Deploy to Foundry**를 선택합니다. 채팅에 삽입된 프롬프트를 검토합니다. - ![Canvas의 Deploy to Foundry 프롬프트](../../../_images/app-8-deploy-to-foundry.png) + ![Canvas의 Deploy to Foundry 프롬프트](../../../../_images/app-8-deploy-to-foundry.png) 17. 배포 확인 메시지, 에이전트 버전, 상태, Foundry 에이전트 플레이그라운드(Playground) 링크를 확인합니다. 배포에 실패하면 오류를 Copilot에 전달하고 동일한 프로젝트에서 문제를 해결한 다음 Canvas를 통해 다시 시도합니다. 18. Canvas에서 **Test in Foundry Portal**을 선택하여 배포된 에이전트 플레이그라운드를 엽니다. 이 배포 버전에 대해 9~14단계의 승인 검사 여섯 가지를 모두 다시 실행합니다. 연속성을 확인하는 두 프롬프트는 하나의 대화에서 유지합니다. 응답을 카탈로그와 비교합니다. 실패한 검사가 있으면 Copilot에 수정하도록 요청하고 로컬 테스트를 다시 실행한 다음, Canvas로 다시 배포하고 호스팅 버전을 다시 테스트합니다. diff --git a/docs/ko-kr/app/8-foundry-canvas/3-connect-to-site.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/ko-kr/app/8-foundry-canvas/3-connect-to-site.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index e30472f8..47ef4b36 100644 --- a/docs/ko-kr/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 에이전트 빌드 및 배포 next: - link: /copilot-workshops/ko-kr/app/9-review/ + link: /copilot-workshops/ko-kr/real-world-development/app/9-review/ label: 검토 및 다음 단계 --- @@ -56,7 +56,7 @@ Azure 자격 증명에 액세스할 수 있는 코드는 프록시뿐입니다. 7. 응답을 검사합니다. 카탈로그에 가격 정보가 없음을 설명해야 합니다. Foundry 토큰, 자격 증명, 내부 대화 식별자, 프로젝트 엔드포인트, 스택 추적이 포함되어 있지 않은지 확인합니다. Function에 연결할 수 없거나 응답이 세부 정보를 유출하거나 가격을 지어내면, 민감한 정보를 제거한 실패 내용을 Copilot에 전달하고 수정한 다음, 계속하기 전에 프록시 테스트를 다시 실행합니다. - ![로컬 프록시 테스트](../../../_images/app-8-local-proxy-test.png) + ![로컬 프록시 테스트](../../../../_images/app-8-local-proxy-test.png) ## 채팅 위젯 빌드 및 테스트 @@ -77,7 +77,7 @@ Azure 자격 증명에 액세스할 수 있는 코드는 프록시뿐입니다. 11. 보고서를 검토하고 키보드 사용과 [호스팅 에이전트 승인 검사][agent-checks]의 두 턴 대화를 포함하여 보고된 동작을 브라우저에서 검증합니다. 브라우저 요청이 Foundry로 직접 전송되지 않고 불투명한 핸들과 함께 `/api/concierge`를 거치는지, 응답에 자격 증명이나 내부 Foundry 식별자가 노출되지 않는지 확인합니다. 추천과 누락된 정보에 대한 답변이 카탈로그 범위 안에 머무르는지 확인합니다. 실패한 테스트를 Copilot과 함께 해결하고 필요한 경우 영향을 받는 로컬 서비스를 다시 시작한 다음 테스트를 다시 실행합니다. - ![Backer Concierge 위젯의 엔드투엔드 테스트 결과](../../../_images/app-8-e2e-test-results.png) + ![Backer Concierge 위젯의 엔드투엔드 테스트 결과](../../../../_images/app-8-e2e-test-results.png) ## 체크포인트 및 다음 단계 diff --git a/docs/ko-kr/app/8-foundry-canvas/README.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/ko-kr/app/8-foundry-canvas/README.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/README.md index ee90a70b..5d268bdf 100644 --- a/docs/ko-kr/app/8-foundry-canvas/README.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "선택 사항: Foundry 통합" -slug: ko-kr/app/8-foundry-canvas +slug: ko-kr/real-world-development/app/8-foundry-canvas description: "Microsoft Foundry Canvas로 카탈로그에 근거한 Backer Concierge를 구축하고, 각 단계에서 안전하게 작업을 마치는 방법을 알아봅니다." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/9-review/ + link: /copilot-workshops/ko-kr/real-world-development/app/9-review/ label: 검토 및 다음 단계 next: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 프로젝트와 모델 준비 --- diff --git a/docs/ko-kr/app/9-review.md b/docs/ko-kr/real-world-development/app/9-review.md similarity index 100% rename from docs/ko-kr/app/9-review.md rename to docs/ko-kr/real-world-development/app/9-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 f8b5a50a..0e2a00b4 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 377a0f0a..ce75d611 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-foundry-agent/1-project-and-model.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/ko-kr/cli/8-foundry-agent/1-project-and-model.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 04107bd3..99e9459e 100644 --- a/docs/ko-kr/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ Azure를 사용해 Backer Concierge를 호스팅하고 Copilot CLI로 작업을 npm run db:export ``` - ![카탈로그 내보내기 요약](../../../_images/cli-8-export-db-catalog.png) + ![카탈로그 내보내기 요약](../../../../_images/cli-8-export-db-catalog.png) 2. `db/catalog.json`을 엽니다. 제목, 설명, 카테고리, 퍼블리셔, 별점이 있는 게임 21개가 포함되어 있는지 확인합니다. `note` 필드에는 카탈로그에 총 모금액, 후원자 수, 후원 등급, 출시일이 없다고 명시되어 있습니다. 가격, 플레이어 수, 플레이 시간 필드도 없습니다. 이러한 누락 항목이 에이전트가 지켜야 할 정보의 경계를 정의합니다. @@ -129,7 +129,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![공개 Foundry 프로젝트 생성하기](../../../_images/cli-8-create-foundry-project.png) + ![공개 Foundry 프로젝트 생성하기](../../../../_images/cli-8-create-foundry-project.png) 2. 프로젝트가 준비되면 Copilot에 모델 추천을 요청합니다. @@ -139,7 +139,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Copilot이 추천 옵션 중에서 모델을 선택하도록 요청할 수 있습니다. - ![추천 옵션 중에서 모델 선택하기](../../../_images/cli-8-select-foundry-model.png) + ![추천 옵션 중에서 모델 선택하기](../../../../_images/cli-8-select-foundry-model.png) 나머지 단계에서는 `gpt-5.4-mini`를 사용하지만, 가용성과 할당량은 지역에 따라 다릅니다. @@ -149,7 +149,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![선택한 모델 배포하기](../../../_images/cli-8-deploy-foundry-model.png) + ![선택한 모델 배포하기](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > 모델 가용성은 시간이 지남에 따라 달라집니다. 예제에 하드코딩된 모델이 아니라, Copilot이 프로젝트에서 사용할 수 있다고 확인한 모델을 선택하는 것이 올바른 방법입니다. @@ -198,7 +198,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![실제 카탈로그 게임을 추천하고 모금 데이터가 없다고 안내하는 Foundry 모델 응답](../../../_images/cli-8-foundry-agent-response.png) + ![실제 카탈로그 게임을 추천하고 모금 데이터가 없다고 안내하는 Foundry 모델 응답](../../../../_images/cli-8-foundry-agent-response.png) 5. 응답을 검토합니다. 카탈로그에 실제로 있는 게임만 추천하고, 올바른 카탈로그 정보를 사용하며, 모금 정보를 확인할 수 없다고 설명해야 합니다. 모델이 제목, 게임 정보, 총 모금액을 지어낸다면 계속 진행하기 전에 다른 추천 모델과 비교합니다. diff --git a/docs/ko-kr/cli/8-foundry-agent/2-build-and-deploy.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 98% rename from docs/ko-kr/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index 94074d34..a2427931 100644 --- a/docs/ko-kr/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Tailspin Toys에는 모델의 일회성 답변 이상이 필요합니다. 후원 해당 테스트를 통과하기 전에는 다음으로 진행하지 않습니다. - ![에이전트 스캐폴딩 검증하기](../../../_images/cli-8-verify-generated-agent.png) + ![에이전트 스캐폴딩 검증하기](../../../../_images/cli-8-verify-generated-agent.png) ## 에이전트 로컬 테스트하기 @@ -113,7 +113,7 @@ Tailspin Toys에는 모델의 일회성 답변 이상이 필요합니다. 후원 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![호스트된 에이전트 배포 테스트 통과](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![호스트된 에이전트 배포 테스트 통과](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. 결과를 검토합니다. 에이전트에 연결할 수 없다면 두 번째 터미널에서 서비스가 계속 실행 중인지 확인합니다. 테스트가 실패하면 Copilot에 로컬 결함만 수정하고, 관련 기능에 집중한 테스트를 실행한 뒤 `azd ai agent run`을 언제 다시 시작해야 하는지 알려 달라고 요청합니다. 변경할 때마다 서비스를 다시 시작하고 실패한 인수 테스트(Acceptance test)를 다시 실행합니다. @@ -130,7 +130,7 @@ Tailspin Toys에는 모델의 일회성 답변 이상이 필요합니다. 후원 3. 평가 모음 소스를 선택하라는 메시지가 표시되면 **No, set it up later**를 선택합니다. - ![호스트된 에이전트 배포 상태와 플레이그라운드 링크](../../../_images/cli-8-hosted-agent-deployment.png) + ![호스트된 에이전트 배포 상태와 플레이그라운드 링크](../../../../_images/cli-8-hosted-agent-deployment.png) 4. 배포 상태와 원격 응답을 검토합니다. 에이전트가 실행 중이고 실제 카탈로그 게임만 추천하는지 확인합니다. 배포나 호출이 실패하면 계속 진행하기 전에 Copilot에 실패 원인을 진단하고 원격 테스트를 반복하도록 요청합니다. diff --git a/docs/ko-kr/cli/8-foundry-agent/3-connect-to-site.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 96% rename from docs/ko-kr/cli/8-foundry-agent/3-connect-to-site.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 680be62b..cb8dbee3 100644 --- a/docs/ko-kr/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ Tailspin Toys는 전체를 사전 렌더링합니다. 브라우저 코드는 호 For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions 로컬 프록시 설정](../../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions 로컬 프록시 설정](../../../../_images/cli-8-azure-functions-proxy.png) 2. 다른 터미널을 열고 Copilot이 제공한 명령으로 로컬 Function을 시작합니다. Function을 실행 상태로 둡니다. 3. Copilot CLI로 돌아가 로컬 프록시 테스트를 요청합니다. @@ -54,7 +54,7 @@ Tailspin Toys는 전체를 사전 렌더링합니다. 브라우저 코드는 호 4. 응답을 살펴봅니다. 카탈로그에 가격 정보가 없다고 설명해야 합니다. Foundry 토큰, 자격 증명, 프로젝트 엔드포인트, 원본 Foundry 대화 식별자, 스택 추적이 포함되어서는 안 됩니다. - ![로컬 컨시어지 엔드포인트에서 받은 민감 정보를 제거한 JSON 응답](../../../_images/cli-8-sanitized-json-response.png) + ![로컬 컨시어지 엔드포인트에서 받은 민감 정보를 제거한 JSON 응답](../../../../_images/cli-8-sanitized-json-response.png) ## 채팅 위젯 빌드하기 @@ -73,7 +73,7 @@ Tailspin Toys는 전체를 사전 렌더링합니다. 브라우저 코드는 호 Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Tailspin Toys 사이트의 Backer Concierge 위젯 화면](../../../_images/cli-8-backer-concierge-widget.png) + ![Tailspin Toys 사이트의 Backer Concierge 위젯 화면](../../../../_images/cli-8-backer-concierge-widget.png) 4. 보고된 증거와 결과를 대조해 검토합니다. 실패한 검사가 있다면 마무리하기 전에 Copilot에 해당 프록시나 위젯 동작을 수정하고 실패한 검사를 다시 실행하도록 요청합니다. diff --git a/docs/ko-kr/cli/8-foundry-agent/README.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/ko-kr/cli/8-foundry-agent/README.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/README.md index dabcd467..330e65df 100644 --- a/docs/ko-kr/cli/8-foundry-agent/README.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/cli/8-foundry-agent +slug: ko-kr/real-world-development/cli/8-foundry-agent title: "선택 사항: Foundry 통합하기" description: "모델을 준비하고, 카탈로그에 근거한 에이전트를 빌드 및 배포한 뒤 Tailspin Toys에 연결하는 3개 모듈 시리즈입니다." authors: diff --git a/docs/ko-kr/cli/9-review.md b/docs/ko-kr/real-world-development/cli/9-review.md similarity index 100% rename from docs/ko-kr/cli/9-review.md rename to docs/ko-kr/real-world-development/cli/9-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 d054b04a..198ff574 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/ko-kr/vscode/6-iterating.md b/docs/ko-kr/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/ko-kr/vscode/6-iterating.md rename to docs/ko-kr/real-world-development/vscode/6-iterating.md index c05c9a7e..2fc8d5f5 100644 --- a/docs/ko-kr/vscode/6-iterating.md +++ b/docs/ko-kr/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ next: false 9. **Conversation** 탭으로 돌아갑니다. 10. 승인을 기다리는 워크플로가 있다면 **Approve and run workflows**를 선택합니다. - ![워크플로 승인 및 실행](../../_images/shared-approve-workflows.png) + ![워크플로 승인 및 실행](../../../_images/shared-approve-workflows.png) 11. 워크플로가 완료될 때까지 기다립니다. 문제가 없다면 통과한 결과가 표시됩니다. > [!TIP] diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 99% rename from docs/ko-kr/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 18073680..b4f8d9de 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ Tailspin 후원자는 신뢰할 수 있는 추천을 원합니다. 퍼즐 게임 1. 작업 표시줄에서 **Foundry Toolkit**을 선택하고 **Help and Feedback**을 펼친 뒤 **Ask Copilot**을 선택합니다. 드롭다운에서 원하는 모델을 확인하고 생성된 `/foundrytk-quick-start` 프롬프트를 보냅니다. - ![Foundry Toolkit 빠른 시작 순서를 보여 주는 스크린샷.](../../../_images/vscode-foundry-setup.png) + ![Foundry Toolkit 빠른 시작 순서를 보여 주는 스크린샷.](../../../../_images/vscode-foundry-setup.png) 2. 대화형 워크플로에서 **Where are you starting from?**에 **Set up Foundry**로 답한 뒤 **What do you have already?**에 **I have an Azure subscription or Foundry resources**로 답합니다. 3. 도구 승인 요청을 검토합니다. 제안한 명령과 범위가 적절하다면 이 세션에 대해 **Allow azmcp …**를 선택하여 반복되는 승인 요청을 줄입니다. @@ -93,7 +93,7 @@ Tailspin 후원자는 신뢰할 수 있는 추천을 원합니다. 퍼즐 게임 3. 승인하기 전에 프로젝트, 배포, 용량, 비용을 확인합니다. 범위를 검토한 결과 적절하다면 이 세션에 대해 **Allow az …**를 선택하여 반복되는 요청을 줄입니다. 4. **Foundry Toolkit**을 선택하고 **My Resources**를 펼친 뒤 **Models**를 선택합니다. 배포한 모델이 Foundry 아래에 나타나는지 확인합니다. 스크린샷은 예시이며 지역에 따라 다른 모델을 제공할 수 있습니다. - ![Foundry Toolkit의 모델 배포 예시를 보여 주는 스크린샷.](../../../_images/vscode-model-deployed.png) + ![Foundry Toolkit의 모델 배포 예시를 보여 주는 스크린샷.](../../../../_images/vscode-model-deployed.png) ## 배포한 모델 테스트 diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 96% rename from docs/ko-kr/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index e686042d..3713c0ce 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ lastUpdated: 2026-09-16 1. **Foundry Toolkit**을 선택하고 **Developer Tools**, **+ Build**를 차례로 펼친 뒤 **+ Create Agent**를 선택합니다. **Create Agent**에서 **Code an agent with Copilot**을 선택합니다. - ![에이전트 생성 페이지를 보여 주는 스크린샷.](../../../_images/vscode-create-agent.png) + ![에이전트 생성 페이지를 보여 주는 스크린샷.](../../../../_images/vscode-create-agent.png) 2. 새 채팅이 **AIAgentExpert**로 전환되는지 확인합니다. 생성된 프롬프트를 다음의 사용자 지정 프롬프트로 바꾸고 전송합니다. @@ -65,7 +65,7 @@ lastUpdated: 2026-09-16 5. [배포한 모델 테스트][model-tests]의 프롬프트 여섯 개를 모두 재사용합니다. 게임 9개로 구성된 하위 집합의 순위가 전체 카탈로그 순위와 같다고 가정하지 말고 전체 `db/catalog.json`을 기준으로 답변을 점검합니다. 6. **Input & Output**, **Events**, **Tools** 사이를 전환하여 페이로드(Payload), 세션 이벤트, 도구 호출을 살펴봅니다. 수락 기준을 위반하는 동작이 있다면 Copilot에 수정을 요청하고 배포하기 전에 관련 테스트와 Inspector 점검을 다시 실행합니다. - ![로컬 에이전트 디버깅 워크플로를 보여 주는 스크린샷.](../../../_images/vscode-agent-debug.png) + ![로컬 에이전트 디버깅 워크플로를 보여 주는 스크린샷.](../../../../_images/vscode-agent-debug.png) ## 호스팅 에이전트 배포 및 테스트 @@ -77,17 +77,17 @@ lastUpdated: 2026-09-16 /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![AIAgentExpert 에이전트의 핸드오프 옵션을 보여 주는 스크린샷.](../../../_images/vscode-go-production-handoff.png) + ![AIAgentExpert 에이전트의 핸드오프 옵션을 보여 주는 스크린샷.](../../../../_images/vscode-go-production-handoff.png) 2. 채팅과 터미널에서 매개 변수와 명령 승인 요청을 검토합니다. 배포 대상이 기존 `tailspin-toys` 프로젝트인지 확인하고 승인하기 전에 유료 리소스를 검토합니다. 3. Copilot이 평가 테스트 모음을 제안하면 추가 점검으로 수락하여 진행할 수 있습니다. 4. **Foundry Toolkit**을 선택하고 **My Resources**를 펼친 뒤 **Agents**를 선택합니다. **Agents** 탭에서 **Hosted Agent**로 전환합니다. - ![배포한 호스팅 에이전트를 보여 주는 스크린샷.](../../../_images/vscode-agent-deployed.png) + ![배포한 호스팅 에이전트를 보여 주는 스크린샷.](../../../../_images/vscode-agent-deployed.png) 5. 에이전트 이름을 선택하고 배포 상태가 **Running**인지 확인합니다. **Playground**로 전환하고 배포된 카탈로그를 기준으로 그라운딩(Grounding), 누락된 정보, 카탈로그 외부 항목, 모호한 요청, 순위 점검을 반복합니다. - ![배포한 호스팅 에이전트의 답변을 보여 주는 스크린샷.](../../../_images/vscode-agent-response.png) + ![배포한 호스팅 에이전트의 답변을 보여 주는 스크린샷.](../../../../_images/vscode-agent-response.png) 6. 배포나 답변에 문제가 있다면 Copilot과 함께 보고된 상태 및 로그를 살펴보고, 기존 프로젝트에서 문제를 수정한 뒤 점검을 반복합니다. 배포를 검증하지 않은 채로 계속하지 않습니다. diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/ko-kr/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 492b5b3b..2de4cd1c 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ next: false Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Backer Concierge 채팅 위젯이 동작하는 모습을 보여 주는 스크린샷](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Backer Concierge 채팅 위젯이 동작하는 모습을 보여 주는 스크린샷](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Function과 사이트를 계속 실행한 상태에서 전체 사용자 경험을 검증합니다. diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/README.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/ko-kr/vscode/7-foundry-toolkit/README.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/README.md index 44cb8bfb..397eb121 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/README.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/vscode/7-foundry-toolkit +slug: ko-kr/real-world-development/vscode/7-foundry-toolkit title: "선택 사항: Foundry 통합" description: "VS Code와 Microsoft Foundry Toolkit으로 세 가지 집중 모듈에 걸쳐 카탈로그에 근거한 Backer Concierge를 만듭니다." authors: diff --git a/docs/ko-kr/vscode/README.md b/docs/ko-kr/real-world-development/vscode/README.md similarity index 98% rename from docs/ko-kr/vscode/README.md rename to docs/ko-kr/real-world-development/vscode/README.md index 73c6407e..b95584bc 100644 --- a/docs/ko-kr/vscode/README.md +++ b/docs/ko-kr/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/vscode +slug: ko-kr/real-world-development/vscode title: "VS Code" 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 96% rename from docs/pt-br/app/7-canvases.md rename to docs/pt-br/real-world-development/app/7-canvases.md index 2e5371e5..caf3c7f0 100644 --- a/docs/pt-br/app/7-canvases.md +++ b/docs/pt-br/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/pt-br/app/9-review/ + link: /copilot-workshops/pt-br/real-world-development/app/9-review/ label: "Revisão e próximos passos" --- @@ -73,7 +73,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. @@ -84,7 +84,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-foundry-canvas/1-project-and-model.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 93% rename from docs/pt-br/app/8-foundry-canvas/1-project-and-model.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 12554caf..4465e733 100644 --- a/docs/pt-br/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/ label: "Opcional: Incorporar o Foundry" next: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Criar e implantar o agente --- @@ -33,7 +33,7 @@ A configuração conecta o aplicativo GitHub Copilot ao Azure e mantém todo o t 3. Instale a [Azure Developer CLI][install-azd] e use `azd version` para verificar se a versão instalada é a 1.27.1 ou posterior. 4. Abra o aplicativo GitHub Copilot, abra **Customize** e selecione **Plugins**. Pesquise por `microsoft-foundry` e selecione **Install** para o plugin Microsoft Foundry, que inclui o Canvas e as skills do Foundry. - ![Instalar o plugin Microsoft Foundry](../../../_images/app-8-install-foundry-plugin.png) + ![Instalar o plugin Microsoft Foundry](../../../../_images/app-8-install-foundry-plugin.png) 5. Em **Customize**, selecione **Plugins**, pesquise por `azure` ou selecione-o na lista **Featured** e selecione **Install** para o plugin Azure. 6. Na aba **My work**, encontre e abra a issue intitulada **Add a Backer Concierge assistant for catalog questions** no repositório Tailspin Toys. Selecione **New session** para iniciar uma sessão vinculada à issue em um novo worktree. Mantenha este repositório, branch do worktree e sessão da issue nos três módulos. @@ -57,11 +57,11 @@ O repositório de exemplo inclui um script de exportação que fornece ao agente npm run db:export ``` - ![Gerar a exportação do catálogo](../../../_images/app-8-generate-catalog-export.png) + ![Gerar a exportação do catálogo](../../../../_images/app-8-generate-catalog-export.png) 10. Abra `db/catalog.json` e confirme que ele contém 21 jogos com título, descrição, categoria, editora e avaliação por estrelas. Verifique o campo `note`: o catálogo não contém totais arrecadados, números de apoiadores, faixas de contribuição nem datas de lançamento. Considere também como indisponíveis os preços, números de jogadores e durações de partidas ausentes, em vez de preencher as lacunas com conhecimento externo. Se a exportação falhar ou apresentar diferenças, peça ao Copilot que investigue e execute-a novamente antes de continuar. - ![Exportação do catálogo aberta no aplicativo Copilot](../../../_images/app-8-view-catalog.png) + ![Exportação do catálogo aberta no aplicativo Copilot](../../../../_images/app-8-view-catalog.png) ## Configurar um projeto e um modelo do Foundry @@ -95,7 +95,7 @@ Criar primeiro o projeto e a implantação no chat garante que o Canvas se conec Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Criar o projeto do Foundry](../../../_images/app-8-foundry-project-created.png) + ![Criar o projeto do Foundry](../../../../_images/app-8-foundry-project-created.png) 14. Peça ao Copilot que recomende um modelo. Os critérios de aceitação da issue já estão no contexto porque a sessão foi iniciada a partir da issue: @@ -105,7 +105,7 @@ Criar primeiro o projeto e a implantação no chat garante que o Canvas se conec 15. Confirme que o Copilot carrega a skill `microsoft-foundry` e escolha um modelo disponível com base nas vantagens e limitações de cada opção. O guia de início rápido de agentes hospedados do Microsoft Foundry usa atualmente `gpt-5.4-mini`, mas a disponibilidade e a cota variam de acordo com a região. - ![Selecionar o modelo](../../../_images/app-8-select-model.png) + ![Selecionar o modelo](../../../../_images/app-8-select-model.png) 16. Peça ao Copilot que implante sua seleção, revisando o projeto de destino e o custo antes de aprovar: @@ -124,7 +124,7 @@ Esta verificação valida o projeto e o modelo antes de existir qualquer código 18. Abra o menu **More options** no canto superior direito do Canvas e selecione **Sign in**. 19. Selecione o projeto **tailspin-toys** do Foundry. Expanda **Models** e confirme que a implantação aparece com o nome e o status esperados. - ![Validar o projeto e o modelo no Canvas](../../../_images/app-8-validate-project-model.png) + ![Validar o projeto e o modelo no Canvas](../../../../_images/app-8-validate-project-model.png) 20. Na mesma sessão, insira: diff --git a/docs/pt-br/app/8-foundry-canvas/2-build-and-deploy.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 95% rename from docs/pt-br/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index 0d8d0a23..27f9a4c6 100644 --- a/docs/pt-br/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar o projeto e o modelo next: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: Conectar o agente ao site --- @@ -49,7 +49,7 @@ O Canvas gera o código, a estrutura de pastas e o `azure.yaml` na raiz que cone O Canvas envia ao Copilot o prompt e o contexto da assinatura atual e do projeto do Foundry. Ele procura exemplos de Agent Framework + Responses API; pode aparecer uma opção como **Agent with Local Tools (Responses, Agent Framework, Python)**. - ![Gerar a estrutura inicial do agente Backer Concierge no Canvas](../../../_images/app-8-scaffold-backer-concierge.png) + ![Gerar a estrutura inicial do agente Backer Concierge no Canvas](../../../../_images/app-8-scaffold-backer-concierge.png) 5. Revise as alterações do Copilot na aba **Files** com base neste ponto de verificação. Os nomes dos arquivos gerados dentro de `src` podem variar, mas os limites do projeto e a localização de `azure.yaml` devem corresponder ao seguinte: @@ -90,7 +90,7 @@ O Canvas gera o código, a estrutura de pastas e o `azure.yaml` na raiz que cone Resultado esperado: menciona somente títulos reais do catálogo e usa as informações corretas para cada título. - ![Recomendação fundamentada no catálogo no Agent Inspector](../../../_images/app-8-grounded-recommendation.png) + ![Recomendação fundamentada no catálogo no Agent Inspector](../../../../_images/app-8-grounded-recommendation.png) 10. Teste uma **armadilha de alucinação**: @@ -144,7 +144,7 @@ O Canvas usa `azd` para implantar o agente testado. O Foundry empacota o código 16. No Canvas, em **Deploy and test**, selecione **Deploy to Foundry**. Revise o prompt que ele insere no chat. - ![Prompt Deploy to Foundry no Canvas](../../../_images/app-8-deploy-to-foundry.png) + ![Prompt Deploy to Foundry no Canvas](../../../../_images/app-8-deploy-to-foundry.png) 17. Verifique se há uma confirmação de implantação, a versão do agente, o status e um link para o playground do agente no Foundry. Se a implantação falhar, envie o erro ao Copilot e resolva-o no mesmo projeto antes de tentar novamente pelo Canvas. 18. Selecione **Test in Foundry Portal** no Canvas para abrir o playground do agente implantado. Execute novamente todas as seis verificações de aceitação das etapas 9–14 nesta versão implantada, mantendo o par de prompts em uma única conversa para testar a continuidade. Compare as respostas com o catálogo; se alguma verificação falhar, peça ao Copilot que corrija o problema, execute novamente os testes locais, reimplante pelo Canvas e teste novamente a versão hospedada. diff --git a/docs/pt-br/app/8-foundry-canvas/3-connect-to-site.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/pt-br/app/8-foundry-canvas/3-connect-to-site.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 2bc4ff94..b82d4ca4 100644 --- a/docs/pt-br/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Criar e implantar o agente next: - link: /copilot-workshops/pt-br/app/9-review/ + link: /copilot-workshops/pt-br/real-world-development/app/9-review/ label: Revisão e próximos passos --- @@ -56,7 +56,7 @@ O proxy é a única parte do código que tem permissão para acessar suas creden 7. Inspecione a resposta: ela deve explicar que o catálogo não contém preços. Confirme que ela não contém token do Foundry, credencial, identificador interno de conversa, endpoint do projeto nem rastreamento de pilha. Se não for possível acessar a Function ou se a resposta expuser detalhes ou inventar preços, envie ao Copilot as informações da falha sem dados sensíveis, corrija o problema e execute novamente os testes do proxy antes de continuar. - ![Teste do proxy local](../../../_images/app-8-local-proxy-test.png) + ![Teste do proxy local](../../../../_images/app-8-local-proxy-test.png) ## Criar e testar o widget de chat @@ -77,7 +77,7 @@ Com o proxy em execução, o widget apresenta a conversa no site sem expor detal 11. Revise o relatório e verifique o comportamento relatado no navegador, incluindo o uso do teclado e a conversa de duas interações das [verificações de aceitação do agente hospedado][agent-checks]. Confirme que as solicitações do navegador passam por `/api/concierge` com uma referência opaca, e não diretamente pelo Foundry, e que as respostas não expõem credenciais nem identificadores internos do Foundry. Verifique se as recomendações e as respostas sobre dados ausentes permanecem dentro dos limites do catálogo. Corrija os testes que falharam com o Copilot, reinicie o serviço local afetado se necessário e execute os testes novamente. - ![Resultados dos testes de ponta a ponta do widget Backer Concierge](../../../_images/app-8-e2e-test-results.png) + ![Resultados dos testes de ponta a ponta do widget Backer Concierge](../../../../_images/app-8-e2e-test-results.png) ## Ponto de verificação e próximos passos diff --git a/docs/pt-br/app/8-foundry-canvas/README.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/pt-br/app/8-foundry-canvas/README.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/README.md index 0274ebae..3ebe366e 100644 --- a/docs/pt-br/app/8-foundry-canvas/README.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "Opcional: Incorporar o Foundry" -slug: pt-br/app/8-foundry-canvas +slug: pt-br/real-world-development/app/8-foundry-canvas description: "Crie um Backer Concierge baseado no catálogo com o Microsoft Foundry Canvas, com pontos seguros para encerrar ao longo do percurso." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/9-review/ + link: /copilot-workshops/pt-br/real-world-development/app/9-review/ label: Revisão e próximos passos next: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar o projeto e o modelo --- diff --git a/docs/pt-br/app/9-review.md b/docs/pt-br/real-world-development/app/9-review.md similarity index 100% rename from docs/pt-br/app/9-review.md rename to docs/pt-br/real-world-development/app/9-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 23241e44..43531e1a 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 22f4803b..e3b7030b 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-foundry-agent/1-project-and-model.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/pt-br/cli/8-foundry-agent/1-project-and-model.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 070070f1..22557d28 100644 --- a/docs/pt-br/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ O agente precisa do catálogo em um arquivo que possa ler. O exemplo do Tailspin npm run db:export ``` - ![Resumo da exportação do catálogo](../../../_images/cli-8-export-db-catalog.png) + ![Resumo da exportação do catálogo](../../../../_images/cli-8-export-db-catalog.png) 2. Abra `db/catalog.json`. Confirme que ele contém 21 jogos com título, descrição, categoria, editora e avaliação em estrelas. O campo `note` informa que o catálogo não contém totais arrecadados, quantidades de apoiadores, níveis de apoio ou datas de lançamento. Também não há campos de preço, número de jogadores ou tempo de jogo. Essas ausências definem o limite que o agente deve respeitar. @@ -129,7 +129,7 @@ O agente precisa de um projeto do Foundry e de um modelo implantado. Você usar Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![Criação de um projeto público do Foundry](../../../_images/cli-8-create-foundry-project.png) + ![Criação de um projeto público do Foundry](../../../../_images/cli-8-create-foundry-project.png) 2. Quando o projeto estiver pronto, peça ao Copilot para recomendar um modelo: @@ -139,7 +139,7 @@ O agente precisa de um projeto do Foundry e de um modelo implantado. Você usar O Copilot pode solicitar que você selecione um modelo entre as opções recomendadas. - ![Seleção de um modelo entre as opções recomendadas](../../../_images/cli-8-select-foundry-model.png) + ![Seleção de um modelo entre as opções recomendadas](../../../../_images/cli-8-select-foundry-model.png) Continuaremos com `gpt-5.4-mini` nas próximas etapas, mas a disponibilidade e a cota variam por região. @@ -149,7 +149,7 @@ O agente precisa de um projeto do Foundry e de um modelo implantado. Você usar Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![Implantação do modelo selecionado](../../../_images/cli-8-deploy-foundry-model.png) + ![Implantação do modelo selecionado](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > A disponibilidade dos modelos muda ao longo do tempo. A escolha certa é um modelo cuja disponibilidade no projeto seja confirmada pelo Copilot, não um modelo fixado em um exemplo. @@ -198,7 +198,7 @@ Primeiro, você atribuirá à conta conectada a função **Foundry Project Manag Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Resposta do modelo do Foundry recomendando um jogo real do catálogo e informando que os dados de arrecadação não estão disponíveis](../../../_images/cli-8-foundry-agent-response.png) + ![Resposta do modelo do Foundry recomendando um jogo real do catálogo e informando que os dados de arrecadação não estão disponíveis](../../../../_images/cli-8-foundry-agent-response.png) 5. Revise a resposta. Ela deve recomendar apenas um jogo real do catálogo, usar os detalhes corretos do catálogo e explicar que as informações de arrecadação não estão disponíveis. Se o modelo inventar um título, detalhes do jogo ou um total arrecadado, compare outro modelo recomendado antes de continuar. diff --git a/docs/pt-br/cli/8-foundry-agent/2-build-and-deploy.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 97% rename from docs/pt-br/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index 6fcccdbf..126234a6 100644 --- a/docs/pt-br/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Agora, você pedirá à skill do Microsoft Foundry para gerar a estrutura do age Não continue até que os testes específicos sejam aprovados. - ![Verificação da estrutura gerada do agente](../../../_images/cli-8-verify-generated-agent.png) + ![Verificação da estrutura gerada do agente](../../../../_images/cli-8-verify-generated-agent.png) ## Teste o agente localmente @@ -113,7 +113,7 @@ Agora, você verificará a fundamentação das respostas e o comportamento de co 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![Testes da implantação do agente hospedado aprovados](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![Testes da implantação do agente hospedado aprovados](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. Revise os resultados. Se o agente não conseguir se conectar, confirme que o segundo terminal ainda está executando o serviço. Se um teste falhar, peça ao Copilot para corrigir apenas o defeito local, executar os testes específicos e informar quando reiniciar `azd ai agent run`. Reinicie o serviço e execute novamente o teste de aceitação que falhou após cada alteração. @@ -130,7 +130,7 @@ Com os testes de aceitação locais aprovados, você está pronto para implantar 3. Se for solicitado que você selecione uma fonte para a suíte de avaliação, escolha **Não, configurar mais tarde**. - ![Status da implantação do agente hospedado e link do playground](../../../_images/cli-8-hosted-agent-deployment.png) + ![Status da implantação do agente hospedado e link do playground](../../../../_images/cli-8-hosted-agent-deployment.png) 4. Revise o status da implantação e a resposta remota. Confirme que o agente está em execução e recomenda apenas jogos reais do catálogo. Se a implantação ou a invocação falhar, peça ao Copilot para diagnosticar a falha e repetir o teste remoto antes de continuar. diff --git a/docs/pt-br/cli/8-foundry-agent/3-connect-to-site.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 97% rename from docs/pt-br/cli/8-foundry-agent/3-connect-to-site.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 88c7986a..9628c2a3 100644 --- a/docs/pt-br/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ A skill `microsoft-foundry` é responsável pelo fluxo de trabalho do agente hos For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Configuração do proxy local do Azure Functions](../../../_images/cli-8-azure-functions-proxy.png) + ![Configuração do proxy local do Azure Functions](../../../../_images/cli-8-azure-functions-proxy.png) 2. Abra outro terminal e inicie a Function local usando o comando fornecido pelo Copilot. Deixe a Function em execução. 3. Volte ao Copilot CLI e peça ao Copilot para testar o proxy local: @@ -54,7 +54,7 @@ A skill `microsoft-foundry` é responsável pelo fluxo de trabalho do agente hos 4. Inspecione a resposta. Ela deve explicar que o catálogo não contém preços. Não pode conter um token do Foundry, uma credencial, um endpoint de projeto, um identificador bruto de conversa do Foundry ou um rastreamento de pilha. - ![Resposta JSON sanitizada do endpoint local do concierge](../../../_images/cli-8-sanitized-json-response.png) + ![Resposta JSON sanitizada do endpoint local do concierge](../../../../_images/cli-8-sanitized-json-response.png) ## Crie o widget de chat @@ -73,7 +73,7 @@ O proxy oferece ao navegador uma forma segura de acessar o concierge. Agora, voc Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Captura de tela do widget Backer Concierge no site do Tailspin Toys](../../../_images/cli-8-backer-concierge-widget.png) + ![Captura de tela do widget Backer Concierge no site do Tailspin Toys](../../../../_images/cli-8-backer-concierge-widget.png) 4. Revise os resultados com base nas evidências apresentadas. Se alguma verificação falhar, peça ao Copilot para corrigir o comportamento correspondente do proxy ou do widget e executar novamente as verificações que falharam antes de concluir. diff --git a/docs/pt-br/cli/8-foundry-agent/README.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/pt-br/cli/8-foundry-agent/README.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/README.md index af8b0e8c..c1b03207 100644 --- a/docs/pt-br/cli/8-foundry-agent/README.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/cli/8-foundry-agent +slug: pt-br/real-world-development/cli/8-foundry-agent title: "Opcional: Incorpore o Foundry" description: "Uma série de três módulos para preparar um modelo, criar e implantar um agente baseado no catálogo e conectá-lo ao Tailspin Toys." authors: diff --git a/docs/pt-br/cli/9-review.md b/docs/pt-br/real-world-development/cli/9-review.md similarity index 100% rename from docs/pt-br/cli/9-review.md rename to docs/pt-br/real-world-development/cli/9-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 fb0a22de..c40b82ac 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/pt-br/vscode/6-iterating.md b/docs/pt-br/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/pt-br/vscode/6-iterating.md rename to docs/pt-br/real-world-development/vscode/6-iterating.md index f0a44dce..1fca4bf7 100644 --- a/docs/pt-br/vscode/6-iterating.md +++ b/docs/pt-br/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ Os controles de alto contraste e modo claro que você implementou com o agente p 9. Retorne à guia **Conversation**. 10. Se houver fluxos de trabalho aguardando aprovação, selecione **Approve and run workflows**. - ![Aprovar e executar fluxos de trabalho](../../_images/shared-approve-workflows.png) + ![Aprovar e executar fluxos de trabalho](../../../_images/shared-approve-workflows.png) 11. Aguarde a conclusão dos fluxos de trabalho. Se tudo correr bem, eles deverão passar. > [!TIP] diff --git a/docs/pt-br/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/pt-br/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 5a05e05d..6ca138d6 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ O projeto contém o modelo e, posteriormente, o agente hospedado. Ao retomar est 1. Selecione **Foundry Toolkit** na barra de atividades, expanda **Help and Feedback** e selecione **Ask Copilot**. Confirme o modelo de sua escolha no menu suspenso e envie o prompt `/foundrytk-quick-start` gerado. - ![Captura de tela mostrando a sequência de início rápido do Foundry Toolkit.](../../../_images/vscode-foundry-setup.png) + ![Captura de tela mostrando a sequência de início rápido do Foundry Toolkit.](../../../../_images/vscode-foundry-setup.png) 2. No fluxo interativo, responda a **Where are you starting from?** com **Set up Foundry** e, em seguida, a **What do you have already?** com **I have an Azure subscription or Foundry resources**. 3. Revise as aprovações de ferramentas. Se os comandos propostos e seu escopo forem adequados, selecione **Allow azmcp …** para esta sessão para reduzir as solicitações repetidas de aprovação. @@ -93,7 +93,7 @@ Seguir regras e fundamentar as respostas importa mais aqui do que escolher o mai 3. Confirme o projeto, a implantação, a capacidade e o custo antes de aprovar. Se for adequado após revisar o escopo, selecione **Allow az …** para esta sessão para reduzir as solicitações repetidas. 4. Selecione **Foundry Toolkit**, expanda **My Resources** e selecione **Models**. Confirme que o modelo implantado aparece no Foundry. A captura de tela é um exemplo; sua região pode oferecer um modelo diferente. - ![Captura de tela mostrando um exemplo de implantação de modelo no Foundry Toolkit.](../../../_images/vscode-model-deployed.png) + ![Captura de tela mostrando um exemplo de implantação de modelo no Foundry Toolkit.](../../../../_images/vscode-model-deployed.png) ## Testar o modelo implantado diff --git a/docs/pt-br/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 96% rename from docs/pt-br/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index bbfe158f..c7eb585e 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ O toolkit gera a estrutura inicial do código no repositório atual e abre uma c 1. Selecione **Foundry Toolkit**, expanda **Developer Tools**, expanda **+ Build** e selecione **+ Create Agent**. Em **Create Agent**, selecione **Code an agent with Copilot**. - ![Captura de tela mostrando a página de criação de agente.](../../../_images/vscode-create-agent.png) + ![Captura de tela mostrando a página de criação de agente.](../../../../_images/vscode-create-agent.png) 2. Na nova conversa, confirme que ela muda para **AIAgentExpert**. Substitua o prompt gerado pelo prompt personalizado e envie-o: @@ -65,7 +65,7 @@ O toolkit gera a estrutura inicial do código no repositório atual e abre uma c 5. Reutilize os seis prompts de [Testar o modelo implantado][model-tests]. Verifique as respostas em relação ao `db/catalog.json` completo, em vez de presumir que a classificação do subconjunto de nove jogos corresponde à classificação do catálogo completo. 6. Alterne entre **Input & Output**, **Events** e **Tools** para inspecionar os dados das solicitações e respostas, os eventos da sessão e as chamadas de ferramentas. Se o comportamento violar os critérios de aceitação, peça ao Copilot para corrigi-lo e execute novamente os testes específicos e as verificações do Inspector antes de implantar. - ![Captura de tela mostrando o fluxo de depuração local do agente.](../../../_images/vscode-agent-debug.png) + ![Captura de tela mostrando o fluxo de depuração local do agente.](../../../../_images/vscode-agent-debug.png) ## Implantar e testar o agente hospedado @@ -77,17 +77,17 @@ A transferência **Go production** empacota o agente existente para o Foundry. E /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![Captura de tela mostrando as opções de transferência do agente AIAgentExpert.](../../../_images/vscode-go-production-handoff.png) + ![Captura de tela mostrando as opções de transferência do agente AIAgentExpert.](../../../../_images/vscode-go-production-handoff.png) 2. Revise a conversa e o terminal para conferir os parâmetros e as aprovações de comandos. Confirme que a implantação tem como destino o projeto `tailspin-toys` existente e revise os recursos sujeitos a cobrança antes de aprovar. 3. Se o Copilot oferecer uma suíte de avaliação, você pode aceitá-la e executá-la como verificação adicional. 4. Selecione **Foundry Toolkit**, expanda **My Resources** e selecione **Agents**. Na guia **Agents**, mude para **Hosted Agent**. - ![Captura de tela mostrando o agente hospedado implantado.](../../../_images/vscode-agent-deployed.png) + ![Captura de tela mostrando o agente hospedado implantado.](../../../../_images/vscode-agent-deployed.png) 5. Selecione o nome do agente e confirme que o status da implantação é **Running**. Mude para **Playground** e repita as verificações de fundamentação, dados ausentes, itens fora do catálogo, falta de especificidade e classificação em relação ao catálogo implantado. - ![Captura de tela mostrando uma resposta do agente hospedado implantado.](../../../_images/vscode-agent-response.png) + ![Captura de tela mostrando uma resposta do agente hospedado implantado.](../../../../_images/vscode-agent-response.png) 6. Se a implantação ou as respostas falharem, inspecione o status informado e os logs com o Copilot, corrija a falha no projeto existente e repita as verificações. Não prossiga com uma implantação não verificada. diff --git a/docs/pt-br/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/pt-br/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 336e8d83..d9708bca 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ A interface agora tem um backend verificado. Os testes de ponta a ponta verifica Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Captura de tela mostrando o widget de chat Backer Concierge em ação](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Captura de tela mostrando o widget de chat Backer Concierge em ação](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Mantenha a função e o site em execução e verifique a experiência completa: diff --git a/docs/pt-br/vscode/7-foundry-toolkit/README.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/pt-br/vscode/7-foundry-toolkit/README.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/README.md index ea55841e..0f103455 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/README.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/vscode/7-foundry-toolkit +slug: pt-br/real-world-development/vscode/7-foundry-toolkit title: "Opcional: Incorporar o Foundry" description: "Crie um Backer Concierge fundamentado no catálogo com o VS Code e o Microsoft Foundry Toolkit em três módulos focados." authors: diff --git a/docs/pt-br/vscode/README.md b/docs/pt-br/real-world-development/vscode/README.md similarity index 98% rename from docs/pt-br/vscode/README.md rename to docs/pt-br/real-world-development/vscode/README.md index b9345bf2..603be414 100644 --- a/docs/pt-br/vscode/README.md +++ b/docs/pt-br/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/vscode +slug: pt-br/real-world-development/vscode title: "VS Code" 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 96% rename from docs/app/7-canvases.md rename to docs/real-world-development/app/7-canvases.md index e9844a3a..146b9bdf 100644 --- a/docs/app/7-canvases.md +++ b/docs/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/app/9-review/ + link: /copilot-workshops/real-world-development/app/9-review/ label: "Review and next steps" --- @@ -73,7 +73,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. @@ -84,7 +84,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-foundry-canvas/1-project-and-model.md b/docs/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 92% rename from docs/app/8-foundry-canvas/1-project-and-model.md rename to docs/real-world-development/app/8-foundry-canvas/1-project-and-model.md index bf26fbf3..f5602b09 100644 --- a/docs/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/8-foundry-canvas/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/ label: "Optional: Incorporate Foundry" next: - link: /copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Build and deploy the agent --- @@ -33,7 +33,7 @@ The setup connects the GitHub Copilot app to Azure while keeping all feature wor 3. Install the [Azure Developer CLI][install-azd], then verify that version 1.27.1 or later is installed using `azd version`. 4. Open the GitHub Copilot app, open **Customize**, then select **Plugins**. Search for `microsoft-foundry` and select **Install** for the Microsoft Foundry plugin, which bundles Canvas and the Foundry skills. - ![Install Microsoft Foundry plugin](../../_images/app-8-install-foundry-plugin.png) + ![Install Microsoft Foundry plugin](../../../_images/app-8-install-foundry-plugin.png) 5. In **Customize**, select **Plugins**, search for `azure` or select it from the **Featured** list, then select **Install** for the Azure plugin. 6. On the **My work** tab, find and open the issue titled **Add a Backer Concierge assistant for catalog questions** in your Tailspin Toys repository. Select **New session** to start an issue-linked session in a new worktree. Keep this repository, worktree branch, and issue session for all three modules. @@ -57,11 +57,11 @@ The sample repository includes an export script that gives the agent a file it c npm run db:export ``` - ![Generate catalog export](../../_images/app-8-generate-catalog-export.png) + ![Generate catalog export](../../../_images/app-8-generate-catalog-export.png) 10. Open `db/catalog.json` and confirm it contains 21 games with a title, description, category, publisher, and star rating. Check its `note` field: the catalog doesn't contain funding totals, backer counts, pledge tiers, or release dates. Treat missing prices, player counts, and play times as unavailable too, rather than filling gaps from outside knowledge. If the export fails or differs, ask Copilot to investigate and rerun it before continuing. - ![Catalog export open in the Copilot app](../../_images/app-8-view-catalog.png) + ![Catalog export open in the Copilot app](../../../_images/app-8-view-catalog.png) ## Set up a Foundry project and model @@ -95,7 +95,7 @@ Creating the project and deployment in chat first means Canvas connects only to Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Create Foundry project](../../_images/app-8-foundry-project-created.png) + ![Create Foundry project](../../../_images/app-8-foundry-project-created.png) 14. Ask Copilot to recommend a model. The issue's acceptance criteria are already in context because the session started from the issue: @@ -105,7 +105,7 @@ Creating the project and deployment in chat first means Canvas connects only to 15. Confirm Copilot loads the `microsoft-foundry` skill, then choose an available model based on its tradeoffs. The Microsoft Foundry hosted-agent quickstart currently uses `gpt-5.4-mini`, but availability and quota vary by region. - ![Select model](../../_images/app-8-select-model.png) + ![Select model](../../../_images/app-8-select-model.png) 16. Ask Copilot to deploy your selection, reviewing the target project and cost before approval: @@ -124,7 +124,7 @@ This check verifies the project and model before any agent code exists. A model 18. Open the **More options** menu in the top-right corner of Canvas, then select **Sign in**. 19. Select the **tailspin-toys** Foundry project. Expand **Models** and confirm your deployment appears with the expected name and status. - ![Validate project and model in Canvas](../../_images/app-8-validate-project-model.png) + ![Validate project and model in Canvas](../../../_images/app-8-validate-project-model.png) 20. In the same session, enter: diff --git a/docs/app/8-foundry-canvas/2-build-and-deploy.md b/docs/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 94% rename from docs/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index 12716333..2809addd 100644 --- a/docs/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Prepare project and model next: - link: /copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: Connect the agent to the site --- @@ -50,7 +50,7 @@ Canvas scaffolds the code, folder structure, and root `azure.yaml` that connect Canvas sends the prompt and current subscription and Foundry project context to Copilot. It looks for Agent Framework + Responses API samples; a selection such as **Agent with Local Tools (Responses, Agent Framework, Python)** may appear. - ![Scaffold Backer Concierge agent in Canvas](../../_images/app-8-scaffold-backer-concierge.png) + ![Scaffold Backer Concierge agent in Canvas](../../../_images/app-8-scaffold-backer-concierge.png) 5. Review Copilot's changes in the **Files** tab against this checkpoint. Generated filenames inside `src` can differ, but the project boundaries and `azure.yaml` location should match: @@ -91,7 +91,7 @@ Canvas scaffolds the code, folder structure, and root `azure.yaml` that connect Expected: Names only real titles from the catalog and uses the correct information for each title. - ![Grounded recommendation in Agent Inspector](../../_images/app-8-grounded-recommendation.png) + ![Grounded recommendation in Agent Inspector](../../../_images/app-8-grounded-recommendation.png) 10. Test a **hallucination trap**: @@ -145,7 +145,7 @@ Canvas uses `azd` to deploy the tested agent. Foundry packages the service sourc 16. On Canvas, in **Deploy and test**, select **Deploy to Foundry**. Review the prompt it drops into chat. - ![Deploy to Foundry prompt on the canvas](../../_images/app-8-deploy-to-foundry.png) + ![Deploy to Foundry prompt on the canvas](../../../_images/app-8-deploy-to-foundry.png) 17. Check for a deployment confirmation, agent version, status, and link to the agent playground in Foundry. If deployment fails, send the error to Copilot and resolve it in the same project before retrying through Canvas. 18. Select **Test in Foundry Portal** from Canvas to open the deployed agent playground. Rerun all six acceptance checks from steps 9–14 against this deployed version, retaining the paired prompts in one conversation for continuity. Compare its responses with the catalog; if any check fails, ask Copilot to fix it, rerun local tests, redeploy through Canvas, and retest the hosted version. diff --git a/docs/app/8-foundry-canvas/3-connect-to-site.md b/docs/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/app/8-foundry-canvas/3-connect-to-site.md rename to docs/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 33ce7cd5..cb011ef5 100644 --- a/docs/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Build and deploy the agent next: - link: /copilot-workshops/app/9-review/ + link: /copilot-workshops/real-world-development/app/9-review/ label: Review and next steps --- @@ -56,7 +56,7 @@ The proxy is the only piece of code allowed to access your Azure credentials. Fo 7. Inspect the response: it should explain that the catalog doesn't contain prices. Confirm it contains no Foundry token, credential, internal conversation identifier, project endpoint, or stack trace. If the Function cannot be reached or the response leaks details or invents prices, send the sanitized failure to Copilot, fix it, and rerun the proxy tests before continuing. - ![Local proxy test](../../_images/app-8-local-proxy-test.png) + ![Local proxy test](../../../_images/app-8-local-proxy-test.png) ## Build and test the chat widget @@ -77,7 +77,7 @@ With the proxy running, the widget provides the visible conversation on the site 11. Review the report and verify the claimed behavior in the browser, including keyboard use and the two-turn conversation from the [hosted-agent acceptance checks][agent-checks]. Confirm browser requests go through `/api/concierge` with an opaque handle, not directly to Foundry, and responses expose no credentials or internal Foundry identifiers. Check that recommendations and missing-data answers stay within the catalog boundary. Address failing tests with Copilot, restart the affected local service if needed, and rerun the tests. - ![End-to-end test results for the Backer Concierge widget](../../_images/app-8-e2e-test-results.png) + ![End-to-end test results for the Backer Concierge widget](../../../_images/app-8-e2e-test-results.png) ## Checkpoint and next steps diff --git a/docs/app/8-foundry-canvas/README.md b/docs/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/app/8-foundry-canvas/README.md rename to docs/real-world-development/app/8-foundry-canvas/README.md index 849725c9..a6285973 100644 --- a/docs/app/8-foundry-canvas/README.md +++ b/docs/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "Optional: Incorporate Foundry" -slug: app/8-foundry-canvas +slug: real-world-development/app/8-foundry-canvas description: "Build a catalog-grounded Backer Concierge with Microsoft Foundry Canvas, with safe stopping points along the way." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/9-review/ + link: /copilot-workshops/real-world-development/app/9-review/ label: Review and next steps next: - link: /copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Prepare project and model --- diff --git a/docs/app/9-review.md b/docs/real-world-development/app/9-review.md similarity index 100% rename from docs/app/9-review.md rename to docs/real-world-development/app/9-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 ba58de46..57ee9df2 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 57ed3854..2359e829 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-foundry-agent/1-project-and-model.md b/docs/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/cli/8-foundry-agent/1-project-and-model.md rename to docs/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 93baa56e..1839fc35 100644 --- a/docs/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ The agent needs the catalog as a file it can read. The Tailspin Toys sample incl npm run db:export ``` - ![Summary of the catalog export](../../_images/cli-8-export-db-catalog.png) + ![Summary of the catalog export](../../../_images/cli-8-export-db-catalog.png) 2. Open `db/catalog.json`. Confirm that it contains 21 games with a title, description, category, publisher, and star rating. Its `note` field states that the catalog doesn't contain funding totals, backer counts, pledge tiers, or release dates. It also has no price, player count, or play-time fields. Those omissions define the boundary your agent must respect. @@ -129,7 +129,7 @@ The agent needs a Foundry project and a deployed model. You'll use the Microsoft Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![Create a public Foundry project](../../_images/cli-8-create-foundry-project.png) + ![Create a public Foundry project](../../../_images/cli-8-create-foundry-project.png) 2. After the project is ready, ask Copilot to recommend a model: @@ -139,7 +139,7 @@ The agent needs a Foundry project and a deployed model. You'll use the Microsoft Copilot may prompt you to select a model from the recommended options. - ![Select a model from the recommended options](../../_images/cli-8-select-foundry-model.png) + ![Select a model from the recommended options](../../../_images/cli-8-select-foundry-model.png) We'll continue with `gpt-5.4-mini` in the remaining steps, but availability and quota vary by region. @@ -149,7 +149,7 @@ The agent needs a Foundry project and a deployed model. You'll use the Microsoft Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![Deploy the selected model](../../_images/cli-8-deploy-foundry-model.png) + ![Deploy the selected model](../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > Model availability changes over time. The right choice is a model that Copilot confirms is available in your project, not a hardcoded model from an example. @@ -198,7 +198,7 @@ You'll first grant your signed-in account the **Foundry Project Manager** role f Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Foundry model response recommending a real catalog game and noting that funding data isn't available](../../_images/cli-8-foundry-agent-response.png) + ![Foundry model response recommending a real catalog game and noting that funding data isn't available](../../../_images/cli-8-foundry-agent-response.png) 5. Review the response. It should recommend only a real game from the catalog, use the correct catalog details, and explain that funding information isn't available. If the model invents a title, game details, or a funding total, compare another recommended model before continuing. diff --git a/docs/cli/8-foundry-agent/2-build-and-deploy.md b/docs/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 97% rename from docs/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index 3081801a..9338a6a1 100644 --- a/docs/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ You'll now ask the Microsoft Foundry Skill to scaffold the hosted agent inside t Don't continue until the focused tests pass. - ![Verify the agent scaffolding](../../_images/cli-8-verify-generated-agent.png) + ![Verify the agent scaffolding](../../../_images/cli-8-verify-generated-agent.png) ## Test the agent locally @@ -113,7 +113,7 @@ You'll now check the agent's grounding and conversation behavior through its loc 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![Hosted Agent Deployment tests pass](../../_images/cli-8-passing-acceptance-scenarios.png) + ![Hosted Agent Deployment tests pass](../../../_images/cli-8-passing-acceptance-scenarios.png) 4. Review the results. If the agent can't connect, confirm that the second terminal is still running the service. If a test fails, ask Copilot to fix only the local defect, run the focused tests, and tell you when to restart `azd ai agent run`. Restart the service and rerun the failed acceptance test after each change. @@ -130,7 +130,7 @@ With the local acceptance tests passing, you're ready to deploy the agent to Mic 3. If prompted to select an evaluation suite source, choose **No, set it up later**. - ![Hosted Agent Deployment status and playground link](../../_images/cli-8-hosted-agent-deployment.png) + ![Hosted Agent Deployment status and playground link](../../../_images/cli-8-hosted-agent-deployment.png) 4. Review the deployment status and remote response. Confirm that the agent is running and recommends only real catalog games. If deployment or invocation fails, ask Copilot to diagnose the failure and repeat the remote test before continuing. diff --git a/docs/cli/8-foundry-agent/3-connect-to-site.md b/docs/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 96% rename from docs/cli/8-foundry-agent/3-connect-to-site.md rename to docs/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 3eeada38..518f0a2d 100644 --- a/docs/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ The `microsoft-foundry` skill owns the hosted-agent workflow, while the broader For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions local proxy setup](../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions local proxy setup](../../../_images/cli-8-azure-functions-proxy.png) 2. Open another terminal, then start the local Function using the command provided by Copilot. Leave the Function running. 3. Return to Copilot CLI and ask Copilot to test the local proxy: @@ -54,7 +54,7 @@ The `microsoft-foundry` skill owns the hosted-agent workflow, while the broader 4. Inspect the response. It should explain that the catalog doesn't contain prices. It must not contain a Foundry token, credential, project endpoint, raw Foundry conversation identifier, or stack trace. - ![Sanitized JSON response from the local concierge endpoint](../../_images/cli-8-sanitized-json-response.png) + ![Sanitized JSON response from the local concierge endpoint](../../../_images/cli-8-sanitized-json-response.png) ## Build the chat widget @@ -73,7 +73,7 @@ The proxy gives the browser a safe way to reach the concierge. You'll now add a Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Screenshot of the Backer Concierge widget in the Tailspin Toys site](../../_images/cli-8-backer-concierge-widget.png) + ![Screenshot of the Backer Concierge widget in the Tailspin Toys site](../../../_images/cli-8-backer-concierge-widget.png) 4. Review the results against the reported evidence. If any checks fail, ask Copilot to fix the relevant proxy or widget behavior and rerun the failed checks before finishing. diff --git a/docs/cli/8-foundry-agent/README.md b/docs/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/cli/8-foundry-agent/README.md rename to docs/real-world-development/cli/8-foundry-agent/README.md index 3440bfab..284ccce6 100644 --- a/docs/cli/8-foundry-agent/README.md +++ b/docs/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: cli/8-foundry-agent +slug: real-world-development/cli/8-foundry-agent title: "Optional: Incorporate Foundry" description: "A three-module series to prepare a model, build and deploy a catalog-grounded agent, and connect it to Tailspin Toys." authors: diff --git a/docs/cli/9-review.md b/docs/real-world-development/cli/9-review.md similarity index 100% rename from docs/cli/9-review.md rename to docs/real-world-development/cli/9-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 0aa1511f..d5d65bc9 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 8b9a78ea..60eab0b3 100644 --- a/docs/vscode/6-iterating.md +++ b/docs/real-world-development/vscode/6-iterating.md @@ -37,7 +37,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/7-foundry-toolkit/1-project-and-model.md b/docs/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index cfbcad78..fdfc2ac2 100644 --- a/docs/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ The project holds the model and, later, the hosted agent. Resuming this module u 1. Select **Foundry Toolkit** in the Activity Bar, expand **Help and Feedback**, and select **Ask Copilot**. Confirm your model of choice in the dropdown and send the generated `/foundrytk-quick-start` prompt. - ![Screenshot showing the Foundry Toolkit quickstart sequence.](../../_images/vscode-foundry-setup.png) + ![Screenshot showing the Foundry Toolkit quickstart sequence.](../../../_images/vscode-foundry-setup.png) 2. In the interactive workflow, answer **Where are you starting from?** with **Set up Foundry**, then **What do you have already?** with **I have an Azure subscription or Foundry resources**. 3. Review tool approvals. If the proposed commands and their scope are appropriate, select **Allow azmcp …** for this session to reduce repeated approval prompts. @@ -93,7 +93,7 @@ Rule following and grounding matter more here than choosing the biggest or newes 3. Confirm the project, deployment, capacity, and cost before approving. If appropriate after reviewing scope, select **Allow az …** for this session to reduce repeated prompts. 4. Select **Foundry Toolkit**, expand **My Resources**, then select **Models**. Confirm the deployed model appears under Foundry. The screenshot is an example; your region may offer a different model. - ![Screenshot showing an example model deployment in the Foundry Toolkit.](../../_images/vscode-model-deployed.png) + ![Screenshot showing an example model deployment in the Foundry Toolkit.](../../../_images/vscode-model-deployed.png) ## Test the deployed model diff --git a/docs/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 94% rename from docs/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 176f7b85..f149c0d9 100644 --- a/docs/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ The toolkit scaffolds code in the current repository and opens a specialized Cop 1. Select **Foundry Toolkit**, expand **Developer Tools**, expand **+ Build**, and select **+ Create Agent**. On **Create Agent**, select **Code an agent with Copilot**. - ![Screenshot showing the create agent page.](../../_images/vscode-create-agent.png) + ![Screenshot showing the create agent page.](../../../_images/vscode-create-agent.png) 2. In the new chat, confirm it switches to **AIAgentExpert**. Replace the generated prompt with the customized prompt and submit it: @@ -65,7 +65,7 @@ The toolkit scaffolds code in the current repository and opens a specialized Cop 5. Reuse all six prompts from [Test the deployed model][model-tests]. Check answers against the full `db/catalog.json`, rather than assuming the nine-game subset's ranking is the full catalog ranking. 6. Switch between **Input & Output**, **Events**, and **Tools** to inspect payloads, session events, and tool calls. If behavior violates the acceptance criteria, ask Copilot to fix it and rerun focused tests and Inspector checks before deploying. - ![Screenshot showing local Agent debug workflow.](../../_images/vscode-agent-debug.png) + ![Screenshot showing local Agent debug workflow.](../../../_images/vscode-agent-debug.png) ## Deploy and test the hosted agent @@ -77,17 +77,17 @@ The **Go production** handoff packages the existing agent for Foundry. It does n /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![Screenshot showing hand off options from the AIAgentExpert agent.](../../_images/vscode-go-production-handoff.png) + ![Screenshot showing hand off options from the AIAgentExpert agent.](../../../_images/vscode-go-production-handoff.png) 2. Review the chat and terminal for parameters and command approvals. Confirm deployment targets the existing `tailspin-toys` project and review billable resources before approving. 3. If Copilot offers an evaluation suite, optionally accept and work through it as an additional check. 4. Select **Foundry Toolkit**, expand **My Resources**, and select **Agents**. On the **Agents** tab, switch to **Hosted Agent**. - ![Screenshot showing the deployed hosted agent.](../../_images/vscode-agent-deployed.png) + ![Screenshot showing the deployed hosted agent.](../../../_images/vscode-agent-deployed.png) 5. Select the agent name and confirm deployment status is **Running**. Switch to **Playground** and repeat the grounding, missing-data, out-of-catalog, vagueness, and ranking checks against the deployed catalog. - ![Screenshot showing a response from the deployed hosted agent.](../../_images/vscode-agent-response.png) + ![Screenshot showing a response from the deployed hosted agent.](../../../_images/vscode-agent-response.png) 6. If deployment or responses fail, inspect the reported status and logs with Copilot, correct the failure in the existing project, and repeat the checks. Do not proceed with an unverified deployment. diff --git a/docs/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 2e3a0be4..f7fdb454 100644 --- a/docs/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ The UI now has a verified backend. End-to-end tests check both usability and the Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Screenshot showing the Backer Concierge chat widget in action](../../_images/tailspin-toys-backer-concierge-agent.png) + ![Screenshot showing the Backer Concierge chat widget in action](../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Keep the Function and site running, then verify the complete experience: diff --git a/docs/vscode/7-foundry-toolkit/README.md b/docs/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/vscode/7-foundry-toolkit/README.md rename to docs/real-world-development/vscode/7-foundry-toolkit/README.md index 4549ad9a..8b09cd64 100644 --- a/docs/vscode/7-foundry-toolkit/README.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: vscode/7-foundry-toolkit +slug: real-world-development/vscode/7-foundry-toolkit title: "Optional: Incorporate Foundry" description: "Build a grounded Backer Concierge with VS Code and Microsoft Foundry Toolkit in three focused modules." authors: 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 00cd80d5..0740de64 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 96% rename from docs/zh-cn/app/7-canvases.md rename to docs/zh-cn/real-world-development/app/7-canvases.md index e273e26c..1ac18073 100644 --- a/docs/zh-cn/app/7-canvases.md +++ b/docs/zh-cn/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/zh-cn/app/9-review/ + link: /copilot-workshops/zh-cn/real-world-development/app/9-review/ label: "回顾与后续步骤" --- @@ -73,7 +73,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 流程。 @@ -84,7 +84,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-foundry-canvas/1-project-and-model.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 92% rename from docs/zh-cn/app/8-foundry-canvas/1-project-and-model.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model.md index a9b5c463..a1f3d4d8 100644 --- a/docs/zh-cn/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/ label: "可选：集成 Foundry" next: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 构建并部署代理 --- @@ -33,7 +33,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 3. 安装 [Azure Developer CLI][install-azd]，然后使用 `azd version` 验证已安装 1.27.1 或更高版本。 4. 打开 GitHub Copilot app，打开 **Customize**，然后选择 **Plugins**。搜索 `microsoft-foundry`，为 Microsoft Foundry 插件选择 **Install**。该插件包含 Canvas 和 Foundry 技能。 - ![安装 Microsoft Foundry 插件](../../../_images/app-8-install-foundry-plugin.png) + ![安装 Microsoft Foundry 插件](../../../../_images/app-8-install-foundry-plugin.png) 5. 在 **Customize** 中选择 **Plugins**，搜索 `azure` 或从 **Featured** 列表中选择它，然后为 Azure 插件选择 **Install**。 6. 在 **My work** 选项卡中，找到并打开 Tailspin Toys 存储库中标题为 **Add a Backer Concierge assistant for catalog questions** 的议题。选择 **New session**，在新工作树中启动关联该议题的会话。三个模块均使用此存储库、工作树分支和议题会话。 @@ -57,11 +57,11 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 npm run db:export ``` - ![生成目录导出文件](../../../_images/app-8-generate-catalog-export.png) + ![生成目录导出文件](../../../../_images/app-8-generate-catalog-export.png) 10. 打开 `db/catalog.json`，确认其中包含 21 款游戏，每款游戏都有标题、描述、类别、发行商和星级评分。检查其 `note` 字段：目录不包含筹款总额、支持者人数、支持档位或发布日期。对于缺失的价格、玩家人数和游戏时长，也应视为不可用信息，而不是用外部知识填补空白。如果导出失败或内容不符，请先要求 Copilot 调查并重新运行，再继续。 - ![在 Copilot app 中打开的目录导出文件](../../../_images/app-8-view-catalog.png) + ![在 Copilot app 中打开的目录导出文件](../../../../_images/app-8-view-catalog.png) ## 设置 Foundry 项目和模型 @@ -95,7 +95,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![创建 Foundry 项目](../../../_images/app-8-foundry-project-created.png) + ![创建 Foundry 项目](../../../../_images/app-8-foundry-project-created.png) 14. 要求 Copilot 推荐模型。由于会话从议题启动，议题的验收标准已包含在上下文中： @@ -105,7 +105,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 15. 确认 Copilot 加载了 `microsoft-foundry` 技能，然后根据各模型的优缺点选择一个可用模型。Microsoft Foundry 托管代理快速入门目前使用 `gpt-5.4-mini`，但可用性和配额因区域而异。 - ![选择模型](../../../_images/app-8-select-model.png) + ![选择模型](../../../../_images/app-8-select-model.png) 16. 要求 Copilot 部署所选模型，并在批准前审查目标项目和费用： @@ -124,7 +124,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 18. 打开 Canvas 右上角的 **More options** 菜单，然后选择 **Sign in**。 19. 选择 **tailspin-toys** Foundry 项目。展开 **Models**，确认部署已显示，且名称和状态符合预期。 - ![在 Canvas 中验证项目和模型](../../../_images/app-8-validate-project-model.png) + ![在 Canvas 中验证项目和模型](../../../../_images/app-8-validate-project-model.png) 20. 在同一会话中输入： diff --git a/docs/zh-cn/app/8-foundry-canvas/2-build-and-deploy.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 94% rename from docs/zh-cn/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index e9e4a72c..a5b91e59 100644 --- a/docs/zh-cn/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 准备项目和模型 next: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: 将代理连接到网站 --- @@ -49,7 +49,7 @@ Canvas 会生成代码、文件夹结构以及根目录下的 `azure.yaml`，将 Canvas 会将提示词以及当前订阅和 Foundry 项目的上下文发送给 Copilot。它会查找 Agent Framework + Responses API 示例；可能会出现 **Agent with Local Tools (Responses, Agent Framework, Python)** 等选项。 - ![在 Canvas 中生成 Backer Concierge 代理的初始框架](../../../_images/app-8-scaffold-backer-concierge.png) + ![在 Canvas 中生成 Backer Concierge 代理的初始框架](../../../../_images/app-8-scaffold-backer-concierge.png) 5. 在 **Files** 选项卡中，按照以下检查点审查 Copilot 的更改。`src` 中生成的文件名可能不同，但项目边界和 `azure.yaml` 位置应符合以下要求： @@ -90,7 +90,7 @@ Canvas 会生成代码、文件夹结构以及根目录下的 `azure.yaml`，将 预期结果：只提及目录中真实存在的游戏名称，并使用每款游戏的正确信息。 - ![Agent Inspector 中以目录为依据的推荐](../../../_images/app-8-grounded-recommendation.png) + ![Agent Inspector 中以目录为依据的推荐](../../../../_images/app-8-grounded-recommendation.png) 10. 测试**幻觉陷阱**： @@ -144,7 +144,7 @@ Canvas 使用 `azd` 部署经过测试的代理。Foundry 会打包服务源代 16. 在 Canvas 的 **Deploy and test** 中选择 **Deploy to Foundry**。审查自动填入聊天的提示词。 - ![画布上的 Deploy to Foundry 提示词](../../../_images/app-8-deploy-to-foundry.png) + ![画布上的 Deploy to Foundry 提示词](../../../../_images/app-8-deploy-to-foundry.png) 17. 检查是否收到部署确认、代理版本、状态及 Foundry 中代理试验场的链接。如果部署失败，请将错误发送给 Copilot，在同一项目中解决问题后，再通过 Canvas 重试。 18. 在 Canvas 中选择 **Test in Foundry Portal**，打开已部署代理的试验场。针对这个已部署版本，重新运行第 9–14 步中的全部六项验收检查；连续性检查中的两个提示词仍须在同一段对话中发送。将回答与目录对比；如果有任何检查失败，请要求 Copilot 修复，重新运行本地测试，通过 Canvas 重新部署，并再次测试托管版本。 diff --git a/docs/zh-cn/app/8-foundry-canvas/3-connect-to-site.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 95% rename from docs/zh-cn/app/8-foundry-canvas/3-connect-to-site.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 31a9abde..a5cafafb 100644 --- a/docs/zh-cn/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 构建并部署代理 next: - link: /copilot-workshops/zh-cn/app/9-review/ + link: /copilot-workshops/zh-cn/real-world-development/app/9-review/ label: 回顾与后续步骤 --- @@ -56,7 +56,7 @@ Tailspin Toys 完全采用预渲染。浏览器代码绝不能直接调用托管 7. 检查响应：它应说明目录不包含价格。确认其中没有 Foundry 令牌、凭据、内部对话标识符、项目端点或堆栈跟踪。如果无法访问 Function，或响应泄露了详情或编造了价格，请将脱敏后的失败信息发送给 Copilot，修复问题，并在继续前重新运行代理服务测试。 - ![本地代理服务测试](../../../_images/app-8-local-proxy-test.png) + ![本地代理服务测试](../../../../_images/app-8-local-proxy-test.png) ## 构建并测试聊天组件 @@ -77,7 +77,7 @@ Tailspin Toys 完全采用预渲染。浏览器代码绝不能直接调用托管 11. 审查报告，并在浏览器中验证报告所描述的行为，包括键盘操作以及[托管代理验收检查][agent-checks]中的两轮对话。确认浏览器请求携带不透明句柄，通过 `/api/concierge` 发送，而不是直接发送到 Foundry；响应也不暴露凭据或 Foundry 内部标识符。检查推荐和信息缺失时的回答是否保持在目录范围内。与 Copilot 一起解决失败的测试，必要时重启受影响的本地服务，然后重新运行测试。 - ![Backer Concierge 聊天组件的端到端测试结果](../../../_images/app-8-e2e-test-results.png) + ![Backer Concierge 聊天组件的端到端测试结果](../../../../_images/app-8-e2e-test-results.png) ## 检查点与后续步骤 diff --git a/docs/zh-cn/app/8-foundry-canvas/README.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/README.md similarity index 94% rename from docs/zh-cn/app/8-foundry-canvas/README.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/README.md index f3dade3e..9c33ede7 100644 --- a/docs/zh-cn/app/8-foundry-canvas/README.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "可选：集成 Foundry" -slug: zh-cn/app/8-foundry-canvas +slug: zh-cn/real-world-development/app/8-foundry-canvas description: "使用 Microsoft Foundry Canvas 构建以目录为依据的 Backer Concierge，并在各阶段设置可安全暂停的位置。" authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/9-review/ + link: /copilot-workshops/zh-cn/real-world-development/app/9-review/ label: 回顾与后续步骤 next: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 准备项目和模型 --- diff --git a/docs/zh-cn/app/9-review.md b/docs/zh-cn/real-world-development/app/9-review.md similarity index 100% rename from docs/zh-cn/app/9-review.md rename to docs/zh-cn/real-world-development/app/9-review.md diff --git a/docs/zh-cn/app/README.md b/docs/zh-cn/real-world-development/app/README.md similarity index 99% rename from docs/zh-cn/app/README.md rename to docs/zh-cn/real-world-development/app/README.md index 0ec99a89..0cbc1a7a 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 908e57aa..cadb3719 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-foundry-agent/1-project-and-model.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/zh-cn/cli/8-foundry-agent/1-project-and-model.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 1cfec351..3249ae30 100644 --- a/docs/zh-cn/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 npm run db:export ``` - ![目录导出摘要](../../../_images/cli-8-export-db-catalog.png) + ![目录导出摘要](../../../../_images/cli-8-export-db-catalog.png) 2. 打开 `db/catalog.json`。确认其中包含 21 款游戏，每款游戏都有名称、描述、类别、发行商和星级评分。其 `note` 字段说明目录不包含筹款总额、支持者人数、支持档位或发布日期。目录也没有价格、玩家人数或游戏时长字段。这些缺失的信息界定了智能体必须遵守的边界。 @@ -129,7 +129,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![创建公共 Foundry 项目](../../../_images/cli-8-create-foundry-project.png) + ![创建公共 Foundry 项目](../../../../_images/cli-8-create-foundry-project.png) 2. 项目准备就绪后，让 Copilot 推荐模型： @@ -139,7 +139,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Copilot 可能会提示从推荐选项中选择模型。 - ![从推荐选项中选择模型](../../../_images/cli-8-select-foundry-model.png) + ![从推荐选项中选择模型](../../../../_images/cli-8-select-foundry-model.png) 后续步骤将使用 `gpt-5.4-mini`，但可用情况和配额因区域而异。 @@ -149,7 +149,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![部署所选模型](../../../_images/cli-8-deploy-foundry-model.png) + ![部署所选模型](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > 模型可用情况会随时间变化。应选择 Copilot 确认在项目中可用的模型，而不是照搬示例中写死的模型。 @@ -198,7 +198,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Foundry 模型的回答推荐目录中真实存在的游戏，并指出没有筹款数据](../../../_images/cli-8-foundry-agent-response.png) + ![Foundry 模型的回答推荐目录中真实存在的游戏，并指出没有筹款数据](../../../../_images/cli-8-foundry-agent-response.png) 5. 查看回答。它应仅推荐目录中真实存在的游戏，使用正确的目录细节，并说明没有筹款信息。如果模型编造游戏名称、游戏细节或筹款总额，请先对比另一个推荐模型，再继续。 diff --git a/docs/zh-cn/cli/8-foundry-agent/2-build-and-deploy.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 96% rename from docs/zh-cn/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index ac1cdc37..fb67337a 100644 --- a/docs/zh-cn/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Tailspin Toys 需要的不只是模型的一次性回答。支持者希望礼宾 只有针对性测试通过后，才能继续。 - ![验证智能体脚手架](../../../_images/cli-8-verify-generated-agent.png) + ![验证智能体脚手架](../../../../_images/cli-8-verify-generated-agent.png) ## 在本地测试智能体 @@ -113,7 +113,7 @@ Tailspin Toys 需要的不只是模型的一次性回答。支持者希望礼宾 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![托管智能体部署测试通过](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![托管智能体部署测试通过](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. 查看结果。如果无法连接智能体，请确认第二个终端中的服务仍在运行。如果测试失败，让 Copilot 仅修复本地缺陷、运行针对性测试，并告知何时需要重启 `azd ai agent run`。每次更改后，都要重启服务并重新运行失败的验收测试。 @@ -130,7 +130,7 @@ Tailspin Toys 需要的不只是模型的一次性回答。支持者希望礼宾 3. 如果系统提示选择评估套件来源，请选择 **No, set it up later**（否，稍后设置）。 - ![托管智能体部署状态和操练场链接](../../../_images/cli-8-hosted-agent-deployment.png) + ![托管智能体部署状态和操练场链接](../../../../_images/cli-8-hosted-agent-deployment.png) 4. 查看部署状态和远程回答。确认智能体正在运行，且仅推荐目录中真实存在的游戏。如果部署或调用失败，请让 Copilot 诊断故障，并在继续之前重复远程测试。 diff --git a/docs/zh-cn/cli/8-foundry-agent/3-connect-to-site.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 96% rename from docs/zh-cn/cli/8-foundry-agent/3-connect-to-site.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index b2b55d02..640e1aed 100644 --- a/docs/zh-cn/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ Tailspin Toys 采用完全预渲染方式。浏览器代码绝不能直接调用 For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions 本地代理设置](../../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions 本地代理设置](../../../../_images/cli-8-azure-functions-proxy.png) 2. 打开另一个终端，然后使用 Copilot 提供的命令启动本地 Function。保持 Function 运行。 3. 返回 Copilot CLI，让 Copilot 测试本地代理： @@ -54,7 +54,7 @@ Tailspin Toys 采用完全预渲染方式。浏览器代码绝不能直接调用 4. 查看响应。它应说明目录不包含价格。响应中不得包含 Foundry 令牌、凭据、项目终结点、原始 Foundry 对话标识符或堆栈跟踪。 - ![本地礼宾助手终结点返回的已移除敏感信息的 JSON 响应](../../../_images/cli-8-sanitized-json-response.png) + ![本地礼宾助手终结点返回的已移除敏感信息的 JSON 响应](../../../../_images/cli-8-sanitized-json-response.png) ## 构建聊天组件 @@ -73,7 +73,7 @@ Tailspin Toys 采用完全预渲染方式。浏览器代码绝不能直接调用 Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Tailspin Toys 网站中的 Backer Concierge 聊天组件截图](../../../_images/cli-8-backer-concierge-widget.png) + ![Tailspin Toys 网站中的 Backer Concierge 聊天组件截图](../../../../_images/cli-8-backer-concierge-widget.png) 4. 根据报告中的证据检查结果。如果有任何检查失败，请让 Copilot 修复相关代理或组件的行为，并在结束前重新运行失败的检查。 diff --git a/docs/zh-cn/cli/8-foundry-agent/README.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/README.md similarity index 98% rename from docs/zh-cn/cli/8-foundry-agent/README.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/README.md index 0aeed993..3364c7ec 100644 --- a/docs/zh-cn/cli/8-foundry-agent/README.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/cli/8-foundry-agent +slug: zh-cn/real-world-development/cli/8-foundry-agent title: "可选：集成 Foundry" description: "通过三个模块准备模型、构建并部署基于目录的智能体，以及将其连接到 Tailspin Toys。" authors: diff --git a/docs/zh-cn/cli/9-review.md b/docs/zh-cn/real-world-development/cli/9-review.md similarity index 100% rename from docs/zh-cn/cli/9-review.md rename to docs/zh-cn/real-world-development/cli/9-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 6b0693da..27d27cd0 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/docs/zh-cn/vscode/6-iterating.md b/docs/zh-cn/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/zh-cn/vscode/6-iterating.md rename to docs/zh-cn/real-world-development/vscode/6-iterating.md index 8bb83837..45b6b197 100644 --- a/docs/zh-cn/vscode/6-iterating.md +++ b/docs/zh-cn/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ next: false 9. 返回 **Conversation** 选项卡。 10. 如果工作流正在等待批准，选择 **Approve and run workflows**。 - ![批准并运行工作流](../../_images/shared-approve-workflows.png) + ![批准并运行工作流](../../../_images/shared-approve-workflows.png) 11. 等待工作流完成。如果一切正常，所有工作流都应通过。 > [!TIP] diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 99% rename from docs/zh-cn/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 58b7bcf4..925c52a4 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ Tailspin 的支持者希望获得可信的推荐。解谜游戏爱好者期待 1. 在活动栏中选择 **Foundry Toolkit**，展开 **Help and Feedback**，然后选择 **Ask Copilot**。在下拉列表中确认所选模型，并发送生成的 `/foundrytk-quick-start` 提示。 - ![Foundry Toolkit 快速入门操作流程截图。](../../../_images/vscode-foundry-setup.png) + ![Foundry Toolkit 快速入门操作流程截图。](../../../../_images/vscode-foundry-setup.png) 2. 在交互式工作流中，对 **Where are you starting from?** 选择 **Set up Foundry**，然后对 **What do you have already?** 选择 **I have an Azure subscription or Foundry resources**。 3. 检查工具批准请求。如果建议的命令及其作用范围合适，为本会话选择 **Allow azmcp …**，以减少重复的批准提示。 @@ -93,7 +93,7 @@ Tailspin 的支持者希望获得可信的推荐。解谜游戏爱好者期待 3. 批准前确认项目、部署、容量和费用。检查作用范围后，如果合适，为本会话选择 **Allow az …**，以减少重复提示。 4. 选择 **Foundry Toolkit**，展开 **My Resources**，然后选择 **Models**。确认已部署的模型显示在 Foundry 下。截图仅为示例；所在区域可能提供不同模型。 - ![Foundry Toolkit 中的模型部署示例截图。](../../../_images/vscode-model-deployed.png) + ![Foundry Toolkit 中的模型部署示例截图。](../../../../_images/vscode-model-deployed.png) ## 测试已部署的模型 diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 94% rename from docs/zh-cn/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 23f187df..a4c118b0 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ lastUpdated: 2026-09-16 1. 选择 **Foundry Toolkit**，展开 **Developer Tools**，再展开 **+ Build**，然后选择 **+ Create Agent**。在 **Create Agent** 上，选择 **Code an agent with Copilot**。 - ![创建代理页面的截图。](../../../_images/vscode-create-agent.png) + ![创建代理页面的截图。](../../../../_images/vscode-create-agent.png) 2. 在新聊天中，确认已切换为 **AIAgentExpert**。将生成的提示替换为以下定制提示并提交： @@ -65,7 +65,7 @@ lastUpdated: 2026-09-16 5. 复用[测试已部署的模型][model-tests]中的全部六个提示。根据完整的 `db/catalog.json` 检查回答，不要将九款游戏子集的排名当作完整目录的排名。 6. 在 **Input & Output**、**Events** 和 **Tools** 之间切换，检查请求与响应数据、会话事件和工具调用。如果行为违反验收标准，让 Copilot 修复，并在部署前重新运行针对性测试和 Inspector 检查。 - ![本地代理调试工作流截图。](../../../_images/vscode-agent-debug.png) + ![本地代理调试工作流截图。](../../../../_images/vscode-agent-debug.png) ## 部署并测试托管代理 @@ -77,17 +77,17 @@ lastUpdated: 2026-09-16 /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![AIAgentExpert 代理提供的交接选项截图。](../../../_images/vscode-go-production-handoff.png) + ![AIAgentExpert 代理提供的交接选项截图。](../../../../_images/vscode-go-production-handoff.png) 2. 在聊天和终端中检查参数及命令批准请求。确认部署目标为现有的 `tailspin-toys` 项目，并在批准前检查计费资源。 3. 如果 Copilot 提供评估套件，可以选择接受并执行，作为额外检查。 4. 选择 **Foundry Toolkit**，展开 **My Resources**，再选择 **Agents**。在 **Agents** 选项卡中，切换到 **Hosted Agent**。 - ![已部署的托管代理截图。](../../../_images/vscode-agent-deployed.png) + ![已部署的托管代理截图。](../../../../_images/vscode-agent-deployed.png) 5. 选择代理名称，确认部署状态为 **Running**。切换到 **Playground**，根据已部署的目录，重复检查回答的数据依据、缺失数据、目录外内容、模糊请求和排名。 - ![已部署的托管代理返回回答的截图。](../../../_images/vscode-agent-response.png) + ![已部署的托管代理返回回答的截图。](../../../../_images/vscode-agent-response.png) 6. 如果部署或回答未通过检查，与 Copilot 一起检查报告的状态和日志，在现有项目中修复问题，然后重复检查。不要在部署未经验证的情况下继续。 diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/zh-cn/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 7f8f56e5..6ff4912e 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ UI 现在有了经过验证的后端。端到端测试将同时检查可用性 Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Backer Concierge 聊天小组件运行中的截图](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Backer Concierge 聊天小组件运行中的截图](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. 保持 Function 和网站运行，然后验证完整体验： diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/README.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/zh-cn/vscode/7-foundry-toolkit/README.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/README.md index 47d5b771..a98aef75 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/README.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/vscode/7-foundry-toolkit +slug: zh-cn/real-world-development/vscode/7-foundry-toolkit title: "可选：集成 Foundry" description: "通过三个聚焦的模块，使用 VS Code 和 Microsoft Foundry Toolkit 构建基于目录数据的 Backer Concierge。" authors: diff --git a/docs/zh-cn/vscode/README.md b/docs/zh-cn/real-world-development/vscode/README.md similarity index 98% rename from docs/zh-cn/vscode/README.md rename to docs/zh-cn/real-world-development/vscode/README.md index 61eed9cd..2d604726 100644 --- a/docs/zh-cn/vscode/README.md +++ b/docs/zh-cn/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/vscode +slug: zh-cn/real-world-development/vscode title: "VS Code" authors: - geektrainer diff --git a/website/astro.config.mjs b/website/astro.config.mjs index afc6b567..79f2a242 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -53,210 +53,237 @@ 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: 'Optional: Incorporate Foundry', - translations: { - 'es-ES': 'Opcional: Incorporar Foundry', - 'ja-JP': '省略可能: Foundry を組み込む', - 'ko-KR': '선택 사항: Foundry 통합', - 'pt-BR': 'Opcional: Incorporar o Foundry', - 'zh-CN': '可选：集成 Foundry', - }, + label: 'GitHub Copilot app', items: [ - { label: 'Overview', link: '/vscode/7-foundry-toolkit/' }, - { - label: 'Prepare a project and model', - link: '/vscode/7-foundry-toolkit/1-project-and-model/', - translations: { - 'es-ES': 'Preparar un proyecto y un modelo', - 'ja-JP': 'プロジェクトとモデルを準備する', - 'ko-KR': '프로젝트 및 모델 준비', - 'pt-BR': 'Preparar um projeto e um modelo', - 'zh-CN': '准备项目和模型', - }, - }, - { - label: 'Build and deploy an agent', - link: '/vscode/7-foundry-toolkit/2-build-and-deploy/', - translations: { - 'es-ES': 'Crear e implementar un agente', - 'ja-JP': 'エージェントを構築してデプロイする', - 'ko-KR': '에이전트 빌드 및 배포', - 'pt-BR': 'Criar e implantar um agente', - 'zh-CN': '构建并部署代理', - }, - }, - { - label: 'Connect the agent to the site', - link: '/vscode/7-foundry-toolkit/3-connect-to-site/', - translations: { - 'es-ES': 'Conectar el agente al sitio', - 'ja-JP': 'エージェントをサイトに接続する', - 'ko-KR': '사이트에 에이전트 연결', - 'pt-BR': 'Conectar o agente ao site', - 'zh-CN': '将代理连接到网站', - }, - }, + { 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: '9. Review', link: '/cli/9-review/' }, + { label: 'Overview', link: '/real-world-development/' }, { - label: 'Optional: Incorporate Foundry', - translations: { - 'es-ES': 'Opcional: incorpora Foundry', - 'ja-JP': 'オプション: Foundry を組み込む', - 'ko-KR': '선택 사항: Foundry 통합하기', - 'pt-BR': 'Opcional: Incorpore o Foundry', - 'zh-CN': '可选：集成 Foundry', - }, - collapsed: true, + 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: 'Overview', - link: '/cli/8-foundry-agent/', - translations: { - 'es-ES': 'Descripción general', - 'ja-JP': '概要', - 'ko-KR': '개요', - 'pt-BR': 'Visão geral', - 'zh-CN': '概述', - }, - }, - { - label: '1. Prepare the project and model', - link: '/cli/8-foundry-agent/1-project-and-model/', - translations: { - 'es-ES': '1. Prepara el proyecto y el modelo', - 'ja-JP': '1. プロジェクトとモデルを準備する', - 'ko-KR': '1. 프로젝트와 모델 준비하기', - 'pt-BR': '1. Prepare o projeto e o modelo', - 'zh-CN': '1. 准备项目和模型', - }, - }, - { - label: '2. Build and deploy the agent', - link: '/cli/8-foundry-agent/2-build-and-deploy/', - translations: { - 'es-ES': '2. Crea y despliega el agente', - 'ja-JP': '2. エージェントを構築してデプロイする', - 'ko-KR': '2. 에이전트 빌드 및 배포하기', - 'pt-BR': '2. Crie e implante o agente', - 'zh-CN': '2. 构建并部署智能体', - }, - }, - { - label: '3. Connect the agent to the website', - link: '/cli/8-foundry-agent/3-connect-to-site/', + label: 'Optional: Incorporate Foundry', translations: { - 'es-ES': '3. Conecta el agente al sitio web', - 'ja-JP': '3. エージェントを Web サイトに接続する', - 'ko-KR': '3. 에이전트를 웹사이트에 연결하기', - 'pt-BR': '3. Conecte o agente ao site', - 'zh-CN': '3. 将智能体连接到网站', + 'es-ES': 'Opcional: Incorporar Foundry', + 'ja-JP': '省略可能: Foundry を組み込む', + 'ko-KR': '선택 사항: Foundry 통합', + 'pt-BR': 'Opcional: Incorporar o Foundry', + 'zh-CN': '可选：集成 Foundry', }, + items: [ + { label: 'Overview', link: '/real-world-development/vscode/7-foundry-toolkit/' }, + { + label: 'Prepare a project and model', + link: '/real-world-development/vscode/7-foundry-toolkit/1-project-and-model/', + translations: { + 'es-ES': 'Preparar un proyecto y un modelo', + 'ja-JP': 'プロジェクトとモデルを準備する', + 'ko-KR': '프로젝트 및 모델 준비', + 'pt-BR': 'Preparar um projeto e um modelo', + 'zh-CN': '准备项目和模型', + }, + }, + { + label: 'Build and deploy an agent', + link: '/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy/', + translations: { + 'es-ES': 'Crear e implementar un agente', + 'ja-JP': 'エージェントを構築してデプロイする', + 'ko-KR': '에이전트 빌드 및 배포', + 'pt-BR': 'Criar e implantar um agente', + 'zh-CN': '构建并部署代理', + }, + }, + { + label: 'Connect the agent to the site', + link: '/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site/', + translations: { + 'es-ES': 'Conectar el agente al sitio', + 'ja-JP': 'エージェントをサイトに接続する', + 'ko-KR': '사이트에 에이전트 연결', + 'pt-BR': 'Conectar o agente ao site', + 'zh-CN': '将代理连接到网站', + }, + }, + ], }, ], }, - ], - }, - { - 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: '9. Review', link: '/app/9-review/' }, { - label: 'Optional: Incorporate Foundry', - translations: { - 'es-ES': 'Opcional: Incorporar Foundry', - 'ja-JP': 'オプション: Foundry を組み込む', - 'ko-KR': '선택 사항: Foundry 통합', - 'pt-BR': 'Opcional: Incorporar o Foundry', - 'zh-CN': '可选：集成 Foundry', - }, + 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: '9. Review', link: '/real-world-development/cli/9-review/' }, { - label: 'Overview', - link: '/app/8-foundry-canvas/', - }, - { - label: '1. Prepare the project and model', - link: '/app/8-foundry-canvas/1-project-and-model/', - translations: { - 'es-ES': '1. Preparar el proyecto y el modelo', - 'ja-JP': '1. プロジェクトとモデルを準備する', - 'ko-KR': '1. 프로젝트와 모델 준비', - 'pt-BR': '1. Preparar o projeto e o modelo', - 'zh-CN': '1. 准备项目和模型', - }, - }, - { - label: '2. Build and deploy the agent', - link: '/app/8-foundry-canvas/2-build-and-deploy/', + label: 'Optional: Incorporate Foundry', translations: { - 'es-ES': '2. Crear e implementar el agente', - 'ja-JP': '2. エージェントを構築してデプロイする', - 'ko-KR': '2. 에이전트 빌드 및 배포', - 'pt-BR': '2. Criar e implantar o agente', - 'zh-CN': '2. 构建并部署代理', + 'es-ES': 'Opcional: incorpora Foundry', + 'ja-JP': 'オプション: Foundry を組み込む', + 'ko-KR': '선택 사항: Foundry 통합하기', + 'pt-BR': 'Opcional: Incorpore o Foundry', + 'zh-CN': '可选：集成 Foundry', }, + collapsed: true, + items: [ + { + label: 'Overview', + link: '/real-world-development/cli/8-foundry-agent/', + translations: { + 'es-ES': 'Descripción general', + 'ja-JP': '概要', + 'ko-KR': '개요', + 'pt-BR': 'Visão geral', + 'zh-CN': '概述', + }, + }, + { + label: '1. Prepare the project and model', + link: '/real-world-development/cli/8-foundry-agent/1-project-and-model/', + translations: { + 'es-ES': '1. Prepara el proyecto y el modelo', + 'ja-JP': '1. プロジェクトとモデルを準備する', + 'ko-KR': '1. 프로젝트와 모델 준비하기', + 'pt-BR': '1. Prepare o projeto e o modelo', + 'zh-CN': '1. 准备项目和模型', + }, + }, + { + label: '2. Build and deploy the agent', + link: '/real-world-development/cli/8-foundry-agent/2-build-and-deploy/', + translations: { + 'es-ES': '2. Crea y despliega el agente', + 'ja-JP': '2. エージェントを構築してデプロイする', + 'ko-KR': '2. 에이전트 빌드 및 배포하기', + 'pt-BR': '2. Crie e implante o agente', + 'zh-CN': '2. 构建并部署智能体', + }, + }, + { + label: '3. Connect the agent to the website', + link: '/real-world-development/cli/8-foundry-agent/3-connect-to-site/', + translations: { + 'es-ES': '3. Conecta el agente al sitio web', + 'ja-JP': '3. エージェントを Web サイトに接続する', + 'ko-KR': '3. 에이전트를 웹사이트에 연결하기', + 'pt-BR': '3. Conecte o agente ao site', + 'zh-CN': '3. 将智能体连接到网站', + }, + }, + ], }, + ], + }, + { + 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: '9. Review', link: '/real-world-development/app/9-review/' }, { - label: '3. Connect the agent to the site', - link: '/app/8-foundry-canvas/3-connect-to-site/', + label: 'Optional: Incorporate Foundry', translations: { - 'es-ES': '3. Conectar el agente al sitio', - 'ja-JP': '3. エージェントをサイトに接続する', - 'ko-KR': '3. 에이전트를 사이트에 연결', - 'pt-BR': '3. Conectar o agente ao site', - 'zh-CN': '3. 将代理连接到网站', + 'es-ES': 'Opcional: Incorporar Foundry', + 'ja-JP': 'オプション: Foundry を組み込む', + 'ko-KR': '선택 사항: Foundry 통합', + 'pt-BR': 'Opcional: Incorporar o Foundry', + 'zh-CN': '可选：集成 Foundry', }, + items: [ + { + label: 'Overview', + link: '/real-world-development/app/8-foundry-canvas/', + }, + { + label: '1. Prepare the project and model', + link: '/real-world-development/app/8-foundry-canvas/1-project-and-model/', + translations: { + 'es-ES': '1. Preparar el proyecto y el modelo', + 'ja-JP': '1. プロジェクトとモデルを準備する', + 'ko-KR': '1. 프로젝트와 모델 준비', + 'pt-BR': '1. Preparar o projeto e o modelo', + 'zh-CN': '1. 准备项目和模型', + }, + }, + { + label: '2. Build and deploy the agent', + link: '/real-world-development/app/8-foundry-canvas/2-build-and-deploy/', + translations: { + 'es-ES': '2. Crear e implementar el agente', + 'ja-JP': '2. エージェントを構築してデプロイする', + 'ko-KR': '2. 에이전트 빌드 및 배포', + 'pt-BR': '2. Criar e implantar o agente', + 'zh-CN': '2. 构建并部署代理', + }, + }, + { + label: '3. Connect the agent to the site', + link: '/real-world-development/app/8-foundry-canvas/3-connect-to-site/', + translations: { + 'es-ES': '3. Conectar el agente al sitio', + 'ja-JP': '3. エージェントをサイトに接続する', + 'ko-KR': '3. 에이전트를 사이트에 연결', + 'pt-BR': '3. Conectar o agente ao site', + 'zh-CN': '3. 将代理连接到网站', + }, + }, + ], }, ], }, - ], - }, - { - 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: '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/' }, + ], + }, ], }, ],